Love Frontend
Community of frontend developers

¿Qué es un PRPL pattern? [ru] [en]

Autor: Kamil Ocean
fecha de publicación: 10.01.2020
infographic of PRPL pattern

Cada letra de este acrónimo significa una cosa importante para optimización de sito.

Push (o preload)

Use etiqueta especial link con atributo rel="preload" para importantes scripts y estilos. Recursos qué incluyen del mismo modo, se descargan en primer lugar.

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

Render the initial route as soon as possible

En otras palabras: hay que reducir tiempo de First Paint. Inserte inlining las más importantes CSS y JS. Para el resto recursos añada atributo async.

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

Use SSR si es posible.

Pre-cache assets

Use Service Worker y Cache Storage API para almacenar recursos en cliente.

Lazy load

Si tu código está en un archivo entonces divídalos en chunks (trozos, porciones) y los descargara cuando sea necesario. También use lazy loading para imágenes.

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

Inspirado en: Apply instant loading with the PRPL pattern

Deja tu email para recibir noticias.