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.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
. - Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haz clic en la pestaña Lighthouse.
- Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
- Haz clic en el botón Generar informe.
El informe de Lighthouse que se genere te mostrará la secuencia de recuperación de recursos en Latencia de ruta crítica máxima.
En la auditoría anterior, las fuentes web forman parte de la cadena de solicitudes crítica y se recuperan en último lugar. 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 (Pacfico y Pacifico-Bold) se definen con la regla @font-face y son el último recurso recuperado por el navegador en la cadena de solicitud crítica. Normalmente, las fuentes web son de carga 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:
Precarga de fuentes web
Para evitar FOUT, puedes precargar las fuentes web que se necesiten de inmediato. Agrega el elemento Link para esta aplicación al encabezado 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" indican al navegador que descargue este recurso como una fuente y ayudan a priorizar la cola de recursos.
El atributo crossorigin indica si se debe recuperar el recurso 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 se usa Pacifico-Bold en el encabezado de la página, agregamos una etiqueta de precarga para recuperarla incluso 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 vuelve a ejecutar Lighthouse. Consulta la sección Latencia de ruta crítica máxima.
Observa cómo se quita el Pacifico-Bold.woff2 de la cadena de solicitudes crítica. Se recupera antes en la aplicación.
Con la precarga, el navegador sabe que debe descargar este archivo antes. Es importante tener en cuenta que, si no se usa correctamente, la precarga puede afectar el rendimiento al realizar solicitudes innecesarias de recursos que no se utilizan.