Sencillas mejoras de la velocidad de WordPress que puedes hacer mediante la precarga

Puntos clave

• Los sitios WordPress lentos pierden visitantes rápidamente, ya que el 40% se va después de 3 segundos de tiempo de carga.
• La precarga acelera los sitios al cargar antes fuentes, CSS, imágenes y scripts críticos.
• LCP, INP y CLS afectan al SEO; la precarga mejora significativamente estas puntuaciones vitales de rendimiento.
• La precarga de recursos, caché y enlaces optimiza la velocidad preparando los activos antes de que el navegador los necesite.
• El plugin Breeze de Cloudways permite precargar fácilmente sin codificar ni instalar plugins de rendimiento adicionales.

Si estás aquí, es porque estás pensando en crear un sitio web con WordPress o porque quieres renovar tu sitio web actual. En cualquiera de los dos casos,
la optimización de la velocidad de WordPress
es la clave para mejorar enormemente la experiencia del usuario y, en consecuencia, conseguir altas tasas de conversión.

¿No estás convencido? Veamos las cifras.

3 segundos. Sí, la investigación de Kissmetrics sugiere que ese es el tiempo que el 40% de los visitantes esperarán antes de abandonar un sitio web que carga lentamente. Imagínate, casi la mitad de tu tráfico desaparece antes incluso de que pasen por tus ofertas.

Supón que creas un sitio en WordPress. Tal vez sea un blog que tiene una buena cantidad de tráfico de visitantes. Tal vez sea tu tienda de comercio electrónico. Todo va bien, hasta que deja de ir bien.

Notas que las páginas tardan demasiado en abrirse. Las fuentes parpadean antes de asentarse. Las imágenes aparecen torpemente. Tu tasa de rebote aumenta mientras tu clasificación sigue bajando.

La verdad es que tu navegador funciona a ciegas.

Está descubriendo los archivos críticos sólo cuando llega a ellos, descargándolos uno a uno y renderizando el contenido en pequeñas secciones. Desgraciadamente, este retraso es suficiente para alejar a los usuarios y dañar tu Core Web Vitals.

Ahí es donde entra en juego la Precarga.

En este artículo, nuestro experto en WordPress te ayudará a descubrir cómo funciona la precarga de recursos en WordPress, qué activos priorizar y las herramientas (incluidos los plugins) para lograr fácilmente la optimización de la velocidad de WordPress. Además, aquellos que busquéis un alojamiento superior para WordPress aprenderéis cómo el uso de Cloudways Hosting puede eliminar las complicaciones de todo el proceso.

Antes de entrar en el meollo de la Precarga, es importante averiguar exactamente por qué tu sitio web necesita ser rápido.

Por qué la velocidad es importante para los sitios web WordPress

Los visitantes de un sitio web no esperan a que éste se cargue. Si tu sitio de WordPress es lento y tarda más de un par de segundos en cargarse, la mayoría de los usuarios rebotarán y probablemente no volverán jamás. No sólo estarás irritando a los visitantes, sino que también perderás clientes potenciales, posiciones en los rankings y dinero, sin ni siquiera darte cuenta.

Para entenderlo mejor, tienes que saber qué es Core Web Vitals.

Optimizar WordPress Core Web Vitals

Se trata de métricas importantes que Google ofrece para ayudar a los propietarios de sitios web a hacerse una idea clara de cómo es en la práctica un sitio rápido y fácil de usar. Los indicadores vitales de la web son una parte fundamental de la optimización de la velocidad de WordPress. De hecho, estas métricas son puntos de datos medibles que afectan directamente a la visibilidad de búsqueda de tu sitio web y a su clasificación en las SERP.

Incluye:

• LCP (Pintura de mayor contenido)

LCP mide el tiempo de carga del contenido principal (como la imagen héroe o el encabezado de un sitio web). Normalmente, cuando estos elementos tardan en cargarse, tus usuarios tienen la sensación de que tu sitio está atascado. La precarga cumple una función vital al garantizar que estas secciones aparezcan inmediatamente.

