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.

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 1 tutorial asset cleanup pro
Explicación de lo que ofrece el plugin Asset CleanUp Pro

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.

paso 2 tutorial asset cleanup pro
Opciones Asset CleanUp PRO

Opciones Asset CleanUp Pro

Tendremos varias opciones disponibles:

  1. 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.
  2. 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.
  3. Test Mode: Para que los cambios y configuraciones solo sean visibles por los administradores y no «romper» nuestro sitio.
  4. Optimice CSS: Nos ofrece optimización de los archivos CSS, para reducir su peso, combinarlos, minificarlos y hacer que nuestro sitio cargue mucho mejor.
  5. Optimize JavaScript: Hace lo mismo que con los archivos CSS, minify + combine. Además podremos elegir carga diferida y algunas opciones más.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.

Desactivar CSS Javascript y plugins de páginas individuales
Desactivar CSS Javascript y plugins de páginas individuales

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.

Desactivar plugins y que solo funcionen en páginas concretas
Desactivar plugins y que solo funcionen en páginas concretas

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:

Resultado velocidad Asset cleanUp Pro
Resultado velocidad Asset cleanUp Pro + WP Rocket

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.

Configuración del plugin Asset cleanUp PRO

Resultados de velocidad al usar el plugin asset


Sigue leyendo:
Texto SEO

Texto SEO

Texto SEO Hola a todos, en esta nueva entrada del curso de creación de páginas web, llegamos a un momento ...
Leer Más
Curso seo gratuito

Curso SEO Gratuito

Curso SEO Gratuito Dentro del curso de creación de páginas web, hay que parte muy importante: el SEO. Si queremos ...
Leer Más
Estudio de palabras clave

Estudio de palabras clave

Estudio de palabras clave En esta clase del curso de creación de páginas web vamos a tratar el tema de ...
Leer Más
como instalar un plugin

Cómo instalar un plugin

Cómo instalar un Plugin ¡Hola a todos! En esta parte del curso de creación de páginas web hablaremos sobre los ...
Leer Más
vocabulario seo

Vocabulario SEO

Vocabulario SEO Para poder seguir nuestro curso de creación de páginas web debemos primero asimilar unos conceptos que se usan ...
Leer Más
elegir un buen dominio

Elegir un buen dominio

Elegir un buen dominio En esta clase del curso de creación de páginas web vamos a ver qué tipo de ...
Leer Más
Cómo instalar wordpress

Cómo instalar WordPress

Cómo instalar WordPress Hola a todos, seguimos con nuestro curso para hacer páginas web, hoy nos toca instalar WordPress en ...
Leer Más
Herramientas necesarias y coste para hacer una web

Herramientas necesarias y coste para hacer una web

Herramientas necesarias y coste para hacer una web Vamos a dar un repaso a las herramientas con las que trabajaremos ...
Leer Más
sitemap

Sitemap

Sitemap Seguimos con el curso de páginas web. ¿Ya tienes la web casi lista? Bien, vamos a seguir con otros ...
Leer Más
categorías wordpress

Categorías WordPress

Categorías WordPress ¡Hola a todos! En esta clase del curso vamos a tratar las categorías, páginas, entradas y etiquetas. ¿Es ...
Leer Más
elegir un buen hosting

Elegir un buen Hosting

Elegir un buen Hosting Un hosting es algo imprescindible cuando pensamos hacer una página web. En esta clase del curso ...
Leer Más
Aspectos legales para tú página web

Aspectos legales para tú página web

Aspectos legales para tú página web Cuando creamos una página web, debemos tener en cuenta los aspectos legales para tú ...
Leer Más