Claves para mejorar el SEO y la velocidad de carga de WordPress

Optimizar la velocidad de carga de WordPress es una tarea fundamental a la hora de diseñar una página web en la que entran en juego diferentes factores.

Por ese motivo, en este post te quiero explicar paso a paso cómo optimizar la WPO y cómo afecta la velocidad de carga al SEO.

Para explicar todo el proceso completo y hacerlo de la forma más sencilla posible, he dividido el artículo en diferentes apartados específicos.

Además, para la parte relacionada con el SEO he invitado a Jaime Sanchis, SEO freelance que ha aceptado con valentía mi gran reto de explicar cómo afecta la velocidad de carga al posicionamiento.

De modo que, si quieres mejorar la velocidad de carga de tu WordPress, te invito a ponerte cómodo y a seguir los consejos que te damos Jaime y yo.

¿Por qué debes mejorar la velocidad de carga de WordPress?

Reducir tiempo de carga de WordPress es muy importante por dos grandes motivos:

Por una parte, para mejorar la experiencia del usuario que visita nuestro sitio web. Es cierto, siempre vas con prisas y, si accedes a un sitio web y ves que no carga rápido, automáticamente cierras la página y te vas, ¿verdad?

Por otra parte, es fundamental para SEO. La velocidad de carga de un sitio web afecta de manera importante a su posicionamiento en Google (más abajo te lo explicamos).

Qué factores afectan en la velocidad de carga de WordPress

Existen varios factores que afectan en la velocidad de carga de WordPress. Algunos de ellos son:

• El alojamiento. Trabajar con un buen proveedor de hosting para WordPress va a determinar la velocidad de carga de tu WordPress.
• Los plugins que tengas instalados. Los plugins son maravillosos, ¿verdad? Te ayudan a mejorar tu web o blog en cuanto a diseño, funcionalidades, opciones, etc, pero ocupan espacio y este es un factor que también afecta en la velocidad de carga. A mayor número de plugins instalados, mayor tiempo de carga.
• El peso de las imágenes. Ésta es una de mis grandes luchas con los clientes. Si necesitas una fotografía para un post y su anchura máxima es de 800px, ¿porqué subirla con un ancho de 2500px y sin comprimir? Por lo tanto, el tamaño de las imágenes también afecta. Si sigues leyendo este post, te enseñaré a comprimirlas de forma efectiva.
• Las herramientas externas que tienes vinculadas en tu sitio web también consumen datos y, por lo tanto, reducen el tiempo de carga. Pop ups, formularios, píxeles de seguimiento, etc, realizan una serie de llamadas a sus servidores propios y eso hace que la velocidad de carga de tu WordPress sea mayor.

Herramientas para medir la velocidad de carga de WordPress

Antes de empezar el proceso de optimización de WordPress, lo primero que debes hacer es un análisis de la velocidad de carga de tu sitio web.

Para ello, existen varias herramientas y páginas que te ofrecen todos los datos que necesitas para optimizar tu sitio web.

#1 Pingdom

Pingdom es una herramienta que analiza el tiempo de un sitio web. Utiliza más de 70 centros para probar y verificar lás páginas analizadas.

Con Pingdom puedes medir el tiempo de carga, el rendimiento y las interacciones de tu WordPress con el objetivo de mejorar la experiencia del usuario.

Algunas de sus funciones son: analizar los tamaños de los archivos, los tiempos de carga y otros detalles de cada elemento de una página web (archivos HTML, JavaScript y CSS, imágenes, etc.), clasificar y filtrar esta lista de diferentes maneras, trazar tu historial de rendimiento o hacer pruebas desde múltiples ubicaciones.

#2 GTmetrix

GTmetrix es otra herramienta muy completa para analizar la velocidad de tu sitio y así hacerlo más rápido.

Sus resultados te dan una idea de la situación de tu WordPress en cuanto a velocidad de carga. Además, te proporciona recomendaciones útiles sobre cómo optimizarlo.

Algunos de sus resultados más destacados son: PageSpeed Score, YSlow Score, tiempo de carga total, tamaño total de la página o peticiones a otros servidores externos.

#3 PageSpeed

PageSpeed es una herramienta de Google que mide el rendimiento de un sitio web tanto en dispositivos móviles y como en versión de escritorio.

