Precarga fuentes web para mejorar la velocidad de carga

Garima Mimani
Garima Mimani

En este codelab, se muestra cómo precargar fuentes web con rel="preload" para quitar cualquier flash de texto sin estilo (FOUT).

Medir

Primero, mide el rendimiento del sitio web antes de agregar optimizaciones.

  1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completapantalla completa.
  2. Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
  3. Haz clic en la pestaña Lighthouse.
  4. Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
  5. Haz clic en el botón Generate report.

El informe de Lighthouse que se genera te mostrará la secuencia de recuperación de recursos en Latencia de ruta crítica máxima.

Las fuentes web están presentes en la cadena de solicitudes críticas.

En la auditoría anterior, las fuentes web forman parte de la cadena de solicitudes críticas y se recuperan por último. La cadena de solicitudes críticas representa el orden de los recursos que el navegador prioriza y recupera. En esta aplicación, las fuentes web (Pacifico y Pacifico-Bold) se definen con la regla @font-face y son el último recurso que recupera el navegador en la cadena de solicitudes críticas. Por lo general, las fuentes web se cargan de forma diferida, lo que significa que no se cargan hasta que se descargan los recursos críticos (CSS, JS).

Esta es la secuencia de los recursos recuperados en la aplicación:

Las fuentes web se cargan de forma diferida.

Cómo precargar fuentes web

Para evitar FOUT, puedes precargar las fuentes web que se requieran inmediatamente. Agrega el elemento Link para esta aplicación al principio del documento:

<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

Los atributos as="font" type="font/woff2" le indican al navegador que descargue este recurso como una fuente y ayudan a priorizar la cola de recursos.

El atributo crossorigin indica si el recurso se debe recuperar con una solicitud de CORS, ya que la fuente puede provenir de un dominio diferente. Sin este atributo, el navegador ignora la fuente precargada.

Como Pacifico-Bold se usa en el encabezado de la página, agregamos una etiqueta de carga previa para recuperarla aún antes. No es importante precargar la fuente Pacifico.woff2 porque modifica el estilo del texto que se encuentra en la mitad inferior de la página.

Vuelve a cargar la aplicación y ejecuta Lighthouse de nuevo. Consulta la sección Latencia de ruta crítica máxima.

Se precarga la fuente web Pacifico-Bold y se quita de la cadena de solicitudes de crítica

Observa cómo se quita Pacifico-Bold.woff2 de la cadena de solicitudes críticas. Se recupera antes en la aplicación.

Se precarga la fuente web Pacifico-Bold

Con la carga previa, el navegador sabe que debe descargar este archivo antes. Es importante tener en cuenta que, si no se usa correctamente, la carga previa puede perjudicar el rendimiento, ya que realiza solicitudes innecesarias de recursos que no se usan.