Asset CleanUP PRO Optimiza tu sitio
La velocidad de carga de una web es muy importante para la experiencia de usuario, por sus siglas en ingles UX (User eXperience) Si al entrar a una web tarda mucho en cargar, ¿Esperas, o te vas a otra? Esto Google lo sabe, y posiciona peor las webs lentas. Vamos a trabajar en juegos de mesa y vamos a conseguir que vuele. Nueva lección de nuestro curso de creación de páginas web.
Al final del artículo, encontrarás un vídeo con toda la configuración y el tutorial completo de optimización de nuestro sitio en WordPress.
Contenido
Optimizando un TSA
Vamos a usar un plugin realmente increíble en la optimización de nuestro WordPress, sumado a un buen plugin de cache, nuestras webs volaran, debo avisar que no es un plugin fácil de configurar, pero gracias a este tutorial de Asset CleanUp PRO y el vídeo, no tendrás problemas para hacerlo en tus sitios.
Tutorial Asset CleanUp PRO paso a paso
Lo primero que debemos hacer es instalarlo y activarlo. Una vez hecho esto veremos lo siguiente:
Paso 1
En la primera pantalla nos explicarán que puede hacer el plugin y nos ofrecerá unos tutoriales (en inglés) y que solo por activar una opción, eliminará la «grasa» (Fast website) y el plugin activará unas opciones por defecto. Pero la cosa no acaba aquí, sigue leyendo para enterarte de más.
Paso 2
Una vez marcada la opción y guardados los cambios, podremos seguir con la configuración. Una parte muy interesante, es la opción «test mode» al activarla, podremos realizar todos los cambios que queramos que solo lo podrán ver los identificados como administradores. De esta forma, tu sitio podrá seguir en perfectas condiciones para los visitantes mientras configuras y pruebas Asset CleanUp PRO.
Opciones Asset CleanUp Pro
Tendremos varias opciones disponibles:
- La primera: Stripping the «fat» que es el paso 1. Al marcar la opción de entendido, ya vemos que aparece el rótulo: Leído.
- La segunda opción es Plugin Usage Preferences. En esta pestaña encontraremos unas opciones globales del plugin que las explico más detalladamente en el vídeo.
- Test Mode: Para que los cambios y configuraciones solo sean visibles por los administradores y no «romper» nuestro sitio.
- Optimice CSS: Nos ofrece optimización de los archivos CSS, para reducir su peso, combinarlos, minificarlos y hacer que nuestro sitio cargue mucho mejor.
- Optimize JavaScript: Hace lo mismo que con los archivos CSS, minify + combine. Además podremos elegir carga diferida y algunas opciones más.
- CDN: Si usamos un servicio CDN, podremos indicarlo en esta opción, de esta manera, la optimización también se hará en los archivos remotos en el CDN.
- Site-wide common Unloads: En esta opción, podremos eliminar determinados archivos javascript y CSS que no usemos en nuestro sitio. Algunos, además de la velocidad, mejorarán la seguridad de nuestro sitio. Por ejemplo, podremos eliminar la versión de WordPress de la cabecera del sitio, deshabilitar la fuente de los iconos, comentarios y un montón de archivos más.
No se puede ofrecer una configuración global, dependerá de cada sitio que podamos quitar una o varias opciones. Lo mejor es, leer una por una las opciones disponibles y quitar las que no sean necesarias. Lo explico de forma más detallada en el vídeo. - HTML Source CleanUp: En esta opción limpiaremos el código HTML de la cabecera, nuevamente, debemos leer una por una y según nuestro sitio podremos quitar más o menos. Pero es importante entender cada una de ellas.
- Local Fonts: Combina, carga y evita el bloqueo de las fuentes que usemos en nuestra web. Podremos configurar que se cargue la fuente por defecto del navegador y evitar el retardo en la carga de la web. Cuando se cague de forma diferida el archivo CSS, cambiará la fuente por defecto y a la que nosotros tengamos. Podrá provocar un destello en la pantalla cuando cambie la fuente, pero a cambio, mejora mucho la velocidad de carga.
- Google Fonts: Hace prácticamente lo mismo que con las fuentes locales, podremos combinarlas, cargarlas de forma asíncrona, pre conectar y aumentar la velocidad de forma considerable. Podrá provocar el destello comentado en el punto anterior.
- Disable XML-RPC: Podremos deshabilitar este protocolo si no lo usamos y mejorar el rendimiento de nuestro sitio. Hay plugins como jetpack que lo usan y es necesario tener activo. O si publicamos de forma remota, pingback, etc. Si no usamos nada de esto, podremos desactivar la opción.
Paso 3: Desactivar CSS Javascript y plugins de páginas individuales
Nuestro sitio se nota cada vez más rápido, pero acabamos de empezar, ahora podremos mejorar la portada de forma individual quitando todos los plugins, CSS y javascript que no usemos. Podremos repetir esta opción en todas las páginas o entradas del sitio.
Podremos quitarlo de la portada marcando la opción: Unload on this page, o quitarlo de todas las páginas marcando Unload on all pages of «page» post type. Además podremos marcar reglas y excepciones, para que si se activen en determinadas páginas.
¡Es increíble la mejora al no cargar todo en todos sitios!
Nota: Las opciones que marquemos globales, es decir, que afectan a todas la páginas o entrada, deberemos quitarlas de la pestaña: post, pages & custom post types. Se si añaden de forma global, se deben quitar de forma global.
Paso 4: Desactivar plugins y que solo funcionen en páginas concretas
Esta opción es realmente interesante, podremos desactivar plugins del sitio entero, y añadir excepciones de páginas o entrada. Si tenemos un plugin que solo funciona en la portada, ¿Qué necesidad tenemos que penalice todo el sitio? De esta forma podremos quitar lo que no usemos en el resto de páginas.
Debemos tener cuidado, si olvidamos alguna página y no la añadimos a las excepciones, ese plugin no funcionará en esas páginas. Por ejemplo, si el formulario de contacto solo lo muestras en la página contacto, podremos desactivar el plugin en el resto del sitio, mejorando la velocidad y la optimización.
Resultados velocidad TSA con Asset CleanUp Pro
Después de una configuración y pruebas, es hora de ver el resultado de velocidad de la web. Aquí os muestro dos imágenes dónde podréis verlos:
Como veis unos resultados increíbles. La velocidad ya no será un problema para posicionar.
Vídeos del tutorial paso a paso de Asset CleanUp PRO
En esta ocasión son dos vídeos, uno en el canal de David Cuesta con la configuración del plugin, y otro con los resultados en mi propio canal. Espero que os sean de ayuda. Nos vemos en el siguiente.
