Guia uso Autoptimize

Plugin Autoptimize

Autoptimize es un optimizador de recursos para WordPress que reduce, combina y reordena JavaScript, CSS y HTML, además de aplicar lazy-load a imágenes/iframes y gestionar Google Fonts y CDN. Al disminuir archivos y eliminar bloqueos de renderizado, acelera el primer pintado útil y reduce trabajo en el hilo principal, lo que suele mejorar Core Web Vitals como LCP, INP/TBT y CLS. Esa mejora de experiencia y velocidad ayuda al SEO de forma indirecta: mejores puntuaciones en PageSpeed, más retención de usuarios y, a menudo, un rastreo más eficiente.

Con CSS crítico puedes incrustar en línea los estilos mínimos para el “above the fold” y diferir el resto, logrando que el contenido aparezca antes y con menos parpadeos. Autoptimize permite minificar y agrupar CSS, inyectar CSS crítico manual o integrarse con servicios de CPCSS, y cargar las fuentes con display=swap, preconnect o preload para estabilizar el texto. En JavaScript puedes diferir y mover scripts al footer para que no bloqueen la pintura, manteniendo exclusiones puntuales cuando algo sea delicado. Combinando estas piezas —CSS crítico + defer/async de JS + fuentes optimizadas + lazy-load bien afinado— obtienes páginas más rápidas y estables que favorecen tanto la UX como el posicionamiento.

Guía de uso del plugin Autoptimize

Autoptimize es un plugin pensado para “limpiar” y organizar los recursos de tu web para que cargue más rápido sin tocar tu tema. No hace caché de página por sí mismo; su fuerte es optimizar JavaScript, CSS, HTML, fuentes, imágenes e iframes, y convive bien con otros plugins de caché siempre que no dupliques funciones. Si ya usas caché de página, deja esa parte allí y usa Autoptimize para la capa de optimización de archivos.

Para empezar, instálalo, actívalo y entra en Ajustes → Autoptimize. Activa la vista avanzada y, de forma conservadora, habilita la optimización de JavaScript, CSS y HTML. Guarda y “vacía caché”, abre tu web en una ventana de incógnito y comprueba que todo funciona. Si algo visual o interactivo falla, retrocede el último cambio, vuelve a guardar y prueba de nuevo; la idea es avanzar en pequeñas dosis y verificar en cada paso 🔁.

En JavaScript suele funcionar bien activar la optimización y diferir la carga para que el contenido aparezca antes. Si notas menús que no abren, sliders parados o formularios raros, excluye los scripts problemáticos o desactiva solo el “agrupado” y vuelve a probar. Mirar la consola del navegador te dará pistas rápidas de qué archivo está causando el conflicto.

En CSS, marca la optimización y el agrupado para reducir peticiones. Evita “incrustar todo el CSS” en el HTML si no sabes lo que haces, porque puede aumentar el tamaño del documento y empeorar el LCP. Si ves parpadeos de estilos al cargar (FOUC), prueba a relajar el agrupado o a excluir el CSS del constructor visual que uses.

La minificación de HTML es un ajuste seguro que recorta espacios y comentarios; actívalo y verifica que las páginas sigan renderizando igual. Es un “win” fácil ✅.

Con imágenes e iframes, activa el “lazy-load” para que se carguen cuando entren en pantalla. Excluir el logo y la imagen principal del hero suele ayudar a mejorar el LCP, porque así esas dos aparecen sin esperar. Para vídeos de YouTube o mapas, el lazy-load reduce mucho el peso inicial. Si buscas compresión de imágenes, puedes conectar Autoptimize con ShortPixel; no es obligatorio, pero suma.

Las fuentes de Google merecen cariño: combina y carga de forma asíncrona cuando sea posible y añade display=swap para evitar que el texto tarde en aparecer. Un preconnect a fonts.gstatic.com acelera el primer byte de las fuentes. Si decides precargar alguna WOFF2 crítica, hazlo solo con la que más se usa en texto para no saturar 🤓.

Si trabajas con un CDN “pull”, rellena el campo de URL base del CDN para que los archivos optimizados salgan por allí. Si usas Cloudflare como proxy, normalmente no hace falta tocar ese campo. Quitar las “query strings” de archivos estáticos puede ayudar con algunos CDNs, aunque no siempre es necesario.

Cada vez que cambies algo, pulsa “Guardar cambios y vaciar caché”, purga la caché de tu otro plugin (si lo hay) y también la del CDN. Prueba en incógnito y mira PageSpeed Insights, sobre todo LCP, CLS y TBT en móvil. Si un ajuste empeora una métrica, deshaz solo ese ajuste y deja el resto; Autoptimize funciona muy bien cuando se afina poco a poco.

Si te topas con problemas, aísla por áreas: desactiva solo la optimización de JS y prueba; si todo vuelve a la normalidad, el conflicto estaba ahí y podrás resolverlo con exclusiones. En tiendas, checkout y carrito son sensibles: sé menos agresivo con JS. Y recuerda evitar la “doble optimización”: no minifiques o agrupes los mismos archivos en dos plugins a la vez. Con esa rutina de prueba y error corto, tendrás un sitio más rápido y estable 🚀.

Optimizar rendimiento Autoptimize

¡Vamos a dejar Autoptimize (gratuito) fino-fino! Te doy un recorrido paso a paso, incluyendo lo evidente, para que no se escape nada.

1. 🧽 Preparación mínima (sí, incluso lo obvio)

• ✅ Haz copia de seguridad (archivos + base de datos).
• ✅ Asegúrate de que WordPress, tema y plugins están actualizados.
• ✅ Si usas otro plugin de rendimiento (LiteSpeed Cache, WP Rocket, SG Optimizer, etc.), desactiva en ese plugin solo “minify/concatenate” de CSS/JS para evitar duplicados. Mantén el caché de página si ya lo usas.
• ✅ Abre una ventana de incógnito: así verás el sitio “como visitante” (los usuarios conectados suelen ver menos optimización por defecto).
• ✅ Ten a mano la URL de 2–3 páginas críticas (home, una de contenido largo, carrito/checkout si hay e-commerce).

2. 🔧 Entra al panel y habilita opciones avanzadas

• ✅ Ve a “Ajustes → Autoptimize”.
• ✅ Marca “Mostrar configuración avanzada” para ver todos los controles.
• ✅ No cambies nada aún: solo familiarízate con las pestañas (JS, CSS, HTML, Imágenes, Extra).

3. ⚙️ JavaScript (empieza conservador, luego aprietas)

• ✅ Marca “Optimizar código JavaScript”.
• ✅ Marca “Agrupar archivos JS (aggregate)”.
• ✅ Activa “Diferir JS” (si está disponible).
• ✅ Deja desactivado “Forzar JS en ” (mejor que vaya al footer).
• ✅ En “Excluir scripts” pega una primera lista segura (evita roturas):
  • jquery.js, jquery.min.js, jquery-core, jquery-migrate
  • wp-includes/js/dist/ (bloques Gutenberg)
  • wp-includes/js/tinymce/ (editor clásico)
  • recaptcha, grecaptcha, google.com/recaptcha (si usas reCAPTCHA)
  • gtm.js (si usas Google Tag Manager)
• ✅ Guarda cambios y pulsa “Guardar cambios y vaciar caché”.
• 👀 Prueba las 2–3 páginas críticas en incógnito. Si algo se rompe (menús que no abren, sliders parados):
  • Añade a “Excluir” el script que falla (mira la consola del navegador → pestaña “Network/Sources”, o desactiva temporalmente “Diferir JS”).
  • Como prueba rápida, desmarca “Agrupar JS” (si así funciona, el conflicto es por el agregado; vuelve a activarlo y refina exclusiones).

4. 🎨 CSS (suave pero eficaz)

