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.
- To preview the site, press View App. Then press Fullscreen
. - Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Lighthouse tab.
- Make sure the Performance checkbox is selected in the Categories list.
- 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.
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:
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.
Observe cómo Pacifico-Bold.woff2 de la cadena de solicitudes críticas. Se obtiene anteriormente en la aplicación.
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.