С чем медлить точно нельзя — так это с загрузкой вашего сайта. Чем быстрее пользователь получит доступ к нужной ему информации, тем больше он будет удовлетворён взаимодействием. А значит, вернётся ещё раз. Это существенно увеличивает конверсию. На сайтах, которые загружаются медленно, никто ничего не покупает. Для бизнеса они убыточны.
Медленные страницы не любят не только пользователи, но и поисковые системы. Путём взаимодействия с оптимизаторами, отправляющими им данные, они определяют их как проблемные. И сталкиваться с проблемами не горят желанием. Поэтому, не оптимизированный сайт так и будет находится в «подвале», как бы активно он не продвигался платными услугами.
Что делать? Сайт — инструмент продаж и маркетинга. И чтобы достичь оптимального времени загрузки, а современные требования таковы, что это должно быть не более 3 секунд для полного взаимодействия, его придётся разобрать буквально «по косточкам». Когда сайт попадает в руки нашей команды для проведения оптимизации, мы в первую очередь проводим его полное исследование. Далее, информацию полученную из нескольких источников необходимо сопоставить и выявить все ошибки. Только после этого можно приступать к их пошаговому исправлению. На выходе — страница получает существенное ускорение, правильные настройки и полное отсутствие претензий со стороны анализаторов.
Одним из методов, который позволяет ускорить загрузку сайта, является применение шаблона PRPL. Это не отдельный инструмент, а их набор. Не удивляйтесь, что в результате тестирования своей страницы PageSpeed Insights, в перечне проведённых аудитов вы подобной рекомендации не найдёте. Необходимо копнуть глубже. Использование данного шаблона скрыто в пункте «Предотвращение чрезмерной нагрузки на сеть» и является одним из методов проведения корректных настроек.
Что такое шаблон PRPL
PRPL — это шаблон, который позволяет осуществить быструю загрузку страницы и согласованность действий во время данного процесса. Само по себе название является аббревиатурой: Push, Render, Pre-cache, Lazy loading. Все эти инструменты по отдельности используются для ускорения загрузки и повышения итеративности страниц:
Предварительная загрузка критических ресурсов для первоначального URL
Визуализация начального маршрута
Предварительное кэширование всех оставшихся активов
Ленивая загрузка данных, которые потребуются для дальнейшего взаимодействия пользователя со страницей
Сочетая все эти методы можно достигнуть высокой производительности сайта и существенно увеличить скорость загрузки страниц. Выявить проблемные точки, которые требуют исправления, можно при помощи инструмента Lighthouse. Аудит требуется провести в соответствии с шаблоном PRPL. Для этого нужно совершить несколько простых действий:
Перейдите на панель Аудит в DevTools
Отметьте «Производительность» и «Progressive Web App»
Нажмите Run Audits, чтобы создать отчет
В результате, будут получены необходимые данные, которые требуется проанализировать. На основании данного анализа и принимается решение о тех действиях, которые потребуется осуществить и применении тех или иных инструментов для внесения коррективов.
Что значат те или иные аудиты в Lighthouse и что с ними делать
Если критический ресурс анализируется и извлекается долго, Lighthouse покажет неудачную проверку. К примеру, на выполнение задачи ушло 0,12 секунд. В данном случае, инструмент выдаст такой пункт: Preload key requests и данные в отношении загрузки файла.
Предварительная загрузка — это декларативный запрос на выборку, который сообщает браузеру, что ресурс нужно запросить как можно скорее. Для осуществления данной операции, нужно предварительно загрузить критические ресурсы, добавив<link>тег rel=”preload”в заголовок вашего HTML-документа:<link rel=”preload” as=”style” href=”css/style.css”>Браузер установит наиболее подходящий уровень приоритета для ресурса, чтобы попытаться загрузить его раньше, не задерживая window.onload.
Ускорить загрузку начального маршрута. Lighthouse выдает предупреждение, если есть ресурсы, задерживающие First Paint, в момент отображения страницы на экране.Чтобы улучшить First Paint, Lighthouse рекомендует встраивать критический JavaScript и откладывать остальное с помощью использования тега «async», а также встраивать критический CSS. Это повышает производительность за счет исключения обращений к серверу для извлечения активов, блокирующих рендеринг. Однако встроенный код сложнее поддерживать с точки зрения разработки, и браузер не может его отдельно кэшировать.Другой подход к улучшению First Paint – это рендеринг исходного HTML-кода страницы на стороне сервера. Таким образом, пользователь получит контент мгновенно, в то время пока остальные скрипты подбираются и анализируются. Однако, применение данной стратегии может значительно увеличить полезную нагрузку HTML-файла, что может навредить Time to Interactive — время взаимодействия пользователя со страницей.
Предварительное кэширование активов. Соответсвующие настройки позволяют пользователям получать ресурсы непосредственно из кэша, а не с сервера при повторных посещениях страницы. Это не только позволяет использовать сайт в автономном режиме, но также приводит к ускорению загрузки страниц при повторных посещениях.Используйте стороннюю библиотеку, чтобы упростить процесс кэширования, если у вас нет специфических требований. Все стандартные задачи библиотеки могут удовлетворить в полном объёме.
Применение ленивой загрузки. Lighthouse отображает неудачный аудит, если по сети отправляется слишком много данных. Аудит включает в себя все типы ресурсов, но наибольшее внимание следует уделить полезной нагрузке JavaScript. Ввиду необходимости анализа и компиляции всех данных, временные потери на этом этапе наиболее ощутимы.Чтобы отправить меньшую полезную нагрузку JavaScript, содержащую только код необходимый при первоначальной загрузке, разделите все данные н агруппы. Один будут подгружаться сразу, а другие — с использованием опции ленивой загрузки. Это значит, что обработка данных начнётся только после того, как они потребуются пользователю — в результате скролинга или нажатия кнопки.
При работе с PRPL важно учитывать, что не все инструменты стоит применять вместе. Оптимизация должна быть взвешенной и пошаговой, иначе вместо ускорения сайта, можно существенно ему навредить.