Cómo precargar solicitudes de claves en WordPress

El uso de fuentes web, CSS y JavaScript puede hacer que su sitio web sea más único e interactivo. Pero esperar a que se carguen estos tipos de archivos puede ser frustrante para los visitantes de su sitio.

Aquí es donde la precarga de solicitudes de claves en WordPress puede resultar útil. Al decirles a los navegadores que descarguen estos tipos de archivos antes en la cadena de solicitud, estarán disponibles cuando el navegador esté listo para procesar el contenido. A su vez, esto puede acelerar el tiempo de carga percibido de la página y brindar una mejor experiencia web general.

En la guía de hoy, analizaremos qué significa precargar las solicitudes clave, junto con los posibles beneficios de rendimiento para su sitio web. Luego, explicaremos cómo hacer esto en su sitio de WordPress con Google Fonts, Font Awesome, CSS y JavaScript.

¿Qué significa "solicitudes de clave de precarga" en WordPress?

Cuando alguien visita su sitio web, su navegador enviará múltiples solicitudes HTTP al servidor de su sitio, pidiéndole los archivos que componen su contenido. El servidor tardará una cierta cantidad de tiempo en comenzar a responder a estas solicitudes y enviar información al navegador, lo que se denomina Tiempo hasta el primer byte (TTFB).

A continuación, el navegador comenzará a descargar contenido (PHP, JavaScript y CSS) de los archivos de su sitio y lo renderizará para mostrar páginas visibles (HTML) en la interfaz. Una vez que se ha completado este proceso, el visitante puede ver su página web completamente cargada.

Un navegador utilizará una 'cadena de solicitud' para solicitar y presentar contenido en una secuencia. Eso significa que hay múltiples pasos de solicitudes más pequeñas dentro de las más grandes, con el resultado final de que un visitante puede ver el contenido de su sitio.

Esencialmente, 'precargar' significa decirle al navegador de un usuario que descargue primero los archivos esenciales en lugar de esperar hasta el final del proceso de carga. Suelen ser fuentes (particularmente fuentes web), CSS, JavaScript y, a veces, imágenes.

Las solicitudes de clave son únicas porque su navegador normalmente no solicitaría estos archivos hasta más adelante en el proceso de carga. Por lo tanto, habrá un retraso cuando el navegador llegue a ese punto y descubra que debe solicitar los archivos. Al decirle al navegador que cargue estos archivos primero, los tendrá a mano cuando necesite procesarlos.

¿Cuáles son los beneficios de precargar las solicitudes de claves?

El principal beneficio de precargar solicitudes clave es mejorar el rendimiento percibido de su sitio. Esto significa que el navegador de un usuario puede mostrar su contenido más rápidamente y los visitantes sentirán que su sitio es más rápido. Pero, su sitio en realidad solo está precargando contenido esencial para que parezca de esa manera.

Además, la precarga de solicitudes es esencial para sus puntuaciones de Core Web Vitals. Estas métricas de Google miden el rendimiento de carga, la interactividad y la estabilidad visual de su sitio, lo que le otorga una puntuación que indica la facilidad de uso general de su sitio web.

Estos son los tres Core Web Vitals:

• Pintura con contenido más grande (LCP): cuánto tiempo tarda en cargarse el elemento más grande de su página.
• First Input Delay (FID): el tiempo que tarda el navegador en responder a la interacción del usuario con su contenido.
• Desplazamiento de diseño acumulativo (CLS) : cuánto se mueven los elementos mientras se carga la página.

En particular, la precarga de solicitudes de claves puede tener un impacto significativo en su puntaje LCP. Al precargar imágenes, fuentes y otros archivos grandes, podrá reducir el tiempo que tardan en renderizarse.

Además, la precarga puede afectar su puntaje de First Contentful Paint (FCP). Esta métrica mide el tiempo que tarda en mostrarse el primer elemento HTML de su página. Si puede precargar ese elemento, el navegador podrá mostrar las partes iniciales de su contenido más rápidamente.

Además, los motores de búsqueda, como Google, favorecen el contenido interactivo y de carga rápida. Por lo tanto, más allá de proporcionar una mejor experiencia de usuario, mejorar estas métricas de rendimiento puede impulsar la optimización de motores de búsqueda (SEO) de su sitio web.

