Использование шаблона PRPL

Медленные страницы не любят не только пользователи, но и поисковые системы. Путём взаимодействия с оптимизаторами, отправляющими им данные, они определяют их как проблемные. И сталкиваться с проблемами не горят желанием. Поэтому, не оптимизированный сайт так и будет находится в «подвале», как бы активно он не продвигался платными услугами.

Что делать? Сайт — инструмент продаж и маркетинга. И чтобы достичь оптимального времени загрузки, а современные требования таковы, что это должно быть не более 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 важно учитывать, что не все инструменты стоит применять вместе. Оптимизация должна быть взвешенной и пошаговой, иначе вместо ускорения сайта, можно существенно ему навредить.