Acelerar WordPress es el objetivo de cualquier webmaster que tenga su sitio creado con este CMS. Más que objetivo, debería ser obsesión: todos sabemos que la velocidad de carga es uno de los principales factores SEO.

Y también sabemos que las imágenes son normalmente lo que más ralentiza la carga de una web.

Lo primero que hacemos todos para saber si nuestro sitio carga rápido, es ir a Google Page Speed Insights.

Lo que pasa es que de un tiempo a esta parte, Page Speed nos recomienda utilizar formatos de imágenes de próxima generación. ¿Tú también lo has visto?

 Según ese pantallazo, utilizar los dichosos formatos de próxima generación permitiría reducir el tiempo de carga en 2,4 segundos: ¡nada menos!

¿Has revisado tu página con Page Speed Insights? ¿Te ha salido esa recomendación? Pues sigue leyendo, que vamos a ver como ponerla en práctica.

¿Qué son los formatos de imagen de próxima generación?

Son formatos de archivo que mejoran la calidad y la compresión de las imágenes.

En este post sobre optimización de imágenes puedes leer algo más sobre los formatos, entre otros consejos. Como te explico ahí, los formatos más conocidos y más utilizados son JPEG y PNG.

Pero existen formatos más modernos y más eficaces que esos, entre ellos, el JPEG 2000, el JPEG XR o el  WebP. Las imágenes en estos formatos se cargan mucho más deprisa, consumiendo menos recursos y menos datos móviles.

¡Estupendo! Estarás pensando que lo que tienes que hacer es utilizar esos formatos a partir de ahora para acelerar tu sitio web, ¿no? No es tan sencillo.

El problema es que no todos los navegadores son compatibles con todos los formatos de imagen. Y, por mucho que se acelere la carga de tu página, si los usuarios no ven las imágenes, sería un desastre, ¿verdad?

Verdad.

Necesitamos encontrar una forma de utilizar estos formatos de nueva generación para acelerar WordPress de forma que las incompatibilidades no nos den problemas. ¡Vamos a ello!

Acelerar WordPress con el formato WebP

De todos los formatos que he mencionado, el WebP es «el más mejor». Es compatible con más navegadores que cualquier otro formato de próxima generación. Y es compatible con Chrome, que es el navegador más utilizado en España.

Además, el formato WebP es el que ofrece mejores resultados de compresión con mayor calidad, al menos por el momento. Así que vamos a centrarnos en este formato para mejorar la velocidad de carga de nuestra web WordPress.

A estas alturas, seguro que te estás planteando dos dudas razonables:

1. ¿Tengo que quitar las imágenes de mi WordPress y volverlas a subir en ese formato?
2. ¿Y qué pasa cuando el usuario utiliza un navegador no compatible con WebP, como Safari?

Para tu tranquilidad, NO tienes que subir otra vez todas las imágenes. Existen plugins para convertirlas al formato WebP.

Y esos plugins son capaces de ofrecer la imagen en formato WebP cuando el navegador es compatible, y en el formato original cuando no lo es. El que yo utilizo se llama Imagify, y vamos a ver como funciona paso a paso.

Un agradecimiento y 2 «exenciones de responsabilidad»:

Antes de seguir adelante, tengo que decir tres cosas:

Lo primero, agradecer a Alejandro de la agencia SEO Cuaderna la recomendación de Imagify. Alejandro es un crack del SEO que siempre me hace unas recomendaciones súper útiles.

De hecho estoy preparando un  post con todas las herramientas SEO que me va enseñando, a ver cuando puedo publicarlo. ¡Gracias, Alejandro! <3

Lo segundo, aclaremos también que en esto no hay panaceas ni soluciones universales. Imagify ha sido creado por los desarrolladores de WP Rocket, y funcionarán genial juntos.

Si utilizas otro plugin de caché, te recomiendo que te quedes con lo de utilizar el formato WebP para acelerar tu sitio, pero necesitarás hacer pruebas para encontrar la mejor solución para tu caso. A mí me funciona con Autoptimize.

