Cómo mejorar la velocidad de carga en WordPress

Si quieres que tu WordPress sea un verdadero bólido de última generación este es tu artículo. Te voy a mostrar cómo mejorar la velocidad de carga de tu página e intentaré hacerlo del modo más sencillo posible. Pero eso sí, si tienes alguna duda siempre puedes preguntarla en los comentarios del final del artículo y te responderé bien rápido.

Este es un artículo para entender, así como mejorar, la velocidad de carga en WordPress. Si no tienes suficientes conocimientos, o estás falto de tiempo, siempre es recomendable contratar un mantenimiento técnico de WordPress a una empresa externa.

Comprender la velocidad de carga en WordPress

Este artículo surgió a partir de un podcast en el que se me invitó a participar. Estoy hablando de la versión premium del podcast del maestro del SEO Alex Serrano. Si has escuchado el podcast puedes revisar este artículo a modo de chuleta y complemento.

Para poder optimizar el tiempo de carga de forma consistente debemos entender una serie de puntos que explico a continuación. Si quieres una solución rápida podemos ir a la sección el mejor plugin para optimizar velocidad carga WordPress o incluso, si te decides por una solución rápida y de la mejor calidad, contáctanos para prepararte un presupuesto :).

Qué puede perjudicar la velocidad de carga de WordPress

Como ya sabremos, la velocidad de carga es una de las características web vitales que influyen en el posicionamiento en Google. Una vez que sepamos qué es lo que realmente ralentiza nuestro WordPress podremos saber cómo evitarlo o, al menos, optimizarlo. Podemos encontrar un gran número de motivos que perjudican el tiempo de carga, como: Las actualizaciones, cantidad de plugins, sliders, maquetadores, carga de archivos externos. Sigue leyendo para descubrir más:

Actualizaciones

Sí ,ya lo sé. Esto es lo que dice todo buen parroquiano, pero no podía hacer este artículo sin mencionarlo.

Para contar con una web bien optimizada debemos contar con WordPress, temas y todos los plugins actualizados. Pero no solo esto, sino que también es muy importante tener PHP actualizado en el servidor. Y si usamos librerías externas también.

Esto no solo garantizará el buen funcionamiento de la web, si no que también evitaremos muchos agujeros de seguridad.

Cantidad de plugins

Insisto mucho en este punto. Pero es algo que no se suele tener en cuenta y provoca muchos problemas (Sí, problemas) en todas las webs creadas por usuarios no avanzados. Y es que tener muchos plugins crea agujeros de seguridad, incompatibilidades de código y ralentizan la web. Y te preguntarás cómo evitar plugins en WordPress, lógico. Pues solo puedo darte dos soluciones: no contar con esa funcionalidad o desarrollar plugins personalizados para WordPress.

Sliders

Los Sliders, qué bonitos… Pero ¿realmente los necesitamos? A ver, pensémoslo bien. Los usuarios en internet solo quieren obtener lo que buscan rápidamente. Nadie (o casi) se va a parar a mirar las imágenes pasando automáticamente.

Los sliders son los grandes asesinos de la velocidad en WordPress, y tampoco es que sean una funcionalidad indispensable para el 99.9% de los proyectos. Así que si tienes uno plantéate si realmente lo necesitas.

Widgets

El uso de Widgets en WordPress cargará CSS que podríamos evitar. Por ejemplo, si estamos usando el tema Generatepress y creamos el contenido del footer directamente en el archivo footer.php, nos evitará la carga del CSS «generate_style». Así que, como siempre, la personalización supera en rendimiento a las funcionalidades por defecto.

Maquetadores

Los archiconocidos maquetadores visuales de WordPress: qué sencillos de usar, cuántas funcionalidades, qué bien nos quedan las webs con ellos…

Desde una perspectiva optimista podemos resumir los maquetadores visuales en 2 tipos: los rápidos y los “navaja suiza”. Pero no es oro todo lo que reluce, desde una perspectiva realista los 2 tipos son: los lentos y los limitados.

Los maquetadores lentos suelen ser los más usados por la cantidad de funcionalidades con las que cuentan. Los maquetadores limitados son los que cuentan con una velocidad considerable pero nos limitamos a unos diseños “precocinados”.

Carga de archivos externos

La carga de archivos externos es, sin duda, el mayor problema al que nos enfrentamos al optimizar el tiempo de carga. Y es que casi todos los elementos, plugins y funcionalidades externas llaman a archivos que necesitan de: llamada al servidor, recepción, envío, carga…

Cercanía del servidor

La cercanía del servidor es un factor determinante en cuanto a velocidad de carga. Es decir, si tu servidor está en Guarromán, Jaén, a un usuario de Jaén le cargará más rápido que a otro de la Guayana Francesa. Y esto no es más que por la situación geográfica.