Esencialmente, las mejoras de rendimiento pueden ayudar a impulsar las páginas de su sitio en las clasificaciones y poner su contenido frente a más usuarios. Además, precargar solicitudes de claves es relativamente fácil. ¡Más adelante en esta publicación, le mostraremos exactamente cómo hacerlo!

¿Hay desventajas de precargar solicitudes de clave?

Las solicitudes de precarga pueden sonar como una gran idea desde una perspectiva de rendimiento. Dicho esto, intentar precargar demasiados elementos puede ir en tu contra.

Un navegador solo puede procesar tantas solicitudes a la vez. Por lo tanto, si le dice que precargue varios elementos, podría crear un 'cuello de botella' que funciona en contra del tiempo de carga de la página de su sitio.

Por lo tanto, vale la pena elegir cuidadosamente qué elementos se deben precargar para obtener el mayor impacto. En la mayoría de los casos, serán fuentes web, CSS y JavaScript, ya que tienden a ser los archivos más pesados.

Cómo verificar si su sitio está precargando solicitudes clave

Un par de herramientas diferentes pueden identificar si su sitio está precargando solicitudes y sugerir elementos que podrían beneficiarse de esta técnica de optimización. Por ejemplo, PageSpeed ​​Insights es una de las opciones más populares para identificar problemas de rendimiento en su sitio web.

Para usar esta herramienta gratuita, simplemente ingrese la URL de su sitio y haga clic en Analizar . Esto generará un informe de rendimiento detallado.

Desplácese hacia abajo para ver las oportunidades de rendimiento, los diagnósticos y las auditorías aprobadas. Debería poder encontrar la sugerencia de solicitud de clave de precarga en una de estas secciones.

Si prefiere no navegar de un lado a otro entre su sitio y PageSpeed ​​Insights, considere instalar la extensión Google Lighthouse Chrome. Le permite generar informes desde el navegador y ver las métricas de rendimiento de una página.

Del mismo modo, GTMetrix puede generar informes de rendimiento detallados para cualquier sitio. Le permite analizar páginas desde múltiples ubicaciones y realizar un seguimiento de su rendimiento a lo largo del tiempo.

En la pestaña Estructura de GTMetrix, podrá ver si la precarga de solicitudes clave podría ayudar al rendimiento de su sitio.

Cómo precargar solicitudes de claves en WordPress

Antes de realizar cambios significativos en su sitio de WordPress, como agregar un código personalizado, siempre vale la pena hacer una copia de seguridad completa. Esta precaución de seguridad significa que tendrá a mano una versión funcional de su sitio web si comete algún error.

Aquí es donde Jetpack VaultPress Backup resulta útil. Este complemento fácil de usar crea automáticamente copias de seguridad completas de todos sus datos, incluidos sus archivos, tablas de bases de datos e información del producto WooCommerce. Estas copias de seguridad se guardan en tiempo real y se almacenan de forma segura en la nube. Puede restaurarlos con solo unos pocos clics, incluso si está en movimiento o no puede acceder a su sitio en absoluto.

1. Fuentes

A veces, las fuentes pueden quedar ocultas dentro de otros archivos en su sitio web, incluidos los archivos CSS y JavaScript. Desafortunadamente, esto puede ralentizar el proceso de representación de la página.

Para precargar solicitudes con fuentes en WordPress, copie y pegue este código en la sección <head> de su página:

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

Recuerde sustituir "Font-Name" por el nombre de su fuente. Además, incluir "origen cruzado" es esencial si su fuente proviene de una fuente de terceros porque le dice al navegador que necesita cargar el archivo desde un servidor externo.

2. Fuentes de Google

Google Fonts incluye una biblioteca de código abierto de casi 1500 familias de fuentes. Si está buscando fuentes web personalizadas para usar en su sitio, es probable que pueda encontrar una allí.

El uso de Google Fonts puede ayudar a brindar un diseño único a su sitio, pero el navegador también debe descargar los archivos de fuentes al representar el contenido. Dependiendo de su fuente, esto puede aumentar el tiempo de carga de su página.