Su puntuación va de 0 a 100 puntos. Lógicamente, cuanto más alta sea, mucho mejor.

#4 Test my site

Test my site también es una herramienta de Google que trabaja con la tecnología de PageSpeed Insights y está enfocada específicamente a la optimización en móviles.

Las puntuaciones que arroja deben ser consideradas puntos importantes de mejora y valorarse en relación con los objetivos del sitio web.

Algunas de sus métricas son: tiempo de carga u optimización para móviles, presentados todos de forma muy visual y ordenados a través de puntuaciones que van de 0 a 100.

Plugins para reducir el tiempo de carga de WordPress

Ahora que ya sabes cuáles son los factores que afectan en la velocidad de carga de una web y las diferentes herramientas para medir su velocidad, quiero a hacer un repaso por los tipos de plugins que puedes utilizar si quieres mejorar la velocidad de carga de WordPress.

Plugins de caché

Los plugins de caché se encargan de crear y almacenar una copia de los archivos HTML de un sitio web para cargarlos desde ahí y aumentar el tiempo de carga.

Es decir, almacenan una copia de tu web y, cuando el navegador solicita su carga, el plugin sirve esos archivos que tiene almacenados.

En el mercado de los plugins de caché para WordPress existen varias opciones. Estas son algunas de ellas:

#1) WP Rocket

WP Rocket es, en mi opinión, el mejor plugin en su modalidad, por eso lo he puesto en primer lugar.

Se trata de un plugin de pago en el que merece la pena invertir, pues su objetivo principal es acelerar la velocidad de carga de tu sitio web.

Sus funcionalidades más destacadas son: el almacenamiento en caché, la precarga de la memoria caché, la carga de imágenes “bajo demanda” y la compresión de los archivos estáticos.

A lo largo de estos años, he probado los diferentes plugins de caché y WP Rocket es con diferencia el que mejores resultados ofrece.

De todas formas, si no tienes recursos para invertir en un plugin de pago, aquí te dejo algunas opciones gratuitas.

#2 WP Super Cache

WP Super Cache se encarga de crear archivos HTML estáticos de tu sitio web. Una vez se haya creado la copia, tu servidor servirá ese archivo en vez de procesar los scripts PHP de WordPress, que son mucho más pesados y consumen una gran cantidad de recursos.

#3 WP Total Cache

W3 Total Cache es un plugin destinado a mejorar el SEO y la experiencia del usuario al aumentar el rendimiento de tu página, reduciendo los tiempos de descarga mediante funciones como la integración de la red de entrega de contenido (CDN).

#4 WP Fastest Cache

Como el resto de plugins, WP Fastest Cache crea archivos HTML estáticos de tu sitio web.

Cuando se procesa una página, se utilizan php y mysql. Por lo tanto, el sistema necesita RAM y CPU.

La configuración de este plugin es muy sencilla. No necesitas modificar el archivo .htacces, pues lo hace automáticamente.

#5 BJ Lazy Load

BJ Lazy Load no es exactamente un plugin de cache, pero lo he querido incluir en esta categoría porque la carga de imágenes bajo demanda hace que la velocidad del sitio web sea más rápida y ahorre ancho de banda.

Este plugin reemplaza todas las imágenes publicadas y el contenido de iframes con un marcador de posición, y carga el contenido a medida que el usuario va deslizando la página.

Dado que funciona con iframes, también cubre vídeos incrustados de YouTube, Vimeo, etc. También puedes cargar otras imágenes e iframes en tu tema, usando un filtro simple.

¿Cuándo recomiendo el uso de este plugins?

En mi experiencia, me ha funcionado muy bien en blogs que utilizan muchas fotos en sus entradas y páginas, como puede ser un blog de moda, cocina o lifestyle, donde las imágenes priman por encima del resto de contenido.

Plugins para limpiar la base de datos en WordPress

Todo sitio web creado con WordPress (la versión .org) lleva asociada una base de datos en la que se van almacenando los datos relacionados con nuestra web.

Esta base de datos también debe ser optimizada y limpiada cada cierto tiempo para que no almacene "basura" que haga que el sitio web cargue lento.

