Seleccionar página

En este post te voy a mostrar como configurar el plugin gratuito para wordpress Autoptimize. Una plugin WPO, que por tanto, te va a servir para hacer que tu web cargue más rápida. Es decir, es un plugin de optimización web.

Autoptimize NO es un plugin general de cache. Los plugins de cache para wordpress sirven crean una memoria donde se guardan páginas ya conformadas para que se puedan enviar más rápidamente a los visitantes. Aunque si es cierto que Autoptimize tiene algunas opciones de caché complementarias a la caché general y específicas para archivos de estilo y scripts.

Las principales funcionalidades de Autoptimize son de optimización de código: javascript, css y html.

Autoptimize NO es un plugin de cache. Pero, se ha de combinar con este tipo de plugins para conseguir una buena optimización de WordPress. En concreto, funciona fenomenal junto al plugin WP Super Caché. Aquí te dejo más info sobre como configurar el plugin de caché WP Súper Cache

Cuando un usuario escribe una url de tu web en su navegador, lo que hace tu hosting es principalmente enviar al navegador: archivos HTML, archivos JavaScript, archivos CSS e imágenes. Autoptimize se va a encargar de optimizar (mejorar) esos archivos HTML, JavaScript y CSS para que tu web sea más rápida.

Existen otros plugins como WP Rocket (de pago) que permiten con un solo plugin aunar todas las funcionalidades de Autoptimize + WP Super Caché + Lazy Load. E incluso más funcionalidades de optimización que estos tres plugins juntos.

IR a WP Rocket

 

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

Vídeo Instalación y Configuración de Autoptimize

 

 

 

Cómo instalar el plugin Autoptimize en WordPress

 

Autoptimize es un plugin gratuito para wordpress, por lo que podrás instalarlo directamente desde el backoffice de tu wordpress.

Ve a “Plugins > añadir nuevo” e introduce en la barra de búsqueda el nombre: autoptimize

A continuación, haz clic en el botón “instalar ahora” y una vez instalado haz clic en “Activar”.

 

 

Cómo configurar el plugin Autoptimize para WordPress

 

Para comenzar con la configuración abre el panel de administración de tu wordpress y ves a: “Ajustes > Autoptimize”.

Me voy a centrar en la pestaña “JS, CSS y HTML”.

 

 

Configuración de opciones de Javascript de Autoptimize

 

En primer lugar te vas a centrar en las opciones de optimización de código Javascript. Dichas opciones están en el apartado: “Opciones de Javascript”.

Marca el checkbox correspondiente a las siguientes opciones:

👉 ¿Optimizar el código JavaScript?: selecciona esta opción. De esta manera harás que Autoptimize optimice el código JavaScript de tu web. Lo que hará el plugin será minificar (reducir) los archivos JavaScript eliminando el contenido no necesario, así como los espacios en blanco. De esta manera los archivos serán más pequeños, menos pesados y más rápidos de descargar. Lo que ha de mejorar la velocidad de carga.

👉 ¿Unificar archivos JS?: selecciona esta opción. Esta opción hará que se combinen todos los archivos JavaScirpt en un único archivo. Por lo que el navegador web del cliente reducirá el número de descarga de archivos a realizar. La principal finalidad es que archivos javascript no bloqueen la carga de la página y de esta forma que tanto la carga real de la página como la sensación de carga sea más rápida. Cuando un archivo javascript bloquea la carga de una página me refiero a que el navegador se queda “pensando” y la descarga de la página se queda pausada, creando esa sensación de lentitud de carga al usuario.

Nota: guarda y haz una navegación privada de tu web. Si ves algo extraño desmarca esta opción y vuelve a probar.

Nota: no marques esta opción si tu web usa HTTP2. ¿Cómo saberlo? la opción más fiable es escribir un ticket de soporte a tu hosting y consultarlo. Puedes comprobarlo también en páginas como esta: https://tools.keycdn.com/http2-test Pero, mi recomendación es que consultes a tu hosting. ¿Por qué no marcar esta opción en este caso? Porque la tecnología HTTP2 hace solo una petición para la carga de todos los archivos y éstos se cargan en paralelo (al mismo tiempo), no en serie (uno detrás de otro).

