Precarga de fuentes

El autor del artículo, cuya traducción publicamos hoy, quiere hablar sobre por qué precarga las fuentes incluso cuando no debería.

Cuando creó el sitio en el que se publicó el original de este material, no iba a utilizar ninguna de sus propias fuentes en él. Esto inevitablemente afectaría el rendimiento del sitio, aunque no mucho. El autor del artículo dice que se esforzó por hacer un sitio web rápido. Sin embargo, al final, se decidió usar una fuente especial para los títulos de las páginas y al mismo tiempo tratar de hacer que esta solución afecte lo menos posible el rendimiento del proyecto.

Empezando

Para comenzar, decidí hacer el archivo de fuente lo más pequeño posible. Entonces creé un subconjunto de esta fuente. En otras palabras, seleccioné de la fuente solo aquellos caracteres que son necesarios para las palabras en el título.

Como resultado, obtuve un archivo muy compacto, cuyo tamaño era inferior a 2 Kb. Además, lo coloqué en el mismo lugar que todos los demás materiales en el sitio, lo que me permitió deshacerme de las dependencias de terceros y el tiempo dedicado a conectarme a otro dominio.

Y finalmente, el enlace al archivo de fuente se colocó en el código CSS incrustado en la página, en la parte superior del código HTML, y no en el archivo CSS externo.

Esto significa que el navegador podría detectar y descargar el archivo de fuente sin tener que descargar una hoja de estilo externa. Esto, por cierto, es una razón común por la que las fuentes se cargan más tarde de lo necesario.

Sorpresa

Como se necesitan fuentes especiales para mostrar texto, el navegador debe tratarlas como recursos de alta prioridad.

Como resultado, esperaba que el archivo de fuente se cargara muy rápidamente. Las páginas de mi recurso eran, en cualquier caso, bastante "ligeras", por lo que pensé que nada debería impedir la carga del archivo de fuente.

Cuando analicé el sitio, me sorprendió un poco.

Entonces, al mirar el sitio usando las herramientas de desarrollador de Chrome y examinarlo en la prueba de la página web, descubrí que la fuente de alta prioridad se cargó después de las imágenes, recursos de baja prioridad.


Las imágenes se descargan antes de descargar la fuente

Me pareció una completa tontería.

Sabía con certeza que el navegador, antes de descargar la fuente, puede esperar hasta que descubra que la fuente es necesaria para mostrar la página. Pero el elemento en el que se usó mi fuente estaba ubicado en la parte superior de la página, dentro de la <header> , mucho más arriba que las etiquetas con imágenes que se cargaron antes de descargar la fuente. El elemento correspondiente se encuentra no solo en el código de la página, sino también en el árbol DOM.

Precargar fuentes como una solución al problema

El atributo de preload le dice al navegador que necesita precargar el recurso correspondiente necesario para mostrar la página actual.

El uso de este atributo es una buena manera de descargar de manera anticipada recursos importantes que de otro modo el navegador descubriría más adelante.

Los archivos de fuentes son un gran ejemplo del uso de este mecanismo. Si el enlace al archivo de fuente se realiza en una hoja de estilo externa, el navegador no detectará la fuente hasta que cargue esta hoja de estilo.

El uso del atributo de preload aplica a los archivos de fuentes le dice al navegador que necesitará las fuentes apropiadas cuando muestre la página.
Además, este mecanismo es muy fácil de implementar utilizando el elemento <link> .

 <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin> 

Alternativamente, puede agregar una directiva de precarga al encabezado de respuesta (aunque, a menos que se especifique lo contrario, algunos servidores o CDN pueden interpretar este diseño como una solicitud iniciada por el servidor para transferir recursos al cliente).

No esperaba que en este sitio tuviera que usar mecanismos de precarga de recursos. Mi código CSS es muy modesto, lo incrusté en el código HTML de la página, de modo que las páginas se mostrarían más rápido por los navegadores en la primera visita al sitio. Dado que mi fuente no dependía de la carga de un archivo CSS externo, el navegador, en cualquier caso, debería haberlo detectado muy temprano y sin "pistas" sobre la precarga.

Sin embargo, descubrí que la carga previa de la fuente condujo a la restauración de la justicia, al hecho de que el archivo de fuente ahora se cargó antes de que se descargaran los archivos de imagen.

Aquí está el diagrama de cascada de Webpagetest: resalté aquellos lugares donde se muestra el trabajo con el archivo de fuente. En la parte superior de la figura, no se usa precarga. En la parte inferior - usado.