CDN

CDN (de sus siglas en inglés) no significa más que Red de Distribución de Contenido. Y como su nombre indica, una CDN es una red de servidores a lo largo de todo el planeta donde se hace una copia de tu web (o de parte del contenido). Entonces, dependiendo de la localización del usuario la llamada será a un servidor u otro. Esto puede ser muy beneficioso para la velocidad de carga si contamos con un proyecto de alcance internacional.

Comprobar la velocidad de una página en WordPress

Si hemos llegado hasta aquí ya deberíamos entender de dónde pueden venir los problemillas de velocidad de carga. Y bueno, tenemos que ser pacientes ya que debemos entender cómo medir la velocidad de carga para poder optimizarla. Y eso quiero explicaros en esta sección:

Core Web Vitals

Las Core Web Vitals son unas unidades de medida establecidas por Google para conocer el rendimiento de una web. Desde el 2021 son unos valores que debemos tener en cuenta si queremos posicionar en Google. Os recomiendo echar un ojo a las definiciones dadas por Google en este enlace.

Si contáis con un plugin TOC (Table Of Contents) en vuestro WordPress es muy probable que estéis sufriendo errores CLS, podéis echarle un ojo a la solución que ofrecemos en el artículo sobre ese tema.

Herramientas de medición de velocidad de carga

Existen un gran número de herramientas que nos permiten analizar la velocidad de carga de forma más o menos detallada. Si somos usuarios avanzados tengo que hacer especial mención de las Devtools de los navegadores con tecnología chromium. Para este artículo me voy a centrar en 2 herramientas basadas en Lighthouse:

• PageSpeed Insights: Herramienta proporcionada por Google que nos muestra un buen número de valores entre los que quiero destacar las Core Web Vitals, el índice de velocidad y la capacidad de diferenciar de una métrica para móviles y otra para ordenadores de escritorio
• GTMetrix: Una herramienta que nos permite analizar una web desde servidores en diferentes localizaciones, ver un gráfico en cascada para conocer la velocidad de carga de cada elemento y, entre muchos otros valores, ver de forma clara las Core Web Vitals

Optimizar velocidad de carga en WordPress

Ahora sí, ya que conocemos toda la teoría vamos a la práctica:

Desarrollo personalizado en WordPress

Está claro que si queremos tener una web realmente rápida tendremos que evitar el uso de muchos plugins, como los maquetadores, y saber cómo personalizar WordPress. Hay empresas como Webheroe que se han especializado en la creación de WordPress personalizado con buenos precios, y manteniendo el panel de control y todas las compatibilidades, para que el cliente pueda gestionar la web sin problema alguno.

Caché

Cuando entramos en una web estamos haciendo una petición a su servidor desde nuestro buscador, para después recibir una respuesta y pintarla en nuestro buscador. Si entendemos estos 5 puntos es muy fácil de entender lo que es la caché: buscador->petición->servidor->respuesta->buscador

Cuando siempre se realiza la misma petición ¿no sería más fácil tener la respuesta ya almacenada en el servidor o incluso en el navegador? Pues eso es lo que hace la caché, almacena los elementos estáticos de la web en el servidor y/o en el navegador del usuario final. Claro, para el caso del navegador se almacenarán los datos tras la 1a visita.

Para tener una buena caché hay varias formas de hacerlo de forma avanzada, pero en este artículo me centraré solo en los plugins de WordPress:

Existen muchos plugins de este tipo, algunos de pago y otros gratuitos o incluídos con el servidor. No me voy a centrar en ninguno pero sí voy a decir qué debería proporcionar, como mínimo, un buen plugin de caché:

• Cache de navegador
• Capacidad de exclusión de secciones para el correcto funcionamiento de la web
• Limpieza de bases de datos
• Forzado https
• Minimizar el CSS
• Minimizar el JS
• Minimizar el HTML
• Optimizar las fuentes

Imágenes

Las imágenes son los elementos que suelen pesar más en todas las webs. Es por esto que debemos darle una prioridad considerable. Para una buena optimización de las imágenes deberemos:

