WPO para lograr el 100% en Lighthouse y Pagespeed en WordPress

En el mes de mayo del 2021, sabemos que Google lanzará por fin el Page Experience Update, una actualización que lleva avisando desde hace bastante y desconocemos el impacto que tendrá, pero por lo general, cuando avisan con tanta antelación es porque el impacto será posiblemente grande.

En el post que hablé sobre este algoritmo, di algunos datos sobre este estudio y expliqué bastante por encima los pasos a seguir para acelerar tu web, pero en el de hoy me centraré principalmente en WordPress.

Me meteré en profundidad para daros los tips y mostraros cómo optimizar la velocidad de una web al 100% en Google Lighthouse, además de algunos trucos que me suelen funcionar bastante bien y que no conté en el post anterior.

El impacto de la velocidad en el marketing

Actualmente sabemos que la velocidad es un factor bastante relevante por diversos motivos, ya no solo a nivel de SEO que tiene cierta influencia (y va a tener más dentro de poco), también en la experiencia del usuario.

Velocidad en el SEO

El tener una web que carga más rápido, permite a Google rastrear muchas más páginas en menos tiempo.

Sabemos que Google limita el rastreo de una web a un tiempo variable (crawl-budget).

Si durante este tiempo le permite rastrear más páginas o pasar múltiples veces por las mismas, esto mejorará el posicionamiento en SEO del sitio.

Velocidad en la experiencia del usuario

En cuestión de experiencia de usuario, también tiene un impacto bastante alto.

A nadie le gusta quedarse esperando muchos segundos tras hacer clic en una de las páginas, para pasar a la siguiente. Muchas de las personas que finalmente no compran un producto, es por la lentitud del sitio y la mala experiencia que generan sobre el usuario.

Ya no solo eso, ¿cuántas veces has entrado en un sitio web, has tratado de clicar en un sitio y se ha desplazado todo e hiciste clic en otro sitio que no querías?

Esto es un claro ejemplo de mala experiencia del usuario y es lo que pretende evitar Google con la nueva actualización y con las Core Web Vitals.

Cómo optimizar tu WordPress al 100% de velocidad

De esto ya hablé en mi post sobre el Page Experience Update, qué pasos seguir si queríamos optimizar una web.

Esta vez os contaré el proceso que seguí yo y con el que logré el 100% en Google Lighthouse

Plugins innecesarios

Lo primero de todo es limpiar todos los plugins que no necesitemos dentro de nuestra web, para no sobrecargarla.

Cookies

Configurar correctamente las cookies, evitará que tengamos datos correctos sobre nuestros datos, pero también mejorará la carga de nuestra web, ya que impedirá que carguen los pixels de seguimiento.

En este caso, cookiebot es el único que he comprobado que funciona correctamente hasta la fecha.

Plugin de WPO Para WordPress

De los plugins que voy a nombrar ahora, os contaré más detenidamente un poco más abajo.

Personalmente uso WP-Rocket, ya que incluye todas las opciones que necesito para la carga asíncrona, minificación de ficheros, compresión,, cache, etc.

En este paso debemos activar todas las opciones menos la de caché.

Para las imágenes utilizo imagify, que es bastante buenoy me ofrece la posibilidad de cargar imágenes en formatos de nueva generación.

Por último utilizo plugin load filter, el cual me permite hacer carga selectiva de plugins.

Optimización del código

Para este punto, es necesario estar usando Google Page Speed y combinarlo con Coverage, una funcionalidad de Chrome para desarrolladores.

Para hacer esto, debemos acceder con botón derecho del ratón e inspeccionar, en el desplegable que se nos abrirá, debemos ir a los 3 puntos de la derecha, en More Tools, Coverage.

Desde aquí nos dará la opción de recargar la página:

Tras recargar la página, nos mostrará los ficheros que podemos optimizar, siendo la parte roja la que no se usa en dicha página y la parte en verde la que está en uso.

Si seleccionamos uno de los ficheros nos mostrará el código en rojo que no se usa en dicha página.

En este caso, para mi web que solo tenía 3 tipos de páginas distintas, lo que hacía era borrar código poco a poco y comprobar que luego todas las páginas y las funcionalidades eran correctas.

Es un proceso que tienes que ir poco a poco, pero no es necesario que limpies todo el código, con que elimines parte, llegará un punto en el que el error de optimizar código js y css en Google PageSpeed desaparecerá.

Entonces el proceso es eliminar código, comprobar que todas las páginas están ok en diseño y funcionalidad, pasar Pagespeed, y así sucesivamente.

Una vez deje de mostrarse el error, podemos continuar optimizando si queremos para mejorar más la velocidad, pro que no es necesario.

Precarga de fuentes

Esto corresponde más a la sección de WP-Rocket y configurarlo correctamente, pero es posible que algunas fuentes tengamos que agregar display=swap en el CSS o en la carga de esta en el <head>.

Optimizar base de datos