Para realizar esta tarea de mantenimiento de la base de datos hay varios plugins. Te los detallo a continuación:

#1 Optimize Database after Deleting Revisions

Este plugin sirve para optimizar la base de datos de WordPress tras eliminar las revisiones de entradas y páginas.

Seguro que no sabías que, cada vez que revisas un post o una página, WordPress guarda una copia completa, ¿verdad?

Esto quiere decir que, si revisas una entrada tres veces, WordPress guarda automáticamente la misma entrada tres veces al completo, lo que hace que se ocupe espacio triplicado en la base de datos.

Por lo tanto, este plugin elimina todas esas copias que WordPress almacena por defecto para no consumir tanto espacio en la base de datos.

Es posible configurarlo para que se limpie por días o por el número máximo de revisiones recientes. En mi caso, lo tengo configurado para que haga limpieza para revisiones que superen los cinco días de antigüedad.

#2 WP-Optimize

WP-Optimize es una plugin muy eficaz a la hora de limpiar automáticamente la base de datos de tu WordPress para que funcione con la máxima eficiencia y cargue de la forma más rápida.

Las funciones más interesantes de este plugin son: optimizar las tablas de la base de datos, limpiar todas las revisiones de entradas, limpiar todos los borrados automáticos y los posts desechados, y eliminar los mensajes de spam y los comentarios de la papelera o que no hayan sido aprobados.

¡Es el que yo uso y recomiendo!

Plugins para optimizar y comprimir imágenes

Como he comentado antes, uno de los principales factores que afectan a la velocidad de carga de WordPress es el tamaño y peso de las imágenes que contiene el sitio web.

Por ello, siempre recomiendo instalar algún plugin que se encargue de redimensionarlas y comprimir su peso.

En concreto, para esta tarea utilizo el plugin Smush Image Compression and Optimization o más conocido como Smush.

Smush

El objetivo de este plugin es comprimir las imágenes de tu sitio web una vez las has subido.

Optimizar las imágenes es fundamental para mejorar el rendimiento de WordPress y acelerar su proceso de carga.

En ese sentido, WP Smush se encarga de redimensionar, optimizar y comprimir todas las imágenes que subas a tu sitio web.

Es uno de mis plugins imprescindibles a la hora de diseñar una web o blog en WordPress.

Si quieres conocer otros plugins y herramientas, te recomiendo pasar leer este post en el que te doy más opciones para optimizar imágenes:

Plugins para minificar el código en WordPress

Por último, existen un tipo de plugins cuyo objetivo es minificar el código que genera WordPress, los plugins, las plantillas o maquetadores.

Por ejemplo:

body {
 background-color: #000000;
 color: #fff;
 font-family: 'Arial, sans-serif;
 font-size: 20px;
 line-height: 1.7;
}

Y el código minificado quedaría de la siguiente manera:

