Ускоряем загрузку лендинга
Техничка Работа с сервером
by SENSATION 1 week ago
В этом посте я собрал для вас большинство рабочих методов ускорения загрузки страницы, что бы они открывались со скоростью света.
Задумывались ли вы, как простая оптимизация загрузки лендинга может добавить вам несколько процентов к рои? Зачастую, если вы скачиваете чужие лендинги, а не делаете их сами, внутри творится полнейшая вакханалия: изображения весящие по 5-10 мб, куча неиспользованного кода и левых шрифтов, которые тормозят загрузку странички.
Что бы отметить отправную точку до оптимизации, проверяем нашу страничку ее в Google Page Speed
Делаем скриншот анализа и сохраняем его. После выполнения перечисленных советов, проведите повторный замер и вы будете приятно удивлены.
Есть альтернативный способ проверить вашу страничку, например GTMetrix, но в бесплатной версии есть минус – сервера проверки будут находиться в USA или CANADA, тем самым, занижая показатели TTFB (время до получения первого байта).
Содержание:
Оптимизация изображений
Оптимизация изображений является главным инструментом в ускорении загрузки странички. Если не уделить данному пункту должного внимания, последующая оптимизация не сильно скажется на скорости.
Для оптимизации изображений воспользуемся онлайн сервисами:
- Tinypng.com
- Imagecompressor.com
- Resmush.it – работает через API
Настройки сервера
Кеширование
Самым оптимальным вариантом кеширования лендингов работающих под 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.
Онлайн сервисы минификации:
