Love Frontend
Сообщество
фронтенд разработчиков
EN

Что такое PRPL pattern [en] [es]

Автор: Kamil Ocean
Дата публикации: 08.01.2020
infographic of PRPL pattern

Это акроним, где каждая буква обозначает важную вещь для оптимизации скорости загрузки web ресурса.

Push (или preload)

Это значит используйте тег link с аттрибутом rel="preload" для важных скриптов или стилей. Ресурсы встраиваемые таким образом, грузятся в первую очередь.

<link rel="preload" as="script" href="main.js">

Render the initial route as soon as possible (Первая отрисовка должна происходить как можно скорее)

Другими словами это значит: уменьшайте время First Paint. Вставляйте инлайном самые важные CSS и JS. Для остальных скриптов, которые пользователь может подождать, добавьте аттрибут async

<script src="main.js" async></script>

Используйте SSR если это уместно.

Pre-cache assets

Используйте Service Worker и Cache Storage API чтобы кэшировать ресурсы на клиенте.

Lazy load

Если ваш код находится в одном файле, то разделите его на chunks (чанки, маленькие части) и грузите их по мере надобности. Так же используйте lazy-loading для изображений.

<img src="example.jpg" loading="lazy" alt="" />

Писал в основном по этой статье: Apply instant loading with the PRPL pattern

Оставьте свой e-mail чтобы получать уведомления о свежих статьях.