• ✅ Marca “Optimizar código CSS”.
• ✅ Marca “Agrupar archivos CSS”.
• ⛔ No marques “Inline todo el CSS” (suele empeorar el LCP por HTML gigante).
• ✅ Si ves opción de “Cargar CSS de manera asíncrona” o “Eliminar CSS que bloquea renderizado”: en la versión gratuita suele requerir CSS crítico manual o el power-up de pago. Con la gratuita, déjalo desactivado salvo que sepas pegar tu “critical CSS” manual.
• ✅ Guarda y vacía caché.
• 👀 Revisa que no haya parpadeo de estilos (FOUC). Si aparece, desactiva “Agrupar inline CSS” (si existiera) o reevalúa el agregado.

5. 🧱 HTML

• ✅ Marca “Optimizar (minificar) HTML”.
• ✅ Desmarca “Mantener comentarios HTML” (no aportan velocidad).
• ✅ Guarda y vacía caché; prueba páginas.

6. 🖼️ Imágenes e iframes (lo que reduce transferencias)

• ✅ Activa “Lazy-load de imágenes”.
• ✅ Activa “Lazy-load para iframes y vídeos” (cuando exista).
• ✅ En “Excluir de Lazy-load”, añade el logo y la imagen principal de portada/Hero si son LCP (para evitar retrasarla). Ejemplos de selectores/nombres:
  • logo, site-logo, .custom-logo, .site-logo img
  • la clase/ID de la hero image si la conoces.
• ✅ Si tu tema permite “width/height” en imágenes, comprueba que las imágenes clave los tengan para evitar CLS.
• ✅ Guarda, vacía caché y prueba.

7. 🅰️ Google Fonts y tipografías (gran impacto en LCP/CLS)

• ✅ En “Google Fonts”, elige “Combinar y cargar de forma asíncrona” o “Eliminar” si usas tipografías del sistema.
• ✅ Marca “Añadir display=swap” si aparece.
• ✅ En “Preload de fuentes” (campo de AO Extra), precarga solo las fuentes WOFF2 críticas del texto principal (peso pequeño, evita abusar). Pega rutas relativas, por ejemplo:
  • /wp-content/themes/tu-tema/assets/fonts/Inter-roman.woff2
• ✅ En “Preconexión (preconnect)/Prefetch DNS” añade, si usas fuentes de Google:
  • https://fonts.gstatic.com y https://fonts.googleapis.com
• ✅ Guarda y prueba (vigila que no aparezcan 404 de fuentes).

8. 🚀 CDN y recursos estáticos