Este proceso nunca lo hice manual, siempre he tirado de plugins de pago. Se encarga de limpiar todo aquello que no usamos normalmente y se generan registros en la base de datos, haciendo más pesadas las consultas, como las versiones de los posts autoguardados, por ejemplo.

WP-Rocket tiene esta funcionalidad la cual puedes programar, pero conviene tener copias de seguridad a mano.

CDN

Con todo esto deberíamos tener toda nuestra web optimizada, pero si queremos además mejorar un poco más en SEO, podemos usar un CDN para mejorar aun más la velocidad, al final del post doy algunas recomendaciones sobre cual usar.

Lighthouse

Aunque lo principal para el próximo update son las Core Web Vitales, tengo sospechas que las métricas de Accesibilidad, SEO y Buenas prácticas, pueden llegar a tener cierto impacto, así que recomiendo también pegar un vistazo a las métricas con esta herramienta, y plantear hacer algunas mejoras también por aquí.

Otras opciones de WPO para WordPress

Lo bueno de WordPress es la gran comunidad que tiene detrás. Te permite encontrar muchos profesionales y productos para un montón de cosas, ya sean plugins, proveedores de hosting, templates, CDN o desarrolladores.

Os contaré algunos recursos bastante buenos que os ayudarán con el tema de WPO.

Plugins WPO WordPress

Estos son algunos de los plugins de velocidad que más uso en proyectos de WordPress, ya que suelen funcionar bastante bien.

W3TC

Es uno de los plugins de cache y WPO más usados y  es gratuito.

La dificultad de configuración del plugin es bastante alta y algunas opciones dan problemas, es por ello que suelo combinarlo junto con Autoptimize.

Autoptimize

Un plugin de cache más enfocado a trabajar con los ficheros e imágenes.

Tiene la ventaja de poder servir imágenes desde el CDN de shortpixel, pero el funcionamiento de la cache no es la mejor y el plugin en sí es bastante incompleto para mi gusto, generando algunos problemas en las funcionalidades, es por ello que lo suelo combinar con W3TC.

Wp-Rocket

Plugin bastante completo de WPO de pago.

Es uno de mis plugins preferidos de velocidad ya que es de los que mejor funcionan.

Es cierto que tienes plugins gratuitos, pero en mi experiencia, no hay color en los resultados y la facilidad de uso del plugin.

Imagify

Plugin para optimizar imágenes y servirlas en formato de nueva generación webp. Tiene versión gratuita limitada y de pago ilimitada.

Se puede combinar junto a Wp-Rocket. Te permite comprimir las imágenes e incluso cargarlas directamente en formato webp, algo que se nota bastante en la velocidad de carga de la web.

Smush

Plugin para optimizar imágenes. Tiene versión gratuita y de pago.

Lo he usado alguna vez la versión gratuita, pero no la de pago. Actualmente es uno de los mejores plugins de optimización de imágenes para WordPress.

Plugin Load Filter

Te permite hacer carga condicional de plugins por tipología de página o página individual. Gratuito.

Este plugin lo considero indispensable si quieres optimizar la velocidad de carga de tu web, ya que te permite seleccionar que quieres cargar y en qué momento.

Proveedores de hosting

Ya hemos visto algunos de los plugins más comunes para optimizar nuestra web en WordPress, pero no debemos olvidar que también un buen proveedor de hosting es una parte importante de la velocidad.

Raiola

Raiola es uno de los proveedores de hosting especializados en WPO para WordPress, ofrecen un servicio de atención al cliente muy bueno, y la calidad del hosting está muy bien.

SiteGround

SiteGround también es una buen proveedor de hosting. La única pega es el precio, que es más caro de lo normal, pero el precio se paga porque son buenos. También se especializan mucho en servicios WordPress.

Amazon Web Services

Uno de los mejores servicios de hosting, pero es de los más caros y requiere muchos conocimientos técnicos, no es como los proveedores de hosting tradicionales.
Lo bueno también es que ofrecen múltiples herramientas desde la plataforma.

Templates y constructores para WordPress

Por lo general, si quieres un tema rápido en WordPress, lo más recomendable es que tires por un diseño minimalista y muy limpio, con pocos elementos de carga, aun así existen algunas opciones en cuanto a temas bastante interesantes.

Sevenserp

Me lo recomendó mi compañero Bruno Ramos Lara y funciona bastante guay la verdad.

El tema va muy enfocado a opciones para gente que se dedica a crear y montar nichos en WordPress.

Generate Press

Otro tema que también me recomendó Bruno y funciona bastante bien a nivel de velocidad.

Tiene versión gratuita y de pago, además cuenta con un constructor de bloques que a pesar de ser algo complejo de usar al principio, luego te da bastante flexibilidad a la hora de construir tus páginas.

Constructores visuales para WordPress

A la hora de crear nuestra web en WordPress, también es bastante importante saber con qué constructor vamos a trabajar, ya que influye en la velocidad de carga de nuestra web.

Todos los plugins extra que usamos para potenciar estos constructores no son nada recomendables, ya que con el tiempo, dejan de tener mantenimiento y dan bastantes problemas.

