Cuando desee acelerar su sitio, puede escuchar sugerencias para minimizar el CSS. No es ningún secreto que CSS es una herramienta útil que los propietarios de sitios web pueden usar para diseñar con precisión las páginas y el contenido, pero demasiado a veces puede significar problemas con los tiempos de carga de la página. Los archivos CSS grandes pueden sobrecargar su sitio cuando se usan en exceso, ralentizando el rendimiento y enviando a los visitantes a otra parte.
Ayuda a equilibrar el compromiso y la velocidad para competir con un número cada vez mayor de sitios tecnológicos impresionantes. Puede parecer difícil hacerlo, pero no se preocupe: hay muchas ventajas rápidas y mejores prácticas que reducirán los tiempos de carga y mantendrán intacta su visión del diseño.
¿Uno de los mejores? Lo has adivinado: elegir una minificación (y sí, ¡es diferente a la compresión CSS!).
¿Qué es la minificación de CSS?
La minificación de CSS es el proceso de eliminar código innecesario de los archivos fuente CSS para reducir el tamaño del archivo sin cambiar la forma en que funciona el archivo CSS en el navegador. Al eliminar datos innecesarios del código CSS, la minificación ayuda al navegador a descargar y procesar estos archivos más rápido, lo que aumenta el rendimiento de la página y mejora la experiencia del usuario.
Entonces, ¿qué queremos decir exactamente con «código redundante»? En CSS (y en la mayoría de los otros lenguajes de codificación), los desarrolladores han implementado las mejores prácticas de formato y sintaxis para hacer que el código sea más legible para los humanos. Son efectivos para aumentar la productividad, ayudar a la depuración y facilitar el mantenimiento del código CSS. Pero son adicionales porque el navegador y la plataforma de destino no los necesitan para funcionar.
Considere CSS en el siguiente ejemplo:
/* heading elements */body {
color: #33475b
}
h1 {
font-size: 2rem;
font-weight: 700;
line-height: 2.75rem
}
h2 {
font-size: 1.625rem;
font-weight: 700;
line-height: 2.25rem
}
h3 {
font-size: 1.5rem;
font-weight: 500;
line-height: 2.125rem
}
/* other elements */
p, span {
font-size: 1rem;
font-weight: 400;
line-height: 1.75rem
}
blockquote {
font-size: 1.5rem;
font-weight: 400;
line-height: 2.375rem
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
button {
appearance: none;
font: inherit;
margin: 0
}
Puede notar que este código contiene espacios, sangrías, comentarios y saltos de línea. Si bien esto hace que todo sea más digerible para nosotros, el navegador no requiere ninguna de esta información para ejecutar el código CSS. Ignore estos espacios y comentarios adicionales al analizar archivos. El resultado es un archivo CSS que es más grande de lo que necesita para ejecutarse correctamente. Como habrá adivinado, los archivos más grandes significan que se requieren más tiempo y recursos para procesarlos.
Como resultado, los visitantes del sitio web sentirán que su sitio web o aplicación se está ejecutando lentamente; no proporciona exactamente la experiencia de usuario única que desean.
Y esto es donde ocurre la minificación de CSS: elimina el código adicional y da como resultado un archivo CSS más pequeño que se comporta de manera idéntica al original. Además, al minimizar CSS, puede cambiar el código de varias maneras, como acortar los nombres de las variables y eliminar información redundante o no utilizada. Estos esfuerzos tienen como objetivo hacer que el archivo sea aún más pequeño.
Así es como se ve el ejemplo de CSS anterior después de la minificación:
body{color:#33475b}h1{font-size:2rem;font-weight:700;line-height:2.75rem}h2{font-size:1.625rem;font-weight:700;line-height:2.25rem}h3{font-size:1.5rem;font-weight:500;line-height:2.125rem}p,span{font-size:1rem;font-weight:400;line-height:1.75rem}blockquote{font-size:1.5rem;font-weight:400;line-height:2.375rem}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}button{appearance:none;font:inherit;margin:0}
Es menos legible para nosotros, pero se ve (y funciona) igual en una computadora. ¿Y la mejor parte? Esto ayudará a que su sitio web mejore la experiencia del usuario al aumentar la velocidad de carga para impresionar a sus visitantes. Como vendedor, esta es siempre su máxima prioridad.
También es posible aplicar minificación a otros idiomas. Por ejemplo, HTML y JavaScript, los otros dos lenguajes web principales, también siguen convenciones de formato visual y se pueden minimizar.
¿Por qué deberías minimizar el CSS?
Los propietarios de sitios web eligen principalmente minimizar CSS para aumentar la velocidad de su sitio web. La regla general es simple: cuanto menos código hay para procesar, menos tiempo se tarda en cargar la página web. Esto le permite sorprender a los visitantes de su sitio con tiempos de carga rápidos. Casi el 70% de los consumidores dicen que la velocidad del sitio web influye en su disposición a comprar en un minorista en línea.
Hay dos formas principales de lograr esto con la minificación de CSS. En primer lugar, se necesitan menos tiempo y recursos para descargar y comprimir archivos más pequeños en el servidor de origen, enviarlos al cliente y finalmente descargarlos a través del navegador, simplemente porque hay menos información que resolver.
La segunda razón se relaciona con la forma en que los navegadores representan las páginas web. Cuando el navegador descarga una página web, analiza el archivo HTML de arriba a abajo antes de mostrarlo. Cuando el navegador encuentra un enlace a un archivo CSS externo, deja de analizar el HTML para procesar el CSS externo. Los usuarios no pueden ver el contenido de la página hasta que el navegador haya procesado todo el CSS vinculado. Por lo tanto, CSS se conoce como un recurso de «bloqueo de procesamiento».
No, esto no es necesariamente un problema con sitios web simples con poco CSS. Sin embargo, para sitios web más complejos, los archivos CSS son más extensos y los visitantes pueden notar tiempos de carga más prolongados. Esta es la razón por la que finaliza el proceso de minificación, y esto es especialmente importante si su sitio es visualmente complejo y contiene mucho CSS. Con menos recursos de bloqueo de procesamiento para analizar, los visitantes tendrán menos tiempo para procesar primero el contenido.
Con el espíritu de transparencia, la minificación de CSS no hará que su sitio web sea muy rápido. Pero la posibilidad de rebote aumenta en un 32% de 1 segundo a 3 segundos de tiempo de recarga. Cualquier pequeña mejora en el desempeño puede ser la diferencia entre un huésped que elige quedarse o irse. Las páginas más rápidas también mejoran la usabilidad para los usuarios móviles. A partir de junio de 2022 más del 61% del tráfico del sitio web proviene de dispositivos móviles, por lo que puede marcar una gran diferencia en el éxito de su sitio web.
Y, por supuesto, no puede ignorar cómo el tiempo de carga de la página afecta la clasificación del motor de búsqueda. ¿Lo mejor de todo? No necesita cambiar el contenido de su sitio web en absoluto. Si aún no hemos vendido los beneficios de la minimización de CSS, ¡sentimos que lo tenemos ahora!
¿Cuál es la diferencia entre la compresión y la minificación de CSS?
¿Sabías que comprimir CSS es diferente a minificar? Si bien la minimización y la compresión de CSS parecen ser dos sinónimos, son dos conceptos diferentes. Hay algunas similitudes entre ellos: ambos se relacionan con las optimizaciones de rendimiento que, en última instancia, conducen a la reducción del tamaño.
Sin embargo, la minificación implica cambiar el contenido del código. Como sabe, esto funciona eliminando formatos, caracteres y espacios innecesarios. El resultado es menos caracteres. Por el contrario, es posible que la compresión no cambie el código en sí. En cambio, el tamaño del archivo se reduce al compactarlo antes de ponerlo a disposición del navegador a pedido.
Cómo minimizar CSS
Ahora que conoce los beneficios de minimizar el CSS, echemos un vistazo a cómo puede manejarlo en su sitio web. Hay varias formas de procesar CSS, que son técnicamente diferentes. En esta sección, cubriremos varios métodos diferentes, comenzando con el más simple:
Herramientas de minificación en línea
Ya sea que desee minimizar CSS (o HTML o JavaScript), algunos sitios pueden ayudarlo de forma gratuita. Algunas opciones populares incluyen Minificador de CSS y Minificador de herramientas de Dana.
Estos sitios web son fáciles de usar y funcionan de manera similar. Simplemente pegue el código CSS formateado, alterne todas las opciones disponibles y el sitio web generará una versión reducida. Luego cópielo y péguelo en su archivo y ¡ta-da! Has minimizado correctamente el CSS.
Estos sitios web hacen un excelente trabajo al mostrarle cómo funciona la minificación. También son perfectos para proyectos más pequeños. Sin embargo, no se escalan muy bien si está trabajando en un proyecto más grande con diferentes archivos. En ese caso, debe copiar manualmente el código, pegarlo en el editor de código y luego minimizar cada archivo. Recuerda que estas herramientas requieren acceso a internet que no siempre tienes.
Por lo tanto, si bien es apropiado en algunos casos, no lo recomendamos como método principal de minificación. Cubriremos opciones más avanzadas a continuación si planea implementar la minificación en proyectos más grandes.
Herramientas de línea de comandos
Si no le importa la interfaz de línea de comandos, puede usar la línea de comandos minifera. Si bien funcionan de manera similar a las herramientas en línea, funcionan localmente y no requieren una conexión a Internet.
Una opción es utilizar un sobre el nivel del mar Paquete de minimización de CSS. Si ya tiene instalado npm en su computadora, puede descargar el css-minificar paquete con comando:
npm install css-minify -g
Luego puede minimizar un solo archivo con el comando:
css-minify --file filename
… dónde Nombre del archivo ¿Su archivo termina con la extensión? .css. O minimice todos los archivos CSS en el directorio con el comando:
css-minify -d sourcedir
… dónde sourcedir es el nombre del directorio. Todos los archivos CSS minimizados se almacenan en un directorio llamado css-dist por defecto. Puede especificar un directorio de destino diferente con el comando:
css-minify -d sourcedir -o distdir
Alternativamente, puedes probar minimizar un paquete que funciona en múltiples lenguajes de codificación: HTML, CSS y JavaScript.
CDN
¿Utiliza una red de entrega de contenido (CDN)? Si es así, estos servicios pueden minimizar los archivos de su sitio web por usted. Esto es antes de que se envíen a los navegadores. La ventaja del método CDN es que es la forma más práctica de lidiar con la minificación. Como el proceso se convierte en el trabajo de su CDN, no afectará los archivos de origen almacenados en sus servidores de origen.
Complementos de WordPress
¿Tienes un sitio de WordPress? Los complementos de optimización pueden minimizar su código, por ejemplo Caché total W3, colibríy Autooptimización. Todos estos complementos no tienen código y son fáciles, lo que le permite optimizar sus archivos, imágenes y otros elementos del sitio con solo unos pocos clics.
Herramientas de desarrollo de software
Si está utilizando una herramienta de compilación para su proyecto, es probable que tenga una función o integración de minificación nativa que puede usar para minimizar los archivos de su proyecto de forma regular. Para obtener más información, consulte la documentación de la herramienta o la biblioteca de integración.
Minimice su CSS para mejorar la experiencia del usuario.
Nos gusta la palabra «minificación»: suena como un científico loco que reduce el radio de su voluminoso código. A sus visitantes también les gustará, ya que les brinda una mejor experiencia y un tiempo más fluido para navegar por su sitio. Y el invitado encantado regresa.
No nos malinterpreten, CSS es genial. Sin él, la web sería un lugar bastante aburrido. Pero es posible tener demasiado de algo bueno, y demasiado CSS puede, en última instancia, ralentizar sus páginas y dañar su experiencia de usuario. La minificación de CSS es una solución alternativa útil que ahorra tiempo a todos sin afectar el flujo de trabajo o el contenido de la página.
Esta publicación se publicó originalmente en noviembre de 2021 y se ha actualizado para que esté completa.
