WordPress : Plugin Autoptimize - Optimizar archivos JavaScript y CSS

Vea tambien: https://www.wpbeginner.com/wordpress-performance-speed/

En este post te voy a mostrar como configurar el plugin gratuito para wordpress Autoptimize. 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.  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é.

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”.

Configuración de la Pestaña JS , CSS y HTML 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:

Opciones de JavaScript : 

👉 ¿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.

Opciones de CSS

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.

👉   ¿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 dejar sin seleccionar.

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.

Las otras opciónes  dejarlo sin marcar.

Opciones de la CDN

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.

Configuración de la Pestaña EXTRA 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:

• Dejar tal cual: esta opción te servirá para no realizar ninguna acción al respecto de las Google Fonts.
• 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.
• 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.
• 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.
• 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 de tu administrador y/o barra superior de tu web  , 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.

Observando como trabaja Autoptimize:  

 Todas las css lo unifica y solo crea una en este caso sera:

autoptimize_7fe4b7b6d67058cf6a113f0b52af8364.css

pero el nombre puede cambiar segun el proyecto y lo carga desde  la cabecera <head>.

<head>
<link media="all" href="http://midominio.pe/
wp-content/cache/autoptimize/css/
autoptimize_7fe4b7b6d67058cf6a113f0b52af8364.css" 
rel="stylesheet">
</head>

Ademas de  el archivo autoptimizexxxxx.css  Autoptimize todavia deja en <head> algunos Css y js :

<script src="/wp-includes/js/wp-emoji-release.min.js?ver=5.4" type="text/javascript" defer=""></script>
		
<link rel="stylesheet" id="dashicons-css" 
href="/wp-includes/css/dashicons.min.css?ver=5.4" type="text/css" media="all">

<link rel="stylesheet" id="admin-bar-css" 
href="/wp-includes/css/admin-bar.min.css?ver=5.4" type="text/css" media="all">

<link rel="stylesheet" id="chefscuisine-fonts-css" 
href="https://fonts.googleapis.com/css?family=ABeeZee%3A400%2C400i%7CRancho%7COswald
%3A200%2C300%2C400%2C500%2C600%2C700&amp;
subset=latin%2Clatin-ext" type="text/css" media="all">


<script async="" src="https://d5jmkjjpb7yfg.cloudfront.net/v2/latest/
optimole_lib_no_poly.min.js"></script>
	
<script type="text/javascript" charset="UTF-8" 
src="http://maps.googleapis.com/maps-api-v3/api/js/40/9/intl/es_419/common.js">

</script><script type="text/javascript" charset="UTF-8"
src="http://maps.googleapis.com/maps-api-v3/api/js/40/
9/intl/es_419/util.js"></script>

WordPress, JavaScript y PageSpeed ¿que problema tenéis?

Tambien hay otro plugin llamado minit , pero al activarlo, el sitio se desconfigura. Por qué? Porque el plugin mete todo el JS y el CSS en un único archivo. De todos modos debe existir una mejor manera de ir Combinando JS y CSS según directorios

Vea tambien

https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/

https://desarrollowp.com/blog/tutoriales/mover-los-scripts-al-footer-wordpress/

¿Cómo Eliminar los Recursos que Bloquean el Renderizado en WordPress? (CSS + JavaScript)

https://kinsta.com/es/blog/eliminar-bloqueadores-de-visualizacion/

Referencia:

https://www.xn--diseowebmurcia1-1qb.es/tutorial-configurar-instalar-plugin-autoptimize-wordpress/