Como Eliminar archivos CSS sin usar de nuestra web
A partir de Mayo la velocidad en las páginas web va a convertirse en un factor muy importante en el posicionamiento de las web en los resultados de búsqueda de google. Hoy os traigo un truquito para reducir uno de los aspectos importantes de las core WebVitals, Vamos a aprender como eliminar archivos css sin usar de nuestra web, sin necesidad de utilizar ningún plugin y sin tener conocimientos de programación, es decir, eliminar archivos css sin usar para dummies (como yo).
Información básica
Como ya sabemos de las métricas que extrae google en pagespeed las tres más importante o las Web Core Vital son LCP (Largest Contentful Paint), FID (First Contenful Paint) y CLS (Cumulative Layout Shift) y son las que tenemos que tener más cuidadas para tener un tiempo de carga optimo. Algunos puntos que puedes tener en cuenta a la hora para mejorar estas tres métricas son: en el caso de wordpress no tener tu web saturada de plugins que retrasen en renderizado, cuantos más haya más código tiene que leer el crawler, tener un buen servidor, en el caso del CLS mide los cambios del layout, por ejemplo, la conversión de la versión escritorio a la móvil. Cuanto más desplazamiento haya en el layout más tiempo sumará en CLS y por último, puedes intentar optimizar todas las pautas que te detalla google en su informe.
Eliminar archivos CSS sin usar.
Hoy vamos a hablar de unas de las pautas que nos marca el informe “Eliminar archivos CSS sin usar”. A la hora de renderizar una web, lo primero que se lee es todo el código css, si lo pensamos es un poco lógico, ya que, es el código que “decora” la web, si esto no fuese así veríamos un página web totalmente plana, por eso, este punto es importante y puede rebajar bastante el tiempo de carga.
Cómo veis yo ya había rebajado bastante esta pauta pero generalmente cuando hacemos cambios en la web, estas métricas también cambian, es normal que este ocurra, así que, voy haciéndolo periódicamente, no obstante, hoy vamos a optimizarlo un poquito más, os voy a enseñar como hacer esto rápidamente, sin necesidad de saber programar y sin plugins.
Tampoco hay que obsesionarse con la velocidad de carga, ya que, siempre va a primar el contenido y el interés del público en cuanto al posicionamiento se refiere. Hay webs que no tienen nada optimizada esta parte pero el interés del público, el tiempo que pasan en la web, lo que navegan posicionan mejor que una web que está totalmente optimizada.
Herramienta: Unused-css.com
Para ello vamos a utilizar un tool gratuito en este caso os hablo de unused-css, una maravilla de herramienta que nos va a ayudar a eliminar todo ese código css que no utilizamos y que entorpece nuestra web. Esta herramienta lo que va a hacer básicamente es leer todo el código css de tu web, va a detectar el que no se está usando (o esta de relleno) eliminándolo para que la lectura de código sea más breve, después va a minificar y combinar el código para dejarlo optimizado y listo para cargarlo en la web.
En la versión de pago te permite programar escaneos de la web, escanear varias webs, es una herramienta que merece la pena pagar, ya que, te pone al día de los cambios en tu web y además te da acceso libre para todas la veces que necesites hacer este proceso
¿Cómo lo hacemos?
Al introducir la url de nuestra web hará un escaneo en profundidad de la web, unused css nos avisará enviándonos un e-mail cuando tenga el informe completo. En ese e-mail te llegará un link donde podrás pinchar para acceder a los archivos listos para descargar, veremos una pantalla igual a la de la foto.
A la izquierda encontraremos una columna con todos los archivos y según vayamos pinchando en cada uno de ellos, a la derecha nos volcará la información de cada uno de los archivos, la ruta en la que se encuentra el archivo, cuanto porcentaje del archivo no se está utilizando, y por lo tanto, puede ser suprimido, en este caso un 88% de este archivo no se está utilizando. Posteriormente iríamos al pie del informe y nos descargaríamos cada uno de los archivos CSS que tenemos para optimizar, si no te permite descargar los archivos siempre puedes seleccionar todo el código, copiarlo y pegarlo en cada uno de los archivos.
Sustituimos nuestro código en nuestro servidor.
Ahora llega el momento de sustituirlos en la raíz (si sabes como hacer esto puedes saltarte esta parte) si no lo has hecho antes no te preocupes porque es muy fácil hacerlo y no hacen falta conocimientos previos.
¿Cómo vamos a hacer esto? Iremos a nuestro CPanel de nuestro hosting, Filezilla o la forma que tengamos de acceder a los archivos de nuestra web. En mi caso, para esta tarea prefiero optar por filezilla porque me parece más cómodo, rápido y fácil, pero la forma de ejecución sería la misma en Cpanel o la opción que queráis.
Abriremos nuestro server y seguiremos la ruta que nos marca cada archivo, (el texto contenido entre cada barrita inclinada es una carpeta de la ruta que tendrás que ir abriendo para llegar al archivo), una vez en la carpeta donde se encuentra el archivo solamente tendremos que sobrescribirlo, en filezilla bastará con arrastrar el archivo desde la parte izquierda de tu pc a la parte derecha de tu web, o bien hacer doble click en el archivo desde la ubicación de tu pc, esto la transferirá a tu web y te saldrá un aviso para que aceptes si quieres sobrescribir, si este mensaje no te salta puede ser que haya variaciones en el nombre y no se te sustituya, sino que de duplique. En CPanel hay una opción que se llamará algo así como subir archivo o upload o algo así, siempre asegúrate de que sea en la carpeta correcta.
Si está bien hecho, habrás sustituido el código y estará optimizado, dale tiempo para que el server lo vuelque, puede ser que tarde un poco, así que, no te frustres si nada cambia en pagespeed enseguida.
Y ya estaría, espero que este pequeño truquito te haga la vida más fácil, si tienes dudas no dudes en preguntar, si crees que puede ayudar a alguien en dudes en compartir, seguirme en redes para más truquitos e información de valor y si necesitas más ayuda o tienes otras dudas sobre SEO, no dudes en contactar.