100 en Google PageSpeed Insights con WordPress

Google PageSpeed Insights es una herramienta que mide la optimización del código de tu sitio web para la velocidad de carga. Des que existe esta herramienta son muchos los que se han puesto nerviosos, ya que una valoración baja en este test influye en el posicionamiento SEO de forma negativa.

En éste enlace puedes hacer tus tests: Google PageSpeed Insights.

Pero el problema de tener una valoración insuficiente en este test de Google va mas allá del SEO. Se ha comprobado que un sitio web que tarde más de 2 segundos en cargar empieza a perder una cantidad de visitas importante.

Con los teléfonos móviles el problema es mas agudo; si el usuario tiene poca cobertura, la velocidad de carga se reduce aún mas, así que conseguir los 2 segundos en una conexión normal no es suficiente. Cuanto mas rápido cargue un sitio web, mejor.

Preparando el terreno para un 100 en Google PageSpeed Insights con WordPress

Conseguir un 100 en Google PageSpeed Insights depende de varios factores e incluso es necesario cambiar algunos hábitos de desarrollo web. A continuación vamos a preparar el terreno en nueve pasos antes de empezar a mirar los tests:

1. Themes de WordPress para Google Page Speed

El theme (o plantilla) que utilices es uno de los factores mas importantes. Hay miles y miles de themes de WordPress. Algunos son profesionales y tienen el código bien optimizado, pero otros, aunque son bonitos por fuera, por dentro reina el caos. Personalmente, después de haber trabajado con muchos de ellos durante años, sólo recomiendo tres themes para conseguir una buena puntuación en Google Page Speed:

1. Genesis Framework: es el theme de WordPress mas profesional y es de lo mas flexible si tienes conocimientos básicos de PHP y de CSS.

2. Generatepress: este theme es la alternativa a Genesis Framework para los que no tienen ningún conocimiento de PHP o de CSS.

3. Los “Twenty” originales de WordPress: si eres blogger estos temas son perfectos, aunque si quieres montar una página web corporativa o una tienda online, se te quedarán cortos.

Si tu web ya está montada con un theme diferente de los mencionados y no lo quieres cambiar, sigue el tutorial igualmente. Quizá no consigas un 100 en Google PageSpeed Insights, pero seguro que aprenderás cosas que ayuden a mejorar la puntuación de tu sitio de WordPress.

2. Reduce los Plugins en WordPress

Utiliza cuantos menos mejor. Cada proyecto requiere el uso de mas o menos plugins (Woocomerce, Bookings, Multilingual, etc.), pero en general, si utilizas mas de 15, es que te estas liando demasiado.

3. Evita animaciones

Por otro lado, evita animaciones cómo slideshows o popups. Metete esto en la cabeza: cuantos mas efectos tenga tu web, mas tardará en cargar.

4. Optimiza las imágenes

Instala el plugin para WordPress Lazy Load by WP Rocket. Luego te vas a Ajustes -> Lazy Load, le das a la opción “Imagen” y guardas cambios.

A parte de esto, si trabajas con un buen theme y utilizas los tamaños de imagen predeterminados de WordPress, no tienes mas que hacer aquí. En caso contrario tendrás que reducir y comprimir las imágenes. Puedes leer el artículo sobre cómo optimizar imágenes para el SEO.

5. Aléjate de los Page Builders para WordPress

Ten en cuenta que la mayoría de los usuarios que se conectan a Internet lo hacen des del teléfono móvil, dónde los page builders como Divi, Backery, Site Origin, Elementor, etc, ya no son necesarios. Además, con Gutenberg, el nuevo editor de WordPress 5.0, puedes crear diseños muy buenos sin necesidad de liarte con page builders.

6. Minimiza las Google Fonts

Si utilizas tipografías de sistema (Arial, Helvetica, Times, Courier, Georgia, etc), mucho mejor. Si utilizas Google Fonts no te pases con los pesos y las familias. Lo ideal son tres como máximo:

Dos para los párrafos: regular y bold
Una para los títulos

El problema de carga de las Google Fonts suele salir en Google Page Speed. Para solucionarlo tienes dos opciones:

1. Instalar las fuentes localmente de forma manual o utilizando la versión premium del plugin de WordPress Google Fonts Typography.
2. Instalar el plugin de WordPress Autoptimize y en Ajustes / Extra, activar la casilla activar y cargar las fuentes de forma asíncrona con webfont.js.

7. Modérate con los Iframes, Vídeos, Google Maps y Recaptchas.

Ten en cuenta que estos widgets suelen hacer tu sitio web más lento. Utilízalos con moderación y no los pongas todos en la misma página.

8. Modérate con las librerías de pictogramas

Si necesitas utilizar muchos pictogramas puedes instalarte una librería cómo Font Awesome, pero si lo evitas mejor. No te instales una librería entera de pictogramas sólo para poner los iconos de Facebook, Instagram y Youtube en el footer. En este caso utiliza mejor imágenes comprimidas.

Si controlas de CSS aquí tienes un recurso que en algunos casos te puede ser útil: crear iconos con CSS.

Material Design Icons es otro sitio de dónde puedes obtener iconos sin tener que instalar librerías, en este caso, en formato PNG o SVG.

9. Configura Autoptimize

Autoptimize es un plugin de WordPress. Es verdad que hemos recomendado minimizar el uso de plugins, pero si quieres una buena puntuación en Google Page Speed, este merece la pena. Sirve para comprimir el código toda tu página web, tanto la plantilla cómo los plugins, haciendo que tu sitio web cargue mucho más rápido.

En cuanto a los ajustes de Autoptimize:

En la pestaña JS, CSS & HTML, suelo activar las siguientes casillas:

Optimize JavaScript Code? — Si
Optimize CSS Code? — Si
Optimize HTML Code? — Si

En la pestaña Google Fonts activo la siguiente casilla:

Combine and load fonts asynchronously with webfont.js

El resto, lo dejo todo por defecto.

! Importante: si te pones a toquetear, puede que activando algunas opciones de Javascript te deje de funcionar algún plugin (especialmente popups, lightbox, animaciones, etc), así que después de hacer ajustes comprueba que todo sigue funcionando. En caso contrario haz pruebas activando / desactivando opciones.

Realizando el test de Google Page Speed

Después de los ajustes anteriores, se ha realizado el test con una web muy básica de ejemplo utilizando los mejores themes de WordPress. El contenido es una entrada del blog, con dos imágenes de muestra.

URL: http://speedtest.nibeda.com/hello-world/

Genesis Framework

GeneratePress

Twenty Nineteen

*Optimizado con el plugin Autoptimize

Como puedes ver, los resultados son muy buenos en los tres casos. Conseguir el 100 en Google PageSpeed Insights ha sido posible gracias a unos hábitos concretos de desarrollo web. Evidentemente estamos hablando de un test realizado con una web muy sencilla y unos themes muy buenos. Puede que si tu proyecto es muy complejo no tengas un 100 de valoración, pero si sigues los hábitos de desarrollo que hemos comentado anteriormente, seguro que tendrás buenos resultados.