El resto de opciones de este apartado de “Opciones de Javascript” las dejaremos sin marcar ya que pueden producir problemas en la carga de la página o en el tamaño de la caché.

 

Configurar autoptimize javascript

Opciones de Javascript. Marca las opciones de la imagen

 

 

Configuración de opciones de CSS de Autoptimize

 

Después del apartado de opciones de JavaScript, verás un apartado denominado como “Opciones CSS”.

Los archivos CSS son los encargados de dar el diseño, la parte estética y visual de tu página web.

En este apartado marca el checkbox correspondiente a las siguientes opciones:

👉 ¿Optimizar el código CSS?: marca esta opción. De esta manera Autoptimize se encargará de minificar (reducir) el código CSS para que la carga sea más rápida.

👉 ¿Unificar archivos CSS?: marca esta opción. De esta manera todos los archivos CSS se agruparán en un único archivo. Por lo que el navegador del cliente tendrá que descargar menos archivos y la descarga será más rápida.

Nota: guarda y haz una navegación privada de tu web. Si ves algo extraño desmarca esta opción y vuelve a probar.

Nota: no marques esta opción si tu web usa HTTP2. ¿Cómo saberlo? la opción más fiable es escribir un ticket de soporte a tu hosting y consultarlo. Puedes comprobarlo también en páginas como esta: https://tools.keycdn.com/http2-test Pero, mi recomendación es que consultes a tu hosting. ¿Por qué no marcar esta opción en este caso? Porque la tecnología HTTP2 hace solo una petición para la carga de todos los archivos y éstos se cargan en paralelo (al mismo tiempo), no en serie (uno detrás de otro).

👉 ¿Incluir CSS incrustados?: marca esta opción. De esta manera el CSS que haya en línea (en el HTML) será trasladado a ese archivo único CSS. Esto reducirá el tamaño de la página.

En algunos casos esta opción puede hacer que cuando has iniciado sesión en wordpress y estás realizando una vista previa de una página, las opciones del menú superior no se desplieguen bien. Si este es tu caso, y quieres evitarlo, desactiva esta opción.

El resto de opciones las voy a dejar sin seleccionar.

 

configurar opciones optimizacion css autoptimize wordpress

Opciones CSS. Marca las siguientes opciones

 

 

Configuración de opciones de HTML

 

Debajo del apartado anterior encontraremos este apartado de “Opciones HTML” que te servirán para optimizar el código HTML de la web.

Marca la siguiente opción:

👉 ¿Optimizar el código HTML?: marca esta opción. De esta manera se minificarán (optimizarán) los archivos HTML. Reduciendo espacios en blanco y por tanto haciendo que el archivo sea más reducido, menos pesado y de carga más rápida.

La otra opción la voy a dejar sin marcar.

 

configurar opciones html autoptimize wordpress

Opciones HTML. Marca esta opción

 

 

Opciones de la CDN e información de la Cache.

 

Las opciones de CDN déjalas vacías, a no ser que estés usando algún tipo de CDN. Si es así, y quieres mejorar la velocidad de carga de archivos estáticos deberás poner la url del CDN.

En el caso de que uses Cloudflare no tienes que configurar nada, será detectado automáticamente por Autoptimize.

En el apartado “Información de caché” Autoptimize te va a dar información significativa acerca de la ruta de la caché de archivos de estilo y scripts de Autoptimize, si se permite la escritura y el número de archivos y peso total.

 

 

Otras opciones

 

👉 ¿Guardar los scripts y el CSS unificados como ficheros estáticos?: marca esta opción. De esta manera se guardarán los archivos agregados como ficheros estáticos locales.