• INP (Interacción con la siguiente pintura)

La INP está diseñada para hacer un seguimiento de la capacidad de respuesta de tu sitio cuando alguien interactúa con él (mediante clics, pulsaciones de teclas o toques). Sin la carga anticipada de estos archivos de secuencia de comandos, el usuario experimenta un retardo. La carga previa elimina este retraso.

• CLS (Desplazamiento de disposición acumulativo)

Esta métrica comprueba lo estable que es el diseño de tu sitio web mientras se carga. Las fuentes y las imágenes que se cargan tarde pueden hacer que todo salte, pero la precarga evita que esto ocurra al principio.

En pocas palabras, las Core Web Vitals son la forma que tiene Google de medir la frustración real de los usuarios. La precarga reduce esa frustración incluso antes de que comience, lo que la convierte en un aspecto vital para las empresas que luchan por mejorar el rendimiento de WordPress.

Los sitios rápidos son más fáciles de rastrear

Puede que no te des cuenta, pero los motores de búsqueda no entienden tu sitio automáticamente. Tienen que rastrearlo, línea por línea. Por tanto, cuanto más rápido se cargue tu sitio, más fácil le resultará a Googlebot rastrear más páginas. Google sugiere que el Tiempo hasta el Primer Byte (TTFB ) de tu sitio web sea de 200 milisegundos o menos. TTFB es el tiempo que tarda tu navegador en obtener el primer bit de datos del servidor.

Y aquí está la parte que muchos olvidan: si tu sitio es lento, puede que ni siquiera se indexe todo tu contenido. Eso se traduce en menos oportunidades de clasificarte, menos personas que te encuentren y menos posibilidades de convertir.

La precarga es una de las mejores tácticas de optimización de la velocidad de WordPress para solucionar todo esto.

Gracias a la Precarga, estos problemas ni siquiera se plantean, ya que disminuye el tiempo de espera del navegador.

Qué es la precarga y por qué ayuda

¿Qué es la precarga y para qué sirve precargar recursos en WordPress?

La precarga es como avisar al navegador: «Oye, vas a necesitar esto, así que cógelo ahora». Básicamente, indica al navegador que descargue los recursos clave antes de que se los pidas.

La imagen anterior muestra la sugerencia del navegador que permite priorizar la carga de recursos.

Eso significa que cosas como imágenes, fuentes, CSS o archivos JavaScript están listos y esperando cuando se construye la página. Piensa en ello como si prepararas los ingredientes antes de empezar a cocinar. Cuando ignoras la preparación, todo tarda más y resulta frustrante.

Al precargar los recursos en WordPress, cualquiera que llegue a tu sitio web tendrá la impresión de que es rápido, fluido y profesional.

Tipos de precarga

En la optimización web entran en juego tres sugerencias de recursos principales.

Tipo de precarga	Qué hace	Cuando ocurre	Ejemplo de caso práctico	Herramientas/Plugins (WordPress)	Beneficios
Precarga de recursos	Carga activos críticos (fuentes, CSS, JS) con antelación indicándoselo al navegador a través del enlace HTML <rel=»preload»>.	Durante la carga de la página actual.	Precarga una fuente personalizada antes de que bloquee la renderización.	WP Rocket, Perfmatters, código manual en <head>	Pintura más rápida, Core Web Vitals mejorado (esp. LCP).
Precarga de caché	Genera previamente y almacena versiones estáticas de las páginas en la caché, para que los usuarios no tengan que esperar a que se generen por primera vez.	Después de borrar la caché o programarla periódicamente.	Regenera la caché de todas las entradas del blog tras una actualización del plugin.	WP Rocket, Caché LiteSpeed, Caché Total W3	Primera visita más rápida, menor carga del servidor.
Precarga de enlaces (también conocida como precarga de páginas)	Predice la navegación del usuario y precarga el contenido interno de la página cuando el usuario pasa el ratón o se desplaza cerca de un enlace.	Antes de que el usuario haga clic, a menudo activado por hover.	Al pasar el ratón por encima de un enlace «Contacto» se precarga el contenido de esa página.	Páginas volantes, Instant.page	Navegación instantánea, mejor velocidad percibida.

