Tecnología

Configurar Autoptimize, el Plugin que Sí Acelera tu Wordpress

Martin Cid Martin Cid

Autoptimizeha sido creado por Frank Goossens, Optimizing Matters, zytzagoo y turl y es un complemento a wordpress para optimizar cosas como Javascipt, CSS y demás. Muy útil

¿Qué es Autoptimize?

Autoptimize optimiza algunos aspectos del código y lo sirve de manera más eficiente para que las webs se vean de manera más rápidas y optimizadas.

¿Por qué usar Autoptimize?

Porque mejora radicalmente los servicios nativos de Wordpress y combinado con otros complementos para el caché, hace que nuestra web vaya mucho, mucho más rápido.

¿Qué configuración debo usar con el plugin?

¡La pregunta del millón! Básicamente, depende del tema y cómo funcione éste a nivel de javascript, css y demás. Con uno por defecto de Wordpress, funcionará bien con la mayoría de las configuraciones, pero como todos usamos un tema más bonito buscando que nuestros usuarios estén mejor, la cosa cambia.

¿Y acelera verdaderamente la web? ¿Cómo lo configuro?

Sí, la acelera y vas a notar claramente la diferencia en Google Page Speed y otros servicios de medición de velocidad.

¿Dónde lo consigo?

Aquí: https://es.wordpress.org/plugins/autoptimize/ 

¡Quiero la configuración ya, pesado!

Vale, vale. Un poco de calma, que hay que tener en cuenta las configuraciones previas.

Configuraciones Previas

Mi ejemplo no va a servir para todos porque, insisto, uso un servidor dedicado y eso es mucho para la mayoría de las webs, esta página tiene ya unas cuentas visitas y usa muchos recursos, así que esta configuración de Autopotimize puede que sea un poco ‘bruta’ para la mayoría de los casos.

Uso NGIX y el php va sobre FPM servido con GNIX y los archivos estáticos también están servidos con NGIX (es realmente importante este dato, si usáis un hosting no creo que tengáis acceso a todo esto).

Está en un servidor dedicado con Plesk sobre Ubuntu.

Todo ello viene complementado con Wp Super Cache.

La configuración

¿Ya era hora, eh? Jejeje.

Os dejo la que a  mí me funciona.

Ojo, ojito, en rojo las que yo tengo marcadas (puede variar por tema y configuración de servidor)

Primero marcar arriba opciones avanzadas (Importante, como sonreír en las citas).

Primera Pestaña

Opciones d Opciones de HTML

¿Optimizar el código HTML?
¿Mantener comentarios HTML?

 

Opciones de JavaScript

¿Optimizar el código JavaScript?
¿Unificar archivos JS?  ¿Unificar todos los archivos JS enlazados para que se carguen sin bloquear la carga de la página? Si esta opción está desactivada los archivos JS individuales seguirán en su lugar pero minimizados.
¿Incluir JS incrustados?  Permite que Autoptimize también extraiga JS del HTML. Advertencia: esto puede hacer crecer rápidamente la caché de Autoptimize así que activa esto solo si sabes lo que estás haciendo.
¿Forzar JavaScript en <head>?  Carga pronto el JavaScript, esto puede solucionar potencialmente algunos errores de JS, pero bloquea la carga de JS.
Scripts a excluir de Autoptimize: Una lista separada por comas de los scripts que desees excluir de la optimización, por ejemplo, ‘loquesea.js, otro.js’ (sin las comillas) para excluir esos scripts de ser combinados y minimizados por Autoptimize.
¿Añadir bloques try-catch?  Si los scripts se interrumpen debido a algún error de JavaScript, es posible que desees probar con esta opción.

 

Opciones de CSS

¿Optimizar el código CSS?
¿Unificar archivos CSS?  ¿Unificar todos los archivos CSS enlazados? Si esta opción está desactivada los archivos CSS seguirán en su lugar pero minimizados.
¿Incluir CSS incrustados?  Marca esta opción para que Autoptimize también tenga en cuenta los CSS incrustados en el código HTML.
¿Crear data:URIs de imágenes?  Activa esto para incluir las imágenes de fondo pequeñas en el propio CSS en vez de como descargas separadas.
¿Incrustar y retrasar CSS?  Incrusta el «CSS de encima del pliegue» y carga el CSS principal auto-optimizado una vez que se ha cargado la página. ¡Consulta las preguntas frecuentes antes de activar esta opción! Esto puede ser completamente automatizado para diferentes tipos de páginas con Autoptimize CriticalCSS Power-Up.
¿Combinar todos los CSS?  Insertar todo el CSS puede mejorar el rendimiento en sitios con un bajo número de páginas vistas/visitas, pero puede disminuir el rendimiento de lo contrario.
CSS a excluir de Autoptimize: Una lista separada por comas del CSS que quieras excluir de la optimización.

·

Opciones de la CDN