👉 ¿Minimizar archivos CSS y JS excluidos? Marca esta opción. Los posibles archivos que hayan sido excluidos también serán minificados (optimizados). Si detectas algún problema en la web prueba a desactivar la opción pues podría en algunos casos específicos dar problemas.

👉 ¿Activar los respaldos 404? Marca esta opción. De esta manera eliminaremos posibles enlaces rotos a nivel de caché.

👉 ¿Optimizar también para usuarios editores/administradores conectados? Marca esta opción. De esta manera se aplicarán los archivos para usuarios de wordpress.

👉 ¿Activamos la configuración por entrada/página? En principio no hace falta que marques esta opción.

 

otras opciones configuracion autoptimize

Otras opciones

 

 

Opciones EXTRA de configuración de Autoptimize

 

Te voy a mostrar también un par de opciones interesantes en la pestaña EXTRA de configuración de Autoptimize.

👉 Google Fonts: la carga de fuentes de Google de una web requiere ocupa un tiempo considerable en la carga total de la página. Te voy a mostrar a continuación las diferentes opciones que podemos configurar con respecto a esto:

i.- Dejar tal cual: esta opción te servirá para no realizar ninguna acción al respecto de las Google Fonts.

ii.- Eliminar las Google fonts: si marcas esta opción la carga será más rápida. Pero, tu web ya no usará las fuentes de Google y usará una fuente por defecto.

iii.- Combinar y enlazar en la cabecera: con esta opción la carga de fuentes de Google será rápida pero se cargará al principio, por lo que bloqueará el resto de la carga.

iv.- Combinación y enlazado aplazado en la cabecera: habitualmente, y en la mayoría de casos suelo elegir esta opción. La carga de las fuentes de Google no se hará al principio por lo que no se bloqueará el resto de la carga de la página.

v.- Combinar y cargar las fuentes asíncronamente: obsoleto, no elegir esta opción.

 

También tienes después la opción de poder desactivar los emojis de WordPress. Es posible que aunque marques esta opción tu web siga mostrando emojis. Va a depender de la manera en que los hayas insertado.

 

Con esto queda finalizada la configuración del plugin Autoptimize. Como te comentaba al principio este plugin funciona muy bien en combinación con WP Super Caché. También es interesante combinarlo con algún plugin de optimización de imágenes y algún otro de carga diferida de imágenes (lazy load).

Existen otros plugins como WP Rocket (de pago) que permiten con un solo plugin aunar todas las funcionalidades de Autoptimize + WP Super Caché + Lazy Load. E incluso más funcionalidades de optimización que estos tres plugins juntos.

 

 

Cómo vaciar la caché con Autoptimize

 

Aunque la caché de autoptimize se vaciará de manera automatizada. También puedes vaciarla de manera manual en el caso de que así lo necesites. Ya sea porque hayas visto algo raro en la web y quieras saber si ha sido problema de la caché o por cualquier otra razón.

Para vaciar la caché ve al menú superior, pon el ratón sobre “Autoptimize” y se te desplegará un cuadro con el enlace: “Borrar caché”

En ese cuadro también puedes ver información sobre el tamaño de la caché y el número de archivos de que está compuesto.

Nota: la caché de WP Super caché es independiente y debes acudir a las opciones de ese plugin para vaciarla.

 

cómo vaciar la caché autoptimize wordpress

Vaciar la caché plugin Autoptimize

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO DISEÑADOR WEB FREELANCE (10 Clases)
4.- CURSO MEMBERSHIP SITE (14 Clases)
5.- CURSO ELEMENTOR (14 Clases)
6.- CURSO ASTRA PRO (17 Clases)
7.- CURSO BLOOM + MAILCHIMP (7 Clases)
8.- CURSO SEO (19 Clases)
9.- CURSO BLOG WORDPRESS (32 Clases)
10.- CURSO WOOCOMMERCE (39 Clases)
11.- CURSO FLATSOME WORDPRESS (36 Clases)
12.- CURSO COLORES WEB (9 Clases)
13.- CURSO ANALYTICS (10 Clases)
14.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
15.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com