• Precarga de recursos

Los elementos del sitio web como CSS, fuentes, imágenes y JavaScript se consideran recursos críticos. En lugar de esperar a que el navegador los encuentre durante la carga de la página, se cargan por adelantado. Esto aumenta la velocidad de representación del contenido por encima de la página (la parte de una página web que es visible para el usuario sin que tenga que desplazarse hacia abajo) y ayuda a garantizar que el diseño permanezca estable. Sin embargo, no hace falta decir que cargar por adelantado demasiados recursos innecesarios, anulará de todos modos todos tus esfuerzos.

• Precarga de caché

Los visitantes pueden tener un viaje más fluido en tu sitio web WordPress cuando ya has previsto lo que van a necesitar. Eso es la precarga de la caché. En
caché de WordPress
todas las páginas más visitadas o críticas se pre-renderizan y se almacenan en la caché, lo que permite que se carguen instantáneamente en la siguiente visita. Como habrás adivinado, es especialmente útil cuando se trata de visitantes recurrentes o de páginas que se actualizan con frecuencia (el contenido de la caché se actualiza automáticamente).

• Precarga de enlaces

Cuando alguien está leyendo una página de tu sitio web, el navegador puede precargar activos para la página que es más probable que visite a continuación. Si un visitante pasa el ratón por encima del enlace de tu página web, hay una espera de aproximadamente 100 milisegundos antes de que el HTML de esa página se cargue en segundo plano. Para mejorar el rendimiento de WordPress puedes aprovechar la precarga de enlaces para las páginas enlazadas internamente, ya que el comportamiento del usuario para estos activos es bastante predecible.

Ahora que hemos cubierto qué es la precarga y sus distintos tipos, imaginemos el escenario de los sitios web WordPress que no utilizan la precarga.

Qué ocurre sin precarga en WordPress

• Carga inicial lenta

Sin precarga, el navegador sigue estrictamente la secuencia de carga y espera a que se descubran los recursos. El resultado son retrasos visibles (los visitantes odian esto) antes de que aparezca en pantalla algo realmente útil.

• Diseños de página inestables

Seguro que has notado que algunas partes de la página saltan cuando las fuentes o las imágenes se cargan tarde. Los botones se desplazan, el texto se desalinea y los usuarios se frustran.

• Aumenta la tasa de rebote

No es sorprendente que los sitios que no están precargados tengan tasas de rebote muy altas. Si alguien se encuentra con un sitio que tartamudea o se retrasa durante los primeros segundos, lo abandona y se va a tus competidores.

• Mala experiencia de usuario en el móvil

Por experiencia propia, te habrás dado cuenta de que las redes móviles suelen ser más lentas y menos fiables que el WiFi. Los visitantes móviles de tu sitio son los que más sufren, ya que ven páginas a medio cargar o espacios en blanco antes de que aparezca nada significativo.

Está muy claro que un sitio WordPress que no utiliza la precarga se enfrenta a varios retos. Así que, ahora, veamos las ventajas de la precarga de recursos en WordPress.

¿Cuáles son las ventajas de la precarga de recursos en WordPress?

• Mejores tiempos de carga de la página

Cuando los activos esenciales están precargados, se aceleran las partes más demandadas de tu sitio. Esto crea una experiencia corta y dulce, que aumenta directamente el compromiso.

• Mejores puntuaciones SEO

Google es conocido por premiar los sitios que se cargan rápidamente. Con la precarga, tu sitio cumple más puntos de referencia de Core Web Vitals. ¿Cómo ayuda eso? Esto le permite obtener una visibilidad mucho mayor en los resultados de búsqueda.

• Mayores tasas de conversión