URL base de la CDN Introduce la URL raíz de tu para activar la CDN en los archivos Autoptimizados. La URL puede ser http, https o relativa al protocolo (p.ej. //cdn.example.com/). Esto no es necesario con Cloudflare.

·        Información de la caché

Carpeta de caché /var/www/vhosts/martincid.com/httpdocs/wp-content/cache/autoptimize/
¿Podemos escribir? Sí
Estilos y scripts en caché 25 archivos, con un total de 4,21 MB Kbytes (calculado a las 20:53 UTC)

 

Otras opciones

¿Guardar los scripts y el CSS unificados como ficheros estáticos?  Por defecto los archivos JS y CSS se guardan como estáticos. Desactiva esta opción si tu servidor no realiza correctamente la compresión y la caducidad de los mismos.
¿También optimizar para usuarios conectados?  Por defecto Autoptimize también está activo para los usuarios conectados, desmarca esto para no optimizar cuando un usuario conectado, por ejemplo, usa un maquetador visual.

 

Siguiente pestaña (Extra)

Auto-optimizaciones adicionales

Los siguientes ajustes pueden mejorar aún más el rendimiento de tu sitio.

Google Fonts Dejar tal cual
Quitar las Google Fonts
Combinar y enlazar en la cabecera (las fuentes cargan rápido pero bloquean la carga de la página)
Combinar y precargar en la cabecera (las fuentes cargan tarde pero no bloquean la carga de la página)
Combinar y cargar las fuentes asíncronamente con webfont.js
Optimizar imágenes Optimiza imágenes sobre la marcha y sírvelas desde una CDN.

Obtén más amor de Google y mejora la velocidad de carga de tu sitio web al tener las imágenes optimizadas al vuelo por ShortPixel y después almacenarlas en caché y servirlas rápidamente desde un CDN. Regístrate ahora para recibir un bono de 1000 + 500e créditos de optimización de imágenes independientemente del tráfico utilizado. Se pueden adquirir más optimizaciones de imágenes desde 4,99$.

¿Preguntas? ¡Dale un vistazo a las FAQ de ShortPixel! El uso de esta característica está sujeto a los términos de uso de Shortpixel’s y su política de privacidad.
Quitar emojis Quita el CSS incrustado de los emojis de WordPress, el JavaScript incrustado y cualquier otro archivo JavaScript no autoptimizado.
Quitar cadenas de petición de recursos estáticos Al quitar las cadenas de petición (o más en concreto el parámetro ver) no mejorará el tiempo de carga, pero mejorará las puntuaciones de rendimiento.
Pre-conexión a otros dominios (usuarios avanzados) Añade otros dominios a los que quieras que el navegador se pre-conecte, separados por comas. Asegúrate de incluir el protocolo correcto (HTTP o HTTPS).
Archivos JavaScript asíncronos (usuarios avanzados) Lista separada por comas de otros archivos JS que deberían cargarse con la marca async. Los archivos JS de tu propio sitio se excluirán automáticamente si se añaden aquí.La configuración del javascript asíncrono es más fácil y más flexible usando el plugin «Async Javascript». Haz clic aquí para instalarlo y activarlo.
Optimizar vídeos de YouTube WP YouTube Lyte te permite la «carga diferida» de tus vídeos, insertando los «incrustados ligeros adaptables de YouTube» Haz clic aquí para instalarlo y activarlo.

 

Consideraciones

Yo con esta configuración obtengo el mejor rendimiento para el plugin. Con vuestro tema, cuidado con las opciones de Javascrpt, sobre todo la de ¿Incluir JS incrustados?Esta configuración usa mucha capacidad y en un hosting… os pueden echar la bronca porque hace crecer el tañado de la caché y hay que limpiarlo.

¿Y como limpio el JS Incrustado?

Por lo general, y ojo que depende del servidor, incluye este código en el archivo functions.php de tu tema:

# Limpia automáticamente la caché de Autoptimize si va por encima de 1024MB
if (class_exists(‘autoptimizeCache’)) {
$myMaxSize = 4024000; # Puedes cambiar este valor a uno más bajo como 100000 para 100MB si tienes poco espacio en el servidor
$statArr=autoptimizeCache::stats();
$cacheSize=round($statArr[1]/1024);

if ($cacheSize>$myMaxSize){
autoptimizeCache::clearall();
header(«Refresh:0»); # Recarga la página para que autoptimize pueda crear nuevos archivos de caché.
}
}

¡OJO! Yo lo tengo puesto a 4gb, que es una burrada importante, pero uso un servidor dedicado para emitir esta página. Vigila la línea y cambiála a tu gusto:

$myMaxSize = 4024000;

Consejos

Es más que probable que te toque trastear con todo, así que tienes que ir mirando qué configuración le va mejor a tu sitio teniendo en cuenta tus necesidades y, sobre todo, las psibilidades de tu servidor.

Conclusión

Pues como dice el conejito de los dibuhios (no otros que no hablan), eso es todo amigos. Espero que os haya servido de algo.

Hasta la próxima.

ETIQUETAS:
Comparte este artículo
3 Comments