Ускоряем загрузку лендинга

Техничка Работа с сервером

by SENSATION 1 week ago
Ускоряем загрузку лендинга

В этом посте я собрал для вас большинство рабочих методов ускорения загрузки страницы, что бы они открывались со скоростью света.

Задумывались ли вы, как простая оптимизация загрузки лендинга может добавить вам несколько процентов к рои? Зачастую, если вы скачиваете чужие лендинги, а не делаете их сами, внутри творится полнейшая вакханалия: изображения весящие по 5-10 мб, куча неиспользованного кода и левых шрифтов, которые тормозят загрузку странички.

Что бы отметить отправную точку до оптимизации, проверяем нашу страничку ее в Google Page Speed
Делаем скриншот анализа и сохраняем его. После выполнения перечисленных советов, проведите повторный замер и вы будете приятно удивлены.

Есть альтернативный способ проверить вашу страничку, например GTMetrix, но в бесплатной версии есть минус – сервера проверки будут находиться в USA или CANADA, тем самым, занижая показатели  TTFB (время до получения первого байта).


Оптимизация изображений


до после оптимизации

Оптимизация изображений является главным инструментом в ускорении загрузки странички. Если не уделить данному пункту должного внимания, последующая оптимизация не сильно скажется на скорости.

Для оптимизации изображений воспользуемся онлайн сервисами:


Настройки сервера


Кеширование


Самым оптимальным вариантом кеширования лендингов работающих под PHP – это модуль PHP APCu, который отвечает за кеш локальных данных и доступен в большинстве дистрибутивов из коробки. Например, он уже предустановлен в этой сборке.

Если вы используете Nginx, то вы можете воспользоваться более тонкой настройкой встроенного кеширования локальных ресурсов.

Выбор хостера


Следующим важным шагом будет выбор хостера, где будет размещаться сам лендинг. Обычно его подбирают ближе к целевому гео, с которым вы будете работать. Я советую вам проверенного хостера HETZNER, его датацентры находятся в Германии и Финляндии.

PS: По моей ссылке вы бонусом на счет, получите бесплатные 20€

CDN


CDN – Content Delivery Network. Подключение данной системы тоже позитивно скажется на скорости загрузки вашей странички. Из бесплатного и популярного решения, могу посоветовать Cloudflare.


Оптимизация кода


Предварительная загрузка элементов

Так же можно добавить rel атрибут загрузки стилей и связанных страничек в код. Более подробно об использовании данных атрибутов написано в статье на хабре.

link rel="prefetch" href="/style.css" as="style"
link rel="preload" href="/style.css" as="style"
link rel="preconnect" href="https://example.com"
link rel="dns-prefetch" href="https://example.com"
link rel="prerender" href="https://example.com/about.html"

Lazy Load


Lazy load – отложенная загрузка элемента, до момента непосредственного его использования. Например у вас длинный лендинг содержащий 10 картинок. Когда юзер попадает на страничку, браузеру нет необходимости прогружать в этот же момент все 10 изображений,  атрибут «lazy» подгрузит их только в тот момент, когда это будет необходимо. Более подробнее про lazy-load можете почитать тут.

Начиная с 75 версии хрома, атрибут «lazy» поддерживается из коробки, без необходимости сторонних библиотек.

img src="example.jpg" loading="lazy" alt="ленивая загрузка"

Очистка неиспользуемого кода


поиск неиспользованных стилей

  • Открываем лендинг
  • Открываем консоль разработчика (Ctrl + Shift + I)
  • Переходим во вкладку Sources
  • Открываем командное меню (Ctrl + Shift + P)
  • Вводим «Coverage» и жмем ниже кнопку RELOAD PAGE
  • Прокликиваем css стили : красным отмечаются стили, которые не были использованы для загрузки данной страницы

Объединение файлов


Если у вас больше чем 1 css файл, имеет смысл объединить их.

Онлайн сервисы объединения:

Минификация кода


Минификация кода тоже помогает выиграть несколько процентов к скорости загрузки лединга.
Минифицироовать можно css, html и js. Я рекомендую минифицировать только CSS.

Онлайн сервисы минификации: