¿Cómo hacer que una web en WordPress cargue muy rápido?

Publicado por en

Hace unos días hablé de lo importante que es que una web cargue rápido. Olvidar este aspecto puede tirar por tierra tu inversión, ya que si tarda mucho perderá reputación entre los buscadores y entre tu público.

Siento que en ese artículo me quedé algo cojo (figuradamente, ¡toco madera!). Y es que al estar especializado en WordPress no puedo quedarme para mí cómo hacer que una web en WordPress cargue más rápido. Es más, la rapidez es una de las principales características de las web magnéticas.

Voy a ir más allá de decirte que uses un plugin que te haga todo el trabajo. Quiero profundizar y que entiendas de manera muy sencilla qué es lo que hay que hacer y por qué hay que hacerlo.

Empecemos

Bueno, no empecemos… Aún. Si quieres entender bien todo lo que te voy a explicar, te recomiendo que antes leas por qué es importante cuidar la velocidad de carga, artículo en el que te cuento qué factores la ralentizan.

¿Ya lo has leído? Venga. Ahora sí, ¡empecemos!

En términos de velocidad, WordPress tal cual se instala es un sistema peor que otros que requieren menos operaciones para cargar cada página. Pero sin lugar a dudas su facilidad de manejo hace que compense con creces.

Además, de manera relativamente sencilla es posible compensar este inconveniente.

Sí, se pueden crear webs en WordPress que carguen en menos de 2 segundos, como las que suelo hacer. Requieren un trabajo extra pero te aseguro que dedicarle tiempo al WPO (Web Performance Optimization) ahorra muchos dolores de cabeza.

Y si tu competencia no lo hace, más puntos que tendás sobre ella.

Vamos al grano. Para conseguir que una web en WordPress cargue muy rápido, debes seguir, al menos, estos pasos:

Elegir un buen hosting

Da igual los plugins de caché que uses y todo el resto del trabajo de optimización que hagas. Si el hosting es malo, ¡no hay nada que hacer! Si te esfuerzas en el resto per obvias esta parte, sería como tener una ligera y sofisticada bicicleta eléctrica… Con ruedas cuadradas.

Del hosting que contrates dependerá:

  • La capacidad de procesamiento. Al usar WordPress necesitas un servidor PHP que lea e interprete estos ficheros. Cuanta más CPU y más RAM tenga tu alojamiento, más rápido se harán las operaciones. Y más operaciones podrá realizar por minuto, por lo que soportará más tráfico. La capacidad de procesamiento también se ve afectada por la tecnología empleada el servidor. No es lo mismo que use Apache a que use Litespeed, más rápido según datos contrastados.
  • El camino que tenga que seguir la información para servirse. Si el datacenter de tu servicio de alojamiento está lejos de donde se muestra el contenido, la información tendrá que viajar mucho para cargarse. A pesar de que las redes son cada vez más potentes, esto ralentiza el tráfico. Si tienes visitantes en muchos sitios, te convendrá complementar el hosting con un CDN.
  • La disponibilidad de la web. Si el servicio es malo, se satura y su web sufre caídas, estarás tirando el dinero y perdiendo la oportunidad de ganar más.
  • Por último, el espacio de almacenamiento. Siempre debe ser suficiente para tus archivos y, si lo usas, el e-mail.

Debes buscar proveedores que se adapten a tus necesidades y a tus posibilidades. Para tener una web en WordPress rápida te recomiendo hostings que:

  • Ofrezcan alojamientos optimizados para WordPress. Hacen que determinados procesos se ejecuten más rápido.
  • Que usen discos sólidos (SSD) para almacenar los datos; son bastante más rápidos que los discos duros tradicionales.
  • Que tengan el datacenter lo más cerca posible de la zona de la que pretendes tener más tráfico.
  • Sean honestos y no ofrezcan planes ilimitados.

Si quieres conocer mis preferencias, para webs destinadas al público español me gustan los servicios que ofrecen Raiola Networks y Siteground.

Buscar temas y plugins ligeros

Muchos (demasiados) temas y plugins de WordPress están muy mal optimizados y hacen un excesivo número de peticiones que, como te he contado antes, ralentizan la carga de la web.

Por no hablar que hay algunos que abusan de las llamadas a base de datos, que sobrecargan el procesamiento de PHP o que generan un código HTML barroco. Sobrecargado y más difícil de interpretar para el navegador.

A priori podría parecer que estos temas y plugins recursófagos son los apestados de WordPress o aquellos que triunfan por ser baratos. Pero nada más lejos de la realidad. ¡Muchos son muy populares e incluso se venden bastante caros!

Así que a veces no queda más remedio que investigar un poco, examinar webs que los usen o consultar con especialistas en WPO.

Los temas más ligeros que más me gustan y que mejores características tienen son Divi (que incluye su maquetador visual propio) y Hello con el constructor visual Elementor y Elementor Pro. Desde hace un tiempo esta segunda fórmula es mi favorita por su increíble versatilidad.

Evitar sobrecargar la web con cosas innecesarias

Antes hablaba del código HTML barroco. Pero es que también hay webs con diseño barroco, más sobrecargado que un tren de Tokio en hora punta. Por si no sabes de lo que hablo, ve este vídeo no apto para claustrofóbicos:

https://www.youtube.com/watch?v=AoPpFfXwx_o

Para mejorar la velocidad de carga de tu web en WordPress tienes que poner en ella sólo lo que necesites. Si te puedes ahorrar cualquier elemento, aunque sea una imagen, ¡hazlo! Tus visitantes (y potenciales clientes) te lo agradecerán y los buscadores te premiarán.

Hace un tiempo, Raúl González (un conocido consultor de WPO para WordPress) aconsejó que cada página pese como máximo 1 MB. Al principio pensé que se había flipado. Pero se puede conseguir… Sin renunciar a un diseño elegante y atractivo.

Optimizar bien las imágenes

Conseguir que una página pese tan poco sin renunciar a poner imágenes requiere que optimices todas bien. El objetivo es que ocupen lo mínimo posible sin perder (mucha) calidad.

Lo primero es que tengan el tamaño adecuado. ¿De qué te sirve una imagen de 2560px de ancho si sólo se va a mostrar a un ancho de 300px?

Lo segundo es que estén bien comprimidas, pero sin perder demasiada calidad. Esto se consigue usando entre un 60% y un 70% de compresión en ficheros JPG y sustituyendo los ficheros PNG por SVG. O empleando el novedoso formato WebP de manera adecuada.

Como todo esto supone mucho trabajo, existen plugins que automatizan el proceso. El más conocido es Imagify. Pero mi favorito es Robin Image Optimizer. Una de las características que más me gustan de ambos es que muestran ficheros WebP cuando el navegador es compatible.

Carga diferida (Lazy Load) de imágenes

Imagínate una página que tiene 30 imágenes a las que se va llegando poco a poco. Por ejemplo, que tiene 5 imágenes en los primeros 3 minutos de lectura, otras 5 en los siguientes 3 minutos de lectura y así.

¿Qué sentido tiene que se descarguen todas las imágenes a la vez, al cargar la página, si encima es posible que muchas se queden sin ver?

Con la carga diferida (o leisilout en ínglish), se cargan las imágenes (u otros elementos como iframes) justo cuando son vistas. De esa manera se reduce el número de peticiones innecesarias y la transferencia de archivos innecesarios.

¡Chachi!, ¿verdad?

Desactivar los plugins que no se usan

Muchas veces tenemos la manía de probar un plugin y, aunque finalmente lo descartemos, lo dejamos activo.

Es bastante posible que esos plugins estén consumiendo recursos que ralentizan la carga. Aparte del procesamiento que requieren, pueden generar nuevas peticiones. Tenerlos habilitados es como tener el aire acondicionado de un coche activado con la salida del aire tapada. O como llevar un abrigo de plumas doblado en el brazo. ¡No entorpece ni nada!

Reducir el número de peticiones

A no ser que programes una web en WordPress personalizada, esto es algo que debes hacer con un plugin.

Como te conté en el artículo sobre por qué es importante que una web cargue rápido, algo que ralentiza la carga son las peticiones.

Las peticiones son llamadas a archivos externos al HTML que se está mostrando en el navegador y suelen ser:

  • Imágenes.
  • Hojas de estilo CSS.
  • Ficheros JavaScript.
  • Archivos de fuentes tipográficas.

Al ser WordPress un sistema modular, algo de lo que suele pecar es de tener, entre temas y plugins, muchos archivos CSS y JavaScript que se alojan en el propio servidor. Pero que aún así hacen que la web sea una pedigüeña de primera categoría.

La mejor manera de reducir este tipo de peticiones es combinar todo el contenido CSS y JavaScript en un único archivo. Y, de paso, minificarlo (minimizarlo).

En este análisis de carga de la página de diseño web magnético se puede ver que sólo hace 18 peticiones y tarda 1 segundo en cargar.
En este análisis de carga de la página de diseño web magnético se puede ver que sólo hace 18 peticiones y tarda 1 segundo en cargar.

¿Qué es eso de minificar un archivo?

Cuando se programa en cualquier lenguaje, para que el código sea legible se suelen dejar más espacios y saltos de línea de los que realmente se necesitan para interpretarse. Esos espacios y saltos de línea hacen que el tamaño del archivo aumente.

El proceso de minificado elimina ese contenido que realmente sobra para hacer un archivo más pequeño. De esa manera, un fichero tardará menos en ser descargado que el mismo fichero con su tamaño original.

Limitar las Google Fonts

Aunque las fuentes de Google son un gran recurso para insertar tipografías en una web, suelen ser peticiones externas lentas de cargar. Hay maneras de optimizar su carga. Pero soy radical y apuesto por eliminarlas por completo. Y en su lugar subir las tipografías que se van a usar al mismo hosting.

Sí, no reduzco el número de peticiones, pero al menos dejan de ser externas para ser internas y se sirven a la misma velocidad del resto de la web. ¡Cuanto más se quede en casa, mejor!

Además, Elementor Pro tiene un maravilloso sistema de gestión de tipografías personalizadas que hace que sólo se carguen en las páginas en las que van a ser usadas. Por ejemplo, si en una página no uso una tipografía en negrita, no carga el fichero de esa tipografía en negrita.

Crear una caché

Mucha gente cree que cachear las páginas es lo único que hay que hacer para que una web en WordPress cargue muy rápido. Pero, como has visto, no es más que una parte más de este trabajo de optimización.

Vamos a ver en qué consiste.

Cada vez que se visualiza una página en WordPress, el servidor tiene que procesar el código PHP de WordPress, del tema y de los plugins y hacer chorrocientas llamadas a la base de datos para crear el código HTML que se va a mostrar en el navegador.

Aparte de que el proceso toma tiempo, si la web tiene mucho tráfico simultáneo, el servidor se puede sobrecargar. Esto quiere decir que primero va más lento y luego, si no se descarga, se puede caer.

Crear una caché de las páginas lo que hace es guardar un fichero HTML con el contenido tal y como se mostraría recién procesado por el servidor PHP. De tal manera que en lugar de procesar todo para cada visitante, simplemente se muestra el fichero almacenado en caché.

Esto es como cocinar para toda la semana. No hace falta que un miércoles hagas una fabada, sino que sólo tienes que calentar la que hiciste el domingo.

Para crear una caché de cada página hay que usar un plugin (más abajo te cuento). Los hay de 2 tipos:

  • Preconstruyen la caché de una sola vez. Crean una copia en HTML de todo el sitio web en un momento dado, de tal manera que todo el sitio web cargue rápido para todos los visitantes. Tiene el inconveniente de que durante el momento de la construcción de la caché el servidor trabaja mucho (sobre todo si la web es grande) y de que seguramente cachee páginas que no van a ser vistas.
  • La construyen cuando un usuario visita una página. Cada archivo HTML cacheado se crea cuando una página se visita por primera vez. Es decir, el primer visitante se traga el tiempo de procesamiento y de creación de la caché pero reparte el proceso de cacheado del sitio en el tiempo y sólo se cachean páginas que van a ser vistas. Tiene la desventaja de que si ese primer visitante es un robot de un motor de búsqueda, ese motor de búsqueda creerá que la web es lenta.

Plugins para hacer que una web en WordPress cargue más rápido

Como ves, son muchas las cosas que hay que hacer para que WordPress cargue muy rápido (y ojo, que la mayoría de estas tareas hay que hacerlas también en webs más ligeras como las programadas directamente en HTML).

Por suerte, como para todo en este ecosistema, hay plugins bastante buenos que facilitan optimizar la velocidad de carga de WordPress. Si bien los hay especializados para cada tarea, lo mejor es usar un «todo en uno» o un «casi todo en uno».

Tener WordPress lleno de plugins dificulta el mantenimiento y es innecesario cuando hay algunos que se encargan de muchas tareas.

El Rey de los plugins de optimización de WordPress

El más recomendado por expertos en WPO de todo el mundo es WP Rocket. Y por mi experiencia les doy la razón.

Es muy completo y, lo mejor, muy sencillo de utilizar. A diferencia de otros que le hacen competencia, es poco invasivo y su precio merece muchísimo la pena.

Como puedes ver en su lista de características, hace todo lo que te he dicho y algunas otras cosas importantes como habilitar gZip.

Si usas un servidor LiteSpeed…

Los propios creadores del servidor LiteSpeed han creado un plugin gratuito de optimización pensado para su servidor llamado LiteSpeed caché.

Se puede usar en cualquier otro servidor (Apache, NGiNX, etc), pero sólo sobre LiteSpeed ofrece todas sus características. Entre ellas la opción de caché.

Para disfrutar de la caché en otros servidores que no sean LiteSpeed puedes contratar su servicio de CDN CUIC.Cloud que, al menos ahora, es gratuito hasta 20 GB de transferencia mensual.

Este plugin te hace de todo. Incluso optimiza imágenes y las sirve automáticamente en WebP si el navegador lo permite. Pero debo decir que, si bien uso este plugin en muchos sitios, aún no he experimentado la función de optimizar imágenes.

Los resultados de la optimización no tienen nada que envidiar a los de WP Rocket y yo la verdad es que estoy muy contento con él.

¿Qué es eso del CDN?

A lo largo del artículo he mencionado en diversas ocasiones la palabra CDN. Son muy útiles sobre todo cuando los visitantes de una web vienen de bastantes partes del mundo. Y también si el datacenter de tu proveedor de hosting no está tan cerca de la mayoría de tus visitantes como debería.

CDN quiere decir Content Delivey Network. En español, Red de reparto de contenidos. Básicamente, lo que hace un CDN es replicar los contenidos más pesados de una web (como imágenes y vídeos) en varios servidores a lo largo del mundo.

Mapa de la red de servidores de BunnyCDN, uno de los múltiples proveedores que ayudan a que una web en WordPress cargue muy rápido en todo el mundo.
Mapa de la red de servidores de BunnyCDN, uno de los múltiples proveedores de este servicio

Imagínate que alguien que vive en Sidney entra a una web alojada en un datacenter de Madrid. En lugar de hacer que todos los ficheros viajen miles y miles de kilómetros, aumentando el tiempo de carga, descarga los más pesados desde el datacenter que el CDN tiene en Sidney.

Por lo tanto, que los ficheros se repartan por el mundo es un proceso que sólo se hace una vez y a partir de ahí las transferencias son casi locales.

En resumen

Se puede hacer que una web en WordPress cargue muy rápido. Sólo hay que saber hacerlo y dedicarle un tiempo extra que, sin lugar a dudas, merece mucho la pena.

Para optimizar la carga de estas webs hay que hacer mucho más que configurar un plugin de caché. Pero el trabajo puede ser muy sencillo si se sabe lo que se hace y se usan las herramientas adecuadas.

Y sólo me queda darte un consejo final. Si no entiendes mucho de todo lo que te he hablado, es mejor que contactes con un profesional que te ayude a optimizar tu web.

Te costará dinero, pero créeme que te ahorrarás mucho tiempo. Todo lo que te he enseñado es algo que me ha tomado mucho tiempo aprender y controlar bien, a pesar de mis conocimientos en informática y de desarrollo web.

Deja un comentario