Preferencias de privacidad

Gestión de consentimientos

Cookies utilizadasObligatorias

He leído y acepto la Política de privacidad.

Obligatorias

Estas cookies son necesarias para el funcionamiento del sitio web y no pueden ser desactivadas en nuestros sistemas. En general, sólo se establecen en respuesta a acciones realizadas por usted que equivalen a una solicitud de servicios, como establecer sus preferencias de privacidad, iniciar sesión o rellenar formularios.

Cookies utilizadas Obligatorias

PHPSESSID, Cadabullos_Diseño_WebonlineCookieAnalitycs, Cadabullos_Diseño_WebonlineCookie, id_usuario_tienda, marca_ti

Analíticas

Estas cookies nos permiten medir el número de visitas y conocer las fuentes de tráfico. Nos ayudan a saber qué páginas son las más y las menos populares y a conocer cómo se mueven los visitantes por el sitio. Toda la información que estas cookies recolectan es agregada y por lo tanto anónima. Si no autoriza estas cookies, no sabremos cuándo ha visitado nuestro sitio.

Cookies utilizadas

Cómo anular consentimiento
_ga,_gid,_gat,

google.com

_ga,_gid,_gat,
¡Atención! Este sitio usa cookies y tecnologías similares. Si no cambia la configuración de su navegador, usted acepta su uso
Opciones
Ícono menú móvil
Atención al cliente

Cómo comprimir y minimizar archivos CSS para optimizar los tiempos de carga de tu página web.

Cómo comprimir y minimizar archivos CSS para optimizar los tiempos de carga de tu página web.
18/05/2022
Admin

Como todos sabemos, los tiempos de carga de una página web  son importantísimos a la hora de conseguir conversiones. Un tiempo de carga alto puede significar que el usuario o cliente se canse y abandone nuestra plataforma.

Uno de las mejoras que podemos realizar en nuestra página web para mejorar estos tiempos de carga, es la compresión de nuestros archivos CCS.

¿En que consiste la compresión de archivos CSS?

Minimizar una hoja de estilo consiste en eliminar todos aquellos caracteres innecesarios para el correcto funcionamiento de ésta, reduciendo considerablemente su tamaño.

Con caracteres innecesarios nos referimos a espacios en blanco, saltos de línea, etc..

Estos caracteres no influyen para nada en el funcionamiento de nuestros ficheros CSS, pero si contribuyen a que este aumente su tamaño innecesariamente, suponiendo una descarga de datos extra para todos aquellos usuarios que acceden a nuestra página web.

Cuando comprimes un fichero CSS y compruebas el resultado, puede llamarte la atención que el ahorro que consigues es mínimo, pero para usuarios con malas coberturas de telefonía puede significar unos segundos valiosísimos y la diferencia entre el abandono o la permanencia en nuestra página web. 

Además, si tenemos en cuenta la cantidad de tráfico que se mueve hoy en día en Internet, reducir el envío de esta información innecesaria contribuye a descongestionar los medios físicos de transmisión, asi como a minimizar un poquito las emisiones de C02 que se producen en éstas.

Otro de los motivos por los que debemos reducir al máximo el tamaño de este fichero, es que es una de las auditorías que realiza Google al mirar es estado de salud de nuestro sitio web.

Puedes acceder a PageSpeed Insights para ver el estado de salud de tu sitio web.

Te recomiendo, que siempre guardes una copia de tus hojas de estilo sin comprimir para su fácil manipulación, aunque el proceso de compresión es reversible, puede que no deje la maquetación del fichero igual que la haces tú..

Cómo comprimir y minimizar un fichero CSS

Ahora que ya sabemos en que consiste comprimir y minimizar ficheros CSS vamos a proceder a explicar como realizarla.

El proceso que vamos a explicar es manual, si utilizas WordPress u otra plataforma que disponga de plugin para esta función, es muy recomendable que los utilices, siempre y cuando no perjudique al rendimiento del sistema.