Existen otros plugins de conversión al formato WebP (como EWWW Optimizer, por ejemplo). Busca lo que te funcione mejor a ti.

Y por último, quiero recordarte, querido lector, que mi perfil no es muy técnico. Como habrás observado si me sigues, lo hago (casi todo) a base de plugins y herramientas, la mayoría gratis. El código me da «tembladera».

Si tú eres técnico y detectas algún error u omisión importante en este artículo, me encantará que me escribas un comentario, ¡así mejoramos el post, que es para todos! 🙂

Como utilizar Imagify para acelerar WordPress

Como siempre, lo primero que hay que hacer es instalar el plugin. Es este, puedes encontrarlo fácilmente en el buscador.

Instálalo, actívalo y ve a «Configuración».  Empieza por crear la clave API gratis. Para ello tendrás que crear una cuenta.

Crear cuenta en Imagify e integrarla en tu WordPress:

Lo primero que ves es el botón «Crear una clave API gratuita».

Haz clic sobre él y se abrirá una nueva pestaña donde podrás introducir tu email y contraseña. Haz clic en «SIGN UP».

A continuación recibirás un email para verificar tu cuenta. Tienes que abrirlo y hacer clic sobre el enlace que te envían.

Se abrirá la pestaña para que inicies sesión en Imagify. Introduce de nuevo el email y contraseña del principio.

Una vez que accedas, haz clic sobre el icono redondo de tu perfil (arriba a la derecha) y se abrirá un desplegable, como el que ves en la imagen.

Selecciona «</> API – Integration» y se mostrará tu clave API. Cópiala haciendo clic sobre el icono del portapapeles.

Ve a WordPress, a la configuración del plugin Imagify y pégala en el espacio que aparece, tal y como se muestra en la imagen.

¡Listo! Ya puedes empezar a trabajar con  Imagify. Como verás, no solo sirve para convertir tus imágenes a WebP, también para optimizar tus imágenes.

Configurar Imagify

Las configuraciones posibles de Imagify se agrupan en tres partes:

• Ajustes generales
• Optimización
• Opciones de Visualización

En ajustes generales puedes seleccionar el nivel de optimización que desees: normal, agresivo o ultra.

Como ves en la imagen, también podrás seleccionar si deseas optimizar todas las imágenes que subas, hacer backup de las imágenes originales y mantener los datos de tus imágenes.

En el siguiente apartado se presentan las opciones del formato WebP. Marca la casilla «Mostrar imágenes en formato WebP en el sitio», y selecciona una de las siguientes opciones.

La última parte es para mostrar el menú de Imagify en la barra de herramientas. Selecciónalo o no según tus preferencias, yo no lo he marcado…

Por último, haz clic sobre «Guardar cambios e ir a optimización masiva» para que el plugin empiece a trabajar.

La versión gratuita de Imagify te permite optimizar 25 MB de imágenes al mes. Debería ser suficiente 😉 No sé cuántas tienes tú, yo he utilizado Imagify en una página con aproximadamente 900 imágenes, ¡y he podido optimizarlas todas con la versión gratis!

El proceso tardará un rato en completarse. Cuando termine, vuelve a comprobar la velocidad de carga de tu sitio con «Page Speed Insights».

Si todo ha salido como debe, observarás que ha mejorado tu puntuación, tanto para móviles como para ordenador. Además, la recomendación » utiliza imágenes en formatos de nueva generación» ya debería haber desaparecido 🙂

Como sé si las imágenes se están mostrando en formato WebP:

Fácil 🙂

Haz clic sobre una imagen de tu sitio y, manteniéndo el clic, arrástrala hacia tu escritorio.

Después haz clic con el botón derecho del ratón para ver las «Propiedades». 

¿Qué tal te ha ido? ¿Ha funcionado bien? ¡Cuéntame en los comentarios del post 🙂