Al precargar fuentes de Google, también es una buena idea "preconectarlas" primero. Este paso le dice al navegador de antemano que necesitará conectarse a un sitio de terceros (por ejemplo, Google Fonts) para recuperar un recurso.

Además, después de agregar su código de precarga, vale la pena incluir un enlace a su hoja de estilo. De esa manera, si el navegador de su usuario no puede precargar la fuente en cuestión, aún podrá procesarla.

Simplemente agregue el siguiente código a la sección <head> de su página:

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

Dentro de su código, deberá sustituir "$fontURL" por un enlace a su Google Font. Por ejemplo, podría verse así:

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

Luego, ¡asegúrate de guardar tus ediciones!

3. Fuente impresionante

Font Awesome es un gran recurso para iconos y fuentes personalizados, con opciones gratuitas y premium dentro de su biblioteca. Puede usar algunos de estos íconos para mejorar el diseño dentro de sus menús, encabezados, pies de página y áreas de contenido.

Al igual que las fuentes de Google, precargar los íconos de Font Awesome puede ser una buena idea para acelerar el tiempo de carga percibido de la página. Simplemente agregue este código a la sección <head> de la página:

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

Deberá cambiar la ruta del archivo por la fuente o el ícono que está usando en su sitio web. Luego, ¡guarda tus cambios!

4. CSS

Las hojas de estilo en cascada (CSS) son un lenguaje de diseño que funciona junto con HTML para determinar el estilo y la presentación de una página web. Con CSS personalizado, puede cambiar rápidamente la apariencia de diferentes elementos.

Cada página HTML con estilo en su sitio web tendrá una hoja de estilo correspondiente con todo su CSS. Un navegador necesita cargar este archivo al mostrar una página web, por lo que vale la pena decirle al navegador que debe precargar este recurso.

Afortunadamente, hay una manera fácil de precargar CSS. Simplemente agregue este código a la sección <head> de su página:

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

Asegúrese de sustituir "styles.css" por el nombre de la hoja de estilo. Además, tenga en cuenta que si bien este código funcionará en Google Chrome, no es compatible con todos los navegadores.

5. JavaScript

JavaScript es otro de los lenguajes de secuencias de comandos comunes utilizados en WordPress. Le permite crear contenido dinámico como animaciones, carruseles de imágenes en movimiento y feeds que se actualizan automáticamente.

La representación de JavaScript suele ser más compleja porque sus archivos son comparativamente pesados ​​y requieren un proceso más largo para mostrar el contenido. Es por eso que decirle a un navegador que precargue JavaScript pesado puede ser beneficioso para acelerar el tiempo de carga de la página.

Al igual que con CSS, solo deberás agregar esta simple línea de código a la sección <head> de la página:

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

Como antes, sustituya "ui.js" por el nombre del archivo JavaScript y guarde los cambios.

Bonificación: instale un complemento gratuito para mejorar Core Web Vitals

La precarga de solicitudes es solo una técnica que puede utilizar para mejorar las puntuaciones de Core Web Vitals de su sitio de WordPress.

Si está buscando una solución más completa (¡y gratuita!), considere instalar Jetpack Boost. Esta herramienta está desarrollada por Automattic, la misma empresa detrás de WordPress.com.

Este complemento fácil de usar escanea todo su sitio web y le otorga una puntuación en dispositivos móviles y de escritorio. Además, Jetpack Boost no solo es útil para los tres Core Web Vitals. Sus métodos de optimización pueden mejorar otras métricas, incluido el tiempo de interacción (TTI) y el tiempo total de bloqueo (TBT).

Podrá utilizar un sistema de alternancia simple para optimizar la carga de CSS, diferir JavaScript no esencial e imágenes de carga diferida. La versión premium del complemento también generará automáticamente CSS crítico cada vez que realice cambios en su sitio web.

Alternativamente, Jetpack Complete puede llevar su sitio de WordPress a un nivel completamente nuevo. Este plan contiene múltiples herramientas para el rendimiento, incluido el acceso a la red de entrega de contenido (CDN) de imágenes de Jetpack, que puede ahorrar ancho de banda y mejorar el tiempo de carga de su página. Además, obtendrá herramientas avanzadas de seguridad y crecimiento de WordPress.

