Precarga las fuentes de Astra para mejorar los tiempos de carga y métricas web

Cargar previamente la fuente

Si aún no has instalado Hummingbird, entonces deberías visitar la página de Hummingbird donde puedes explorar las muchas características del plugin, y donde los miembros de WPMU DEV pueden instalar Hummingbird Pro directamente en cualquier sitio conectado.

Ten en cuenta que si tienes varios plugins de rendimiento de WordPress instalados, pueden entrar en conflicto entre sí y provocar un comportamiento impredecible o incluso romper tu sitio. La siguiente lista de plugins puede causar problemas con Hummingbird:

INCLUIDO CON CADA SITIO HOSTEADO DE WPMU DEVCada sitio alojado de WPMU DEV viene completamente cargado con versiones Pro de los siguientes plugins instalados automáticamente para usted: Smush, Hummingbird, Defender, SmartCrawl, Shipper, Branda y Forminator. ¿Aún no tiene alojamiento con nosotros? Echa un vistazo a nuestra página de Hosting para ver si podemos ser una buena opción para tus proyectos.

INSTALE SMUSH PROMuchas oportunidades para mejorar el rendimiento implican la optimización de imágenes, y sucede que producimos la herramienta de optimización de imágenes más exitosa en la historia de WordPress – Smush Pro. Le recomendamos encarecidamente que instale y active Smush, porque cuando lo haga, los consejos de optimización de imágenes de Hummingbird incluirán un enlace al módulo de Smush donde se puede aplicar esa corrección.

¿Hay que precargar las fuentes?

En resumen, sin la precarga de fuentes, puede darse la situación de que un navegador esté listo para cargar el texto de su sitio, pero no pueda hacerlo porque la fuente aún no está disponible. Es decir, necesita descargar la fuente antes de poder pintar el texto.

  Lorelle les deja un comentario-

¿Qué es la función de precarga en WordPress?

La precarga permite especificar recursos (como fuentes, imágenes, JavaScript y CSS) que se necesitan inmediatamente o muy pronto durante la carga de una página. Se añade una etiqueta link rel hacia la parte superior de la sección <head> </head> en cada página de su sitio.

¿Cómo precargo las fuentes en WP Rocket?

WP Rocket le permite precargar fuentes procedentes de su dominio rápidamente. En la pestaña Precarga, encontrarás la opción de incluir las fuentes a precargar. ¡Así de simple!

Precargar fuentes en css

Cuando alguien visita tu sitio web, su navegador carga todos los recursos de esa página web en un orden determinado, que puedes ver en la pestaña Red de las herramientas de desarrollo de Chrome o en una herramienta de pruebas de rendimiento como GTmetrix o WebPageTest:

Por defecto, los navegadores deciden cómo cargar estos recursos basándose en el orden en que están declarados en el HTML de tu sitio, lo que no siempre es óptimo desde el punto de vista del rendimiento y/o de la experiencia del usuario.

Con la precarga, puedes obligar a los navegadores a cargar ciertos recursos antes, como las fuentes. Esto le da más control sobre cómo se carga su sitio, lo que, cuando se implementa correctamente, le permite mejorar el rendimiento de su sitio.

Esencialmente, con el comportamiento por defecto, un navegador esperará a cargar el archivo de fuentes hasta después de empezar a “pintar” el contenido visible en la pantalla del usuario. Básicamente, el navegador es perezoso cargando los archivos de fuentes de modo que sólo comienza a cargar una fuente específica una vez que el navegador sabe que la fuente es necesaria (sabe que la fuente es necesaria porque ya necesita usar esa fuente para “pintar” texto en la pantalla).

  SEO multilenguaje en WordPress

Precargar google fonts

A diferencia de otros elementos de tu sitio web, las fuentes pueden ser grandes bloques de datos que, si no se gestionan correctamente, pueden ralentizar la carga de tu sitio web. Hoy en día, la velocidad es lo más importante, por lo que, aunque el diseño pop es importante, debes asegurarte de no afectar a la velocidad de tu sitio cuando utilices fuentes.

El primer paso que hay que dar cuando se trabaja con fuentes es seleccionar la fuente e introducirla en el sitio. Si buscas, verás que hay muchas fuentes gratuitas disponibles. Estas fuentes vienen en una variedad de formatos. Debes asegurarte de que, al seleccionar una fuente, eliges una que esté disponible en el formato adecuado. Como ocurre con todo en Internet, hay muchas opciones y no todas son iguales.

Todo eso está muy bien, pero tener un tipo de letra no cambia nada. Quiero que esta fuente se utilice en el título de mi sitio. Para hacer eso encontramos el selector de estilo usado para eso y lo cambiamos.

La mayoría de los temas modernos tienen alguna forma de añadir fuentes y asignarlas a partes del sitio. Yo uso el tema Astra WordPress en uno de mis sitios y viene con una función llamada “Fuentes personalizadas”. En lugar de tener que aplicar manualmente CSS y subir archivos, se me presenta un sencillo formulario que me permite añadir o editar fuentes.

Carga previa de fuentes web

Cuando alguien visita tu sitio web, su navegador carga todos los recursos de esa página web en un orden determinado, que puedes ver en la pestaña Red de las herramientas de desarrollo de Chrome o en una herramienta de pruebas de rendimiento como GTmetrix o WebPageTest:

Por defecto, los navegadores deciden cómo cargar estos recursos basándose en el orden en que están declarados en el HTML de tu sitio, lo que no siempre es óptimo desde el punto de vista del rendimiento y/o de la experiencia del usuario.

  ¿Cómo cambio mi nombre visible en WordPress?

Con la precarga, puedes obligar a los navegadores a cargar ciertos recursos antes, como las fuentes. Esto le da más control sobre cómo se carga su sitio, lo que, cuando se implementa correctamente, le permite mejorar el rendimiento de su sitio.

Esencialmente, con el comportamiento por defecto, un navegador esperará a cargar el archivo de fuentes hasta después de empezar a “pintar” el contenido visible en la pantalla del usuario. Básicamente, el navegador es perezoso cargando los archivos de fuentes de modo que sólo comienza a cargar una fuente específica una vez que el navegador sabe que la fuente es necesaria (sabe que la fuente es necesaria porque ya necesita usar esa fuente para “pintar” texto en la pantalla).