El uso de fuentes web, CSS y JavaScript puede hacer que tu sitio web sea más único e interactivo. Sin embargo, esperar a que se carguen estos tipos de archivo puede resultar frustrante para quienes visitan tu sitio.
Aquí es donde puede resultar útil precargar solicitudes clave en WordPress. Si indicas a los navegadores que descarguen estos tipos de archivo antes en la cadena de solicitudes, estarán disponibles cuando el navegador esté listo para mostrar el contenido. De este modo, puedes acelerar el tiempo de carga percibido de tus páginas y ofrecer una mejor experiencia web general.
En la guía de hoy hablaremos de qué significa precargar solicitudes clave y de las posibles ventajas de rendimiento para tu sitio web. Después, explicaremos cómo hacerlo en tu sitio de WordPress con Google Fonts, Font Awesome, CSS y JavaScript.
¿Qué significa «precargar solicitudes clave» en WordPress?
Cuando alguien visita tu sitio web, su navegador envía varias solicitudes HTTP al servidor de tu sitio para pedirle los archivos que componen tu contenido. El servidor tarda cierto tiempo en empezar a responder a estas solicitudes y enviar información al navegador; este tiempo se conoce como tiempo hasta el primer byte (TTFB).
A continuación, el navegador empezará a descargar contenido (PHP, JavaScript y CSS) de los archivos de tu sitio y a procesarlo para mostrar páginas visibles (HTML) en la parte pública. Una vez completado este proceso, quien visita el sitio podrá ver la página web completamente cargada.
El navegador utiliza una «cadena de solicitudes» para pedir y mostrar el contenido por orden. Esto significa que hay varios pasos con solicitudes más pequeñas dentro de otras mayores, cuyo resultado final es que quien visita el sitio puede ver su contenido.
En esencia, «precargar» significa indicar al navegador de una persona que descargue primero los archivos esenciales en lugar de esperar hasta el final del proceso de carga. Normalmente se trata de fuentes (especialmente fuentes web), CSS, JavaScript y, a veces, imágenes.
Las solicitudes clave son especiales porque normalmente el navegador no pediría esos archivos hasta una fase posterior del proceso de carga. Por eso, cuando llega a ese punto y descubre que debe solicitar los archivos, se produce un retraso. Si le indicas al navegador que cargue primero esos archivos, los tendrá preparados cuando necesite mostrarlos.
¿Qué ventajas tiene precargar solicitudes clave?
La principal ventaja de precargar solicitudes clave es mejorar el rendimiento percibido de tu sitio. Esto significa que el navegador puede mostrar tu contenido más rápidamente y quienes lo visitan tendrán la sensación de que tu sitio es más rápido. En realidad, tu sitio solo está precargando contenido esencial para que lo parezca de ese modo.
Además, precargar solicitudes es esencial para tus puntuaciones de Core Web Vitals. Estas métricas de Google miden el rendimiento de carga, la interactividad y la estabilidad visual de tu sitio y te proporcionan una puntuación que refleja la facilidad de uso general de tu sitio web.
Estas son las tres métricas de Core Web Vitals:
- Renderizado del mayor elemento con contenido (LCP): Cuánto tarda en cargarse el elemento más grande de tu página.
- First Input Delay (FID): El tiempo que tarda el navegador en responder a la interacción del usuario con tu contenido.
- Cumulative Layout Shift (CLS): Cuánto se desplazan los elementos mientras se carga la página.
En concreto, precargar solicitudes clave puede influir considerablemente en tu puntuación de LCP. Si precargas imágenes, fuentes y otros archivos grandes, podrás reducir el tiempo que tardan en mostrarse.
Además, la precarga puede afectar a tu puntuación del primer renderizado con contenido (FCP). Esta métrica mide cuánto tarda en mostrarse el primer elemento HTML de tu página. Si puedes precargar ese elemento, el navegador podrá mostrar más rápidamente las partes iniciales de tu contenido.
Además, los motores de búsqueda, como Google, favorecen el contenido de carga rápida y el contenido interactivo. Por tanto, además de ofrecer una mejor experiencia de usuario, mejorar estas métricas de rendimiento puede impulsar la optimización para motores de búsqueda (SEO) de tu sitio web.
En esencia, las mejoras de rendimiento pueden ayudar a que las páginas de tu sitio suban posiciones en los resultados y a que tu contenido llegue a más usuarios. Además, precargar solicitudes clave es relativamente fácil. Más adelante en esta publicación te mostraremos exactamente cómo hacerlo.
¿Tiene alguna desventaja precargar solicitudes clave?
Precargar solicitudes puede parecer una gran idea desde el punto de vista del rendimiento. Dicho esto, intentar precargar demasiados elementos puede acabar siendo contraproducente.
Un navegador solo puede procesar un número limitado de solicitudes a la vez. Por eso, si le indicas que precargue varios elementos, podría crear un «cuello de botella» que perjudique el tiempo de carga de las páginas de tu sitio.
Por tanto, conviene elegir cuidadosamente qué elementos precargar para conseguir el mayor impacto posible. En la mayoría de los casos, serán las fuentes web, CSS y JavaScript, ya que suelen ser los archivos más pesados.
Cómo comprobar si tu sitio precarga solicitudes clave
Un par de herramientas pueden identificar si tu 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 tu sitio web.
Para utilizar esta herramienta gratuita, solo tienes que introducir la URL de tu sitio y hacer clic en Analizar. Esto generará un informe detallado del rendimiento.
Desplázate hacia abajo para ver las oportunidades de rendimiento, los diagnósticos y las auditorías superadas. En una de estas secciones deberías encontrar la sugerencia Precargar solicitudes clave.
Si prefieres no desplazarte continuamente entre tu sitio y PageSpeed Insights, considera instalar la extensión de Chrome Google Lighthouse. Te permite generar informes desde el navegador y consultar las métricas de rendimiento de una página.
Del mismo modo, GTMetrix puede generar informes detallados del rendimiento de cualquier sitio. Te permite analizar páginas desde varias ubicaciones y hacer un seguimiento de su rendimiento a lo largo del tiempo.
En la pestaña Estructura de GTMetrix, podrás ver si precargar solicitudes clave podría mejorar el rendimiento de tu sitio.
Cómo precargar solicitudes clave en WordPress
Antes de realizar cambios importantes en tu sitio de WordPress, como añadir código personalizado, siempre merece la pena hacer una copia de seguridad completa. Esta precaución te permitirá disponer de una versión funcional de tu sitio web si cometes algún error.
Aquí es donde Jetpack VaultPress Backup resulta útil. Este plugin fácil de usar crea automáticamente copias de seguridad completas de todos tus datos, incluidos los archivos, las tablas de la base de datos y la información de los productos de WooCommerce. Estas copias se guardan en tiempo real y se almacenan de forma segura en la nube. Puedes restaurarlas con solo unos clics — incluso si estás fuera de casa o no puedes acceder a tu sitio.
1. Fuentes
A veces, las fuentes pueden quedar ocultas dentro de otros archivos de tu sitio web, incluidos los archivos CSS y JavaScript. Por desgracia, esto puede ralentizar el proceso de renderizado de la página.
Para precargar solicitudes con fuentes en WordPress, copia y pega este código en la sección <head> de tu página:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin>
</head>Recuerda sustituir «Font-Name» por el nombre de tu fuente. Además, incluir «crossorigin» es esencial si tu fuente procede de un origen de terceros, ya que indica al navegador que debe cargar el archivo desde un servidor externo.
2. Google Fonts
Google Fonts incluye una biblioteca de código abierto con casi 1500 familias tipográficas. Si buscas fuentes personalizadas para usar en tu sitio, probablemente encontrarás alguna allí.
Usar Google Fonts puede ayudar a dar un diseño único a tu sitio, pero el navegador también debe descargar los archivos de fuentes al renderizar el contenido. Dependiendo de la fuente, esto puede aumentar el tiempo de carga de la página.
Al precargar Google Fonts, también es buena idea «preconectarlas» primero. Este paso indica de antemano al navegador que tendrá que conectarse a un sitio de terceros (por ejemplo, Google Fonts) para recuperar un recurso.
Además, después de añadir el código de precarga, merece la pena incluir un enlace a su hoja de estilos. De ese modo, si el navegador no puede precargar la fuente en cuestión, podrá renderizarla igualmente.
Solo tienes que añadir el siguiente código a la sección <head> de tu 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>En el código, tendrás que sustituir «$fontURL» por un enlace a tu fuente de Google. Por ejemplo, podría tener este aspecto:
https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700
Después, ¡asegúrate de guardar los cambios!
3. Font Awesome
Font Awesome es un recurso excelente para iconos y fuentes personalizados, con opciones gratuitas y premium en su biblioteca. Puedes usar algunos de estos iconos para potenciar el diseño de tus menús, encabezados, pies de página y áreas de contenido.
Al igual que con Google Fonts, precargar los iconos de Font Awesome puede ser una buena idea para acelerar el tiempo de carga percibido de la página. Solo tienes que añadir 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"/>Tendrás que sustituir la ruta del archivo por la de la fuente o el icono que estés usando en tu sitio web. Después, ¡guarda los cambios!
4. CSS
CSS (hojas de estilo en cascada) es 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 puedes cambiar rápidamente el aspecto de distintos elementos.
Cada página HTML con estilos de tu sitio web tendrá una hoja de estilos correspondiente con todo tu CSS. El navegador debe cargar este archivo al renderizar una página web, por lo que merece la pena indicarle que debe precargar este recurso.
Por suerte, hay una forma sencilla de precargar CSS. Solo tienes que añadir este código a la sección <head> de tu página:
<head>
<link rel="preload" href="styles.css" as="style" />
</head>Asegúrate de sustituir «styles.css» por el nombre de la hoja de estilos. Además, ten en cuenta que, aunque este código funciona en Google Chrome, no es compatible con todos los navegadores.
5. JavaScript
JavaScript es otro de los lenguajes de scripting habituales que se utilizan en WordPress. Te permite crear contenido dinámico, como animaciones, carruseles de imágenes en movimiento y feeds que se actualizan automáticamente.
El renderizado de JavaScript suele ser más complejo porque sus archivos son relativamente pesados y requieren un proceso más largo para mostrar el contenido. Por eso, indicar al navegador que precargue archivos JavaScript pesados puede ayudar a acelerar el tiempo de carga de la página.
Al igual que con CSS, solo tendrás que añadir esta sencilla 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, sustituye «ui.js» por el nombre del archivo JavaScript y guarda los cambios.
Extra: instala un plugin gratuito para mejorar las métricas Core Web Vitals
Precargar solicitudes es solo una de las técnicas que puedes usar para mejorar las puntuaciones de Core Web Vitals de tu sitio de WordPress.
Si buscas una solución más completa (¡y gratuita!), plantéate instalar Jetpack Boost. Esta herramienta está desarrollada por Automattic, la misma empresa que está detrás de WordPress.com.
Este plugin fácil de usar analiza todo tu sitio web y te proporciona una puntuación para ordenadores y dispositivos móviles. Además, Jetpack Boost no solo resulta útil para los tres Core Web Vitals. Sus métodos de optimización pueden mejorar otras métricas, como Tiempo hasta la interactividad (TTI) y Total Blocking Time (TBT).
Podrás usar un sencillo sistema de interruptores para optimizar la carga de CSS, posponer la carga de JavaScript no esencial y cargar imágenes de forma diferida. La versión premium del plugin también generará automáticamente CSS crítico cada vez que realices cambios en tu sitio web.
Como alternativa, Jetpack Complete puede llevar tu sitio de WordPress a un nivel completamente nuevo. Este plan incluye varias herramientas para mejorar el rendimiento, incluido el acceso que ofrece Jetpack a la CDN de imágenes, con la que podrás ahorrar ancho de banda y mejorar el tiempo de carga de tus páginas. Además, obtendrás herramientas avanzadas de seguridad de WordPress y de crecimiento.
Preguntas frecuentes sobre la precarga de solicitudes clave
A estas alturas, deberías tener una buena idea de cómo precargar solicitudes clave en WordPress. Aun así, repasaremos algunas preguntas frecuentes para asegurarnos.
¿La precarga de solicitudes mejora la experiencia del usuario?
La precarga de solicitudes puede mejorar la experiencia del usuario al reducir los tiempos de carga percibidos de tu sitio. Como los visitantes no tendrán que esperar tanto a que se muestre tu contenido, será menos probable que se sientan frustrados y abandonen tu sitio web por otro.
¿La precarga de solicitudes mejora las métricas Core Web Vitals?
La precarga de solicitudes clave en WordPress puede mejorar tus puntuaciones de Core Web Vitals, especialmente en lo que respecta al renderizado del mayor elemento con contenido (LCP). De hecho, cuando decidas qué elementos precargar, sería recomendable incluir el contenido «más grande» o «principal», ya que probablemente sea el que más se beneficie de ello.
Precargar solicitudes clave frente a precargar recursos críticos
Cabe señalar que precargar solicitudes clave equivale a precargar recursos críticos. Ambos términos hacen referencia a indicar al navegador que cargue determinados recursos por adelantado para mostrar el contenido de una página más rápidamente.
Precarga frente a preconexión y prefetch
La precarga, la preconexión y el prefetch pueden parecer conceptos similares, pero en realidad significan cosas ligeramente distintas. Todas son etiquetas que indican al navegador en qué orden debe cargar el contenido, aunque cumplen funciones diferentes.
En primer lugar, la precarga consiste en cargar en el navegador del usuario el contenido necesario para mostrar la página. Es una etiqueta de alta prioridad que prepara un recurso en cuestión de segundos.
En cambio, el prefetch se ocupa de los elementos posteriores que podrían tener que cargarse. El navegador buscará los recursos por adelantado y los almacenará en su caché. Es una etiqueta de prioridad muy baja, por lo que no debes utilizarla para recursos urgentes.
Por último, la preconexión se utiliza para indicar al navegador que se conecte a un dominio concreto. Si tu sitio utiliza un recurso de un sitio externo específico, como Google Fonts, la preconexión indica al navegador que tendrá que conectarse a ese dominio en algún momento del proceso de carga.
¿Qué más puedo hacer para mejorar el rendimiento de mi sitio?
Hay varias tareas que pueden ayudarte a mejorar el rendimiento de tu sitio de WordPress, entre ellas:
- Usar una CDN para ofrecer tu contenido a visitantes de todo el mundo
- Posponer (o eliminar) el CSS que no se utiliza
- Eliminar los recursos que bloquean el renderizado
- Minificar el CSS y otros recursos
- Realizar menos solicitudes HTTP
También merece la pena elegir un proveedor de alojamiento de WordPress de alta calidad que te proporcione funciones de optimización del rendimiento, como almacenamiento en caché dedicado, una garantía de disponibilidad y una amplia red de centros de datos en todo el mundo.
Mejora el rendimiento de tu sitio de WordPress mediante la precarga de solicitudes clave
Los tiempos de carga de las páginas pueden afectar significativamente a la experiencia de usuario de tu sitio web y a su posicionamiento en los buscadores. Por eso, te conviene hacer todo lo que esté en tu mano para reducir el tiempo que tarda un navegador en mostrar el contenido de tu sitio.
Cuando precargas solicitudes clave en tus páginas, el navegador de los visitantes tendrá preparados recursos como las fuentes, CSS y JavaScript. Así, no se producirá ningún retraso al cargar tu contenido y hacerlo accesible para los usuarios.
La precarga de solicitudes clave es solo un paso para mejorar el rendimiento de tu sitio. Con Jetpack Boost, puedes configurar fácilmente tu sitio web para aplicar la carga diferida a las imágenes, aplazar la carga de JavaScript no esencial y mucho más. Además, el plugin es gratuito. ¡Descubre Jetpack Boost hoy!
Jetpack 