• ✅ Si usas un CDN “pull” tipo BunnyCDN/KeyCDN, rellena el campo “CDN Base URL” (ej. https://cdn.tudominio.com).
• ✅ Si usas Cloudflare como proxy, normalmente deja el campo CDN vacío (Cloudflare reescribe por sí mismo).
• ✅ Activa “Eliminar cadenas de consulta de recursos estáticos (?ver=)” si tu CDN lo recomienda.
• ✅ Guarda y purga caché de Autoptimize + caché de tu CDN (si aplica).

9. 🧪 Pruebas ordenadas (cada cambio → prueba)

• ✅ Abre una ventana de incógnito y navega por las 2–3 páginas críticas.
• ✅ Abre Consola del navegador (F12 → Console). Si hay errores JS, corrígelos con exclusiones en JS.
• ✅ Pasa PageSpeed Insights para “Móvil” en la home y una página de contenido. Apunta 3 métricas: LCP, CLS, TBT.
• ✅ Si el LCP sube tras activar Lazy-load, quita de Lazy-load la imagen LCP (logo/hero).
• ✅ Si el CLS sube, revisa fuentes (preload correcto y tamaños de imágenes).

10. 🎯 Ajustes finos por casos típicos

• 🛒 WooCommerce: si el carrito/checkout se comporta raro, excluye cart-fragments y scripts del checkout del agregado/defer de JS.
• 🧩 Page builders (Elementor/Divi/Beaver): asegúrate de excluir scripts que el builder cargue de forma dinámica si ves roturas.
• 🔐 reCAPTCHA/Analytics/Mapas: mantenlos fuera de agregado/defer (exclusiones de arriba).
• 📰 Gutenberg: mantener excluido wp-includes/js/dist/ evita dolores de cabeza.

11. ⛑️ Cómo volver atrás si algo falla

• ✅ En Autoptimize, desmarca temporalmente “Optimizar JS” (prueba) → si ok, el conflicto está en JS.
• ✅ Si no, desmarca “Optimizar CSS” (prueba).
• ✅ Si persiste, desactiva Autoptimize para confirmar y reconfigura paso a paso.

12. 📌 Perfil recomendado “equilibrado” para la mayoría

• ✅ JS: Optimizar + Agrupar + Diferir; excluir jquery*, wp-includes/js/dist/, tinymce/, recaptcha*, gtm.js.
• ✅ CSS: Optimizar + Agrupar; sin inline masivo.
• ✅ HTML: Optimizar.
• ✅ Imágenes: Lazy-load (excluye LCP/logo).
• ✅ Google Fonts: Combinar + async + display=swap; Preconnect a fonts.gstatic.com; Preload de 1–2 WOFF2 críticos.
• ✅ Extra: Eliminar emojis; quitar ?ver= si tu CDN lo agradece.
• ✅ CDN: campo vacío si usas Cloudflare proxy; relleno si usas CDN “pull”.

13. 🧭 Rutina final de trabajo cada vez que toques algo

• ✅ “Guardar cambios y vaciar caché” en Autoptimize.
• ✅ Vaciar caché del plugin de caché de páginas (si lo hay).
• ✅ Purgar CDN (si lo hay).
• ✅ Probar en incógnito.
• ✅ Pasar PageSpeed Insights (móvil) y anotar LCP/CLS/TBT.

Dependiendo del tema/builder que uses (y si tienes WooCommerce, reCAPTCHA, CDN, etc.), más abajo dejo una lista de exclusiones “afinada” para tu caso y una mini-checklist de verificación de LCP/CLS con tus páginas clave.

Pasos configurar Autoptimize

A veces surgen conflictos entre plugins de caché como Autoptimize y plugins para formularios de contacto como Sureforms. Para evitar problemas debes seguir estos pasos en la configuración de tu plugin ( Reglas básicas )

En tu plugin de caché/optimización (WP Rocket, LiteSpeed, SG Optimizer, W3TC, Autoptimize…):

• Nunca cachear estas rutas: /contacto/ /wp-json/* /wp-admin/admin-ajax.php
• Desactiva “Combinar/Minificar/Deferir/Delay JS” para scripts de formularios: añade excepciones con palabras clave como: sureforms recaptcha gstatic
• Si usas Cloudflare:
  • Rules → Page Rules/URL Rules: para /contacto/* y /wp-json/* pon Cache Level: Bypass y Disable Performance.
  • Desactiva Rocket Loader si lo usas.
• Guarda cambios, vacía caché (plugin + Cloudflare) y prueba otra vez en incógnito.

Tutorial plugin Autoptimize

Autoptimize funciona como una “capa de empaquetado y orden” por encima de tu tema y del resto de plugins: minifica y concatena JS/CSS, reordena su carga para que no bloqueen la pintura, limpia el HTML, aplica lazy-load a imágenes e iframes, gestiona Google Fonts y añade extras como preconnect, preload y eliminación de emojis. Su valor real aparece cuando lo usas junto a un caché de página y, si procede, un CDN: el caché sirve HTML estático; Autoptimize reduce y reordena los recursos que ese HTML llama. En sitios con muchos plugins, cada extensión añade sus propios scripts y hojas de estilo; AO los agrupa para recortar peticiones y, con defer, permite que el navegador pinte antes. La clave es avanzar en pasos pequeños, medir LCP/CLS/INP y aislar conflictos por área.

En JavaScript, lo avanzado empieza por decidir si agregas o no. Con HTTP/2 muchas guías dicen que no hace falta concatenar; en WordPress, aún suele compensar agrupar para reducir “chatarrilla” de plugins. Activa optimización + agregado y usa defer para que los scripts no bloqueen. Si algo interactivo “muere”, revisa la consola de DevTools, localiza el archivo y añádelo a exclusiones; los terceros delicados (reCAPTCHA, GTM, mapas, chat) conviene dejarlos fuera del agregado y del defer. El orden importa: algunos plugins esperan que jQuery esté listo antes que sus add-ons; excluir jquery* y cargarlo como venía puede salvarte muchas horas. AO ofrece opciones como “intentar atrapar errores” (envuelve scripts en try/catch) para evitar que un fallo detenga el resto; útil al principio, pero no lo uses como muleta permanente porque puede esconder problemas reales. Cuando un script en línea rompe defer (por depender de variables globales que aún no existen), prueba a desactivar “agrupar JS en línea” o crea una pequeña exclusión por patrón para ese bloque.

En CSS, la pieza maestra es el CSS crítico. El patrón ideal: inyectas en línea solo lo necesario para el “above the fold” y difieres el resto. En Autoptimize gratuito puedes pegar tu CSS crítico en el campo “Inline & Defer CSS”; si no lo tienes, genera uno con DevTools: abre Cobertura (Coverage), recarga en modo frío y copia reglas que afecten a la primera pantalla, simplificando tipografías, layout del header/hero y navegación. Evita “incrustar todo el CSS” porque hincha el HTML y empeora LCP; mejor agrupar hojas externas y diferirlas. Para reducir parpadeos, asegúrate de que el crítico incluye alturas/anchos básicos de cabecera, hero e imagen LCP. Si usas un constructor (Elementor/Divi/Beaver), su CSS puede ser dinámico por plantilla; mantén el agregado activo pero deja fuera paquetes gigantes que se regeneran a menudo si causan FOUC. Como regla, un único bloque de crítico global bien elegido da el 80% del beneficio; si quieres hilar fino, puedes tener variantes por plantillas clave (home, entrada, producto) pegándolas manualmente cuando publiques cambios grandes.

Las fuentes web afectan mucho al LCP y al CLS. En la sección de Google Fonts de AO, usa “combinar y cargar de forma asíncrona” o directamente “eliminar” si puedes quedarte con fuentes del sistema. Asegura display=swap para evitar FOIT (texto invisible). Añade preconnect a fonts.gstatic.com y, si sirves tus propias WOFF2, usa el campo de “preload” para 1–2 archivos críticos (peso bajo, formato WOFF2). No precargues todas las variantes; céntrate en la regular del cuerpo y, si el hero usa una de titulares distinta, esa. Tras precargar, verifica en la red que el CSS de la fuente llega después del preconnect y que no hay 404 ni redirecciones lentas.

En imágenes e iframes, el lazy-load de AO reduce mucho la transferencia inicial. Excluye del lazy la imagen LCP (normalmente el hero) y el logo para que aparezcan sin retraso. Para YouTube, aprovecha la opción de reemplazar el iframe por una imagen de previsualización y cargar el reproductor solo al hacer clic; ahorrarás cientos de KB y decenas de solicitudes en móvil. Si además usas un optimizador de imágenes (ShortPixel/Imagify/tinyPNG), deja a AO la pereza de carga y a ese otro plugin la compresión/servir WebP/AVIF. Comprueba siempre que las imágenes clave definen width/height para evitar CLS.

El apartado “Extra” es donde Autoptimize gana puntos finos: elimina los emojis de WP para ahorrar una petición, quita las query strings ?ver= si tu CDN lo valora, añade DNS-prefetch y preconnect a dominios de terceros (analytics, tags, fuentes, mapas) y usa el campo “preload” para recursos realmente críticos (fuentes, CSS crítico externo si lo separas). No abuses de preload: fuerza al navegador a descargar cosas incluso si no son necesarias; dos o tres como máximo. Si trabajas con un CDN “pull”, rellena la URL base del CDN para que los archivos optimizados salgan ya por edge; con Cloudflare proxy normalmente no hace falta tocar ese campo porque reescribe solo.

La gestión de caché merece atención. Autoptimize guarda agregados en wp-content/cache/autoptimize; al actualizar plugins/tema, esos archivos cambian y el plugin renueva el hash en el nombre (cache busting). Aun así, conviene vaciar la caché de AO cuando hagas cambios grandes y, si usas otro plugin de caché o CDN, purgar también allí para evitar servir mezclas viejas. Vigila el tamaño de la carpeta de AO; si crece mucho tras semanas de iteraciones, haz una limpieza. Evita optimizar para usuarios conectados (a menos que lo necesites en intranets) porque genera variantes y puede ensuciar la caché.

Un flujo de trabajo avanzado y estable es este: habilita JS/CSS/HTML, agrega y difiere, añade crítico mínimo y configura fuentes. Recorre páginas clave en incógnito, mira la consola y la pestaña “Network” con el filtro “JS” para detectar errores de orden. Si un componente muere, apaga solo “agregar JS” y confirma; si revive, vuelve a activarlo y añade exclusiones por archivo o patrón. Mide en PageSpeed Insights móvil y en un test de campo (Search Console Core Web Vitals o un RUM si tienes). Apunta LCP y CLS antes/después. Ajusta el crítico hasta que el LCP caiga y la “Carga de recursos bloqueantes” en PSI sea mínima.

Hay escenarios conocidos donde conviene suavizar. En WooCommerce, no toques wc-cart-fragments ni scripts de checkout de pasarelas; exclúyelos del agregado y, a veces, del defer para evitar carritos o formularios que no reaccionan. En sitios con recaptcha v3, deja grecaptcha fuera de agregado y defer; carga “después” pero sin romper su inicialización. En Elementor/Divi, si el editor en vivo falla, desactiva optimización para usuarios conectados o excluye archivos del editor. Para mapas, mejor carga diferida bajo clic o con un observador de intersección.

Dos trucos extra marcan diferencia. Primero, usa Coverage de DevTools para cuantificar CSS/JS no usados en la primera visita y reduce lo que metas en el crítico a lo estrictamente necesario; copiar bloques enormes como “reset + utilidades + todo el header” derrota el propósito. Segundo, aprovecha rel="preconnect" para dominios con TLS costoso y rel="preload" para el recurso número uno que determina tu LCP (fuente o imagen), validando con la cronología de red que realmente adelanta su llegada; si no adelanta, retíralo. Y recuerda: cada “excepción” añadida hoy es deuda técnica mañana, así que documenta qué excluiste y por qué.

Finalmente, piensa en Autoptimize como orquestador, no como mago. No puede arreglar un tema pesado por sí solo, pero sí exprimirá al máximo lo que ya tienes. Si mantienes una rutina de “cambiar-medir-consolidar”, con crítico bien hecho, defer/async juicioso, fuentes afinadas, lazy-load selectivo y extras de red bien aplicados, tus páginas cargarán antes, bloquearán menos el hilo principal y moverán menos el layout. Eso se traduce en mejores Core Web Vitals y, en la práctica, en más clics, más scroll, menos rebote y señales de UX que acompañan a un SEO más sólido.

Configuración detallada Autoptimize

🔧 JavaScript

¿Usar?	Descripción
Sí	Optimizar JS: minifica y reordena JavaScript.Reduce tamaño y peticiones para acelerar el “paint”.Base para mejorar LCP e INP sin tocar el tema.
Sí	Agregar archivos JS: concatena múltiples scripts.Menos requests en sitios con muchos plugins.Facilita aplicar defer de forma uniforme.
Sí	Diferir JS: carga los scripts después del render.Evita bloqueo del hilo principal en el inicio.El contenido aparece antes y mejora LCP.
No	Forzar JS en el <head>: sube el bloqueo inicial.Puede romper el orden óptimo de ejecución.Mejor dejar JS al final del documento.
No	Agregar JS “inline”: puede romper dependencias.Dificulta depurar errores de scripts embebidos.Mantén inline fuera del agregado.
Sí	Excluir jQuery (jquery*): evita conflictos de orden.Muchos plugins dependen de su carga original.Más estabilidad en menús/sliders.
Sí	Excluir Gutenberg (wp-includes/js/dist/).Scripts del editor no deben optimizarse para front.Previene fallos en edición y front.
Sí	Excluir reCAPTCHA/grecaptcha y gtm.js.Son delicados a defer/aggregate.Se cargan aparte sin romper inicialización.
No	Envolver scripts en try/catch: útil solo de test.Oculta errores reales si lo dejas fijo.Mejor solucionar con exclusiones.

🎨 CSS

¿Usar?	Descripción
Sí	Optimizar CSS: minifica y limpia espacios/comentarios.Reduce peso total de estilos del tema y plugins.Mejora tiempos de transferencia.
Sí	Agregar archivos CSS: menos solicitudes iniciales.Útil con múltiples hojas pequeñas de plugins.Ayuda a estabilizar el orden de carga.
No	Incrustar “todo” el CSS en HTML.Engorda el documento y empeora LCP.Prefiere crítico en línea + resto diferido.
Sí	Inline & Defer CSS crítico (manual).Estilos mínimos para “above the fold” en línea.El resto se carga sin bloquear la pintura.
No	Agregar CSS “inline”: puede causar FOUC/bugs.Mezclar embebidos con externos complica el render.Mantén inline solo para el crítico.

🧱 HTML

¿Usar?	Descripción
Sí	Minificar HTML: quita espacios y saltos.Entrega páginas más ligeras sin cambiar el diseño.Gana rendimiento con riesgo muy bajo.
No	Mantener comentarios HTML activos.Añaden peso innecesario al documento.Útiles solo en desarrollo, no en producción.

🖼️ Imágenes e iframes

¿Usar?	Descripción
Sí	Lazy-load de imágenes: carga al entrar en viewport.Reduce peso inicial, mejora FCP/LCP secundarios.Excluye logo/hero para no retrasar.
Sí	Lazy-load de iframes/vídeos (YouTube/Maps).Evita cargar reproductores pesados de inicio.Gran ahorro en móvil y 3G.
Sí	Reemplazar YouTube por miniatura al clic.Solo se inserta el iframe cuando el usuario interactúa.Reduce cientos de KB y requests.
Sí	Excluir del lazy la imagen LCP y el logo.Garantiza que el contenido principal pinta antes.Mejora LCP y evita parpadeos.
No	Lazy-load de fondos CSS (experimental).Suele ser inestable según el tema.Mejor optimizar imágenes de fondo manualmente.

🅰️ Fuentes

¿Usar?	Descripción
Sí	Combinar Google Fonts en una sola solicitud.Menos “round trips” para CSS de fuentes.Facilita control de caché y orden.
Sí	Carga asíncrona + display=swap.Evita texto invisible (FOIT) y mejora UX.El contenido aparece con fallback y se actualiza.
Sí	Preconnect a fonts.gstatic.com/fonts.googleapis.com.Abre la conexión antes de pedir la fuente.Reduce latencia TLS/DNS inicial.
Sí	Preload de 1–2 WOFF2 críticas (titular/cuerpo).Acelera la llegada de la fuente clave del LCP.No precargar variantes innecesarias.
No	Eliminar Google Fonts (solo si usas sistema).Si quieres tipografías nativas, actívalo y borra.En esta config mantenemos fuentes web.

⚙️ Extra y red

¿Usar?	Descripción
Sí	Eliminar emojis nativos de WordPress.Quita un script y request adicionales.Usa emojis del sistema si se necesitan.
Sí	Quitar query strings ?ver= en estáticos.Mejora caché en algunos CDNs/proxies.El busting ya va en el nombre del archivo.
Sí	DNS Prefetch de terceros (analytics, chat, etc.).Resuelve DNS antes de necesitarlos.Pequeña mejora en dominios externos.
Sí	Preconnect a dominios críticos (CDN, APIs, Fonts).Abre sockets/TLS de forma proactiva.Reduce la cascada de espera inicial.
Sí	Preload de recursos realmente críticos (pocos).Usar solo para fuente/imagen LCP o CSS clave.Verificar en DevTools que adelanta.

🌐 CDN y variantes

¿Usar?	Descripción
Sí	URL base de CDN (si usas CDN “pull”).Sirve archivos optimizados desde el edge.No rellenar si usas Cloudflare proxy.
No	Optimizar para usuarios conectados/administradores.Genera variantes y ensucia la caché.Manténlo apagado salvo intranets.
Sí	Purgar caché de AO tras cambios de plugins/tema.Evita servir agregados desactualizados.Coordina con caché de página y CDN.

🧪 Exclusiones clave sugeridas (JS)

¿Usar?	Descripción
Sí	Excluir jquery.js/jquery.min.js y jquery-migrate.Evita desorden de dependencias de plugins.Reduce errores de menús y sliders.
Sí	Excluir wp-includes/js/dist/ (Gutenberg).Editor y bloques cargan sin optimizaciones conflictivas.Previene fallos en front/back.
Sí	Excluir recaptcha, grecaptcha, google.com/recaptcha.reCAPTCHA es sensible a defer/aggregate.Garantiza validaciones estables.
Sí	Excluir gtm.js (Google Tag Manager).Permite que el contenedor se inicie correctamente.Medición fiable sin bloquear render.
Sí	Excluir scripts de checkout/carrito en WooCommerce.Deja wc-cart-fragments y pasarelas fuera.Evita errores en procesos de pago.

✔️ Sugerencias de uso

¿Usar?	Descripción
Sí	Medir antes/después (PSI móvil: LCP/CLS/INP).Aplicar cambios pequeños y probar en incógnito.Documentar exclusiones para futuro.
Sí	Mantener crítico corto y específico del “above the fold”.Incluir tamaños en imágenes para evitar CLS.Revisar cobertura de CSS en DevTools.

Personalizar Autoptimize profesionalmente

Un consultor SEO empieza por auditar la pila completa antes de tocar Autoptimize: mide Core Web Vitals de campo (Search Console) y de laboratorio (PSI/Lighthouse), revisa qué plugin hace caché de página, si hay CDN, compresión Brotli/HTTP/3 en el edge y si otros plugins ya minifican. Luego define un “circuito” de pruebas: páginas representativas (home, categoría, entrada, producto, checkout), navegador en incógnito y una herramienta de inspección abierta (consola y red). La regla de oro es iterar en bloques pequeños con control de cambios: activar una función, probar funcionalidad, medir LCP/CLS/INP y consolidar. En sitios con tráfico, todo se hace en staging y se programa ventana de publicación con purgado coordinado (Autoptimize + caché de página + CDN).

En JavaScript, la personalización profesional distingue entre “crítico para interacción inicial” y “ornamental”. Se activa optimización, agregado y defer, pero se construye una lista de exclusiones por familias: jQuery y migrate sin tocar, bloques Gutenberg fuera, reCAPTCHA/grecaptcha y gtm.js siempre sin agregar ni diferir, y scripts de checkout/carrito de WooCommerce intactos. Cuando el sitio usa muchos widgets de terceros (chats, mapas, reproductores), se relegan a carga por interacción o por viewport mediante el lazy de iframes o disparadores de IntersectionObserver. Para domar problemas de orden, el consultor identifica el script exacto que rompe (mensaje de consola, 404, dependencia no resuelta) y lo mueve a exclusión o desactiva “agregar JS en línea” si hay bloques embebidos que deben ejecutarse antes. La opción de envolver en try/catch es un salvavidas temporal de diagnóstico, no una solución permanente porque oculta fallos y penaliza INP.

En CSS, el trabajo fino se centra en CSS crítico real. En la versión gratuita, el experto genera manualmente un bloque mínimo con DevTools Coverage y lo pega en “Inline & Defer CSS”: cabecera, navegación, estructura del hero y tipografía básica, incluyendo alturas/anchos que evitan CLS. El resto del CSS se agrupa y se difiere. Para plantillas muy distintas, se mantienen variantes de crítico (home, post, producto) controlando su actualización con cada despliegue importante; si no hay recursos para mantener varios, se optimiza uno global bien ajustado. Nunca se incrusta “todo el CSS” en el HTML y se evita agregar CSS inline, que suele producir FOUC y complica el orden. Si hay constructor visual, se tolera su CSS masivo pero se recorta su impacto con crítico correcto y exclusiones puntuales de paquetes dinámicos que cambian con frecuencia.

Las fuentes se tratan como primer ciudadano del LCP. El consultor combina Google Fonts, aplica display=swap, añade preconnect a fonts.gstatic.com y decide uno o dos preloads WOFF2 críticos (cuerpo regular y, si procede, titular) verificando en la cascada de red que llegan antes que el texto visible. Se evita precargar variantes que no pintan above the fold. Si las fuentes están autoalojadas, se corrigen tipos MIME y tiempos de caché largos. Cuando el diseño lo permite, se migra a fuentes del sistema en móvil para desplazar peso fuera del camino crítico.

Con imágenes e iframes se aplica lazy con criterio. Se excluye del lazy la imagen LCP y el logo, y se sustituye el iframe de YouTube por miniatura hasta el clic. El consultor valida que las imágenes tengan width/height para que CLS baje y añade, desde el tema, fetchpriority="high" a la LCP si es pertinente; aunque Autoptimize no inserte ese atributo por sí mismo, su configuración debe convivir con él. Si hay optimizador de imágenes, se reparte el trabajo: AO gestiona lazy y orden; el optimizador hace compresión y formatos modernos.

El bloque “Extra” se usa con bisturí: eliminación de emojis por defecto, DNS prefetch y preconnect solo a dominios que realmente aparecen en el primer tercio de la cascada, y preload reservado para el recurso que manda en tu LCP. Quitar query strings en estáticos se aplica si el CDN lo prefiere; si existe un pipeline de deployment que hace cache-busting por nombre, se deja activo, si no, se evalúa el riesgo de servir activos obsoletos. La URL base de CDN se completa únicamente en CDNs “pull”; con Cloudflare proxy se deja vacía para no duplicar reescrituras.

Hay funciones que un usuario normal no debería tocar y un experto sí: 1) el campo de CSS crítico manual; requiere saber extraer reglas que realmente pintan above the fold y mantenerlas. 2) exclusiones avanzadas por patrón en JS/CSS; una mala exclusión rompe el sitio o invalida la optimización. 3) preload/preconnect/DNS-prefetch; mal usados empeoran la cascada y aumentan bloqueo. 4) agregar inline JS/CSS; solo se activa en diagnósticos muy concretos y se vuelve a desactivar. 5) desactivar/forzar optimización por URL o plantilla (checkout, áreas de app) usando marcadores <!--noptimize-->…<!--/noptimize--> o lógica condicional a nivel de tema; poderoso, pero fácil de causar variaciones de caché inesperadas. 6) optimizar para usuarios conectados; útil en intranets, contraproducente en sitios públicos porque multiplica variantes.

Un consultor también gobierna el ciclo de caché. Después de cambios de plugins o tema, purga Autoptimize, el caché de página y el CDN, verificando que los nuevos agregados llevan hash distinto y que no hay mezcla viejo/nuevo en el edge. Supervisa el tamaño de wp-content/cache/autoptimize y programa limpiezas si crece por iteraciones. En instalaciones grandes, desactiva optimización para administradores/editores para evitar cache misses mientras trabajan.

La validación es tan importante como la configuración. En laboratorio, Lighthouse con throttling simulado verifica reducción de “recursos que bloquean el render”, descenso de LCP y menos long tasks (TBT/INP proxies). En campo, se monitoriza Core Web Vitals por plantilla y por dispositivo, idealmente con RUM o, como mínimo, con Search Console segmentando por URL. Se comprueba que el preloaded realmente adelanta bytes en la cascada, que el defer no posterga listeners necesarios para la primera interacción y que no hay errores de consola en páginas críticas. Si una métrica empeora, se deshace solo el cambio asociado y se documenta.

La personalización profesional también contempla casos especiales. En WooCommerce, se excluyen wc-cart-fragments y scripts de pasarelas, y se evita introducir latencia extra en checkout. En webs con heavy ads o tag managers, se aisla AO de esos contenedores y se delega la pereza de terceros a su propia configuración o a “consent mode”; el objetivo es que la experiencia sin interacción se pinte limpia y que los terceros entren después. En sitios multilingües o con personalizaciones fuertes, se valida que las variantes de CSS crítico no rompan idiomas RTL o plantillas locales.

En síntesis, personalizar Autoptimize a nivel consultoría no es activar todo, sino decidir qué no optimizar y cuándo, con pruebas y métricas que guíen. Las funciones de alto impacto en manos expertas son el CSS crítico manual, las exclusiones quirúrgicas, el orden de JS con defer, el tratamiento de fuentes con preconnect/preload y el uso prudente de extras de red. Para un usuario normal, tocar esas áreas sin método puede degradar Core Web Vitals o romper funciones; para un experto, son las palancas que convierten un buen 70/100 en un estable 90+/100 sostenido en el tiempo y, lo que importa, en mejores señales de UX y negocio.

Opciones avanzadas Autoptimize

Aquí van opciones realmente avanzadas que suelen usar los consultores para «domar» Autoptimize con código. Pon estos fragmentos en el functions.php de tu tema hijo o, mejor, en un mu-plugin. Úsalos con cuidado y mide siempre Core Web Vitals tras cada cambio.

Desactivar Autoptimize por URL o plantilla. Útil para checkout, landings A/B o páginas con apps embebidas.

// Desactiva AO si la URL contiene /checkout/ o si es un CPT concreto
add_filter('autoptimize_filter_noptimize','ao_no_opt_en_paginas',10,0);
function ao_no_opt_en_paginas(){
  if ( strpos($_SERVER['REQUEST_URI'],'/checkout/') !== false || is_singular('mi_cpt') ) {
    return true; // no optimizar
  }
  return false;
}

Esto corta todas las optimizaciones de AO bajo condiciones específicas, evitando roturas en flujos críticos. (GitHub)

Forzar atributos de carga en JavaScript. AO añade defer a los agregados; puedes añadir async a no agregados o ajustar la bandera.

// Añade "async " además de defer cuando proceda
add_filter('autoptimize_filter_js_defer', function($flag){
  return $flag . 'async ';
}, 10, 1);

Muy útil para terceros no críticos (analytics secundarios, widgets). No lo apliques a scripts con dependencias síncronas. (GitHub)

Exclusiones dinámicas de JS y CSS. Mejor que mantener listas a mano en el panel si cambias de plugins/plantillas.

// JS: añade exclusiones programáticas
add_filter('autoptimize_filter_js_exclude', function($exclude){
  $extra = [
    'jquery.js', 'jquery-migrate',
    'wp-includes/js/dist/', // Gutenberg
    'recaptcha', 'grecaptcha', 'gtm.js'
  ];
  return $exclude . ',' . implode(',', $extra);
}, 10, 1);

// CSS: evita optimizar ciertas hojas
add_filter('autoptimize_filter_css_exclude', function($exclude){
  return $exclude . ',recentcomments,mi-plugin/css/dinamico.css';
}, 10, 1);

Centralizas la política de exclusiones y reduces regresiones tras updates. (GitHub)

Mover la inyección de CSS/JS. Si necesitas controlar el punto exacto donde AO inserta agregados (para evitar FOUC o respetar placeholders de tu tema).

// Inserta CSS optimizado inmediatamente después de <head>
add_filter('autoptimize_filter_css_replacetag', function($t){
  return ["<head>", "after"];
}, 10, 1);

// Reemplaza un marcador personalizado por el JS optimizado
add_filter('autoptimize_filter_js_replacetag', function($t){
  return ["<injectjs />", "replace"]; // pon <injectjs /> en tu plantilla
}, 10, 1);

Funciona muy bien en temas headless/híbridos o cuando compones el HTML con marcadores. (GitHub)

Agrupar sin minificar. En debugging o si un minificador choca con algún script, sigue agregando para reducir solicitudes pero desactiva minificación.

add_filter('autoptimize_js_do_minify',  '__return_false'); // JS sin minificar
add_filter('autoptimize_css_do_minify','__return_false');  // CSS sin minificar

Te permite aislar si los problemas vienen de la minificación o del orden. (GitHub)

Afinar el CSS crítico inline. Si usas «Inline & Defer CSS», puedes inyectar reglas adicionales o variantes por plantilla.

// Añade o modifica el bloque de crítico que AO inyectará en línea
add_filter('autoptimize_filter_css_defer_inline', function($critical){
  if ( is_singular('product') ) {
    $critical .= ' .product-gallery{min-height:420px} .price{font-weight:600} ';
  }
  return $critical;
}, 10, 1);

Estabiliza el CLS añadiendo alturas mínimas o estilos de cabecera específicos solo donde aplican. (GitHub)

Control fino de Data-URI en imágenes de fondo. AO puede convertir pequeñas imágenes CSS background en data:URI; ajusta el umbral o excluye ficheros para no inflar el CSS.

// Sube el límite (bytes) para convertir imágenes a data:URI (o bájalo)
add_filter('autoptimize_filter_css_datauri_maxsize', function($size){
  return 12000; // p.ej. 12KB
}, 10, 1);

// Excluye archivos concretos de la conversión a data:URI
add_filter('autoptimize_filter_css_datauri_exclude', function($list){
  $excluir = ['hero-bg.jpg','pattern.png'];
  return $list . ',' . implode(',', $excluir);
}, 10, 1);

Útil cuando un hero o patrón se repite mucho: mejor servirlo como archivo en caché/CDN que embebido en el CSS. (GitHub)

Forzar que ciertos scripts bajen al final. Si un script propio se te queda arriba por como lo encola el tema, puedes empujarlo «al final» con el filtro interno.

add_filter('autoptimize_filter_js_movelast', function($arr){
  $arr[] = 'mi-script.js'; // coincidencia por cadena
  return $arr;
}, 10, 1);

Reducirás bloqueo de render en cabecera y harás sitio a CSS/HTML crítico. (GitHub)

Optimización selectiva «por lotes». Cuando quieres probar AO solo en un conjunto de URLs (p. ej., blog) sin tocar la tienda:

add_filter('autoptimize_filter_noptimize','ao_solo_en_blog',10,0);
function ao_solo_en_blog(){
  if ( is_shop() || is_cart() || is_checkout() ) return true; // no AO en e-commerce
  if ( is_home() || is_singular('post') || is_category() )   return false; // sí AO en blog
  return true; // resto sin AO
}

Minimizas riesgo mientras validas mejoras y evitas efectos en áreas sensibles. (GitHub)

Interacción con fuentes web. Si autohospedas WOFF2 y notas que el CSS de fuentes se inserta en un punto que te provoca FOIT/FOUC, combina preconnect/preload desde el tema y usa el replacetag de CSS para inyectar antes:

// Mueve el CSS optimizado inmediatamente tras <head> (reduce FOUC de fuentes)
add_filter('autoptimize_filter_css_replacetag', function($t){ return ["<head>","after"]; }, 10, 1);

// En tu header.php añade (ejemplo):
// <link rel="preconnect" href="https://cdn.midominio.com" crossorigin>
// <link rel="preload" as="font" href="/fonts/Inter-roman.woff2" type="font/woff2" crossorigin>

La clave es verificar en la cascada que el preload adelanta bytes y que el CSS optimizado queda disponible cuanto antes. (GitHub)

Placeholders personalizados para JS. En temas avanzados puedes colocar un marcador en tu plantilla y pedir a AO que reemplaze ahí el bundle de JS, útil con frameworks isomórficos/híbridos.

// En tu plantilla:   <injectjs />
// Filtro (repetimos): 
add_filter('autoptimize_filter_js_replacetag', function($t){
  return ["<injectjs />","replace"];
}, 10, 1);

Ganas control quirúrgico del orden cuando conviven SSR y componentes hidratados. (GitHub)

Todas estas capacidades son APIs públicas de filtros de Autoptimize, pensadas para personalizar su comportamiento más allá del panel. Cuando trabajes con ellas, documenta cada cambio y vincúlalo a una hipótesis de rendimiento; así podrás revertir rápido si alguna optimización afecta a funcionalidad o métricas. (GitHub)

Plugin Autoptimize recomendaciones

• Power-up de Critical CSS por dispositivo: usa el complemento oficial de Autoptimize CriticalCSS para generar crítico distinto en móvil y escritorio y por tipo de plantilla. Recalcula cuando cambies cabecera, tipografías o layout del hero.
• TTL y cacheado “immutable” en CDN: sirve /wp-content/cache/autoptimize/* con Cache-Control largo (≥30 días) y, si puedes, immutable. Sube el TTFB del HTML si hace falta, pero deja los agregados súper cacheados.
• Compresión en edge: verifica que los bundles de AO salen con Brotli (o Gzip) y MIME correcto (text/css, application/javascript). Una compresión mal configurada te roba puntos en LCP/TBT sin tocar AO.
• Subdominio estático sin cookies: si no usas proxy tipo Cloudflare, sirve assets de AO desde cdn.tudominio.com sin cookies. Configura el CDN base de AO y revisa CORS para fuentes (crossorigin).
• Evitar “doble lazy-load”: si tu tema/otro plugin ya aplica loading="lazy", desactiva el lazy de AO o viceversa. Dos capas de lazy pueden retrasar el LCP o dejar imágenes “ancladas”.
• Preload selectivo de la imagen LCP: utiliza el campo de preload de AO solo para la hero/home si esa imagen domina tu LCP. No pre-cargues galerías o thumbs; crea deuda de ancho de banda.
• CSP estricto y AO: si aplicas Content-Security-Policy sin unsafe-inline, evita inline crítico y mantén CSS/JS externos para poder noncear/hashear. Ajusta AO para no agregar inline.
• Localización de Google Fonts: si migras a fuentes locales (OMGF/Local Google Fonts), activa en AO Eliminar Google Fonts; evita duplicados (local + remoto) que inflan transferencias y CLS.
• JSON-LD intacto: asegura que AO no toca application/ld+json. Si ves cambios en marcado estructurado, desactiva “agregar JS inline” y deja los bloques de datos fuera de cualquier minificación.
• Multilenguaje y crítico por idioma: en WPML/Polylang, define CSS crítico por idioma cuando las fuentes o alturas de texto cambian entre locales; pequeños ajustes evitan CLS solo en ciertas traducciones.
• Prueba con y sin agregado en HTTP/2/3: no asumas. En algunos hosts HTTP/3, minificar sin agregar (o agregar solo CSS) rinde mejor por multiplexado. Mide dos perfiles y quédate con el ganador.
• Warm-up tras purga: después de “Vaciar caché”, lanza un crawler de warm-up (del caché de página o del CDN) sobre home + top templates para regenerar los bundles y evitar la primera visita fría.
• Límites de Data-URI: sube ligeramente el umbral de data:URI solo para iconos SVG minúsculos y bájalo para PNG/JPG; evita embutir bitmaps que engordan el CSS y penalizan el parser.
• Orden de CSS “de diseño” vs “de utilidades”: cuando uses utilidades (Tailwind/Framework), garantiza con AO que el bundle de utilidades vaya después del CSS del tema si necesitas sobrescrituras limpias.
• Desactivar AO en búsquedas y endpoints: excluye /search/, paginaciones profundas o páginas con filtros intensivos si ves latencia por JS diferido; mejor una UX fluida que un “100/100” teórico.
• Checklist de regresiones: documenta en tu proyecto qué excluyes y por qué (jQuery, grecaptcha, GTM, checkout, mapas). Cada actualización de plugin revisa esa lista; así evitas revertir a ciegas.

Plugin Autoptimize tutorial fácil

¿Te has perdido con toda esta terminologia? No te preocupes, aqui te dejo un glosario fácil para que puedas entenderlo todo paso a paso si eres principiante:

• Autoptimize: plugin que “ordena” y comprime JS, CSS y HTML para que la web cargue más rápido sin cambiar tu tema.
• Minificar: quitar espacios/comentarios de archivos para que pesen menos; ej., de 50 KB a 35 KB.
• Agrupar/Concatenar: unir muchos JS/CSS en uno solo para reducir peticiones; útil en sitios con muchos plugins.
• Defer (diferir): decirle al navegador “carga el JS después de pintar la página” para que el contenido aparezca antes.
• Async: cargar JS en paralelo sin bloquear; ideal para scripts que no dependen de otros.
• Inline: meter código directamente en el HTML; bueno para CSS crítico corto, malo si pones “todo” el CSS.
• CSS crítico: estilos mínimos para lo que se ve primero (“above the fold”); hace que la primera impresión sea instantánea.
• Above the fold: zona visible sin hacer scroll; header, menú, hero. Optimizarla mejora LCP.
• LCP: tiempo hasta que aparece el elemento grande (imagen hero, titular); clave para SEO.
• CLS: saltos visuales inesperados; se evita fijando ancho/alto de imágenes y fuentes estables.
• INP: rapidez al responder a clics/teclado; JS pesado la empeora.
• TBT: tiempo de bloqueo por tareas largas de JS; bajar TBT suele mejorar INP.
• FCP: primer contenido visible (texto, fondo); da sensación de “ya carga”.
• FOIT: texto invisible mientras llega la fuente; se arregla con display=swap.
• FOUC/FOUT: parpadeo de estilos o fuentes; reduce con CSS crítico y preloads correctos.
• Lazy-load: cargar imágenes/iframes solo cuando van a verse; ahorra datos y acelera arranque.
• Preconnect: abrir conexión antes a un dominio (fuentes, CDN) para reducir latencia.
• Preload: priorizar un recurso clave (fuente WOFF2, imagen LCP) para que llegue antes.
• DNS Prefetch: resolver el dominio por adelantado; micro-mejora en externos.
• CDN: red de servidores que sirven tus archivos desde el lugar más cercano al usuario.
• Cache busting: cambiar el nombre del archivo con hash para obligar a actualizar la caché.
• Brotli: compresión moderna (mejor que Gzip) que reduce el tamaño de JS/CSS/HTML.
• Gzip: compresión clásica; si no hay Brotli, al menos usa Gzip.
• HTTP/2: permite multiplexar varias peticiones en una conexión; a veces resta valor a “agrupar”.
• HTTP/3: HTTP sobre QUIC; latencias más bajas en redes móviles/altas pérdidas.
• TTFB: tiempo hasta el primer byte del HTML; depende de hosting/caché de página.
• Edge: servidores del borde del CDN; llevan tus archivos cerca del usuario.
• Hash: firma en el nombre del archivo, ej. app.3fa12.css, que indica su versión única.
• WOFF2: formato de fuente comprimido y ligero; ideal para web.
• display=swap: muestra texto con fuente del sistema y cambia a la web cuando llega; adiós FOIT.
• Google Fonts: servicio de fuentes; combínalas y cárgalas de forma asíncrona.
• Fuentes del sistema: tipografías ya instaladas (Arial, Segoe, San Francisco); cero descargas.
• reCAPTCHA: seguridad de formularios de Google; no suele agregarse ni diferirse.
• Google Tag Manager (GTM): contenedor de etiquetas; conviene excluirlo de agregados.
• jQuery: librería JS clásica; muchos plugins dependen de su orden original.
• Gutenberg: editor de bloques de WordPress; sus scripts mejor sin optimizar para evitar conflictos.
• WooCommerce: ecommerce para WP; checkout y carrito son zonas sensibles a defer/agregado.
• Cart Fragments: script que mantiene el carrito vivo; no tocar o excluir de optimización.
• Checkout: proceso de pago; evita cambios agresivos de JS/CSS aquí.
• Coverage (DevTools): visor que muestra qué CSS/JS se usa; útil para extraer CSS crítico.
• Data URI: incrustar imágenes pequeñas en CSS como texto data:; bueno para iconos, no para fotos.
• IntersectionObserver: API para ejecutar cosas cuando un elemento entra en pantalla; base de lazy-load.
• Imagen hero: gran imagen de cabecera; suele ser el LCP, no la retrases.
• Logo: imagen del sitio; exclúyelo del lazy para que el header no “salte”.
• Marcador/Placeholder: etiqueta ficticia donde luego insertas JS/CSS; útil para ordenar la carga.
• SSR (server-side rendering): render en servidor; entrega HTML ya “pintado”.
• Hidratación: activar interactividad JS sobre HTML ya renderizado; cuida el orden de scripts.
• RUM (Real User Monitoring): métricas reales de usuarios; lo que cuenta para Google.
• Search Console: panel de Google con Core Web Vitals de campo por URL/tipo.
• PageSpeed Insights: test que da LCP/CLS/INP y sugerencias; mide móvil primero.
• Lighthouse: auditoría en DevTools; útil para ver “recursos que bloquean el render”.
• Caché de página: guarda HTML estático para servirlo rápido; complementa a Autoptimize.
• CDN “pull”: el CDN “tira” de tu servidor y guarda copia; configuras una URL base.
• Cloudflare Proxy: proxy inverso que acelera/seguriza sin cambiar URLs; AO suele dejar campo CDN vacío.
• CORS: permisos para cargar recursos desde otro dominio; importante con fuentes en CDN.
• MIME: tipo de archivo correcto (text/css, application/javascript); evita bloqueos del navegador.
• CSP (Content Security Policy): política que restringe scripts/estilos; ojo con inline sin nonce.
• Nonce: token único que permite ejecutar inline bajo CSP; si no, el navegador lo bloquea.
• JSON-LD: datos estructurados en <script>; no se minifican ni se mezclan con JS normal.
• CriticalCSS (power-up): servicio que genera CSS crítico automáticamente por plantilla/dispositivo.
• Warm-up: precalentar cachés visitando URLs tras una purga para evitar “primera visita lenta”.
• Exclusiones: lista de archivos o rutas que AO no toca; previene roturas.
• Try/Catch: envoltorio de errores JS; útil para diagnosticar, no como solución final.
• Viewport: área visible del navegador; el lazy carga al entrar aquí.
• Render-blocking: recursos que impiden pintar; se reducen con defer, async y CSS crítico.
• JS inline: JavaScript embebido en HTML; si se agrega, puede romper dependencias.
• RTL (Right-to-Left): diseño en idiomas derecha-a-izquierda; prueba CSS crítico en locales RTL.
• Cache-Control immutable: indica que el archivo no cambia; el navegador no vuelve a pedirlo.
• fetchpriority: atributo para decir “esta imagen es prioritaria”; útil en la LCP.
• fonts.gstatic.com: servidor de archivos de Google Fonts; anticipa con preconnect.
• crossorigin: atributo que habilita credenciales CORS para fuentes/preloads; evita errores de caché.
• DNS: traduce dominios a IP; el prefetch acelera el primer contacto.
• TLS: cifrado de la conexión; el preconnect adelanta el “apretón de manos”.
• Scripts de terceros: chat, mapas, analítica; cárgalos tarde o bajo interacción.
• Long tasks: tareas JS >50 ms que bloquean; causa de INP pobre.
• Hilo principal (main thread): lugar donde se dibuja y ejecuta JS; menos trabajo aquí = web más fluida.
• functions.php: archivo del tema donde puedes añadir filtros/hooks para personalizar AO.
• MU-Plugin: plugin “must-use” que se carga siempre; ideal para personalizaciones técnicas.
• Plantilla: tipo de página (home, post, producto); puede requerir CSS crítico distinto.
• <!--noptimize-->: comentario para desactivar AO en un bloque/área concreta del HTML.

Acelerar velocidad con Autoptimize

Aquí van trucos avanzados y “de combinación” que no te había contado, para exprimir Autoptimize en escenarios especiales:

• Usa Autoptimize junto con un “Script Manager” (Perfmatters o Asset CleanUp) para descargar JS/CSS por URL o tipo de contenido. AO minifica/agrega; el Script Manager impide que carguen recursos que no se usan. Por ejemplo, desactiva WooCommerce fuera de la tienda:

add_action('wp_enqueue_scripts', function(){
  if (!is_woocommerce() && !is_cart() && !is_checkout()){
    wp_dequeue_style('woocommerce-general');
    wp_dequeue_script('wc-cart-fragments');
  }
}, 99);

• Retrasa terceros no críticos con “delay until interaction” (Perfmatters/Flying Scripts). Mantén Autoptimize para tus bundles internos y retrasa Hotjar, Hubspot, Facebook SDK o chats hasta clic/scroll. Alternativa sin plugin:

<script>
(function(run){'requestIdleCallback'in window?requestIdleCallback(run):setTimeout(run,200);}
)(function(){
  var s=document.createElement('script'); s.src='https://example-analytics.js';
  s.defer=true; document.head.appendChild(s);
});
</script>

• Mejora la LCP de la imagen principal combinando Autoptimize (lazy global) con atributos en WordPress para el hero: carga “eager”, decodifica en asíncrono y sube prioridad.

add_filter('wp_get_attachment_image_attributes', function($attr,$id,$size){
  if (is_front_page()){ $attr['loading']='eager'; $attr['decoding']='async'; $attr['fetchpriority']='high'; }
  return $attr;
},10,3);

• Si usas variable fonts, reduce a un único WOFF2 variable y precárgalo; Autoptimize lo servirá optimizado y tú eliminas múltiples pesos/estilos. Sube la ganancia en móvil y simplifica el CSS crítico.
• Activa “Early Hints (103)” en tu CDN (p. ej., Cloudflare) y lista en Autoptimize → Extra los preloads clave (fuente WOFF2 y el CSS agregado). El edge anunciará esos recursos antes de enviar el HTML, adelantando la cascada.
• Añade “stale-while-revalidate” a los agregados de Autoptimize desde el servidor para tolerar picos y fallos de origen sin frenar al usuario:

# .htaccess o conf del servidor
<FilesMatch "\.(css|js|woff2)$">
 Header set Cache-Control "public, max-age=2592000, stale-while-revalidate=86400, stale-if-error=604800"
</FilesMatch>

• Combina Autoptimize con un precargador de enlaces de baja prioridad (Flying Pages o Instant.page) para acelerar navegación interna. AO minimiza/ordena; el precargador trae el siguiente HTML cuando el usuario apunta el ratón o cuando el link entra en viewport.
• Usa content-visibility en el CSS crítico para secciones bajo el pliegue y recorta trabajo del render inicial (con reserva para evitar CLS):

/* en tu CSS crítico */
.section-below-fold{content-visibility:auto; contain-intrinsic-size: 1000px 1500px;}

Aplícalo a bloques grandes repetidos (listados, widgets) y verifica que no afecte animaciones iniciales.

• Desregistra recursos de WordPress que no necesitas y deja que Autoptimize trabaje con menos “ruido”:

add_action('wp_footer', function(){ wp_deregister_script('wp-embed'); }, 1);
add_action('wp_enqueue_scripts', function(){ if(!is_user_logged_in()){ wp_deregister_style('dashicons'); }});

• Si tienes una SPA embebida (React/Vue) en páginas concretas, desactiva Autoptimize solo ahí y deja que el bundler de la app gestione módulos y modulepreload. Evitas doble empaquetado y conflictos de orden.
• Para YouTube pesado, combina AO con un “lite player” (p. ej., Presto Player o Lite YouTube Embed). AO hará lazy/mini; el lite player sustituye iframes por contenedores livianos hasta clic, ahorrando cientos de KB por vídeo.
• Aprovecha el encabezado HTTP “Priority” si tu plataforma lo soporta (HTTP/3 + proxies modernos) para priorizar CSS sobre JS. Autoptimize genera los bundles; el servidor marca prioridades:

# ejemplo (Apache con mod_headers)
<FilesMatch "\.css$">Header set Priority "u=2, i"</FilesMatch>
<FilesMatch "\.js$"> Header set Priority "u=1"</FilesMatch>

• Si tu tema inyecta muchos “block styles” de Gutenberg, mantén Autoptimize, pero carga una hoja “minimal” y desactiva la global en vistas donde no uses bloques (pruébalo en staging; puede afectar estilos):

add_action('wp_enqueue_scripts', function(){
  if (!is_singular() || is_page_template('plantilla-minima.php')){
    wp_dequeue_style('wp-block-library'); // comprobar en cada plantilla
  }
}, 100);

• Usa Service Worker (Workbox/SuperPWA) para cachear en el navegador los bundles de Autoptimize bajo una estrategia “Cache First” con actualización en segundo plano. Potente en móvil con redes inestables.
• Si usas Cloudflare, desactiva minificación y Rocket Loader allí y deja esa capa a Autoptimize; evita doble minify y reordenamientos agresivos. Mantén solo Brotli, HTTP/3, Early Hints y caché en edge.
• En sliders y carruseles secundarios, inicializa “on-demand” con IntersectionObserver y deja que Autoptimize diferido no bloquee el primer render:

<script>
document.addEventListener('DOMContentLoaded',function(){
  var t=document.querySelector('.slider-secundario');
  if(!t) return;
  var io=new IntersectionObserver(function(e,o){ if(e[0].isIntersecting){ o.disconnect(); initSliderSecundario(); }});
  io.observe(t);
});
</script>

• En tiendas con mucho catálogo, combina Autoptimize con un paginador tipo “buscar al hacer scroll” que cargue plantillas livianas; AO mantiene el primer render limpio y el infinito loading se hace con JS diferido que no bloquea.
• Si los minificadores chocan con un script concreto, sigue agregando sin minificar (para mantener pocas peticiones) y minifica ese script en origen con tu bundler. Evitas errores y mantienes el beneficio de concatenación.

Estos trucos no sustituyen los básicos: son capas adicionales para situaciones reales (terceros agresivos, apps embebidas, catálogos grandes, CDNs modernos). Úsalos en staging, mide LCP/CLS/INP tras cada cambio y documenta qué plugin/servidor hace cada tarea para no duplicar funciones.

Consejos prácticos Autoptimize
Usar Autoptimize eficazmente
Guía experta Autoptimize Wordpress
Guía paso a paso Autoptimize
Tutorial configuración Autoptimize
Pasos sencillos Autoptimize en WP
Mejorar velocidad web con Autoptimize
Configuración ideal Autoptimize
Configurar Autoptimize Wordpress

Categoría: Plugin Autoptimize