Beto Muniz

Padrão PRPL explicado

🗣 PRPL é um padrão que promove boas práticas para carregamento e uso de páginas web que focam em entregar experiências performáticas aos seus usuários.

👉 As 4 letras representam os aspectos do padrão, que são:

(P)ush ⚡️

Push (ou Preload) determina que os recursos mais importantes devem estar disponíveis o mais breve possível no ato de carregar uma página web.

<link rel=preload> entre outras técnicas de Resource Prioritization são muito úteis para este fim.

(R)ender ⚡️

Render determina que o conteúdo da página web comece a ser renderizado o mais rápido possível.

Usar scripts (ou styles) críticos de forma inline e não-críticos com arquivos externos e/ou <script async> é útil para este fim, pois agiliza o First Paint da página.

(P)re-cache ⚡️

Pre-cache determina que recursos com potencial de reutilização pelo usuário durante a navegação de uma página web sejam armazenados pelo browser para futura reutilização.

Service Workers (Cache API ) podem ser bem úteis para este fim.

(L)azy-load ⚡️

Lazy-load determina que o carregamento de recursos e a renderização de partes de páginas web sejam adiados até que o usuário os acesse diretamente.

Entre outras técnicas, usar o atributo loading=lazy é útil para aplicar esse aspecto em <img> e/ou <iframe>.

Gostou? Assine meu canal no Telegram.