Uno de los plugins que te van a ayudar en la optimización de tu sitio web es Autoptimize que permite mejorar el rendimiento a través de diferentes ajustes en los CSS y los scripts.
Este plugin cuenta con una versión gratuita con una gran variedad de ajustes para optimizar el sitio WordPress. Además el plugin es compatible con todos los hosting webs incluso con los proveedores que tienen configuraciones personalizadas de almacenamiento en caché.
La mayor desventaja de este plugin es que al usuario poco experimentado puede resultar algo abrumador debido a la gran cantidad de ajustes, pero no te preocupes si este es tu caso. En este post vamos a explicarte cómo configurar Autoptimize de la mejor manera.
Instalar y configurar Autoptimize para mejorar la de WordPress
Configurar JS, CSS y HTML
Opciones de JavaScript
Optimizar el código JavaScript
Al activar esta opción Autoptimize minimizará los archivos JavaScript por lo que es recomendable tenerla activada.
Unificar archivos JS
Esta opción combina todos tus archivos de JavaScript en uno solo. Nuestro consejo es que pruebes a activarla y compruebes que todo funciona correctamente.
Incluir JS incrustados
Esta opción extrae las líneas de JavaScript del HTML y lo combina con el archivo optimizado que el plugin crea. Esta opción puede hacer crecer rápidamente la caché de Autoptimize por lo que te recomendamos no activar esta opción a no ser tengas conocimientos de por qué deberías hacerlo.
Forzar JavaScript en
Forzar la carga del JS en el head puede disminuir la velocidad de carga pero es habitual que esto cause errores. No te recomendamos activar esta opción pero si tienes que forzar la carga te recomendamos que excluyas los archivos conflictivos en la siguiente opción.
Scripts a excluir de Autoptimize
En esta opción puedes listar los archivos que quieras o que estén creando conflicto y de esta manera no se combinarán ni se minimizarán.
Añadir bloques try-catch
Cuando minificamos los JS cabe la posibilidad de que JavaScript deje de funcionar, en ese caso podemos activar esta opción con el fin de depurar los problemas que pueden surgir al minificar. Esto solo debe de ser una solución temporal y deberás revisar los archivos, o contratar un desarrollador, hasta dar con la solución ya que el uso de los bloques “try-catch” puede perjudicar en el rendimiento.
Opciones de CSS
Optimizar el código CSS
Al activar esta opción Autoptimize minimizará los archivos CSS por lo que es recomendable tenerla activada.
Unificar archivos CSS
Esta opción combina todos tus archivos CSS en uno solo. Nuestro consejo es que pruebes a activarla y compruebes que todo funciona correctamente.
Incluir CSS incrustados
Esta opción extrae las líneas de CSS del HTML y lo combina con el archivo optimizado que el plugin crea. Esta opción puede hacer crecer rápidamente la caché de Autoptimize por lo que te recomendamos no activar esta opción a no ser tengas conocimientos de por qué deberías hacerlo.
Crear data:URIs de imágenes
Al activar esta opción reducimos el número de peticiones HTTP al codificar e incrustar las imágenes en el CSS. Nuestro consejo es que midas la velocidad con y sin esta opción activada y si los resultados son buenos déjala activada.
Incrustar y aplazar CSS
Podemos indicar un CSS que sea el necesario para que se muestre el área visible de la página nada más acceder a ella, justo antes de que el usuario comience a hacer scroll. Para extraer ese CSS Crítico y pegarlo en el área que el plugin indica, puedes utilizar la herramienta online Critical Path CSS Generator.
CSS a excluir de Autoptimize
En esta opción puedes listar los archivos que quieras excluir de la unificación pero no excluirá que se minifiquen.
Por defecto el plugin ya incluye un listado de directorios que es recomendable mantener.
Opciones de HTML
Optimizar el código HTML
La optimización de HTML de Autoptimize puede ayudar a reducir el tamaño de tus páginas eliminando los espacios en blanco.
Mantener comentarios HTML
Si activamos esta opción se mantendrán los comentarios HTML en la página.
Opciones de la CDN
URL base de la CDN
Si tu proveedor hosting tien servicio de CDN, en esta casilla puedes insertar la URL del CDN a Autoptimize.
Información de la caché
Aquí se muestra información sobre la ubicación y los permisos de la carpeta de caché, además de indicarnos el número de archivos CSS y JavaScripts y su peso total.
Otras opciones
Guardar los scripts y el CSS unificados como ficheros estáticos
Esta opción guarda los archivos JS y CSS como archivos estáticos. Si detectas que la compresión no se está haciendo de manera adecuada te recomendamos que la desactives.
Minimizar los archivos CSS y JS excluidos
Al excluir archivos estos no se minimizan, pero podemos marcar esta opción para forzar que queden minificados. Sin embargo cabe la posibilidad de que surja algún problema al hacerlo, de ser así deja esta opción desactivada.
Activar los respaldos 404
En ocasiones al optimizar los archivos se sigue manteniendo una referencia en la caché lo que puede provocar que tengamos enlaces rotos. Si detectas que esto ocurre en tu WordPress prueba a activar esta casilla.
Optimizar también para usuarios editores/administradores conectados
Esta opción activa Autoptimize para usuarios editores/administradores conectados. De esta manera puedes comprobar que el sitio web funciona correctamente tras configurar el plugin mientras visitas tu sitio con tu sesión abierta como administrador.
Tras configurar esta parte puedes guardar cambios y pasar a la siguiente pestaña
Opciones de Imagen
Autoptimize ofrece la posibilidad de servir tus imágenes desde la CDN global de Shortpixel lo que mejora la carga de tu web de cara a Google.
El plugin permite activar la función de lazy loading de imágenes lo que mejora mejorar la velocidad de la página cuando contiene muchas imágenes. Además Si no queremos que todas las imágenes o todos los archivos tengan una carga Lazy podemos indicar cuales queremos excluir.
Opciones Extra
En este apartado sólo vamos a ver las tres opciones más básicas:
Fuentes de Google
Si utilizas Google Fonts, Autoptimize ofrece unas opciones de ajuste que pueden mejorar tu sitio web.
De las siguientes opciones te recomendamos que pruebes las tres últimas y compruebes cual es la que mejor rendimiento te ofrece:
- Dejar tal cual
- Eliminar las Google Fonts
- Combinar y enlazar en la cabecera (las fuentes cargan rápido pero bloquean la carga de la página), incluye display:swap.
- Combinación y enlazado aplazado en la cabecera (las fuentes cargan tarde pero no bloquean la presentación), incluye display:swap.
- Combinar y cargar las fuentes asíncronamente con webfont.js (obsoleto)
Quitar los emojis
Esta opción puede ayudar a reducir el tamaño del sitio web al eliminar del core de WordPress los archivos CSS y el JavaScript que contengan emojis.
Quitar cadenas de petición de recursos estáticos
Esta opción elimina las cadenas de consulta (el parámetro ?ver=) de los recursos estáticos. Esto no ayuda realmente a la carga pero si que mejora la puntuación en Google Pagespeed y otras herramientas de pruebas de rendimiento.
Resumen
Como habrás visto Autoptimize es una buena opción para mejorar el rendimiento de tu sitio WordPress. Con una configuración básica en la pestaña de JS, CSS y HTML es más que suficiente pero si eres un usuario avanzado y puedes configurar las opciones más avanzadas como la Preconexión a dominios de terceros o la Precarga de peticiones específicas el rendimiento y la mejora todavía pueden ser mayores.
