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.
Hola! Yo configuré autoptimize y mejoró algunos puntos en Page Speed, sin embargo ahora me aparecen en las recomendaciones de PageSpeed “reducir css de optimize” y también js de optimize. Por qué puede ser? Gracias
Hola Ayelén. Sí, esto es normal. Cuando minificas CSS y JS reduces su tamaño, pero siguen estando ahí, porque son necesarios. PageSpeed Insights es una herramienta bastante irritante. Lo importante es que hayas podido mejorar la puntuación y que tu web cargue bien.
Saludos.
Muchas gracias por tu respuesta. En realidad mejoró unos 3 puntos en móviles pasando de 49 a 52. Los otros archivos css que me indica PageSpeed para reducir son «dashicons» y «jquery». Sabrías decirme si esos son imprescindibles? Porque jquery por defecto viene en autoptimize como excluído. Y realmente no sé si es correcto.
Sin conocer el código de tu web no te puedo decir, pero 3 puntos me parece muy poco. Prueba a ir activando y desactivando las diferentes opciones hasta encontrar la configuración ideal para tu web. También puedes probar con otros plugins para mejorar la velocidad de carga, como LiteSpeed Cache.
Un saludo.