Preguntas frecuentes sobre la precarga de solicitudes de claves

En este punto, debe tener una buena comprensión de cómo precargar solicitudes clave en WordPress. Aún así, repasaremos algunas preguntas frecuentes solo para estar seguros.

¿Las solicitudes de precarga mejoran la experiencia del usuario?

Las solicitudes de precarga pueden mejorar la experiencia del usuario al disminuir los tiempos de carga percibidos de su sitio. Dado que los visitantes no tendrán que esperar tanto tiempo para que su contenido se muestre, será menos probable que se sientan frustrados y que abandonen su sitio web por uno diferente.

¿Las solicitudes de precarga mejoran Core Web Vitals?

La precarga de solicitudes clave en WordPress puede mejorar sus puntajes de Core Web Vitals, particularmente, cuando se trata de la pintura más grande con contenido (LCP). De hecho, cuando decida qué elementos precargar, sería prudente incluir su contenido 'más grande' o 'principal', ya que esto es lo que probablemente se beneficiaría más de él.

Precargar solicitudes clave frente a precargar activos críticos

Vale la pena señalar que precargar solicitudes clave significa lo mismo que precargar activos críticos. Ambos términos se refieren a decirle a un navegador que cargue recursos específicos por adelantado para mostrar el contenido de una página más rápidamente.

Precarga frente a preconexión frente a captación previa

La carga previa, la conexión previa y la captación previa pueden parecer conceptos similares, pero en realidad significan cosas ligeramente diferentes. Todas son etiquetas que indican a un navegador en qué orden cargar contenido, pero cumplen funciones distintas.

En primer lugar, la carga previa implica cargar el contenido necesario para representar la página en el navegador de un usuario. Es una etiqueta de alta prioridad que preparará un recurso en unos segundos.

Por el contrario, la captación previa se refiere a los elementos posteriores que podrían necesitar cargarse. El navegador buscará recursos por adelantado y los almacenará en su caché. Es una etiqueta de prioridad muy baja, por lo que no debe usarla para recursos urgentes.

Finalmente, la preconexión se usa cuando desea decirle a un navegador que se conecte a un dominio en particular. Si su sitio utiliza un recurso de un sitio de terceros específico (como Google Fonts), la conexión previa le dice al navegador que deberá conectarse a ese dominio en algún momento del proceso de carga.

¿Qué más puedo hacer para mejorar el rendimiento de mi sitio?

Varias tareas pueden ayudar a mejorar el rendimiento de su sitio de WordPress, que incluyen:

• Uso de una CDN para ofrecer su contenido a visitantes de todo el mundo
• Aplazamiento (o eliminación) de CSS no utilizado
• Eliminación de los recursos que bloquean el renderizado
• Minimizar CSS y otros recursos
• Hacer menos solicitudes HTTP

También vale la pena elegir un host de WordPress de alta calidad que le brinde funciones de optimización del rendimiento, como almacenamiento en caché dedicado, garantía de tiempo de actividad y una amplia red de centros de datos en todo el mundo.

Mejore el rendimiento de su sitio de WordPress precargando solicitudes clave

Los tiempos de carga de la página pueden afectar significativamente la experiencia del usuario de su sitio web y las clasificaciones de los motores de búsqueda. Por lo tanto, querrá hacer todo lo que esté a su alcance para acelerar el tiempo que tarda un navegador en mostrar el contenido de su sitio.

Cuando precargue solicitudes clave dentro de sus páginas, el navegador de un visitante tendrá recursos (como fuentes, CSS y JavaScript) listos. Entonces, no habrá demoras al cargar su contenido y hacerlo accesible a los usuarios.

La precarga de solicitudes clave es solo un paso para mejorar el rendimiento de su sitio. Con Jetpack Boost, puede configurar fácilmente su sitio web para cargar imágenes de forma diferida, diferir JavaScript no esencial y más. Mejor aún, el complemento es de uso gratuito. ¡Echa un vistazo a Jetpack Boost hoy!