Unos tiempos de carga del sitio web más rápidos hacen felices a los visitantes (puede que ni siquiera se den cuenta). Esto les impulsa a realizar acciones como añadir artículos al carrito, rellenar formularios o hacer reservas, impulsando así la conversión.

• Menos carga del servidor

Al precargar y almacenar en caché los activos de forma inteligente, reduces los viajes de ida y vuelta redundantes entre el navegador y el servidor. Esto ahorra ancho de banda y aumenta la productividad del servidor.

Ahora, veamos los elementos específicos de tu sitio web WordPress que deben cargarse primero.

Qué elementos precargar primero para acelerar el tiempo de carga de WordPress

Elemento	Qué precargar	Por qué es importante
Fuentes	Fuentes clave del sitio	Evita retrasos en las fuentes y saltos de diseño
CSS crítico	Estilos para el contenido por encima de la página	Garantiza que los estilos se muestren al instante, evita las pantallas en blanco
JavaScript crítico	Scripts que controlan las interacciones visibles	Hace que los botones, deslizadores y menús respondan instantáneamente
Imágenes principales y sobreimpresionadas	Banner principal e imágenes de primera pantalla	Muestra inmediatamente elementos visuales clave, potencia la primera impresión

Cuando se trata de optimizar la velocidad de WordPress, los propietarios de sitios deben empezar por precargar ciertos activos críticos antes que otros.

Incluyen los recursos que afectan directamente a lo que los usuarios ven y con lo que interactúan en primer lugar, y se trata principalmente de contenido por encima de la página.

Un WordPress más rápido empieza aquí

Con nuestro alojamiento optimizado para WordPress, funciones como la precarga hacen que tu sitio se cargue más rápido y mantiene la atención de los visitantes. Disfruta de velocidad y fiabilidad integradas.

Empieza

Imágenes principales e imágenes sobre la portada

Aunque una página se haya cargado en 2,5 segundos, una persona puede percibir que el tiempo de carga es de 4 segundos. Esto se denomina velocidad de carga percibida. Los elementos del sitio web, como la imagen principal y las imágenes de la parte superior de la página, deben aparecer al instante o los visitantes pueden perder la confianza en el sitio y abandonarlo. La precarga hace que esto suceda, manteniéndolos enganchados desde el instante en que aterrizan en tu sitio web.

Fuentes

Fuente

Como puedes ver, la página web de este sitio está mostrando un destello de texto sin estilo, ya que las fuentes web o Fuentes Google aún no están cargados.

Las fuentes, especialmente las personalizadas, tienden a bloquear la renderización, ya que el navegador no renderizará (mostrará) el texto hasta que se haya cargado la fuente. Por eso a veces los usuarios experimentan espacios vacíos o destellos de texto sin estilo. Precargar las fuentes garantiza que se carguen antes, estabilizando el diseño y haciendo que tu sitio parezca pulido desde el principio.

CSS crítico

Fuente

La imagen anterior es un ejemplo de lo que ocurre cuando no se precarga el CSS Crítico.

Hay ciertos estilos por encima de la página que deben cargarse primero, antes que otras partes de la página.

Sin él, los usuarios verían una pantalla en blanco o un contenido que parece sin estilo. Precargar el CSS crítico significa que el diseño visual de tu sitio aparece correctamente a la primera, en lugar de construirse gradualmente ante sus ojos.

JavaScript crítico

Determinados scripts gestionan algunas interacciones clave de los visitantes en la página, como menús, deslizadores o botones de llamada a la acción. Supongamos que un comprador pulsa el botón «Comprar ahora» y no ocurre nada. Eso significa que la funcionalidad del botón aún no se ha cargado. Precargar este JavaScript hace que tus elementos interactivos reaccionen inmediatamente, haciendo que tu experiencia sea más fluida y fiable.

Utilizar el alojamiento WordPress de Cloudways para simplificar la configuración de la precarga

¿Quieres aumentar la velocidad con plugins de WordPress?

