Aplica la carga instantánea con el patrón PRPL

PRPL es un acrónimo que describe un patrón usado para hacer que las páginas web se carguen y se vuelvan interactivas más rápido:

  • Precarga los recursos descubiertos con retraso.
  • Renderiza la ruta inicial lo antes posible.
  • Almacena previamente en caché los recursos restantes.
  • Carga diferida otras rutas y elementos no críticos.

En esta guía, aprenderás cómo cada una de estas técnicas encaja, pero también se pueden usar de forma independiente para lograr resultados de rendimiento.

Audita tu página con Lighthouse

Ejecuta Lighthouse para identificar oportunidades de mejora alineadas con las técnicas de PRPL:

  1. Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
  2. Haz clic en la pestaña Lighthouse.
  3. Selecciona las casillas de verificación Rendimiento y App web progresiva.
  4. Haz clic en Ejecutar auditorías para generar un informe.

Para obtener más información, consulta Descubre oportunidades de rendimiento con Lighthouse.

Precarga los recursos críticos

Lighthouse muestra la siguiente auditoría con errores si un recurso determinado se analiza y recupera tarde:

Lighthouse: Precarga una auditoría de solicitudes de claves

La precarga es una solicitud de recuperación declarativa que le indica al navegador que solicite un recurso que, de lo contrario, no sería detectable para el análisis de precarga del navegador, como una imagen a la que hace referencia la propiedad background-image. Para precargar los recursos descubiertos con demora, agrega una etiqueta <link> con rel="preload" al encabezado de tu documento HTML:

<link rel="preload" as="image" href="hero-image.jpg">

Si agregas una directiva <link rel="preload">, se iniciará una solicitud para ese recurso y la almacenará en la caché. El navegador puede recuperarlos cuando sea necesario.

Para obtener más información sobre la precarga de recursos críticos, consulta la guía Precarga recursos críticos.

Procesa la ruta inicial lo antes posible

Lighthouse muestra una advertencia si hay recursos que retrasan la primera pintura, el momento en que el sitio renderiza píxeles en la pantalla:

Lighthouse: Elimina la auditoría de recursos que bloquean el procesamiento

Para mejorar First Paint, Lighthouse recomienda intercalar el código JavaScript crítico y aplazar el resto con async, así como intercalar el CSS crítico que se usa en la mitad superior de la página. Esto mejora el rendimiento, ya que elimina los recorridos de ida y vuelta al servidor para recuperar elementos que bloquean la renderización. Sin embargo, el código intercalado es más difícil de mantener desde una perspectiva del desarrollo y el navegador no puede almacenarlo en caché por separado.

Otro método para mejorar la Primera pintura es renderizar el servidor mediante el código HTML inicial de tu página. Se mostrará el contenido al usuario de inmediato mientras se recuperan, analizan y ejecutan las secuencias de comandos. Sin embargo, esto puede aumentar significativamente la carga útil del archivo HTML, lo que puede dañar el tiempo de carga o el tiempo que tarda tu aplicación en volverse interactiva y responder a las entradas del usuario.

No existe una única solución correcta para reducir el primer procesamiento de imagen en tu aplicación, y solo deberías considerar los estilos intercalados y la renderización del servidor si los beneficios superan las compensaciones para tu aplicación. Puedes obtener más información sobre ambos conceptos en los siguientes recursos.

Solicitudes o respuestas con un service worker

Prealmacenar elementos en caché

Si actúan como proxy, los service worker pueden recuperar recursos directamente de la caché en lugar del servidor en visitas repetidas. Esto no solo permite que los usuarios usen tu aplicación sin conexión, sino que también acelera los tiempos de carga de la página en visitas repetidas.

Usa una biblioteca de terceros para simplificar el proceso de generación de un service worker, a menos que tengas requisitos de almacenamiento en caché más complejos que los que puede proporcionar una biblioteca. Por ejemplo, Workbox proporciona una colección de herramientas que te permiten crear y mantener un service worker para almacenar recursos en caché. Para obtener más información sobre los service worker y la confiabilidad sin conexión, consulta la guía de service worker en la ruta de aprendizaje de confiabilidad.

Carga diferida

Lighthouse muestra una auditoría fallida si envías demasiados datos a través de la red.

Lighthouse: tiene una auditoría enorme de cargas útiles de red

Esto incluye todos los tipos de recursos, pero las cargas útiles grandes de JavaScript son especialmente costosas debido al tiempo que tarda el navegador en analizarlas y compilarlas. Lighthouse también muestra una advertencia cuando corresponde.

Lighthouse: Auditoría del tiempo de inicio de JavaScript

Para enviar una carga útil de JavaScript más pequeña que contenga solo el código necesario cuando un usuario carga inicialmente tu aplicación, divide todo el paquete y los fragmentos de carga diferida a pedido.

Una vez que hayas logrado dividir tu paquete, precarga los fragmentos que sean más importantes (consulta la guía Precarga los recursos críticos). La precarga garantiza que el navegador recupere y descargue los recursos más importantes antes.

Además de dividir y cargar diferentes fragmentos de JavaScript a pedido, Lighthouse también proporciona una auditoría para la carga diferida de imágenes no críticas.

Lighthouse: Aplaza la auditoría de imágenes fuera de pantalla

Si cargas muchas imágenes en tu página web, aplaza todas las que estén en la mitad inferior de la página o fuera del viewport del dispositivo cuando se cargue una página (consulta Cómo usar tamaños diferidos para cargar imágenes de forma diferida).

Próximos pasos

Ahora que comprendes algunos de los conceptos básicos del patrón PRPL, continúa con la siguiente guía de esta sección para obtener más información. Es importante recordar que no es necesario aplicar todas las técnicas juntas. Cualquier esfuerzo que se realice con cualquiera de los siguientes elementos brindará mejoras notables en el rendimiento.

  • Precarga los recursos críticos.
  • Renderiza la ruta inicial lo antes posible.
  • Almacena previamente en caché los recursos restantes.
  • Carga diferida otras rutas y elementos no críticos.

Puedes obtener más información sobre los patrones de PRPL.