Precargue fuentes web para mejorar la velocidad de carga

Este laboratorio de código le muestra cómo precargar fuentes web usando rel="preload" para eliminar cualquier destello de texto sin estilo (FOUT).

Medición #

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

  1. To preview the site, press View App. Then press Fullscreen fullscreen.
  2. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
  3. Click the Lighthouse tab.
  4. Make sure the Performance checkbox is selected in the Categories list.
  5. Click the Generate report button.

El informe Lighthouse que se genera le mostrará la secuencia de búsqueda de recursos en Latencia máxima de la ruta crítica.

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 en último lugar. La cadena de solicitudes críticas representa el orden de los recursos priorizados y encontrados por el navegador. En esta aplicación, las fuentes web (Pacifico y Pacifico-Bold) se definen utilizando la regla @font-face y son el último recurso obtenido por el navegador en la cadena de solicitudes críticas. Normalmente, 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).

Aquí está la secuencia de los recursos obtenidos en la aplicación:

Las fuentes web se cargan de forma diferida.

Precarga de fuentes web #

Para evitar el FOUT, puede precargar las fuentes web que se requieren de inmediato. Agregue el elemento Link para esta aplicación al inicio del documento:

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

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

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

Dado que se usa Pacifico-Bold en el encabezado de la página, agregamos una etiqueta de precarga para recuperarla mucho antes. Precargar la fuente Pacifico.woff2 no tiene importancia porque le da estilo al texto que está después del encabezado.

Vuelva a cargar la aplicación y vuelva a ejecutar lighthouse. Verifique la sección Latencia máxima de la ruta crítica.

La fuente web Pacifico-Bold está precargada y eliminada de la cadena de solicitudes cricical

Observe cómo Pacifico-Bold.woff2 de la cadena de solicitudes críticas. Se obtiene anteriormente en la aplicación.

La fuente web Pacifico-Bold está precargada

Con la precarga, el navegador sabe que necesita descargar este archivo antes. Es importante tener en cuenta que si no se utiliza correctamente, la precarga puede perjudicar el rendimiento al realizar solicitudes innecesarias de recursos que no se utilizan.

Última actualización: Mejorar el artículo