Bueno, si planeas alojar tu sitio WordPress en Cloudways, no tendrás que preocuparte de reunir un montón de herramientas diferentes para gestionar el rendimiento. Ofrece opciones integradas de precarga, almacenamiento en caché y entrega de contenidos que funcionan conjuntamente sin necesidad de mucha configuración. De esta forma, evitas conflictos entre plugins y también te aseguras de que los esfuerzos de optimización sean fáciles de gestionar.

Plugin Cloudways Breeze Cache

Si utilizas Cloudways, Breeze ya forma parte del paquete. Puedes activar la precarga de fuentes, minificar activos e incluso configurar el almacenamiento en caché del navegador desde un sencillo panel de control. Está pensado para darte resultados sin necesidad de ajustar demasiadas opciones. La mayoría de la gente lo deja activado y deja que haga su trabajo.

Fuente

Como puedes ver, la Precarga se puede realizar sin problemas en el sencillo panel de control de Breeze.

• Hay una herramienta de limpieza integrada que ayuda a eliminar cosas como borradores de posts antiguos o comentarios de spam que ralentizan las páginas.
• También comprime los archivos de tu sitio utilizando GZIP, lo que básicamente significa que tu contenido viaja más rápido sin perder calidad.
• Si una página o un plugin concretos están defectuosos, Breeze puede omitir su almacenamiento en caché. Esto es necesario sobre todo cuando todavía estás retocando tus páginas.
• Breeze también funciona con la caché Varnish de Cloudways, por lo que obtienes otro aumento de rendimiento sin necesidad de configurar nada manualmente.

CDN de Cloudflare

Una vez que conectes Cloudflare a través de Cloudways, los archivos de tu sitio web ya no procederán todos de una misma ubicación. Los servidores que están físicamente más cerca de tus visitantes entregarán los archivos. Eso hace que tu sitio sea más rápido, especialmente para los clientes de fuera de tu región de alojamiento. ¿Y lo mejor? Tras la configuración inicial, sigue funcionando en segundo plano sin mucho esfuerzo por tu parte.

• Todos tus archivos comunes, como tus imágenes y hojas de estilo, se almacenan para garantizar que los visitantes que regresan tengan una experiencia fluida, ya que los recursos ya se han descargado.
• Como Cloudflare gestiona gran parte del tráfico por sí mismo, tu servidor real no estará sometido a tanta presión durante los periodos de mucho tráfico.
• Puedes borrar la caché manualmente en Cloudflare, si has actualizado algo y quieres que todo el mundo vea la última versión de inmediato.
• En segundo plano, filtra el tráfico de spam y bots antes incluso de que lleguen a tu sitio, lo que significa menos quebraderos de cabeza por tu parte.

Plugins de precarga para usar en WordPress

Aquellos de vosotros que no seáis desarrolladores pero queráis que vuestro sitio WordPress cargue más rápido, podéis echar un vistazo a estos populares plugins que se encargan de todo el proceso de precarga por vosotros. Estas herramientas te permiten priorizar archivos importantes como fuentes, CSS y scripts, permitiendo una optimización de la velocidad de WordPress de alto nivel.

Algunos plugins de velocidad de WordPress que puedes probar son

Cohete WP

WP Rocket se encarga de la precarga automáticamente tras su activación. Las URL de tu página de inicio y del mapa del sitio se obtienen para generar versiones en caché. Además, como precarga las fuentes, están listas incluso antes de que la página empiece a renderizarse (mostrarse). No tendrás que pasar por complejas configuraciones, ya que está diseñado para dar resultados con una entrada mínima.

Perfmatters

Perfmatters te permite controlar exactamente qué archivos se precargan y cuáles no se cargan en absoluto. Así, puedes desactivar cosas como los scripts emoji, los estilos del editor de bloques en el frontend o Google Maps si no los utilizas. Uno de sus campos de precarga te permite añadir manualmente archivos específicos como fuentes personalizadas o CSS.

Limpieza de activos

