Autoptimize es un plugin de optimización de WordPress gratuito. Además de la optimización de HTML, CSS y JavaScript, Autoptimize también incluye características de optimización dirigidas a otros aspectos de los sitios modernos de WordPress.
En este post, compartiremos los mejores ajustes del plugin Autoptimize para mejorar el rendimiento y la velocidad de la página de tu sitio de WordPress.
¿Por qué Autoptimize?
Antes de sumergirnos en los mejores ajustes de Autoptimize, repasemos rápidamente tres razones por las que Autoptimize es un gran plugin de optimización.
- La versión gratuita de Autoptimize tiene un completo conjunto de características para optimizar tu sitio de WordPress.
- Autoptimize es estrictamente un plugin de optimización y no hace ningún cacheo de páginas HTML. Esto significa que es compatible con todos los hosts web, incluso con los que tienen configuraciones de almacenamiento en caché de páginas personalizadas como Kinsta.
- Autoptimize tiene más de 1 millón de instalaciones activas en el repositorio de WordPress y se actualiza constantemente con nuevas características y correcciones de errores.
Configuración de JS, CSS y HTML de Autoptimize
HTML, CSS y JavaScript es el pan de cada día de Autoptimize. Al igual que con otros plugins de optimización, profundizar en el extenso conjunto de características y ajustes de Autoptimize puede ser una tarea desalentadora. Para facilitar las cosas, hemos compilado los mejores ajustes de Autoptimize para mejorar el rendimiento de tu sitio.
Opciones de JavaScript
Optimizar el código JavaScript
Recomendamos habilitar esta opción. Cuando «optimizar código JavaScript» está activada, Autoptimize minará tus archivos JavaScript.
Archivos JS agregados
La opción de Autoptimize «agregar archivos JS» combinará todos tus archivos de JavaScript en un solo archivo. En el pasado, la combinación de archivos JS y CSS fue un paso clave en la optimización de WordPress. En Kinsta, utilizamos servidores HTTP/2 modernos que soportan descargas paralelas y multiplexación – esto significa que la combinación de archivos ya no es tan importante como antes porque HTTP/2 permite que se descarguen varios archivos al mismo tiempo. Dicho esto, la agregación de archivos CSS y JS seguirá dando lugar a un aumento de la velocidad para ciertos tipos de sitios de WordPress, por lo que recomendamos que pruebes la velocidad de tu página con esta opción activada y desactivada.
Archivos JS agregados también
La opción «también agregar JS en línea» extrae JS en línea en tu HTML, y lo combina con el archivo JS optimizado de Autoptimize. Dado que esta opción puede causar un rápido incremento en el tamaño de la caché de Autoptimize, recomendamos mantener esta opción deshabilitada a menos que tengas una razón específica para habilitarla.
Forzar JavaScript en
En la mayoría de los casos, no recomendamos forzar la carga de archivos JavaScript en el elemento HTML <head> de tu sitio. Forzar a JS a que se cargue antes puede resultar en elementos bloqueadores del renderizado que pueden disminuir la velocidad de tu página. Si tienes archivos JavaScript que deben cargarse en el elemento <head> , recomendamos excluir esos scripts de Autoptimize.
Excluir los guiones de Autoptimize
Esta opción permite excluir de la agregación directorios específicos y archivos JavaScript. Por defecto, Autoptimize excluye los siguientes scripts.
- wp-incluye/js/dist/
- wp-incluye/js/tinymce/
- js/jquery/jquery.js
Ten en cuenta que la adición de un guión para ser excluido sólo afecta a la agregación por defecto.Los archivos JavaScript excluidos seguirán siendo minados a menos que «minar los archivos CSS y JS excluidos» esté deshabilitado en «Opciones varias».
Agregar Try-Catch Wrapping
Activando la opción «añadir Try-Catch Wrapping» envolverá tu código JavaScript en bloques de prueba. Esta opción es útil para depurar problemas causados por la minificación y agregación de JS. Si tu sitio sólo funciona con la opción «add try-catch wrapping» activada, te recomendamos que trabajes con un desarrollador para que revise tus archivos JavaScript para identificar al que causa el problema, ya que el uso excesivo de bloques try-catch puede reducir el rendimiento de JS.
Opciones de CSS
Optimizar el código CSS
Recomendamos habilitar esta opción. Cuando «optimizar código CSS» está activada, Autoptimize minará tus archivos CSS.
Archivos agregados de CSS
La opción «agregar archivos CSS» de Autoptimize combinará todos tus archivos CSS en un solo archivo. Como mencionamos anteriormente, esta característica puede no beneficiar a los sitios que soportan HTTP/2. Recomendamos que pruebes esta opción en tu sitio para determinar si hay algún impacto positivo en la velocidad de la página.
También agregar Inline CSS
Esta opción moverá el CSS en línea al archivo CSS de Autoptimize. Si bien mover el CSS en línea a un archivo CSS almacenado en la memoria del navegador puede reducir el tamaño de la página, recomendamos dejar esta opción desactivada en la mayoría de los casos.
Generar datos: URIs para imágenes
Cuando esta opción está activada, Autoptimize codificará en base64 pequeñas imágenes de fondo e incrustarlas en CSS. Recomendamos probar esta opción para medir el impacto en la velocidad de su página. Mientras que la codificación de imágenes en formato base64 reduce el número de peticiones HTTP, los archivos de representación base64 son típicamente un 20-30% más grandes que sus homólogos binarios.
Inline y Defer CSS
El uso de CSS crítico puede resultar en un aumento significativo de la velocidad de algunos sitios. La idea aquí es que los estilos en línea que se requieren para los elementos que están «por encima del pliegue». En la práctica, el CSS en línea usualmente se dirige a elementos como elementos estructurales, familias y tamaños de fuentes globales, y estilo de navegación.
Al alinear estos elementos clave, el archivo completo más grande de CSS puede ser cargado posteriormente sin afectar el aspecto de la página. Si bien es posible extraer manualmente los estilos críticos, recomendamos utilizar una herramienta como esta para generar los estilos como punto de partida.
Después de generar el CSS crítico, copia y pega en la configuración de Autoptimize.
El siguiente paso es probar la experiencia de tu sitio en el frente. Si notas contenido sin estilizar (FOUC), es probable que necesites identificar esos elementos sin estilo y añadir los estilos correspondientes en Autoptimize para ser insertados.
Autoptimize ofrece un «power-up» que genera automáticamente el CSS crítico para tus páginas de WordPress. Según nuestra experiencia, esta función puede ocasionalmente ralentizar tu sitio porque utiliza llamadas externas a la API para generar el CSS crítico. Por lo tanto, la generación inicial de CSS críticos depende de la capacidad de respuesta de un servidor externo. En la mayoría de los casos, el método mencionado anteriormente, que no requiere ninguna llamada de API externa, es una solución más limpia.
Insertar todo el CSS
Para la mayoría de los sitios, no recomendamos insertar (inlinear) todo el CSS ya que puede aumentar el tamaño de la página dramáticamente. Además, el subrayado de todo el CSS hace imposible que el navegador web almacene el CSS en caché.
Excluir el CSS de Autoptimize
Por defecto, Autoptimize excluye los siguientes directorios y archivos CSS de la agregación. Si deseas evitar que Autoptimize agregue cualquiera de tus archivos CSS, puedes añadirlos a esta lista. De forma similar a la exclusión de JavaScript, el comportamiento predeterminado de esta función no impide que los archivos CSS se minifiquen, sino que se agreguen.
- wp-content/cache/
- wp-contenido/uploads/
- admin-bar.min.css
- dashicons.min.css
Opciones HTML
La optimización de HTML de Autoptimize puede ayudar a reducir el tamaño de tus páginas eliminando los espacios en blanco.
Optimizar el código HTML
Recomendamos habilitar la función de código «optimizar HTML» porque reduce el tamaño de la página al eliminar los espacios en blanco innecesarios en su HTML. Aunque esta característica es compatible con la mayoría de los sitios, la eliminación de espacios en blanco puede causar problemas en algunos sitios. Por lo tanto, recomendamos probar la optimización del código HTML a fondo antes de usarlo en un entorno de producción.
Mantener los comentarios HTML
Habilita esta función si deseas mantener los comentarios HTML para tus páginas optimizadas.
Opciones de CDN
Si estás usando Kinsta CDN o un servicio proxy con capacidades de CDN como Cloudflare, no necesitas configurar nada en las opciones de CDN de Autoptimize. Para una optimización aún más rápida y sencilla, puedes plantearte minificar tu código. Esto se puede hacer directamente en el tablero de MyKinsta utilizando la función de minificación de código.
Sin embargo, si utilizas un servicio de CDN diferente para acelerar tus recursos, deberás introducir la URL de la CDN en este campo.
Información de la caché
La «información de caché» de Autoptimize muestra información importante como la ubicación y los permisos de la carpeta de caché, así como el tamaño total de los estilos y scripts de caché. Si ves «No» junto a «¿Podemos escribir?», tendrás que trabajar con tu host para arreglar los permisos de la carpeta.
Opciones Misc
Autoptimize tiene algunos ajustes de optimización misceláneos. Si tienes problemas para cargar los archivos CSS y JS optimizados en tu sitio, es posible que tengas que reconfigurar algunos de los siguientes ajustes.
Guardar los scripts agregados/CSS como archivos estáticos
Recomendamos habilitar esta opción para guardar los archivos agregados como archivos estáticos localmente. Es posible que tengas que desactivarla si tu servidor no está configurado para manejar la compresión y la caducidad de los archivos.
Minimizar los archivos CSS y JS excluidos
Recomendamos habilitar esta opción para asegurarnos de que todos los archivos CSS y JS estén minificados. Sin embargo, si notas algunos problemas relacionados con la minificación de algunos de tus archivos CSS y JS excluidos, puedes seguir adelante y desactivar esta opción.
También optimiza para los editores/administradores conectados
Recomendamos habilitarlo para asegurar que los activos se optimicen para los editores y administradores conectados. Esto es importante si está probando la configuración de Autoptimize como usuario registrado.
Optimización de la Imagen en Autoptimize
Autoptimize tiene una integración incorporada con ShortPixel para optimizar las imágenes. Además de un ajuste de calidad de imagen, la integración de Autoptimize también te permite generar y servir versiones WEBP de tus imágenes.
Para los usuarios de Kinsta, no recomendamos usar la función de optimización de imagen en Autoptimize. En su lugar, recomendamos usar los plugins con todas las funciones de ShortPixel o Imagify directamente. Con el plugin completo, tendrás un control más granular sobre los ajustes de optimización, incluyendo la reescritura de imágenes para utilizar la etiqueta <picture>, que es necesaria para el soporte WEBP en Kinsta.
Autoptimize también incluye la función de lazy loading de imágenes. Recomendamos habilitar esta función para mejorar la velocidad de la página para las páginas con muchas imágenes. Cuando lazy loading está activada, la función de Autoptimize. permite excluir ciertas clases de imágenes y nombres de archivos de lazy loading.
El ajuste de exclusión es útil para imágenes como logotipos, iconos sociales y otros elementos importantes de la imagen que no deben ser cargados por lazy loading. Si buscas una solución que ofrezca más control sobre lazy loading, consulta nuestra guía sobre imágenes y vídeos de lazy loading en WordPress.
Optimizaciones Adicionales en Autoptimize
Fuentes de Google
Autoptimize tiene unas cuantas opciones diferentes para optimizar las fuentes de Google. La mejor opción para dependerá de la forma en que tu sitio utilice las fuentes de Google.
- Déjalo como está.
- Elimina las fuentes de Google.
- Combinar y enlazar en la cabeza.
- Combina y precarga en la cabeza.
- Combina y carga las fuentes asincrónicamente con webfont.js.
No recomendamos usar la opción «dejar como está» porque no ofrece ningún beneficio de velocidad.
Si las fuentes de Google no son un requisito indispensable en tu sitio, eliminarlas y utilizar una pila de fuentes del sistema puede tener un gran impacto positivo en la velocidad de tu página.
Si deseas mantener las fuentes de Google en tu sitio, te recomendamos que pruebes las tres últimas opciones para saber cuál es la que mejor funciona en tu sitio.
Quitar los emojis
Esta opción de Autoptimize elimina el CSS y el JavaScript relacionados con los emojis del núcleo de WordPress. Recomendamos habilitar esta opción porque puede ayudar a reducir el tamaño de la página. Además, la mayoría de los sistemas operativos principales se envían con pilas de fuentes que incluyen emoticonos. Por supuesto, también hay otras formas de deshabilitar los emoticonos en tu sitio de WordPress.
Eliminar las cadenas de consulta de los recursos estáticos
Si deseas eliminar las cadenas de consulta (por ejemplo, ?ver=) de los recursos estáticos, puedes activar esta opción. La eliminación de las cadenas de consulta no afectará al tiempo de carga, pero puede ayudar a mejorar la puntuación de tu sitio en GTmetrix, Google Pagespeed y otros servicios de pruebas de rendimiento.
Preconexión con dominios de terceros
La directiva de pre-conexión permite a tu navegador conectarse a dominios específicos para procesar búsquedas de DNS y negociaciones de apretón de manos SSL antes de que se envíe una solicitud HTTP completa.
Por ejemplo, si tu sitio tiene una imagen de logotipo que se sirve desde https://site.kinsta.cdn.com/logo.png, puede indicar a Autoptimize que añada una directiva de preconexión para gestionar las conexiones DNS y SSL iniciales en el <head> elemento antes de que se realice la solicitud HTTP en el <body> elemento de su HTML.
Puede utilizar las herramientas de desarrollo o el inspector de tu navegador para encontrar importantes dominios externos a los que conectarse previamente. En la página de ejemplo que se muestra a continuación, hay solicitudes externas a los siguientes dominios.
https://cdn.brianli.comhttps://www.google-analytics.comhttps://www.googletagmanager.com
Estos tres dominios pueden ser añadidos a la lista de preconexión de Autoptimize.
Por motivos de rendimiento, recomendamos que no se añadan más de seis dominios a la lista de preconexión de Autoptimize, ya que si se especifican directivas de preconexión para demasiados dominios se puede producir un golpe de rendimiento.
Precarga de solicitudes específicas
Las directivas de precarga indican a tu navegador que descargue un activo lo antes posible. Esta directiva es útil para descargar activos que se necesitan muy pronto en el proceso de carga de la página. En la práctica, la precarga se utiliza a menudo para acelerar los tiempos de carga de las fuentes personalizadas, cargándolas antes de que se soliciten en el CSS de la página.
Recomendamos consultar con un desarrollador acerca de qué activos, si los hay, debe preinstalar en su sitio de WordPress. Al igual que con muchos otros ajustes relacionados con el rendimiento, la carga previa de demasiados activos puede hacer que tu sitio se cargue más lentamente.
Archivos de JavaScript Async
La función «async JavaScript files» de Autoptimize permite especificar ciertos archivos JavaScript externos para cargarlos asincrónicamente a través de la bandera HTML async. Aunque cargar archivos JS asincrónicamente puede mejorar la velocidad de la página, recomendamos hacer las pruebas adecuadas para asegurarse de que la funcionalidad del sitio no se vea afectada.
Resumen
Si ahora quieres modificar tu configuración, el plugin Autoptimize es una opción sólida para los usuarios de WordPress que buscan mejorar el rendimiento del sitio.
Con funciones básicas como la optimización de HTML y CSS y otras más avanzadas, como la posibilidad de especificar directivas de preconexión y precarga, Autoptimize tiene todo lo que necesitas para optimizar el rendimiento del frontend de tu sitio de WordPress.
Si estás interesado en aprender más sobre la optimización de WordPress y cómo optimizar el backend de tu sitio, asegúrate de revisar nuestra completa guía de rendimiento de WordPress.
Deja una respuesta