Sobre este tipo de plugins, hace tiempo realicé un experimento con más gente  (tengo pendiente un post hablando en más profundidad de ello jeje), pero os hablaré un poco de los resultados obtenidos en el experimento.

Este experimento consistía en replicar una web dentro de un WordPress. Todos estaban en un mismo servidor y usábamos las mismas imágenes, con la excepción de que no podíamos usar plugins de WPO ni tocar nada de código (pero sí podíamos instalar plugins que nos ayudaran como extensiones del constructor).

En la parte de diseño si que pudo influir algo sobre los conocimientos del constructor y el tiempo disponible para replicar la página, pero es un buen punto de partida para orientarnos.

Divi

En este caso tenemos a el constructor de Divi y Divi con el template.

Divi

El constructor de Divi por sí solo, presentaba limitaciones de funcionalidad (estando dentro de las peores) y dificultades para la parte del diseño móvil.

Era de los constructores que menos peticiones hacía, pero no era de los más rápidos, era de los peores en cuanto a accesibilidad, mejores prácticas, velocidad y el SEO.

Divi + template

A nivel flexibilidad para adaptarse al diseño y la funcionalidad, destacó bastante, pero era de los que más peticiones hacía a ficheros y lo mismo en cuanto a resultados para Google Lighthouse que sin el template.

Avada

Avada fue uno de los que mejores resultados obtuvo en cuanto valoración general. La parte de funcionalidad y diseño fue la puntuación más alta, además de sacar puntuaciones altas en las métricas de SEO y Accesibilidad.

En la métrica de Lighthouse de mejores prácticas fue de las peores y en performance se quedó en la media tirando a la baja.

A nivel de peticiones de ficheros, estaba en la media.

Cornstone

Ofreció bastantes buenos resultados en diseño de escritorio y funcionalidad, pero quedó en la media en diseño para móviles.

Mostró buenos resultados en accesibilidad y performance, pero en mejores prácticas fue también de las peores.

En la valoración SEO obtuvo una media alta.

Visual Composer (WP Bakery)

Aquí nos encontramos de nuevo con dos verticales.

WP Bakery

A nivel de diseño fue de los que peores resultados obtuvo, al igual que en performance, pero si consiguió mejores puntuaciones para la parte de accesibilidad, buenas prácticas y SEO.

A nivel de peticiones no destacó, se encontraba dentro de la media.

WP Bakery + tema

A nivel de diseño de escritorio y funcionalidad, destacó bastante, pero en el diseño para escritorio no destacó tanto y quedó dentro de la media.

A nivel de métricas de Google Lighthouse, fue de las que mejores puntuaciones obtuvo de forma genérica.

Elementor

Destacó en el diseño, siendo una de las réplicas más fieles para móvil y escritorio, pero en funcionalidad, la puntuación fue baja (siendo de las más bajas).

En métricas de Google Lighthouse, en general bien, exceptuando el performance, donde fue la más baja, además de ser el tema que más peticiones cargaba.

Gutemberg

Con este constructor, creo que todos os podéis hacer una idea. Gutemberg, para poder trabajar bien con él, necesitas tocar código sí o sí.

Así que a nivel de diseño y funcionalidad fue algo desastre por esas limitaciones, aunque en lighthouse destacó bastante.

CDN’s para WordPress

Ya hemos visto todos los puntos importantes a nivel de WordPress, pero nos queda una parte que muchas veces dejamos de lado, siendo bastante importantes para el tema de velocidad, es el caso de los CDN’s que suelen estar algo infravalorados en el SEO.

CloudFlare

Ofrece un servicio exclusivo con su propio plugin para WordPress, siendo un precio mensual al alcance de todos.

También cuenta con una versión gratuita que podemos usar, pero tienes bastantes menos ventajas que la versión de pago.

Funciona bastante bien y es fácil de usar.

CDN-Rocket

Wp-Rocket también cuenta con un servicio de CDN que puedes combinar junto al plugin. No ofrece tantas opciones como CloudFlare, pero es más económico.

Si recomendaría si nos lo podemos permitir, tirar por CloudFlare aunque sea algo más caro, ya que nos da muchas más opciones.

NitroPack

Este plugin no lo he probado, pero tiene bastante buena pinta. El servicio es caro, pero ofrece bastantes opciones de configuración de WPO.

CloudFront

El CDN de Amazon Web Services, uno de los mejores CDN’s que puedes encontrar, aunque requiere conocimientos técnicos.

Conclusiones

El proceso de optimizar en velocidad una web no es un proceso sencillo, requiriendo de conocimientos técnicos de desarrollo o pasar por el rediseño y la estructura de toda la web, de tal forma que sea viable toda la optimización de esta.

A lo largo del post hemos podido observar diferentes opciones que nos ayudarán a mejorar la performance de nuestra web, pero si necesitas ayuda de profesionales, contáctanos y realizaremos este proceso por ti.