Hace unos días estuve optimizando el tiempo de carga de mi web, de este blog y, sin ser especialista en el tema (lo mío ahora es analítica y GTM), conseguí subir más de 30 puntos en Google Page Speed, tanto para PC como para móvil. Llegando por fin a 91 en PC, mi nota más alta. Y lo mismo en Weg Page Test, todo verde! solo el First Byte Time está más flojo, cosa que espero cambiar al migrar a un hosting serio…

Os cuento cómo lo hice

Estos consejos concretos son para un blog hecho en WordPress, pero cada sitio web es diferente, así que lo que me haya funcionado a mí, no tiene por qué servirle a todo el mundo. Aun así, si le puede ayudar a alguien genial :)

Pasos para optimizar WPO en WordPress de forma sencilla

• Instalar y configurar el Plugin W3 Total Caché. Es bastante complejo, tanto que ésta es la primera vez que me ha funcionado (sin cargarte el sitio web al minificar JS y CSS). Pero es que sus resultados son muyyy notables y se encarga de toda la parte técnina (caché, compresión, …).  Vale la pena!

Para minificar JS me ha funcionado esta configuración:

Comento especialmente el paso anterior de Minify, porque puedes romper tu web casi sin darte cuenta si configuras minificar todos los JavaScript sin saber muy bien lo que andas haciendo. En concreto, la opción Minify no me ha servido con el plugin Contact Form 7, ya que los envíos de formulario dejaban de funcionar, por ello es más aconsejable utilizar Combine only. Al final, probé y con el formulario de contacto de JetPack sí funciona Minify, así que si te resulta suficiente… un plugin menos!

La configuración para CSS que ha funcionado:

En ambos casos, como precaución, es bueno hacer los cambios de uno en uno e ir probando si la web funciona OK (formularios, efectos, etc.) y si se visualiza bien, ya que los cambios en JavaScript y CSS son bastante delicados.

• Otro plugin que me parece útil: Lazy Load, para la carga diferida de imágenes conforme se van mostrando. Ojo, tiene unos años ya y en la plágina del plugin se dice que no está probado con la versión actual de WordPress, así que seguro que hay mejores opciones. De momento funciona.
• Nuevo plugin encontardo: Autoptimize, para comprimir y minimizar el código JavaScript. Hay que llevar cuidado con NO comprimir el CSS porque suele destrozar los estilos del site (tiene arreglo desactivando la opción). Lo que marcamos es JS y HTML, así:

Hemos de tener en cuenta que cambiar este tipo de configuraciones es MUY delicado, y siempre podremos volver atrás desactivando y quitando el plugin. Además es muy interesante que conozcamos la última opción que hemos de configurar:

*Exclude scripts from Autoptimize: Cuando activamos este tipo de plugins a continuación debemos revisar si funciona bien el JavaScript de nuestra web. Hay que fijarse en todos los efectos y plugins que puedan influir en la visualización de la página. En mi caso, en esta lista de configuración para excluir Scripts de la optimización, he tenido que poner ‘dynamic.to.top.min.js’ (la flecha para volver arriba) y ‘lazy-load.js’, pues al comprimirlos dejarban de funcionar.

• Elimina los plugins y los themes que no necesites. Como siempre, simplifica al máximo. Ya sabes, puedes ir por FTP a las carpetas y borrar aquello que esté de más (en este post anterior sobre la instalación de WordPress se explica cómo trabajar con un programa FTP).

• Acortar los post en la home de tu blog, y poner solo un número razonable de ellos.

• Estudiar las opciones de configuración de tu plugin Social. En mi caso utilizo AddtoAny y, con solo cambiar que las opciones de compartir se sitúen debajo del post y no encima la velocidad percibida de carga es mucho mayor. Otra opción que he desabilitado: compartir en los posts acortados de la home, realizaba mil llamadas desde esta página.

• Archivo robots.txt: No bloquear el contenido dinámico. Desde hace meses ya no es conveniente «ocultar» a Google los archivos tipo JS, CSS, etc. Por lo que una configuración más abierta en el robots.txt algo ayuda (ya no es necesario excluir wp-admin, wp-includes, etc.).   Si no sabes cómo generarlo y subirlo, no te preocupes, este plugin te lo añade en las opciones de Ajustes / Lectura.

• Borrar las revisiones de los posts de tu base de datos, si eres como yo, y revisas cada entrada 1.001 veces, tendrás bastante que limpiar. ¡Gracias Gorka por este truco y el anterior! Si queréis aprender SEO en Bilbao y también algo de WPO para WordPress os aconsejo su curso.

• Quitar llamadas a Gravatar: para que los comentarios queden con imagen/avatar de su autor, WordPress nos da varias opciones. Una típica suele ser mostrar las imágenes de Gravatar, pero esto, a lo tonto, realiza 4 llamadas más a archivos JS y CSS. Así que cada uno como quiera…

Para desactivar los avatares y quitar las llamadas se debe ir a Ajustes / Comentarios y desmarcar la opción.

Aquí nos dan otra opción menos radical aunque supongo que más compleja (no lo he probado), por si quieres conservar los avatares en tu site sin que ello aumente el tiempo de carga de la página.

• Quitar llamada a Google Fonts (si quieres), por ejemplo en mi Theme, un básico de WordPress, me sirvió el parche de este tutorial.

• Optimización WPO para Google Tag Manager (y múltiples llamadas a Google Analytics)

Ya uses un plugin para insertarlo o no lo uses, un consejo: Activa solo aquellas opciones y etiquetas que realmente necesites.

Por ejemplo, si te has armado de valor como hice yo experimentando con todas las opciones de Google Tag Manager, puedes quitar seguramente las llamadas al plugin linkid.js de Google Analytics. Si no utilizas o no te funciona la atribución de enlace mejorada, marcar esta opción en Google Tag Manager o personalizar el código de Google Analytics con dicha función, solo te servirá para aumentar el tiempo de carga de tu web.

Lo mismo ocurre con la versión de depuración de Google Analytics, si no la habilitamos, una llamada menos; salvo que la necesitemos claro está. ¿La utilizas?

Y si usas el plugin de DuracellTommi’s GTM for WP, que es muy bueno por cierto, ten cuidado de qué opciones marcas, ídem, ya que antes de darte cuenta, por querer probar cosas, tendrás muchas nuevas llamadas a Scripts.

• Plugin Jetpack: muy buen plugin, pero deja marcado solo lo que realmente utilices. No está de más dar un repaso y ver con qué te quedas. Para mí personalmente, lo mejor es poder gestionar desde ahí las suscripciones al blog de forma sencilla.

• Y seguimos con las numerosas llamadas a archivos externos de WordPress… El insertar/embeber demasiados slideshares, videos, etc. a una página también afecta, además de llamar al archivo e insertar un iframe, te cargarán sus propios píxeles de seguimiento (que no he conseguido suprimir).
• Hosting:  Gorka y yo nos hemos cambiado hace nada a Siteground y la cosa va bien, eso sí, antes en 1and1 tampoco me iba nada mal, al contrario :) usaba Cloudflare gratuito también. Eso sí, el tiempo de carga máximo, en 1and1 es el doble, hay que contentarse!

• Por último, una curiosidad que me he encontrado por ahí y me ha dado por probar para reducir las llamadas en el header.

En general, se trata de simplificar todo al máximo. Subir las imágenes con poco peso o utilizar sprites, no instalar mil plugins sino solo los estrictamente necesarios… y en general, todo lo que ya estamos cansados de oír y leer, pero que es lo que funciona! Suerteee :)