Comprensión local de ficheros CCS con Notepad++

Para comprimir en nuestro ordenador un fichero CSS vamos a utilizar Notepad++, una herramienta muy sencilla y completa, que pesa muy poquito y que nunca está de más que tengamos instalada.

Para comprimir nuestro archivo, primero lo abrimos con Notepad++.

Codigo css sin comprimir en Notepad

Una vez abierto el fichero nos dirigimos al menú editar de Notepad -> Operaciones de limpieza -> Eliminar espacios innecesarios.

Ahora que ya tenemos nuestro fichero CSS minimizado, guardamos el documento y lo subimos a nuestro sitio web.

También puedes copiar y pegar el código resultante en la casilla correspondiente de tu gestor de contenidos si este te permite la edición de este tipo de ficheros.

Codigo css sin comprimir en Notepad

Resumen: Abrir fichero -> Editar -> Operaciones de Limpieza -> Eliminar espacios innecesarios -> Archivo -> Guardar -> Subir fichero al servidor

Comprensión online de ficheros CCS

Si no te apetece instalar ninguna aplicación en tu ordenador, como siempre y con casi todo tipo de tareas, puedes hacerlo online. Para ello os proponemos las siguientes herramientas online de compresión de ficheros CSS.

Ambas herramientas son muy sencillas de utilizar.

Css Minifier

Css Minifier - Compresor ficheros CSS online

Excelente compresor de CSS online que consiste en dos casillas, Input CSS, en donde debes pegar tu código sin comprimir y Minified Output, en donde se va a generar el código comprimido.

Csscompressor

Csscompressor - Compresor ficheros CSS online

Csscompressor me parece más completa que Css minifier, ya que tienen varias opciones de configuración en donde establecer el nivel de compresión deseado.

El proceso es muy sencillo, pegas el código CSS en la casilla "CSS Source Code Input:" y la das a "Compress", enseguida podrás ver una nueva casilla con el resultado de la compresión.

Esta opción me ha sido muy útil en ocasiones en las que no he dejado copia del fichero sin descomprimir, ya te te permite realizar el proceso inverso y generar un fichero legible para poder manipular manualmente.

Para descomprimir un archivo CSS, pega tu código en la casilla "CSS Source" y selecciona en "Compresión Level" cualquiera de las dos últimas opciones.

Recuerda, que tanto con Css Minifier como con CssCompresor, tendrás que copiar el código resultante en tu fichero CSS y subirlo al servidor para que se reflejen los cambios.

Resumen: Abre tu fichero CSS, copia el código de tu fichero, pega el código en la herramienta online y dale al botón de enviar el formulario, copia el código resultante y pégalo en tu fichero CSS, sube el fichero a tu servidor.

Desde Cadabullos, esperamos que este artículo os haya solucionado vuestras dudas a la hora de comprimir o minimizar vuestros ficheros CSS. Si os ha quedado alguna, podéis solucionarlas en los comentarios del post.

Valoraciones
[Votos: 8 Promedio: 5]

Post Relacionados

Comentarios

icono persona comentarios
Pedro
19/05/2022 11:05 horas
#1

Clarito y bien explicado!! :)

Admin
Admin
20/05/2022 08:05 horas

Muchas gracias

icono persona comentarios
Alberto
19/05/2022 11:05 horas
#2

Genial post!!

Admin
Admin
20/05/2022 08:05 horas

Gracias :)

icono persona comentarios
Ana
21/05/2022 07:05 horas
#3

Que fåcil! Genial post

Admin
Admin
24/05/2022 10:05 horas

Gracias por pasarte!! :)

Deja tu comentario

Para enviar un comentario debes aceptar nuestra política de privacidad.

  • Responsable de los datos: Cadabullos Diseño Web
  • Finalidad: Gestión y moderación de comentarios.
  • Legitimación: Tu consentimiento expreso. No se cederán datos a terceros salvo obligación legal.
  • Destinatario: Cadabullos Diseño Web
  • Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.
*
*
*