• Los archivos de imagen deben estar en las proporciones correctas ¿De qué sirve subirlas a 1200px si las vamos a mostrar a 600px? Solo para ralentizar la web
• Usar el formato correcto PNG o JPEG (con transparencia o sin ella)
• Comprimir todas nuestras imágenes. Para esto existe un gran número de herramientas. Mi favorita es tinyjpg
• Tras haber realizado todos los pasos anteriores podremos instalar un plugin que convierta las imágenes al formato de nueva generación WEBP. Este plugin, bien configurado, tiene la capacidad de convertir a WEBP y, además, mostrar este formato solo en navegadores compatibles. En el resto se seguirán mostrando en JPEG o PNG
• Nuestras imágenes también deben contar con ciertos atributos HTML para la correcta y optimizada carga de la web:
  • srcset y sizes: Estos atributos suelen estar por defecto actualmente con WordPress. Sirven para cargar una imagen u otra dependiendo del ancho de la pantalla
  • loading=»lazy»: Esto hará que las imágenes no se carguen hasta estar visibles en pantalla
  • rel=»preload»: Si queremos que las primeras imágenes que aparecen en nuestra web se carguen antes tendremos que usar este atributo. Ya que si no lo hacemos podremos experimentar problemas de LCP (Largets Contentful Paint – Web Vitals). Este atributo no aparece por defecto en WordPress a día de hoy

No podíamos hablar de la optimización de imágenes sin mencionar los archivos SVG. Son archivos de código para que nuestro buscador los interprete y cree imágenes en vectores. Estos archivos tienen la gran ventaja de que son muy ligeros y permiten mostrarse en cualquier tamaño sin perder calidad o pixelarse. El problema con el que nos encontramos es que WordPress no permite la subida de SVG por defecto. Si quieres aprender más sobre los archivos SVG debes leer permitir subir imágenes SVG a WordPress.

HTML

El HTML es el esqueleto de nuestra web. Cuantos más elementos tiene una web, más tiempo tardará en cargarse. Eso sí, existe el truquillo de minificación del HTML para aligerar un poco la velocidad de carga. Muchos plugins de caché suelen contar con esta funcionalidad.

CSS

El CSS se encarga de los estilos de la web, la estética. Como ya he mencionado más arriba, los plugins suelen cargar un archivo CSS externo, además de los cargados por el mismo WordPress. Puedes leer este artículo sobre cómo eliminar archivos CSS en WordPress.

Un punto a tener en cuenta es minificar el código CSS. Muchos plugins de caché suelen incorporar esta funcionalidad. Pero si tenemos código CSS incrustado en el HTML podremos usar una herramienta manual como este CSS minifier.

También podemos añadir CSS adicional en WordPress o personalizarlo al 100%, lo que iría un paso más allá en cuanto a optimización.

Javascript

El código JavaScript es lo que da dinamismo (movilidad e interacción) a una web. Estos archivos, al igual que los CSS, provocan un retraso en la carga de la web. En muchos casos podemos evitarlos o incluso seleccionar en qué páginas cargarlos y en qué páginas no. Se hace del mismo modo que con los archivos CSS y lo podemos ver en el artículo mencionado un poquito más arriba.

Quitar jQuery Migrate

WordPress carga jQuery de forma nativa. Esto quiere decir que cada vez que alguien entre a tu web se va a cargar este código, con el correspondiente impacto en la velocidad. Este archivo sirve para ayudar con las actualizaciones de jQuery, hacer compatible el jQuery usado en los plugins con el cargado por WordPress, etc. Es una herramienta que, a veces, es muy útil. Pero no siempre. Existe un modo para evitar su carga. Añadamos el siguiente código en nuestro functions.php:

Eliminar jQuery Migrate en WordPress

function webheroe_eliminar_migrate( $scripts ) {
    if ( ! is_admin() && ! empty( $scripts->registered['jquery'] ) ) {
        $scripts->registered['jquery']->deps = array_diff(
            $scripts->registered['jquery']->deps,
            [ 'jquery-migrate' ]
        );
    }
}
add_action( 'wp_default_scripts', 'webheroe_eliminar_migrate' );

Una vez hayamos eliminado el archivo Migrate de la carga en WordPress debemos borrar la caché y comprobar que todo funciona correctamente. Si vemos que hay algún error podremos solucionarlo borrando el código de functions.php.

Consultas a la base de datos

Como ya he explicado más arriba, las consultas a las bases de datos también generan un impacto en la velocidad de carga de una web, sobre todo cuando la misma base de datos no se limpia regularmente. Existen algunos plugins que permiten borrar y/o limpiar las tablas de la base de datos. Aunque lo más recomendable es hacerlo de forma manual. La tabla options de WordPress es la que suele almacenar más basurilla por la instalación de plugins.

Gzip

Este es un sistema de compresión de datos que hace que la carga de nuestro WordPress sea más rápida, al comprimir los archivos antes de enviarlos desde el servidor. Existe un gran número de plugins de caché que permiten habilitar esta opción. Para usuarios avanzados existen un par de líneas de código que se pueden añadir al .htaccess.

Cuál es el mejor plugin para optimizar la velocidad de carga en WordPress

WP Rocket es el plugin que, según ellos mismos dicen, es el mejor del mundo en optimización de rendimiento. Es un plugin de pago y, a día de hoy, el precio es de 44€ al año para tenerlo en una sola web.