La acción de comprimir un fichero CSS supone un factor clave dentro del SEO más avanzado y se resume, muy básicamente, en hacer que un fichero CSS o Javascript quede comprimido lo máximo posible sin perjudicar su rendimiento en la web.
Pero probablemente sea conveniente comenzar con una pregunta aún más sencilla: ¿Y qué es un fichero CSS…? Se trata de un lenguaje de programación enfocado a habilitar y hacer accesible el contenido de la web y la visualización de sus elementos internos. Por un lado tenemos los documentos HTML y XML con información enfocada únicamente hacia la semántica del contenido en los componentes de una web y por otro el fichero CSS que se asocia a los recursos de diseño.
En posts anteriores ya detallamos la importancia del tiempo de carga en la web y cómo supone un factor decisivo cara al usuario, pues bien, éste tiempo de carga se ve influído por éstos elementos internos dependientes del CSS antes de poder mostrarse y, obviamente, cuanto más complejos y de mayor tamaño son los archivos CSS mayor será, también, el tiempo de espera del usuario web para poder ver los contenidos.
Llevando a cabo la compresión de ése código CSS reducimos el tamaño de los archivos favoreciendo el tiempo de carga y optimizando tanto el rendimiento de la web como el posicionamiento.
Para comprenderlo de forma sencilla, lo que buscamos es “limpiar” el código; reducir su tamaño acotando espacios innecesarios, tabulaciones de más o saltos de línea excesivos. Todo ello elementos que nuestro navegador no requiere para interpretar la información pero que los programadores lo muestran para “ordenarse” en sus tareas.
Temas del artículo
Ventajas de comprimir un archivo CSS
- En primer lugar y por lógica; reducimos el tamaño del fichero y su peso aligerando la velocidad de carga en la web y fomentando la interacción con el usuario a la hora de mostrar los contenidos y afianzar su permanencia.
- Optimizamos nuestra estrategia de posicionamiento SEO; los últimos algoritmos de Google no sólo recomiendan una correcta compresión de los archivos CSS, sino que lo toman enormemente en cuenta a hora de priorizar posiciones.
- Mejora la usabilidad web; optimizar la experiencia de usuario en la web es clave para afianzar su audiencia y reducir las tasas de abandono. Una página con un tiempo de carga excesivo es un factor clave para que las visitas abandonen la web y se pierdan los objetivos de negocio.
- Mayor seguridad; la compresión de ficheros CSS perjudica la comprensión del código ante robos externos no mostrando comentarios que den pistas de su lógica y resultando, así, difícil de leer.
Consejos para comprimir el fichero CSS
- Evita el uso numeroso se scripts para cada archivo CSS; si es posible agrupa varios archivos CSS en un solo script PHP de forma que cada vez que se cargue la página el usuario solo recuperará un archivo.
- Acota y limita el código CSS eliminando elementos innecesarios como saltos de línea, comentarios o el punto y la coma al final de una lista.
- Escribir CSS de forma abreviada; las propiedades abreviadas permiten asignar el valor de muchas propiedades de CSS al mismo tiempo. Con la propiedad abreviada “shorthand” podemos escribir hojas de estilo más concretas con menos tiempo y más claridad. (Por ejemplo la propiedad “background” al referirse a elementos como background-color o background-position…)
- No es necesario repetir las etiquetas con un atributo de identificador, tan sólo se muestra uno en cada página por lo que no tiene sentido saturar con repeticiones adicionales.
- Situar el CSS en el head; Insertar los estilos en el head facilitará en la carga que la página muestre los estilos ante nuevas aperturas.
- Limitar peticiones de links; Ante numerosas peticiones de linkeo cuando éstas muestran un código reducido y sencillo es prioritario situar un solo fichero con todas las reglas de código reduciendo peticiones al servidor.
- Exceptuando en el head, procura acotar el uso excesivo de inserciones directamente en el archivo HTML.
- Elimina las clases que no tengan rendimiento de uso dentro de las hojas de estilo, herramientas como Audits de Google puede darte una perspectiva para acotar las clases sin uso en el código.
Herramientas para comprimir CSS
Una opción online, sin descargas, rápida y sencilla. Tan sólo copia el fragmento de código CSS en el espacio de la izquierda, haz clic y te mostrará el código minificado a la derecha.
La herramienta permite copiar o bien generar y descargar directamente el archivo CSS minificado.
Otra opción muy similar a la anterior; Csscompressor es una opción sencilla y rápida donde tan sólo debemos pegar el código CSS en el espacio con título “CSS Source Code Input” y después definir las variables de compresión deseado para el archivo.
Clean CSS es un optimizador de código de mucha capacidad. Acota tu código CSS y lo hace más limpio eliminando sobrantes y propiedades innecesarias. Mantiene una interfaz sencilla donde sólo tenemos que introducir el código CSS a procesar o bien dar la URL donde se encuentra publicado y elegir las opciones de optimización que estemos buscando.
Cada visitante que accede a la web a través de un navegador provoca la activación de todos archivos CSS que deben ser cargados y enviados por lo que el número de visitas y el grado de tamaño y complejidad de los elementos en la web harán mayor la dependencia de una correcta compresión de los archivos CSS.
Como conclusión, es importante dar importancia al proceso de usabilidad en la web, nuestro objetivo es el usuario y debemos priorizar acciones en la web que hagan que éste permanezca y se sienta cómodo en la navegación. La velocidad de carga es uno de ésos puntos clave para evitar las tasas de abandono y la limpieza y compresión de CSS fomenta en gran medida hacer ligero el proceso.