Mejores prácticas para recargar Web + fuentes Cómo trabajar

Cuando se trata de optimizar el rendimiento web, Preload es una herramienta útil en su precarga del Arsenal le permite declarar ciertos recursos que un navegador debe solicitar sin bloquear el resto de su página. Prácticamente le da más control sobre cómo los recursos en una página web son Carga, que lo ayuda a optimizar el rendimiento de su sitio de WordPress y mejorar los tiempos de carga percibidos de la página. En este artículo, nos centraremos en un aspecto específico de precarga: precarga de fuentes web. Descubrirá cuál es la precarga de la fuente y cómo funciona. Luego compartiremos algunas buenas prácticas para las fuentes web precargas.
¿Qué es la precarga en general? Cubrimos en detalle la precarga en esta publicación, pero aquí está la versión rápida: cuando alguien visita su sitio web, su navegador carga todos los recursos en la página web en cierto orden, que puede ver en la pestaña de red para los desarrolladores de Chrome o En una herramienta de prueba de rendimiento como GTMetrix o WebPagetest:

Por defecto, los navegadores web deciden cómo cobrar estos recursos de acuerdo con el orden en que se declaran en el código HTML de su sitio, que no siempre es óptimo desde la perspectiva del rendimiento y/o experiencia del usuario.
Con precarga, puede obligar a los navegadores a cargar ciertos recursos desde el principio, como las fuentes. Esto le brinda más control sobre cómo se carga su sitio, lo que, cuando se implementa correctamente, le permite mejorar el rendimiento del sitio. ¿Por qué es importante precargar las fuentes? Por defecto, su sitio retrasará las solicitudes de fuentes hasta que el eje de rango ya se haya construido. Sé que es un poco técnico, así que déjame tratar de romperlo en términos más amigables con la gente. Esencialmente, con el comportamiento predeterminado, un navegador esperará para cargar el archivo de fuente hasta que comience a “pintar” visiblemente en la pantalla del usuario. Básicamente, el navegador es vago cargar los archivos con fuentes, de modo que comience a cargar una determinada fuente una vez que el navegador sabe que la fuente es necesaria (sabe que la fuente es necesaria, porque ya tiene que usar esa fuente para “pintar “El texto) la pantalla). Sin esto, este enfoque de carga perezosa puede conducir a situaciones en las que el navegador está listo para comenzar a mostrar texto, pero debido a que aún no ha descargado la fuente, el navegador debe retrasar la pintura del texto hasta que ha descargado la fuente. Se llama FOIT, o flash de texto invisible. O también puede conducir a una hoja o un destello de texto sin estilo.
FOIT: el texto es invisible hasta que se carga el archivo de fuente.
FOUT: el texto es visible, pero usando una fuente de sistema. Una vez que se carga el archivo de fuente, el texto se moverá al nuevo estilo de fuente, lo que puede causar una experiencia inquietante para los visitantes, porque el texto parece “saltar” y “transformarse”.
En resumen, sin la carga previa de la fuente, puede enfrentar una situación en la que un navegador está listo para cargar su sitio, pero no puede, porque la fuente aún no está disponible. Es decir, debe descargar la fuente antes de poder pintar el texto. El motivo para el que desea evitar esta situación es que ralentiza la página percibida para sus visitantes, lo que conduce a una experiencia de usuario degradada. Con la precarga de la fuente, puede obligar al navegador de un visitante a cargar fuentes importantes temprano, para que el navegador pueda comenzar a pintar el texto tan pronto como esté listo, en lugar de esperar para cargar la fuente. Preparar la fuente no le dice al navegador lo que se usará la fuente, solo diga “Oye, descargue esta fuente de inmediato, para que esté lista para la operación”. Luego, cuando el navegador está listo para comenzar a pintar el texto, ya tiene la fuente disponible y puede comenzar a mostrar el texto de inmediato.
Además, la fuente de precarga aborda la recomendación de “solicitudes clave de precarga” de Google PageSpeed ​​Insights y lo ayuda a mejorar el cambio de diseño de valor acumulativo y la pintura contenta más grande, dos de los principales elementos web vitales.
Cómo precargar las fuentes en WordPress Aunque hay algunos complementos que pueden ayudar a precargar ciertos tipos de fuentes (como las fuentes de Google), el método manual de precarga implica agregar un código a la sección de su sitio … WordPress. Tiene algunas opciones para insertar el código en la sección de su sitio de WordPress. Puedes:
Editar directamente Header.php del tema de su hijo.
Use un complemento gratuito, como la sede y los sótanos de insertos. Reutilice el gancho WP_head en el archivo Functions.php, un complemento personalizado o algo así como el complemento de fragmentos de código gratuito.
El código en sí que usará es el siguiente:
Rel: esto le dice al navegador que precarga el archivo de fuentes.
HREF: este es el enlace al archivo con la fuente real. Deberá editarla para reflejar la fuente que desea precargar.
Como, esto le dice al navegador que precarga un archivo de fuentes.
Tipo: esto especifica el tipo de archivo de fuente. Deberá cambiarlo si desea precargar otro tipo de archivo.
Crossorigin: esto es necesario para cumplir con una peculiaridad de la precarga de las fuentes, que mencionaré más en las siguientes secciones.
También puede precargar las fuentes de cohetes WP, es la forma más simple. En la pestaña de precarga, solo tiene que especificar las direcciones de URL de los archivos de fuentes que desea precargar. ¡Tan simple como eso!
La función del cohete de Font-WP de precarga en este momento, es posible que se pregunte cuál es el mejor caché para WordPress. Si es así, ¡probablemente encontrará información útil en nuestra página dedicada! Las mejores prácticas para la precarga y optimización de las fuentes continúan hablando de algunas buenas prácticas para el uso correcto de la precarga de las fuentes. 1. Limite el número de fuentes y formatos precargados Si usa más fuentes, puede ser tentador precargar cada fuente que use en cada formato. Sin embargo, hay compromisos de rendimiento para usar la precarga de la fuente. Con precarga, forzada, en esencia, los navegadores para hacer una solicitud de alta prioridad para la URL de la fuente, sea necesario o no. Si carga fuentes innecesarias, retrasará innecesariamente el navegador de un visitante para cargar el resto de su sitio. Para equilibrar estos compromisos, debe limitar la cantidad de fuentes que precarga solo a las que son absolutamente necesarias para la carga inicial de la página. (es decir, esas fuentes que se necesitan sobre el pliegue). Dependiendo de su diseño, esta solo podría ser la fuente que usa para sus títulos o puede incluir la fuente que usa para el cuerpo de texto.
Además, querrá limitar los formatos que precarga.Por ejemplo, precarga solo el formato habitual, pero no los formatos cursivos o audaces.Es mucho menos molesto tener un puchero solo para su texto cursivo o audaz, porque estos formatos probablemente sean solo una pequeña parte de su contenido.Básicamente, desea precargar las fuentes que tendrán un efecto visible en la experiencia por encima de su sitio. Google Fonts o Adobe Fonts), tenga cuidado de que los archivos de fuentes que precaran para que coincidan con las fuentes solicitadas en el CSS.
La fuente CDN puede haberse actualizado, lo que puede conducir a una situación en la que pueda precargar una versión de fuente diferente a la que se requiere en CSS. Esto puede llevar a una situación de subóptima en la que realmente obliga a los navegadores de los visitantes a descargar dos versiones de la misma fuente. Para evitar esto, también puede alojar las fuentes personalizadas localmente si es posible. El complemento OMGF gratuito puede ayudarlo a alojar las fuentes de Google localmente en WordPress. También puede ayudarlo a precargar automáticamente solo las fuentes que se cargan en la página. ¿Sabía que WP Rocket optimiza las fuentes de Google de forma predeterminada? 3. Asegúrese de utilizar el atributo de Crossorigin al precargar las fuentes, es importante establecer un atributo de origen cruzado incluso si la toma no es de origen cruzado. Puede ver esto en el primer ejemplo de código:


Aunque la razón por la que es complejo, el resultado final es que los navegadores ignorarán las fuentes precargadas sin el atributo de Crossorigin, lo que hará que el navegador tome la fuente dos veces (una vez durante la precarga y luego otra vez después de eliminar la fuente precargada). >
La fuente de precarga es uno de los consejos de SEO para mejorar los vitales de la web central. Lea nuestro artículo y descubra todas las otras buenas prácticas! Muestre contenido de texto visible, lo que aumenta los tiempos de carga percibidos de su sitio. ¡Guarde el tiempo y deje que WP Rocket haga el trabajo por usted! Como alternativa, deberá agregar un código a la sección de su sitio. Aunque la fuente de precarga puede mejorar el rendimiento de su sitio, querrá: limitar las fuentes y formatos que precarga solo a las fuentes esenciales anteriores página.
Asegúrese de que sus fuentes coincidan con su CSS si usa un CDN de fuentes como Google Fonts.
Siempre especifique el atributo de Crossorigin para evitar las selecciones dobles de los archivos de fuentes.
Para otras formas de mejorar la forma en que usa fuentes en su sitio, consulte nuestra guía completa para optimizar la fuente web.