En los módulos anteriores, aprendiste a optimizar HTML, CSS, JavaScript, y recursos multimedia. En este módulo, descubrirás algunos métodos para optimizar la Web fuentes.
Las fuentes web pueden afectar el rendimiento de la página tanto en el tiempo de carga como en el de renderización.
Los archivos con fuentes grandes pueden tardar un poco en descargarse y pueden afectar negativamente la primera
Procesamiento de imagen con contenido (FCP), mientras que el valor font-display incorrecto podría provocar
cambios de diseño no deseados que contribuyen al Cambio de diseño acumulado de una página
(CLS).
Antes de analizar la optimización de las fuentes web, es importante saber cómo las descubren el navegador puede ser útil, para que puedas comprender cómo CSS evita que la recuperación de fuentes web innecesarias en determinadas situaciones.
Discovery
Las fuentes web de una página se definen en una hoja de estilo con un @font-face
declarativa:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
En el fragmento de código anterior, se define un font-family llamado "Open Sans".
le indica al navegador dónde encontrar el recurso de fuente web correspondiente. Para conservar
de ancho de banda, el navegador no descarga la fuente web hasta que se determine
que el diseño de la página actual lo necesite.
h1 {
font-family: "Open Sans";
}
En el fragmento de CSS anterior, el navegador descarga el archivo de fuente "Open Sans".
ya que analiza un elemento <h1> en el código HTML de la página.
preload
Si tus declaraciones @font-face se definen en una hoja de estilo externa, el elemento
navegador solo puede comenzar a descargarlas después de haber descargado la hoja de estilo.
Esto hace que las fuentes web sean recursos de detección tardía, pero existen formas de ayudar al
navegador descubran fuentes web más rápido.
Puedes iniciar una solicitud anticipada de recursos de fuentes web con preload.
directiva. La directiva preload permite que las fuentes web se detecten con anticipación durante
cargar la página y el navegador inmediatamente comienza a descargarlas sin esperar
para que la hoja de estilo termine de descargarse y analizarse. La directiva preload
no espera a que se necesite la fuente en la página.
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Declaraciones @font-face intercaladas
Puedes hacer que las fuentes sean detectables más temprano durante la carga de la página mediante la intercalación
CSS que bloquea la renderización, incluidas las declaraciones @font-face, en el <head> de
tu HTML con el elemento <style>. En este caso, el navegador detecta
fuentes web al inicio de la carga de la página, ya que no necesita esperar un
la hoja de estilo para descargar.
La intercalación de declaraciones de @font-face tiene una ventaja en comparación con el uso de preload.
sugerencia, ya que el navegador solo descarga las fuentes necesarias para mostrar el
. De esta manera, se elimina el riesgo de descargar fuentes que no se usan.
Descargar
Después de descubrir las fuentes web y asegurarte de que son necesarias para la configuración de la página actual el navegador puede descargarlos. el número de fuentes web, su codificación, y el tamaño de su archivo puede afectar significativamente la rapidez con la que se ejecuta una fuente web que el navegador descarga y procesa.
Aloja por tu cuenta tus fuentes web
Las fuentes web se pueden publicar a través de servicios de terceros, como Google Fonts o puede estar autoalojado en tu origen. Cuando usas un servicio de terceros, tu contenido web la página debe abrir una conexión con el dominio del proveedor antes de que pueda iniciarse descargando las fuentes web necesarias. Esto puede retrasar el descubrimiento y la posterior la descarga de fuentes web.
Esta sobrecarga se puede reducir con la sugerencia del recurso preconnect. Mediante
preconnect, puedes indicarle al navegador que abra una conexión con el origen cruzado
antes de lo que normalmente lo haría el navegador:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
El fragmento de HTML anterior sugiere al navegador que establezca una conexión con
fonts.googleapis.com y una conexión CORS a fonts.gstatic.com. Algunos
los proveedores de fuentes, como Google Fonts, entregan recursos CSS y de fuentes de diferentes
orígenes.
Puedes eliminar la necesidad de una conexión de terceros alojando tu fuentes web. En la mayoría de los casos, las fuentes web de hosting automático son más rápidas que descargarlas. de origen cruzado. Si tienes previsto usar fuentes web de hosting propio, comprueba que tu sitio usa una red de distribución de contenidos (CDN), HTTP/2 o HTTP/3, y establece la encabezados de almacenamiento en caché correctos para las fuentes web que necesitas para tu sitio web.
Usa WOFF2 y WOFF2 únicamente.
WOFF2 disfruta de gran compatibilidad con los navegadores y la mejor compresión, hasta un 30% mejor. que WOFF. El tamaño reducido de los archivos acelera los tiempos de descarga. WOFF2 es el único que se necesita para lograr una compatibilidad total navegadores.
Agrupa las fuentes web en subconjuntos
Las fuentes web suelen incluir una amplia variedad de glifos, que son necesarios para representar la amplia variedad de caracteres que se usan en diferentes idiomas. Si el publica contenido en un solo idioma, o usa un único alfabeto, entonces puedes reducir el tamaño de las fuentes web mediante la subdivisión. A menudo, esto lo hace especificar un número o un rango de puntos de código Unicode
Un subconjunto es un conjunto reducido de glifos que se incluyeron en la Web original. archivo de fuente. Por ejemplo, en lugar de incluir todos los glifos, es posible que tu página muestre una subconjunto específico de caracteres latinos. Según el subconjunto necesario, quitar los glifos pueden reducir considerablemente el tamaño de un archivo de fuente.
Algunos proveedores de fuentes web, como Google Fonts, ofrecen subconjuntos automáticamente a través de
el uso de un parámetro de cadena de consulta. Por ejemplo, el
La URL https://fonts.googleapis.com/css?family=Roboto&subset=latin publica un
con la fuente web Roboto que solo usa el alfabeto latino.
Si decidiste alojar tus fuentes web por tu cuenta, el siguiente paso es generar y alojar esos subconjuntos por tu cuenta con herramientas como glyphanger o subfont.
Sin embargo, si no tienes la capacidad de alojar tus propias fuentes web, puedes
subconjunto de fuentes web proporcionadas por Google Fonts especificando un text adicional
parámetro de cadena de consulta que contenga solo los puntos de código Unicode necesarios para
tu sitio web. Por ejemplo, si tienes una fuente web de Display en tu sitio que solo
necesita la pequeña cantidad de caracteres necesaria para la frase "Te damos la bienvenida", puedes
solicita ese subconjunto a través de Google Fonts a través de la siguiente URL:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome Esto puede
reducir significativamente la cantidad de datos de fuentes web necesarios para un solo tipo de letra
en su sitio web, si este subconjunto extremo puede resultarle útil.
Renderización de fuentes
Después de que el navegador detecta y descarga una fuente web, se puede
se renderizan. De forma predeterminada, el navegador bloquea la representación de cualquier texto que use un elemento
hasta que se haya descargado. Puedes ajustar la renderización de texto del navegador
y configura qué texto debe mostrarse (o no) hasta que se muestre
Se cargó por completo la fuente con la propiedad font-display de CSS.
block
El valor predeterminado para font-display es block. Con block, el navegador
bloquea la representación de cualquier texto que use la fuente web especificada. Diferente
los navegadores se comportan de forma ligeramente diferente. En Chromium y Firefox, se bloquea la renderización en
hasta un máximo de 3 segundos antes de usar un resguardo. Safari se bloquea indefinidamente.
hasta que se cargue la fuente web.
swap
swap es el valor de font-display más usado. swap no bloquea
renderizando y muestra el texto inmediatamente en un resguardo antes de cambiar
la fuente web especificada. Esto te permite mostrar tu contenido de inmediato sin esperar
para que se descargue la fuente web.
Sin embargo, la desventaja de swap es que provoca un cambio de diseño si el resguardo
la fuente web y la fuente web especificada en tu CSS varían mucho en términos de línea
altura, interletraje y otras métricas de la fuente. Esto puede afectar el CLS de su sitio web en los siguientes casos:
no uses la sugerencia preload para cargar un recurso de fuente web en cuanto
como sea posible o si no tienes en cuenta otros valores de font-display.
fallback
El valor de fallback para font-display es una especie de equilibrio entre
block y swap. A diferencia de swap, el navegador bloquea la renderización de una fuente, pero
intercambiar texto de resguardo solo por un período muy corto. A diferencia de block,
Sin embargo, el período de bloqueo es extremadamente corto.
El uso del valor fallback puede funcionar bien en redes rápidas en las que, si la fuente web
las descargas rápidamente, la fuente web es el tipo de letra que se usa inmediatamente en la página
renderización inicial. Sin embargo, si las redes son lentas, se ve el texto de resguardo.
una vez transcurrido el período de bloqueo y, luego, se intercambien cuando la fuente web
llega.
optional
optional es el valor de font-display más estricto y solo usa la Web
un recurso de fuente si se descarga en menos de 100 milisegundos. Si una fuente web toma
que la carga sea más larga, no se usa en la página y el navegador usa el
tipo de letra de resguardo para la navegación actual mientras se descarga la fuente web en
en segundo plano y se coloca en la caché del navegador.
Como resultado, las siguientes navegaciones de páginas pueden usar la fuente web inmediatamente, ya que
ya está descargado. font-display: optional evita que se produzca el cambio de diseño.
con swap, pero algunos usuarios no ven la fuente web si llega demasiado tarde al
navegación inicial de la página.
Demostraciones de fuentes
Ponga a prueba sus conocimientos
Cuándo descarga el navegador un recurso de fuente web (suponiendo que no está
se recupera con una directiva preload)?
¿Cuál es el único formato (y el más eficiente) necesario para entregar contenido web fuentes a todos los navegadores modernos?
A continuación: JavaScript dividido de código
Ahora que ya conoces la optimización de fuentes, puedes en el siguiente módulo, que aborda un tema que tiene un alto potencial para mejorar velocidad de carga inicial de la página para los usuarios, con el fin de postergar la carga de JavaScript a través de la división de código. Así, puedes mantener el ancho de banda y la CPU la contención más baja posible durante la fase de inicio de una página, un período de durante el cual es más probable que los usuarios interactúen con él.