Uno de los muchos factores que pueden afectar al posicionamiento SEO, es el tiempo de carga. Google ofrece magníficas herramientas para ayudarnos a optimizar recursos como PageSpeed Insights.
Basta con introducir nuestra url y PageSpeed analizará la página web, dándonos una serie de recomendaciones y los recursos para la optimización de los CSS, listos para su descarga. Como se puede ver a continuación:
Algunos problemas son de fácil solución. Con descargar y aplicar los recursos ofrecidos por PageSpeed se resolverán la mayoría de ellos. Otros, implicarán un esfuerzo mayor. De todos modos, hoy vamos a centrarnos en la optimización y depuración del CSS.
Antes de sustituir los recursos, realiza una copia de seguridad.
Un enlace externo es la forma principal en la que se usa el CSS, en la sección head del documento html probablemente tengas una linea de código parecida a esta:
<link rel="stylesheet" type='text/css' href="www.misitio.com/css/miestilo.css">
Esta línea lo que hace es llamar a las instrucciones CSS que se localizan en un archivo distinto del html. Cuando tienes varios archivos de este tipo, el navegador tiene que cargarlos antes de mostrar tu página. Con lo cual, limitar el número de CSS externos es de vital importancia.
Según se recoge en las recomendaciones de PageSpeed Insights: “la inserción del CSS en los elementos HTML está bloqueada de manera predeterminada mediante la política de seguridad en el contenido“.
Hay infinidad de herramientas para reducir los CSS. Personalmente no me complico demasiado y uso los facilitados por PageSpeed Insights. Antes de la compresión, asegúrate de que son los CSS definitos.
Puesto que, comprimir archivos CSS es básicamente acortar las instrucciones. Eliminando espacios en blanco, comentarios, etc.
Siguiendo estos consejos se consigue una buena optimización de los CSS. Aún así, siempre se puede mejorar y profundizar un poco más.
Por ejemplo, eliminando las clases que no usemos de nuestras hojas de estilo. Sobre todo si usamos frameworks tipo bootstrap, casi seguro que no usemos ni la mitad de las clases. Para ello, Google nos ofrece una buena herramienta como Audits.
Abrimos el menú desplegable de Google Chrome, pulsamos sobre más herramientas -> herramientas de desarroladores y en la parte inferior de la pantalla se nos desplegarán las herramientas para desarrolladores o “click” F12. Seleccionamos la pestaña: Audits y pulsamos el botón “Run” y comenzará el análisis.
Una vez finalizado podrás ver un resumen como el que muestro mas abajo. Nos interesará el apartado: “remove unused CSS rules” con lo que podremos analizar y eleminar las clases que no utilicemos.
Otra opción interesante es: “Optimize the order of styles and scripts”. En el que podrás ordenar la colocación de los CSS por prioridad.
Aparte de Audits, otra herramienta que nos ayudará a localizar y eliminar las clases no utilizadas en una hoja de estilo, es el complemento para Firefox: Dust-Me Selectors.
Basta con descargar la extensión, iniciar un análisis y Dust-me nos indicará las clases no utilizadas y si lo deseamos, descargar los CSS optimizados sin dichas clases.
También dispone de un apartado más que útil que nos permitirá escanear toda la página, no sólo la actual. Pulsando en la pestaña de spider sitemap, el programa nos hará un barrido de todo el sitio web y nos facilitará los recursos optimizados listos para descargar.
Aunque esta última opción es más cómoda, personalmente prefiero Audits e ir optimizando manualmente los CSS.
En definitiva, Existen infinidad de programas para la optimización de los CSS y depuración de las hojas de estilo. Como todo, dependerá de preferencias personales, tiempo,etc. Adjunto un par de enlaces para los curiosos: CSS Lint, Devilo.us.