La carga de Fuentes puede ralentizar sustancialmente la carga de la p gina, especialmente si tiene varios archivos de Fuentes o archivos de gran Tama o. En este art culo, veremos c mo retrasar la carga de Fuentes y acelerar la carga de la p gina.
Una forma de optimizar la carga de Fuentes es usar el atributo preload. Este atributo permite al navegador comenzar a cargar la fuente en paralelo con la carga de otros recursos de la p gina. Puede hacer referencia al archivo de fuente dentro de la etiqueta y agregar el atributo rel="preload" para indicar la carga de la fuente.
Otra forma de retrasar la carga de Fuentes es usar la propiedad CSS @font-face con el atributo font-display: swap. Esto permite que el navegador muestre las Fuentes disponibles de inmediato y luego las reemplace con las Fuentes descargadas. De esta forma, el usuario podr ver el contenido de inmediato, incluso si las Fuentes a n no se han cargado.
Retrasar la carga de Fuentes es una forma de acelerar la carga de la p gina y mejorar la experiencia del usuario. Utilice estos m todos para reducir los tiempos de carga y aumentar la velocidad de reproducci n del contenido de su sitio.
- C mo optimizar la carga de la p gina: carga de fuente diferida
- Por qu es importante optimizar la carga de la p gina?
- Ventajas de la carga diferida de Fuentes
C mo optimizar la carga de la p gina: carga de fuente diferida
La carga diferida de la fuente supone que las Fuentes no se cargar n en la carga inicial de la p gina, sino que se cargar n m s tarde cuando la p gina ya est completamente cargada y mostrada. Esto le permite acelerar el tiempo de carga de la p gina y mostrarla visualmente al usuario m s r pido.
Hay varias formas de implementar la carga diferida de Fuentes:
para descargar la fuente. Esto permite que el navegador cargue la fuente en paralelo con la carga de la p gina, lo que aumenta la velocidad de carga general. Por ejemplo:
Uso De Web Font Loader: es una biblioteca de JavaScript desarrollada por el equipo de Google Fonts. Le permite administrar mediante programaci n la carga de Fuentes, incluida la carga diferida. Esto le da m s flexibilidad y control sobre el proceso de carga de Fuentes. Por ejemplo:
- font-display
block
,
swap
| , | fallback |
| o | optional |
| . Por ejemplo: | |
| @font-face { |
font-family: 'Moishrift';
src: url ('ruta/a / fuente.woff2') format('woff2'),
url ('ruta/a / fuente.woff') format('woff');
font-display: fallback;
}