Cuando hablamos de optimización web en WordPress, la mayoría de usuarios piensa en plugins de caché como WP Rocket o LiteSpeed Cache. Pero muchas veces, una parte crítica de la optimización se encuentra en un paso anterior: la minimización y combinación del código CSS, JavaScript y HTML que compone tu sitio.
Ahí es donde entra Autoptimize. Este plugin, gratuito y muy ligero, permite mejorar notablemente la velocidad de carga de tu web sin entrar en configuraciones complicadas ni depender de un sistema de caché completo.
Pero cuidado: una mala configuración puede romper el diseño o provocar errores en la funcionalidad de la web. Por eso, este artículo no es una simple recomendación de “activa esto y ya está”, sino un tutorial exhaustivo paso a paso para entender qué hace Autoptimize, cómo configurarlo correctamente y cómo integrarlo con otros elementos como CDNs, plugins de caché o maquetadores visuales.
- Qué es Autoptimize y qué no es
- Instalación del plugin
- Pestaña 'JS, CSS y HTML': el núcleo del plugin
- Pestaña "Imágenes": optimización de imágenes con Autoptimize
- CSS crítico: mejora la carga inicial de tu web
- Pestaña "Extra": ajustes avanzados y optimizaciones adicionales
- Pestaña "¡Optimizar más!": recomendaciones y servicios adicionales
- Conclusión: ¿merece la pena usar Autoptimize?
Qué es Autoptimize y qué no es
Antes de entrar en materia, es importante entender qué hace exactamente este plugin y qué no:
Pero:
Dicho esto, vamos al grano.
Instalación del plugin
Como siempre, ve a tu escritorio de WordPress y navega hasta Plugins > Añadir nuevo. Busca “Autoptimize” y verás el plugin oficial desarrollado por el equipo de Optimizing Matters y Frank Goossens. Instálalo y actívalo.
Una vez activado, verás una nueva opción en el menú lateral (Ajustes > Autoptimize), así como un acceso en la barra superior, con un desplegable.
Pestaña ‘JS, CSS y HTML’: el núcleo del plugin
La pestaña «JS, CSS y HTML» es el corazón de Autoptimize. Desde aquí podemos optimizar, combinar y minimizar los archivos JavaScript, CSS y HTML de nuestra web para mejorar su velocidad de carga, reducir el tiempo hasta la interacción y optimizar el rendimiento general.
Opciones de JavaScript
¿Optimizar el código JavaScript?
Activar esta opción permite a Autoptimize minimizar todos los archivos .js cargados por la web. Al minimizar, se eliminan espacios en blanco, saltos de línea y comentarios innecesarios, lo que reduce el tamaño de los archivos y acelera la carga del sitio. Es una opción fundamental que siempre conviene tener activada, salvo en sitios donde el JavaScript está muy personalizado y puede romperse al ser comprimido.
¿Unificar archivos JS?
Cuando marcas esta opción, Autoptimize combina múltiples archivos JavaScript en uno solo. Esto reduce el número de peticiones HTTP necesarias para cargar la página. A continuación aparece una segunda pregunta importante:
“¿Agregamos todos los archivos JS enlazados para que se carguen sin bloquear la visualización?”
Esto se refiere a mover los scripts al final del documento HTML (en lugar de situarlos en el <head>), permitiendo que el contenido se cargue antes que los scripts. Esta práctica mejora el Largest Contentful Paint (LCP) y otros indicadores Core Web Vitals, ya que evita que el renderizado se bloquee por scripts que aún no han sido cargados.
¿No agregar sino aplazar?
Esta opción alternativa a «agregar» los scripts es muy útil:
“Los archivos JS individuales serán minimizados y aplazados, haciendo que no bloqueen la visualización.”
Lo que hace es deferir (aplazar) la ejecución de los scripts JavaScript hasta que la página haya terminado de cargar, lo que optimiza el tiempo de carga inicial. Si eliges esta opción, aparecerá un ajuste adicional:
“¿Aplazar también el JS incrustado?”
¿Aplazar también el JS incrustado?
Este ajuste intenta también diferir los scripts embebidos dentro del HTML, como los que aparecen entre etiquetas <script> en el cuerpo de la página. Activarlo es recomendable, ya que mejora el aplazamiento general, pero hay que probar bien el sitio: algunos scripts inline necesarios para funcionalidades como sliders, formularios o animaciones podrían fallar si se aplazan incorrectamente.
Scripts a excluir de Autoptimize
Esta caja de texto permite excluir scripts específicos de la optimización. Es muy útil cuando un script deja de funcionar tras ser minimizado o aplazado. Puedes escribir aquí los nombres o rutas de los archivos .js problemáticos, separados por comas (por ejemplo: plugin1.js, main-theme.js).
Ten en cuenta que, aunque excluyas un archivo de la combinación (si “unificar” está activo), por defecto Autoptimize seguirá intentando minimizarlo, salvo que desactives esa opción en la pestaña “Varios”.
¿Eliminar el JavaScript sin usar?
Esta opción es meramente informativa. Autoptimize no elimina por sí mismo JS no utilizado, ya que no tiene forma de saber qué partes del código realmente se ejecutan en la página. Lo que sugiere aquí es utilizar otros plugins como Plugin Organizer o Asset CleanUp para controlar dónde y cuándo se cargan ciertos scripts. Esta opción es útil si Google PageSpeed Insights detecta muchos KB de JavaScript que nunca se ejecutan.
Opciones de CSS
¿Optimizar el código CSS?
Al igual que con el JavaScript, esta opción permite minimizar los archivos CSS, eliminando caracteres innecesarios para reducir el tamaño del archivo. Es altamente recomendable activarla, ya que no suele generar errores.
¿Unificar archivos CSS?
Combina los distintos archivos CSS en uno solo. Aunque esto mejora el rendimiento al reducir las peticiones, conviene usarla con precaución: si estás usando un tema o maquetador que aplica CSS condicional en distintas partes del sitio (por ejemplo, Elementor), unificar puede dar problemas de estilo si el CSS global sobrescribe o ignora estos condicionales.
Al activar esta opción, aparecen más ajustes:
- ¿Incluir CSS incrustados?
Permite que Autoptimize también optimice los estilos CSS que aparecen embebidos en el HTML. Si se usa mucho CSS inline, es recomendable activarlo. - ¿Crear data:URIs de imágenes?
Esta opción convierte pequeñas imágenes de fondo (por ejemplo, iconos decorativos) en cadenas base64 que se integran dentro del CSS. Esto reduce peticiones HTTP, pero aumenta el tamaño de los archivos CSS, así que se recomienda solo si se usan muchas imágenes pequeñas en fondos y no demasiadas reglas. - ¿Combinar todos los CSS?
Esta opción embebe todo el CSS en el propio HTML de la página. Aunque esto puede ayudar a evitar el “bloqueo de renderizado”, generalmente no se recomienda, ya que aumenta el tamaño del HTML y puede romper el funcionamiento de ciertas metaetiquetas (por ejemplo, las usadas por Facebook para generar previews), lo que afectaría a las miniaturas de las redes sociales.
¿Eliminar el CSS que bloquea la visualización?
Esta funcionalidad permite cargar primero el CSS crítico (el necesario para ver correctamente el contenido sin hacer scroll) y posponer la carga del resto del CSS hasta después de que se haya cargado la página. Es una técnica avanzada, conocida como Critical CSS, y puede mejorar notablemente el First Paint y el LCP.
Autoptimize puede generar este CSS crítico automáticamente si usas la pestaña específica “Critical CSS”, o puedes añadirlo tú manualmente si sabes qué clases son imprescindibles en el above-the-fold.
CSS a excluir de Autoptimize
Permite excluir estilos CSS concretos del proceso de optimización. Igual que con los scripts, si algún archivo de estilos se rompe tras ser unificado o minimizado, puedes excluirlo aquí introduciendo su nombre.
Opciones de HTML
¿Optimizar el código HTML?
Puedes minimizar el HTML eliminando espacios, saltos de línea, comentarios innecesarios… Activar esta opción puede reducir el tamaño de la página y hacerla cargar más rápido, sin riesgo para la mayoría de sitios.
¿Minimizar también el JS/CSS integrado?
Lo que hace esta opción es complementar las anteriores, permitiendo que el JS y CSS integrados (inline) también sean minimizados. Es útil activarla si hay muchos scripts o estilos embebidos en el propio HTML.
¿Mantener comentarios HTML?
Por defecto, Autoptimize elimina los comentarios HTML al optimizar. Si tienes algún comentario importante en el código que quieras conservar (por ejemplo, comentarios para desarrolladores o anotaciones), activa esta opción.
Opciones de la CDN
URL base de la CDN
Si usas una red de distribución de contenido (CDN) como KeyCDN, BunnyCDN o Amazon CloudFront, puedes indicar aquí la URL base desde la cual se servirán los archivos optimizados por Autoptimize.
Ejemplo: //cdn.tusitio.com
Importante: si usas Cloudflare no necesitas configurar nada aquí, ya que esta CDN funciona a nivel de proxy.
Información de la caché
Aquí se muestra la carpeta donde se guarda la caché generada por Autoptimize, si el plugin tiene permisos para escribir en ella, y el número y peso total de los archivos de estilos y scripts optimizados. Esta información es útil para comprobar que el plugin está funcionando correctamente.
Otras opciones
¿Guardar los scripts y el CSS unificados como ficheros estáticos?
Esta opción está activada por defecto y permite que los archivos combinados JS/CSS se sirvan como archivos estáticos, lo que mejora el rendimiento del navegador (pueden cachearse mejor). Si el servidor no comprime bien estos archivos o da errores de caducidad, puedes probar a desactivarla.
¿Activar los respaldos 404?
A veces, Autoptimize puede generar referencias en el HTML a archivos optimizados que ya han sido eliminados de la caché. Esta opción redirige esas peticiones a una versión de respaldo para evitar que el sitio se rompa. Si usas almacenamiento persistente de caché o servidores lentos en limpieza de archivos, es una opción recomendable.
¿Optimizar también para usuarios editores/administradores conectados?
Si estás editando una web con un maquetador como Elementor, puede ser útil desactivar esta opción para que no se aplique la optimización mientras trabajas, evitando conflictos visuales y recarga de caché en cada cambio. En producción, se puede volver a activar.
¿Activamos la configuración por entrada/página?
Esto añade una metabox en cada página o entrada de WordPress donde puedes decidir si quieres excluir esa URL concreta de ciertas optimizaciones (CSS, JS, HTML). Ideal si usas plugins que sólo fallan en ciertas páginas.
¿Desactivar lógica adicional de compatibilidad?
Autoptimize incluye una capa de “protección” que intenta evitar errores comunes con scripts complejos o maquetadores como Gutenberg o Revolution Slider. Desactivar esta lógica puede ayudarte si estás viendo errores de renderizado o funcionalidad rota, pero es algo que debe hacerse solo si lo demás no ha funcionado.
Pestaña «Imágenes»: optimización de imágenes con Autoptimize
La pestaña «Imágenes» de Autoptimize ofrece dos opciones clave orientadas a mejorar el rendimiento visual de la web: la optimización de imágenes mediante CDN y la carga diferida (lazy load). Aunque Autoptimize no es un optimizador de imágenes como tal, sí puede integrarse con ShortPixel para ofrecer una solución ligera y eficaz sin necesidad de instalar más plugins.
Optimización de imágenes y CDN con ShortPixel
Autoptimize permite activar la optimización de imágenes sobre la marcha usando la CDN global de ShortPixel, lo que acelera significativamente la carga visual de la web. Al activar esta opción:
- Las imágenes se optimizan automáticamente y se sirven desde una red CDN global.
- Se incluyen formatos modernos como WebP, lo que es bien valorado por herramientas como Google PageSpeed Insights.
- No necesitas instalar ShortPixel Image Optimizer ni ningún otro plugin adicional.
- La entrega es más rápida y eficiente, al tiempo que se reduce el tamaño de las imágenes que se descargan desde el servidor original.
Importante: esta función solo opera correctamente en sitios públicos (no en sitios en desarrollo local, staging privado o protegidos con contraseña), y está sujeta a los términos de uso y política de privacidad de ShortPixel. Si necesitas optimizaciones sin límites o funciones avanzadas como CSS crítico automático, puedes considerar Autoptimize Pro o una suscripción a ShortPixel.
Carga diferida de imágenes (lazy load)
La segunda opción activa la carga diferida de imágenes. Esto implica que las imágenes que no están visibles al cargar la página (las que están más abajo en el scroll) no se cargan inmediatamente, sino que lo hacen cuando el usuario se acerca a ellas.
Esta técnica ayuda a:
- Reducir el tiempo de carga inicial de la página.
- Mejorar el LCP (Largest Contentful Paint) y otros indicadores de rendimiento.
- Aliviar el ancho de banda del servidor durante la carga inicial.
Este tipo de mejora visual es fundamental para el rendimiento percibido, especialmente en páginas con muchas imágenes o en móviles con conexiones más lentas.
CSS crítico: mejora la carga inicial de tu web
La pestaña «CSS crítico» de Autoptimize está diseñada para optimizar uno de los aspectos más importantes del rendimiento web: la carga inicial y la estabilidad visual de la página. Este apartado se centra en generar y aplicar reglas de CSS crítico, lo que ayuda a mejorar indicadores clave como:
- First Contentful Paint (FCP) – Primera pintura con contenido.
- Largest Contentful Paint (LCP) – Mayor pintura con contenido.
- Cumulative Layout Shift (CLS) – Cambio de diseño acumulativo.
¿Qué es el CSS crítico?
El CSS crítico es el conjunto mínimo de estilos necesarios para renderizar la parte visible de una página (el above the fold) lo más rápido posible. Al extraer y priorizar estos estilos, se evita que el navegador bloquee la carga del contenido por culpa de CSS que no es necesario al inicio, lo cual acelera la percepción de velocidad y mejora las puntuaciones en herramientas como Google PageSpeed Insights o Lighthouse.
¿Cómo se gestiona el CSS crítico en Autoptimize?
Autoptimize permite gestionar reglas de CSS crítico a través de las siguientes opciones:
- Añadir nueva regla: crea reglas específicas por URL o tipo de contenido.
- Editar la regla CSS por defecto: modifica la regla general que se aplica cuando no existe una específica.
- Añadir CSS a todas las reglas: útil para inyectar código global en todas las páginas críticas.
- Eliminar todas las reglas: reinicia la configuración y borra el CSS crítico existente.
Automatización con Autoptimize Pro o Criticalcss.com
Tienes dos formas de automatizar este proceso:
Opción 1: Autoptimize Pro
Autoptimize Pro ofrece una solución integral:
- Automatiza la generación del CSS crítico.
- Añade optimización de imágenes.
- Usa CDN de forma integrada.
- Incluye opciones extra de booster para rendimiento avanzado.
Puedes adquirirlo en autoptimize.com/pro, donde ocasionalmente ofrecen códigos de descuento.
Opción 2: CriticalCSS.com
Otra alternativa es usar Criticalcss.com, una plataforma externa que se integra directamente con Autoptimize:
- Suscripción mensual de 2 €: permite generar CSS crítico manualmente y crear reglas personalizadas.
- Suscripción WordPress (8 € por dominio): automatiza todo el proceso. Solo debes:
- Registrarte en criticalcss.com.
- Obtener tu clave API.
- Pegarlo en el campo correspondiente dentro de Autoptimize.
- A partir de ahí, las reglas se crean automáticamente para cada página.
Funciones adicionales
En la parte inferior, se ofrecen botones para:
- Exportar e importar reglas de CSS crítico, lo cual es útil para migraciones o backups.
- Seleccionar archivos de configuración desde tu equipo local.
Pestaña «Extra»: ajustes avanzados y optimizaciones adicionales
La pestaña «Extra» de Autoptimize agrupa una serie de configuraciones avanzadas que pueden aportar mejoras adicionales en el rendimiento de tu web. Aunque muchas de ellas son opcionales, pueden marcar una diferencia significativa cuando se usan con criterio. A continuación, te explico cada una de ellas:
Google Fonts
Autoptimize permite controlar cómo se gestionan las fuentes de Google, que en muchos casos pueden ralentizar la carga si no se optimizan adecuadamente. Tienes cuatro opciones:
- Dejar tal cual: no se realiza ninguna optimización sobre las fuentes.
- Eliminar las Google Fonts: elimina completamente la carga de fuentes externas, ideal si usas fuentes del sistema o incluidas localmente.
- Combinar y enlazar en la cabecera: combina las llamadas a Google Fonts y las incluye en el
<head>. Cargan rápido, pero bloquean parte del renderizado. Usadisplay:swappara mejorar la experiencia visual. - Combinar y enlazar de forma aplazada en la cabecera: las fuentes se cargan más tarde para no bloquear la presentación inicial. También incluye
display:swap.
Recomendación: la opción de carga aplazada es la más adecuada si buscas una buena puntuación en Core Web Vitals sin sacrificar el diseño.
Eliminar los emojis
Activa esta opción para quitar el CSS y JavaScript que WordPress añade por defecto para mostrar emojis. Esta optimización es segura en la mayoría de los casos y reduce solicitudes innecesarias.
Quitar cadenas de petición de recursos estáticos
Autoptimize puede eliminar las cadenas ?ver=1.0.0 que WordPress añade a los archivos CSS y JS. Aunque esto no mejora la velocidad real de carga, sí puede mejorar la puntuación en algunas herramientas como GTmetrix o PageSpeed Insights.
Eliminar CSS de bloques de WordPress
Si tu web no utiliza el editor de bloques (Gutenberg), puedes desactivar el CSS global que WordPress genera automáticamente. Esto reduce la carga de archivos como global-styles.css y elimina SVGs innecesarios. Usa esta opción con cuidado, ya que si tu sitio usa bloques de Gutenberg, podrías romper el estilo visual.
Preconexión a dominios de terceros (avanzado)
Permite al navegador realizar una preconexión a servicios externos (como Google Fonts, Analytics, etc.), mejorando ligeramente los tiempos de espera en conexiones externas. Solo debes escribir los dominios separados por comas, incluyendo el protocolo (https://fonts.googleapis.com, por ejemplo). Más info en la guía de KeyCDN sobre preconnect.
Precarga de peticiones específicas (avanzado)
Puedes indicar manualmente qué recursos deben precargarse mediante una lista de URLs completas separadas por comas. Es una opción poderosa, pero debe usarse con moderación para no sobrecargar el navegador ni degradar el rendimiento en dispositivos con poca potencia.
Archivos JavaScript asíncronos (avanzado)
Permite marcar ciertos archivos JavaScript como async para que no bloqueen la carga de la página. Puedes añadir rutas externas, ya que los archivos internos del sitio se excluyen automáticamente. Para una gestión más sencilla y flexible, se recomienda usar el plugin Async JavaScript, que se integra perfectamente con Autoptimize.
Optimizar vídeos de YouTube
Gracias al plugin complementario WP YouTube Lyte, puedes aplicar carga diferida a vídeos incrustados de YouTube. En lugar de cargar el iframe completo desde el principio, muestra una miniatura que solo se convierte en vídeo cuando el usuario interactúa, reduciendo considerablemente el impacto en el tiempo de carga.
Cada una de estas opciones puede ayudarte a exprimir al máximo la optimización de tu sitio WordPress. No todas son imprescindibles, pero muchas de ellas ofrecen pequeños ajustes que suman un gran resultado final.
Pestaña «¡Optimizar más!»: recomendaciones y servicios adicionales
La pestaña «¡Optimizar más!» no incluye configuraciones técnicas propiamente dichas, sino que presenta una serie de servicios y herramientas recomendadas por los desarrolladores de Autoptimize para llevar la optimización de tu sitio web un paso más allá. Aunque se trata de contenidos promocionales, plantearte la utilización de estos recursos, si bien no resulta imprescindible, puede ser útil en determinadas circunstancias. En definitiva, esta pestaña actúa como un escaparate de servicios externos y complementarios a Autoptimize, pensados tanto para usuarios avanzados como para quienes prefieren delegar la optimización técnica a profesionales.
Conclusión: ¿merece la pena usar Autoptimize?
Autoptimize es, sin duda, uno de los plugins de optimización más populares para WordPress, y razones no le faltan: es gratuito en sus funciones principales, es versátil, y ofrece una cantidad considerable de opciones para mejorar el rendimiento de una web, especialmente en lo que respecta al manejo de archivos CSS y JavaScript. Su enfoque modular y su compatibilidad con una amplia gama de temas y plugins lo convierten en una solución muy útil para la mayoría de sitios, incluso sin necesidad de configuraciones avanzadas.
Ahora bien, también tiene ciertas limitaciones que conviene tener en cuenta. Algunas funciones clave, como puede ser la caché de página, la optimización automática de imágenes o la generación de CSS crítico están reservadas para la versión Pro, lo cual puede hacer que la versión gratuita se quede corta si se busca una solución todo en uno. Además, hay opciones avanzadas que no están especialmente bien explicadas si no se tiene un conocimiento más detallado, y que pueden resultar confusas o arriesgadas para usuarios que no cuentan con todos los conocimientos técnicos para ello. Sería deseable que algunas de estas mejoras se integraran en la versión gratuita o, al menos, que se ofrecieran perfiles de configuración preestablecidos según el tipo de sitio, algo que siempre simplifica las posibilidades y facilita tareas.
En definitiva, y aunque es un plugin muy recomendable y que consigue unos resultados más que eficaces, quizá no podríamos considerarlo como definitivo. Para sacarle el máximo partido podría ser necesario complementarlo con otras herramientas, o incluso pasar por su versión de pago si se busca un control total del rendimiento desde un único punto.
📸 Imagen: Autoptimize en el repositorio oficial de plugins de WordPress