Cómo configurar Autoptimize en WordPress

Imagen: Bogdan Rosu (Flaticon)

La herramienta PageSpeed Insights de Google es cada vez más exigente. Hoy puedes tener una buena velocidad y al cabo de unos meses descubrir que ha bajado bastante, sin que hayas hecho modificaciones en tu web. Conviene no obsesionarse con los números, porque lo primordial es la experiencia de usuario que estés ofreciendo. Eso no cambia, aunque las cifras bajen. Sin embargo, la rapidez es un factor de posicionamiento y, por eso, no hay que perder de vista los valores y recomendaciones de Google.

Para optimizar la carga de casi todos los sitios que administro utilizo Autoptimize, complementando al plugin Magic Caché de Webempresa. Autoptimize me funciona muy bien con la configuración que explico en este artículo. Son unos ajustes que, después de probar en varias webs, me resultan idóneos. Te invito a tomarlos como punto de partida para hacer tus propias pruebas, puesto que cada hosting y cada theme son diferentes.

Opciones de JavaScript

Los recursos dedicados a JavaScript no me han dado buenos resultados. No obstante, puedes probarlos, incluyendo «Unificar archivos JS». Las demás opciones es posible que te generen conflictos.

Es frecuente que JavaScript ralentice, así es que no debemos obviarlo. Como alternativa a Autoptimize, prefiero enviar al footer el código JavaScript, insertando una función en el fichero functions.php. En el siguiente tutorial de Webempresa está detallado el modo de hacerlo: www.webempresa.com/blog/quitar-javascript-que-bloquea-visualizacion-contenido.html

Opciones de CSS

En este punto, activo la optimización del código CSS y dejo marcadas las dos casillas que vienen así por defecto, cuya respectiva misión es unificar los archivos CSS e incorporar los incrustados en el HTML. El resto de ajustes son más problemáticos.

Opciones de HTML

Al igual que hago con el CSS, optimizo el HTML. La otra preferencia que trae no es demasiado importante, pues hace referencia a los comentarios en HTML, que no son muy habituales. De todas formas, la quedo como está para no mantener estos comentarios.

Otras opciones

Este apartado lo dejo tal cual. Ten en cuenta, eso sí, que si alguna de estas opciones te genera problemas debes desactivarla. Lo advierte el propio el plugin. Por otra parte, si usas Magic Caché de Webempresa tienes que desmarcar «¿Guardar los scripts y el CSS unificados como ficheros estáticos?».

Optimización de imágenes

Esta sección se ubica dentro de la pestaña «Imágenes». Sólo he probado la «Carga diferida de las imágenes», pero o bien no me funciona correctamente o simplemente no aumenta la velocidad.

Auto-optimizaciones adicionales

Por último, dentro de «Extra», se encuentran otras optimizaciones. La primera está relacionada con la carga de las fuentes de Google, otro factor que siempre ralentiza. Autoptimize proporciona varias alternativas para que esta operación sea más fluida. Después de muchas pruebas, la que mejor rendimiento me da es combinar y enlazar en la cabecera.

La funcionalidad «Quitar emojis» ayuda a subir los índices de velocidad, eliminando el CSS y el JavaScript incrustado. Por contra, no he observado ningún cambio en la puntuación con la opción «Quitar cadenas de petición de recursos estáticos», así es que no la marco.

La configuración del plugin no es demasiado compleja, pero hay que saber optimizarla bien para aprovechar todo su potencial.

Aplicación práctica

Para terminar te muestro los resultados de estos ajustes, aplicados a Todo Disco Duro. Esta web registraba una tasa en móviles de 75, antes de utilizar Autoptimize.

Los índices en ordenador son siempre superiores y, en este caso, apenas había margen de mejora.

Tras activar y configurar el plugin, la puntuación se incrementó diez puntos en móviles, de los 75 iniciales hasta 85.

¡En ordenadores subió hasta los 100! De todas formas, como comentaba al principio, es importante no obsesionarse con estos datos. Lo primero es comprobar que la web va realmente rápida desde la perspectiva del usuario y luego contentar a Google, con la vista puesta en el posicionamiento.