PRPL — это аббревиатура, описывающая шаблон, используемый для ускорения загрузки веб-страниц и их интерактивности:
- Предварительная загрузка поздно обнаруженных ресурсов.
- Отрисуйте первоначальный маршрут как можно скорее.
- Предварительно кэшируйте оставшиеся ресурсы.
- Ленивая загрузка других маршрутов и некритических ресурсов.
В этом руководстве вы узнаете, как каждый из этих методов сочетается друг с другом, но при этом может использоваться независимо для достижения высоких результатов.
Проведите аудит своей страницы с помощью Lighthouse
Запустите Lighthouse, чтобы определить возможности для улучшения в соответствии с методами PRPL:
- Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
- Откройте вкладку «Маяк» .
- Установите флажки «Производительность» и «Прогрессивное веб-приложение» .
- Нажмите «Запустить аудит» , чтобы создать отчет.
Дополнительные сведения см. в разделе Откройте для себя возможности повышения производительности с помощью Lighthouse .
Предварительная загрузка критически важных ресурсов
Lighthouse показывает следующий неудачный аудит, если определенный ресурс анализируется и извлекается с опозданием:
Предварительная загрузка — это декларативный запрос на выборку, который сообщает браузеру запросить ресурс, который в противном случае не может быть обнаружен сканером предварительной загрузки браузера, например изображение, на которое ссылается свойство background-image . Предварительно загрузите недавно обнаруженные ресурсы, добавив тег <link> с rel="preload" в заголовок вашего HTML-документа:
<link rel="preload" as="image" href="hero-image.jpg">
Добавление директивы <link rel="preload"> инициирует запрос этого ресурса и сохраняет его в кеше. Затем браузер сможет получить его при необходимости.
Дополнительные сведения о предварительной загрузке критически важных ресурсов см. в руководстве по предварительной загрузке критически важных ресурсов .
Отрисуйте первоначальный маршрут как можно скорее
Lighthouse выдает предупреждение, если есть ресурсы, которые задерживают First Paint — момент, когда ваш сайт отображает пиксели на экране:
Чтобы улучшить First Paint, Lighthouse рекомендует встроить критический JavaScript и отложить выполнение остальных с помощью async , а также встроить критический CSS, используемый в верхней части страницы. Это повышает производительность за счет исключения повторных обращений к серверу для получения ресурсов, блокирующих рендеринг. Однако встроенный код сложнее поддерживать с точки зрения разработки, и браузер не может кэшировать его отдельно.
Другой подход к улучшению First Paint — отрисовка исходного HTML-кода вашей страницы на стороне сервера . При этом контент отображается пользователю немедленно, пока скрипты еще извлекаются, анализируются и выполняются. Однако это может значительно увеличить полезную нагрузку HTML-файла, что может нанести вред Time to Interactive или времени, которое потребуется вашему приложению, чтобы стать интерактивным и ответить на ввод пользователя.
Не существует единственно правильного решения, позволяющего уменьшить количество первой отрисовки в вашем приложении, и вам следует рассматривать встраивание стилей и рендеринг на стороне сервера только в том случае, если преимущества для вашего приложения перевешивают компромиссы. Вы можете узнать больше об обеих этих концепциях, используя следующие ресурсы.
Предварительное кэширование ресурсов
Действуя в качестве прокси-сервера, сервисные работники могут получать ресурсы непосредственно из кэша, а не с сервера при повторных посещениях. Это не только позволяет пользователям использовать ваше приложение, когда они не в сети, но также приводит к ускорению загрузки страниц при повторных посещениях.
Используйте стороннюю библиотеку, чтобы упростить процесс создания сервисного работника, если только у вас нет более сложных требований к кэшированию, чем может предоставить библиотека. Например, Workbox предоставляет набор инструментов, которые позволяют создавать и поддерживать сервис-воркера для кэширования ресурсов. Дополнительную информацию о сервисных работниках и автономной надежности см. в руководстве для сервисных работников в рамках курса обучения надежности.
Ленивая загрузка
Lighthouse отображает неудачный аудит, если вы отправляете слишком много данных по сети.
Сюда входят все типы ресурсов, но большие полезные нагрузки JavaScript являются особенно дорогостоящими из-за того, что браузеру требуется время для их анализа и компиляции. Lighthouse также предупреждает об этом, когда это необходимо.
Чтобы отправить меньшую полезную нагрузку JavaScript, содержащую только код, необходимый при первоначальной загрузке приложения пользователем, разделите весь пакет и отложите загрузку фрагментов по требованию.
Как только вам удалось разделить пакет, предварительно загрузите более важные фрагменты (см. руководство по предварительной загрузке критически важных ресурсов ). Предварительная загрузка гарантирует, что более важные ресурсы будут получены и загружены браузером быстрее.
Помимо разделения и загрузки различных фрагментов JavaScript по требованию, Lighthouse также обеспечивает аудит отложенной загрузки некритических изображений.
Если вы загружаете на веб-страницу много изображений, отложите все изображения, находящиеся ниже сгиба или за пределами области просмотра устройства, при загрузке страницы (см. Использование lazysizes для отложенной загрузки изображений ).
Следующие шаги
Теперь, когда вы понимаете некоторые основные концепции шаблона PRPL, перейдите к следующему руководству в этом разделе, чтобы узнать больше. Важно помнить, что не все методы необходимо применять вместе. Любые усилия, предпринятые с помощью любого из следующих действий, обеспечат заметное улучшение производительности.
- Предварительная загрузка критически важных ресурсов.
- Отрисуйте первоначальный маршрут как можно скорее.
- Предварительно кэшируйте оставшиеся ресурсы.
- Ленивая загрузка других маршрутов и некритических ресурсов.
Вы можете узнать больше о шаблонах PRPL .