Precargar y trabajar con el archivo de fuente.

Quizás sería más útil considerar el guión gráfico del proceso de carga de la página (aquí, para mayor claridad, se usó una imitación de una conexión muy lenta).


En el guión gráfico superior, no se usa la carga previa. En la parte inferior - usado

De paso, noto que utilicé la font-display: fallback controlador de font-display: fallback . Es decir, el título se mostró originalmente usando la fuente de respaldo en caso de que mi fuente se cargara lentamente. Sin embargo, para esta prueba, desactivé esta función, porque de lo contrario sería muy difícil distinguir entre los pasos para cargar la página.

¿Por qué funcionó?

Para mostrar una página web, el navegador necesita construir el árbol DOM y el árbol CSSOM, que luego se utilizan para construir el árbol de representación.

preload que el uso del elemento <link> con el atributo de preload para descargar la fuente permite al navegador comenzar a construir CSSOM antes de que se complete el DOM.

Puede ver esto en las siguientes imágenes, que muestran una exploración del proceso de carga de la página utilizando las herramientas para desarrolladores de Chrome.

Así es como se ve trabajar con materiales de página sin usar precarga. Primero, se crea el DOM y se carga la imagen, luego se crea CSSOM y se carga la fuente.


Trabaja con la página sin usar precarga

Y aquí es lo mismo, pero con el uso de precarga. Aquí, el navegador comienza a crear CSSOM, comienza a descargar la fuente y luego crea el DOM y comienza a descargar las imágenes.


Trabajando con la página usando preload

¿Hay alternativas a la precarga?

Supongamos que no puedo usar el atributo de preload para aumentar la prioridad del archivo de fuente. ¿Qué podría hacer entonces? ¿Cómo podrías reducir la prioridad de las imágenes?

Por curiosidad, traté de implementar la idea anterior y agregué el atributo loading="lazy" a los elementos que describen las imágenes. En Chrome 76 (el único navegador que admitía esto en el momento de la escritura), esto tendría que reducir la prioridad de las imágenes fuera del área visible original de la página.

Probar esta idea con herramientas de desarrollador ha demostrado que esto lleva a que las fuentes se descarguen antes. Quizás vale la pena recordar esto, ya que el nivel de compatibilidad del navegador para los mecanismos de carga diferida está creciendo con el tiempo.

Los diferentes navegadores se comportan de manera diferente

Probé el proyecto en varios navegadores diferentes y en varios dispositivos. En las pruebas, descubrí que iOS Safari (iPhone 8) muestra el mismo comportamiento que Chrome. Es decir, las fuentes, por defecto, se cargan después de las imágenes, pero el uso del atributo de preload permite solucionar la situación.

El problema de la carga tardía de la fuente también se produjo en Firefox, pero el atributo de preload aún no es compatible con este navegador de forma predeterminada, por lo que el uso del atributo de preload al ver un sitio en Firefox no ha cambiado nada.

En Edge, las fuentes también se cargan más tarde de lo deseado. Había una sensación de que usar Webload Pagetest usando el atributo preload solo funcionaba parcialmente. Es decir, me pareció que parecía una descarga de doble fuente. Una vez que se cargó antes, la segunda vez más tarde.

En el párrafo anterior, hablé sobre el hecho de que "tenía una sensación" y que "parecía". El hecho es que cuando intenté probar este comportamiento usando mi propia versión de Edge, las descargas "dobles" desaparecieron. Ahora tengo la sensación de que usar el atributo de preload no acelera la carga de la fuente. Quizás esta diferencia en el comportamiento de la página fue el resultado de corregir algún error en Edge, aunque de ser así, el error se corrigió a costa de cambiar el mecanismo de precarga de recursos.

Resumen

Aquí hablamos sobre por qué la precarga de fuentes no hace daño, incluso si los enlaces a sus archivos están hechos en el código CSS incrustado en la página.

Los navegadores no siempre se comportan como queremos o como esperamos que lo hagan. Pero tenemos herramientas que ayudan a influir en el comportamiento de los navegadores, ayudan a inclinarlos en la dirección que necesitamos.

Solía ​​pensar que la precarga de fuentes en mi sitio es completamente inútil. De todo lo que hablé, aprendí una lección importante para mí. Consiste en el hecho de que nunca debes asumir nada.

Al final, puedo decir que la precarga de fuentes es una excelente manera de acelerar la salida de texto en las páginas web.

Estimados lectores! ¿Utiliza mecanismos de precarga de fuentes en sus proyectos web?