Este plugin escanea cada página y te muestra una lista de todos los archivos CSS y JavaScript que se están cargando. Si es necesario, puedes desactivar los que simplemente no son necesarios (elementos como los scripts del formulario de contacto que aparecen en todas las páginas aunque el formulario sólo esté en la página Contacto). También puedes precargar manualmente archivos como tu hoja de estilos principal o una fuente personalizada que esté ralentizando la primera pintura (es decir, cuando los primeros píxeles visibles empiezan a cargarse en la pantalla).

Sugerencias de recursos previos a la fiesta

Pre Party te ofrece campos para añadir precarga, prefetch y otras instrucciones para el navegador desde tu panel de control de WordPress. Por ejemplo, puedes decirle al navegador que busque antes tu archivo de fuente principal o que prepare una imagen para cargarla antes de que sea visible. Es un plugin útil, especialmente si quieres optimizar cómo se cargan tus páginas, recurso a recurso.

Ganancias de rendimiento: Casos prácticos, resultados y qué esperar

Entre el gran número de agencias que han confiado en Cloudways para sus proyectos de WordPress, aquí tienes dos casos que destacan por el rendimiento superrápido de su sitio web y todas las ventajas que ello conlleva.

Casos prácticos

WPFlat™

Una agencia de WordPress con sede en Nigeria, WPFlat™, buscaba una solución de alojamiento fiable y escalable para acelerar los sitios web de sus clientes. Cloudways Hosting se hizo cargo del proyecto y permitió mejorar drásticamente el rendimiento de WordPress.

Los resultados han sido tremendos. Los sitios web WordPress de los clientes se volvieron 2 veces más rápidos, el tráfico aumentó un 20% y los tiempos de carga se redujeron un 50%. Cloudways aprovechó su plugin Breeze integrado para gestionar la precarga de la caché y la entrega de archivos, lo que le permitió adelantarse a sus competidores.

Medios Pioneros

La agencia de diseño web con sede en Tennessee, Pioneer Media, tenía problemas con el lento rendimiento de su sitio web y las largas tareas de mantenimiento. Se pusieron en contacto con Cloudways Hosting por su experiencia en la optimización de la velocidad de WordPress, y los resultados fueron increíbles.

¿Cuál es la prueba? 1 segundo. Eso es lo rápido que se cargan ahora las páginas de sus sitios web, cuando antes tardaban entre 3 y 6 segundos en cargarse. La velocidad mejoró 5 veces, y los márgenes de beneficio de Pioneer Media saltaron al 92% sólo con el alojamiento. Además, gracias al alojamiento gestionado en la nube de Cloudways, la precarga también se hizo sin esfuerzo, ayudando a que los activos críticos se cargaran más rápido y mejorando el recorrido general del usuario.

Reflexiones finales

El hecho es que muchos sitios de WordPress se cargan lentamente, no porque sean defectuosos, sino porque no se indica a los navegadores a qué deben dar prioridad. Esto dificulta la experiencia del usuario. Si la experiencia de usuario de tu sitio es negativa, no puedes esperar honestamente ningún buen resultado.

Es cierto que existen otras tácticas de optimización de la velocidad de WordPress, pero la precarga es una de las formas más directas e impactantes de mejorar la rapidez con la que tu sitio se muestra a los visitantes.

¿Estás pensando en utilizar la precarga para mejorar el rendimiento de tus sitios web WordPress? La buena noticia es que no necesitas saber código para utilizar el plugin Breeze de Cloudways. Ya está incluido en todos los sitios WordPress de Cloudways, así que puedes activarlo y ver los resultados sin tener que configurar nada manualmente.

Biografía del autor:

Atanu Sarkar, fundador y consejero delegado de Webskitters, tiene grandes conocimientos de análisis de datos, desarrollo empresarial y espíritu emprendedor. Anima a su equipo de Webskitters, una empresa nacional galardonada de diseño web y empresa de desarrollo web, para incorporar nuevas tecnologías e ir más allá de los límites definidos del diseño, el desarrollo y el marketing digital. Su naturaleza inquisitiva le impide ponerse límites, y eso es lo que le convierte en un emprendedor de éxito y en un gran líder.