body{background-color:#000000;color:#fff;font-family:'Arial,sans-serif;font-size:20px;line-height:1.7;}

#1 Autoptimize

Autoptimize es un plugin se encarga de agregar, minimizar y almacenar en caché scripts y estilos.

Además inyecta CSS en el encabezado de página de forma predeterminada, mueve y difiere los scripts al pie de página y minimiza el HTML.

Sus opciones extra te permiten sincronizar JavaScript no agregado, eliminar el núcleo emoji cruft de WordPress u optimizar Google Fonts.

#2 WP Super Minify

WP Super Minify combina, minimiza y almacena en caché archivos JavaScript y CSS en línea bajo demanda para agilizar la carga de la página.

Con este plugin las fuentes HTML, JavaScript y CSS de tu sitio web estarán más comprimidas. Su tamaño será más pequeño y mejorará así la velocidad de carga de tu página.

Para comprobar si el plugin está funcionando correctamente, puedes consultar el código fuente de tu sitio o presionar Ctrl + U en el teclado.

#3 Better WordPress Minify

Better WordPress Minify te permite combinar y minificar los archivos CSS y JS para mejorar el tiempo de carga de tu página.

Este plugin utiliza la biblioteca PHP Minify y se basa en el sistema de encriptación de WordPress en lugar del búfer de salida, que respeta el orden de los archivos CSS y JS, así como sus dependencias.

Como comprimir las imágenes en WordPress para reducir su peso y tamaño (mi método)

Comprimir las imágenes antes de subirlas a tu sitio web es fundamental, pues es uno de los recursos que más datos suelen consumir y debes optimizarlas si quieres mejorar la velocidad de carga de WordPress.

A continuación, te explico el proceso que utilizo yo y me ofrece resultados satisfactorios (seguro que hay muchos más):

#1 Photoshop

Lo primero que hago, antes de subir mis imágenes a la librería de imágenes de WordPress, es trabajarlas en Photoshop.

El programa tiene una opción llamada Guardar para web, que te permite elegir el tamaño y formato de la imagen que quieres guardar específicamente para subirla a tu sitio web.

#2 Compressor.io

Una web las he guardado para web usando Photoshop, voy a compressor.io y las vuelvo a comprimir.

Realizado este segundo paso, las imágenes ya estarían preparadas para ser subidas a WordPress.

#3 Plugin Smush

Por último, las imágenes se vuelven a optimizar con WP Smush, plugin que tengo instalado y configurado para que las fotografías se compriman automáticamente cuando las subo.

Asimismo, he preparado un vídeo en el que te enseño cómo funcionan estas tres herramientas para optimizar imágenes y mejorar la velocidad de carga de WordPress.

Hasta aquí la parte relacionada con plugins y optimización de imágenes para mejorar la velocidad de carga de WordPress. Ahora te dejo con Jaime, quien nos explica todos los detalles sobre cómo afecta la WPO en el SEO.

Factores de velocidad de carga a evaluar para SEO

Cuando se elabora una auditoría o examen inicial para un proyecto SEO, existen unos puntos comunes a analizar en todos los proyectos web. Uno de ellos es el WPO y dentro de éste, nuestra querida velocidad de carga.

Lo primero que debemos hacer, es elaborar un diagnóstico general inicial sobre la velocidad de carga. Según las características del tipo de proyecto web, debemos evaluar principalmente estos puntos:

• Tiempo de descarga. El tiempo de descarga es un indicador directo e importante a evaluar sobre la velocidad de descarga. Es obvio que si una web tarda mucho en cargarse, el tiempo del usuario no es infinito y terminará por abandonar antes de navegar por nuestro sitio web. Si el tiempo de descarga es mayor a 3 segundos, debemos empezar a preocuparnos.
• Número de peticiones HTTP. Otro indicador a considerar es el número de peticiones HTTP. Cuantos más archivos tenga tu sitio web, más peticiones HTTP se realizan. Esto influye en el aumento del tiempo de carga y sobre todo en la experiencia de usuario.
• HTTP2. Conviene comprobar si el sitio web está actualizado con HTTP2. Si se ha actualizado el anterior protocolo HTTP 1.1 y se ha pasado a HTTP2, los beneficios en UX y velocidad de carga son innumerables.
• Latencias / Ancho de banda. No sólo debemos diagnosticar factores internos. La latencia influye en el tiempo que tarda en cargar una web. Los archivos HTML, CSS, JS e imágenes se pueden descargar con varias conexiones de forma paralela, pero cada conexión tiene un coste de tiempo entre que se hace la petición y se recibe el primer byte. Por tanto, la latencia es un punto clave a tener en cuenta.
• Peso de los archivos. Debemos de medir los archivos de tamaño grande, ya que afectarán de forma importante en los dispositivos móviles y el desktop. Muchos archivos CSS y JS tienen caracteres innecesarios (saltos de línea, espacios u otros) que influyen en el peso de nuestra web y en su velocidad de carga.

Una vez hemos medido y comprobado los indicadores generales que inciden en la velocidad de la carga, se pasa al siguiente paso. Para ello se suelen examinar todos los indicadores desde dos perspectivas: Front-End y Back End.

Indicadores de velocidad de carga en Front-End de la web para SEO

Desde el punto de vista Front-End, para evaluar la velocidad de carga debemos de examinar estas posibles causas:

• Archivos CSS y JS. ¿Cuantos tipos archivos existen? ¿Cómo están ubicados en HTML? ¿Se pueden combinar los archivos JS y CSS? ¿Se pueden minificar los archivos JS y CSS?).
• Tamaño y formato de imágenes y media files en diseño web. ¿Cuánto espacio ocupan? ¿De qué tipo son (PNG, JPG, GIF, etc.)?
• Compresión (archivos y formatos). Teniendo en cuenta el tamaño de los  archivos ¿Se han comprimido el tamaño todos los archivos? ¿Se utiliza la tipología de archivos con menor peso?.
• Acciones de precarga. ¿Se ha realizado acciones de precarga ? ¿Se han incluido etiquetas de precarga (prefectch o preloads)?
• APIs de terceros. ¿Existen APIS de terceros (Ej: Google Maps)? ¿Para que se utiliza la API? ¿Beneficia a la experiencia de usuario? ¿Afecta al rendimiento de web?

