Проверяем Landing Page
Что бы отметить отправную точку до оптимизации, проверяем нашу страничку ее в 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.
Онлайн сервисы минификации:
