Como configurar Autoptimize en WordPress

9 de febrero, 2021 @ 11:35 — 0 comentariosDescargar PDF

Tener un sitio web que cargue rápidamente es uno de los puntos que tenemos que tener en cuenta. Una de las formas de optimizar WordPress y mejorar la puntuación de PageSpeed es unificando y minimizando los archivos JavaScript y CSS. Para llevar a cabo esta tarea, utilizaremos el plugin Autoptimize y en esta guía explicaremos como configurarlo.

Antes de hacer cambios importantes en nuestra web, siempre es recomendable tener un backup de respaldo por si algo sale mal, de modo que antes de hacer nada en nuestro WordPress, recomendamos seguir la siguiente guia en la cual se explica como realizar un backup con Softaculous.

Autoptimize no es un plugin de caché, es un plugin que optimiza su sitio web de varias formas que contribuyen a mejorar la velocidad de carga de un sitio web.

¿Podemos utilizar Autoptimize junto un plugin de caché? Si. De hecho, todo WordPress debería usar algún plugin de cache como Wp Super Cache.

¿Qué es el plugin Autoptimize?

Autoptimize es uno de los mejores plugins con el que puedes hacer que su sitio web sea más rápido mediante la aplicación de diversas técnicas de optimización, las funcionalidades más importantes que cubriremos en esta guía son las siguientes:

  • Minificación de archivos: Autoptimize puede minificar archivos HTML, CSS y JS, la minificación elimina el contenido innecesario y el espacio en blanco de los archivos, de modo quese crean archivos de menor tamaño y eso supone una descarga más rápida.
  • Combinación de archivos: La combinación combina los archivos CSS y Javascript, por lo que el navegador del usuario tiene menos archivos que descargar.
  • Almacenamiento en caché de archivos: Autoptimize puede almacenar en caché los archivos HTML, los scripts y los archivos CSS. Esto reduce la carga del servidor y aumenta la velocidad.
  • Integración con CDN: Podremos servir los archivos Autoptimize a través de CDN

Desactiva el plugin de caché

Si tenemos pensado usar un plugin de caché junto Autoptimize, recomendamos usar WP Super Cache, pero si ya tenéis uno instalado, antes de empezar configurando Autoptimize, es recomendable borrar la caché y desactivarlo temporalmente hasta que Autoptimize esté configurado por completo.

Instala el plugin Autoptimize

Para empezar, tendremos que instalar el plugin, de modo que buscamos "Autoptimize" en el repositorio de WordPress y lo instalamos como cualquier otro.

Si no sabes instalar plugins en WordPress, puedes seguir esta guía donde se explica como hacerlo.

1 - Entra en los ajustes de Autoptimize

Entramos en la configuración (Ajustes) del plugin.

2 - Opciones de Javascript.

Marcar la opción "Optimizar el código Javascript" y recomendamos marcar las siguientes opciones para la mayoría de los sitios.

  • ¿Optimizar el código JavaScript? [ACTIVADO]
  • ¿Unificar archivos JS? [ACTIVADO] Esta opción minificará y combinará todos los archivos JS, si se desactiva, se cargarán los archivos individuales y no se combinarán.

Guardar los cambios y comprobar que la web funciona correctamente (si la web deja de funcionar correctamente, desactivar "¿Optimizar el código JavaScript?" y saltar al siguiente paso.

3 - Opciones de CSS.

Marcar la opción "¿Optimizar el código CSS?" y recomendamos marcar las siguientes opciones para la mayoría de los sitios.

  • ¿Optimizar el código CSS? [ACTIVADO]
  • ¿Unificar archivos CSS? [ACTIVADO] Igual que la anterior, pero para los archivos CSS, esta opción minifica y combina todos los archivos CSS.

Guardar los cambios y comprobar que la web funciona correctamente (si la web deja de funcionar correctamente, desactivar "¿Optimizar el código CSS?" y saltar al siguiente paso.

4 - Opciones de HTML.

Activamos ¿Optimizar el codigo HTML?

5 - Otras opciones

Activamos ¿Guardar los scripts y el CSS unificados como ficheros estáticos? y el resto de las opciones las dejamos sin marcar.

Una vez que tengamos la configuración completada, guardamos los cambios.

6 - Pestaña Imágenes

En la pestaña Imágenes, tan solo activaremos la carga diferida de imágenes (Lazy loading), ya que la optimización de las imágenes recomendamos hacerla con WebP Converter for Media

Activar la carga diferida de imágenes resulta en menos solicitudes y es recomendado por Google para obtener tiempos de carga más rápidos (afecta en la puntuación de PageSpeed Insights), pero puede resultar molesto para ciertos visitantes... activarlo o no, es decisión vuestra.