Indicadores de velocidad de carga en Back-End de la web para SEO

También se deben diagnosticar posibles causas que puedan afectar a la velocidad de carga web en el Back-End, como por ejemplo:

• CMS utilizado. Comprobar el tipo de CMS utilizado (WordPress, Joomla, Drupal, Prestashop, etc) y sus características específicas.
• Examen del código PHP. Examinar la calidad y optimización del código PHP que pueda influir en la carga de y navegación de la web.
• Examen de la base de datos:
  • Examinar las consultas a la base de datos y formas de mejorar las consultas a la misma.
  • Buscar fórmulas de optimización a las mismas.
• Plugins:
  • Comprobar si hay un plugin que dificulte la carga de la web.
  •  También se puede comprobar la utilidad de los mismos, su rendimiento y los pros/contras de su uso.
• Tipo de servidor:
  • Medir tiempo de respuesta del servidor (herramientas como ServerTest).
  • Chequear el lugar del servidor teniendo en cuenta nuestros usuarios.
  • Evaluar el tipo de  IP (compartida, dedicada, etc).
  • Comprobar si el servidor hace mal uso de los recursos.
  • Estudiar acelerar su respuesta instalando otro software (Ej: Cambiar Apache por NGINX o LiteSpeed). Estudiar cambios en la tecnología (p.e. discos SSD en lugar de HDD).
• Tipo de hosting. Hay que evaluar si la web está alojada en un hosting compartido, servidor cloud, o bien si alojas tu web en un servidor cloud libre. Hay que ver la conveniencia del hosting con el proyecto web.

¿Por qué la velocidad de carga afecta mi estrategia SEO-SEM?

La pregunta de este artículo es clara: ¿Por qué la velocidad de carga afecta o es importante en mi Estrategia SEO-SEM. ¿Cuáles son las consecuencias de tener una velocidad de carga determinada?

La velocidad de carga web es un factor importante en el posicionamiento orgánico SEO. Lo llamaríamos clave. Todo especialista SEO-SEM tendría que tomarlo como un deber más a la hora de optimizar una web.

Los datos estadísticos y las conclusiones sacadas de ellos así lo corroboran:

• El 47% de los usuarios esperan que una página cargue en menos de 2 segundos.
• El 14% cambia del ecommerce web si la página tarda en cargar.
• El 40% de los usuarios se va de una página que tarda más de 3 segundos en cargar.
• El 64% de los buyer-personas que no están satisfechos, van a otro sitio para su próxima compra.

Con toda esta información y la anterior podemos sacar varias conclusiones que nos servirán como respuesta a la pregunta de este apartado:

• La velocidad de carga afecta directamente al porcentaje de conversiones y al número de ventas.
• Influye en la satisfacción y la experiencia del usuario en la navegación de la propia web.
• Un rendimiento óptimo en la velocidad web reducirá el porcentaje de rebote e incrementará el número de páginas vistas en la navegación.
• Puede favorecer un retorno del usuario al sitio web y su posterior fidelización.
• La velocidad de carga impacta directamente en la valoración de Google Adwords sobre la experiencia de usuario en la Landing Page.
• Ayudará a disminuir los costes de anuncios y mejora la posición de los anuncios.
• Más vale prevenir que curar. Desde que Google anunció en 2013 que los sitios web con mala optimización podrían sufrir penalizaciones en los resultados de búsqueda, la velocidad de carga es un índice más a optimizar.

Esperamos que con todos estos consejos que te damos en este post puedas mejorar tanto el SEO como la velocidad de carga de WordPress.