Comprime el código CSS y mejora el rendimiento del sitio

Comprime el código CSS: Los documentos HTML y XML contienen solo indicaciones sobre el contenido y su estructura dentro del sitio, mientras que los otros elementos relacionados con el formulario se separan en los llamados archivos CSS. Cuando se usan hojas de estilo, el servidor web debe reenviarlas al navegador junto con los documentos HTML y el contenido multimedia integrado (fotos, videos, etc.) cuando se abre una página. Este proceso afecta los tiempos de carga del sitio. Mientras más grandes y complejos sean los archivos CSS, más tiempo tendrá que esperar el visitante para ver la página completa. Al comprimir el código CSS en uso, puede reducir significativamente el tamaño de los archivos CSS y mejorar el rendimiento de su sitio.

Posibilidad de optimizar el código Y Comprime el código CSS

El tiempo de carga de una página web adquiere cada vez más importancia con el tiempo, sobre todo debido al uso creciente de dispositivos móviles y conexiones de datos. Al mismo tiempo, el campo de uso del código CSS ha aumentado: de hecho, este lenguaje cubre cada vez más las funciones de JavaScript . Especialmente las plantillas CMS como WordPress a menudo tienen archivos CSS cargados que ralentizan innecesariamente el sitio. Por esta razón, le presentamos algunos consejos y trucos para comprimir el código CSS y reducir el tiempo de carga de su sitio:

  1. Evite usar demasiado CSS en línea, es decir, ingresar el código directamente en el archivo HTML, a menos que sea el encabezado de la página. Lo mismo es cierto para las etiquetas de estilo, es decir, las propiedades de CSS personalizadas que difieren de la hoja de estilo estándar en uso.
  2. En un solo script PHP, combina varios archivos CSS para que el cliente llame solo al archivo PHP, evitando enviar una solicitud http para cada hoja de estilo individual y esperando la respuesta.
  3. Utilice, cuando sea posible, abreviaturas como:  body { margin: 20px 10px 5px 10px }  en  lugar de formas extendidas como: body { margin-top: 20px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px}
  4. Evite demasiadas especificaciones. Si etiquetas específicas ya están incluidas en un elemento (por ejemplo, en una lista), no hay necesidad de repetirlas.
  5. Use colores con notación hexadecimal (HEX) en lugar de RGB.
  6. El selector universal «*» solo debe usarse si es realmente indispensable. Una representación con este selector es válida para cada elemento y, por lo tanto, el navegador debe recuperar todos los elementos que lo utilizan.
  7. Minimice el código CSS eliminando espacios innecesarios, líneas en blanco y comentarios. Por ejemplo No es necesario dejar un espacio después de los dos puntos o punto y coma. También puede eliminar el punto y coma final al final de una lista. A través de este proceso, el archivo CSS pierde su estructura ordenada y su claridad, pero el navegador lo interpretará más rápidamente. 

Dado que la compresión de un archivo CSS es complicada, recuerde crear una copia de seguridad del archivo original no minimizado. Al hacerlo, también puede hacer pequeños cambios más tarde o resolver los errores. 

Herramientas en línea y fuera de línea Comprime el código CSS

Para aquellos que desean facilitar la tarea de optimizar el código CSS manualmente, hay varias aplicaciones en línea y programas sin conexión con los que puede minimizar los archivos CSS. Estas herramientas le ahorran el trabajo duro y eliminan efectivamente al menos los espacios, las pestañas, los comentarios y el retorno del carro . La conversión del código de color también es posible con la mayoría de los programas. El resultado puede descargarse directamente como un archivo CSS o copiarse y pegarse en su archivo. En resumen, presentamos tres aplicaciones que realizan estas funciones:

CSS Minifier

Se puede acceder a la aplicación en línea CSS Minifier en http://www.cssminifier.com/ . Simplemente copie el código CSS en el campo «Entrada CSS» y comience el proceso haciendo clic en «minificar». En el campo «salida minificada» se muestra el resultado de la operación y puede copiar el código manualmente o descargarlo a través de «descargar como archivo». CSS Minifier elimina del código el carro que devuelve, los espacios y el punto y coma final de las listas. Además, la herramienta convierte los códigos RGB en la variante HEX comprimida sin problemas .

Compresor CSS

La aplicación web CSS Compressor difiere de CSS Minifier en presencia de otras opciones para elegir para la compresión de código. Llame al sitio http://csscompressor.com/ y copie su código CSS en el campo «Entrada de código fuente CSS». Ahora puede determinar el grado de compresión . Al hacer clic en «Mostrar opciones avanzadas», marque la casilla con las dimensiones de optimización deseadas, como los colores («Comprimir colores») o los espacios («Eliminar las barras invertidas innecesarias»). La compresión comienza haciendo clic en «Comprimir». Además, en el campo «JavaScript comprimido», la herramienta proporciona información sobre las dimensiones de entrada y salida de su archivo CSS , así como el porcentaje de minimización logrado.

Caja de herramientas CSS gratuita

Free CSS Toolbox es un software gratuito para desarrolladores web, que se puede descargar desde la página de desarrolladores de Blumentals Software . Como el nombre ya revela, es una colección de herramientas con las que también es posible formatear y verificar códigos CSS. En el menú «Opciones de formato CSS», elija los parámetros CSS que desea optimizar e inicie la compresión haciendo clic en «Volver a formatear ahora». El programa elimina así los espacios y el último punto y coma sin ningún problema, e incluso se minimiza el tamaño de los colores. Free CSS Toolbox funciona en todos los sistemas operativos Windows, comenzando con XP.

Tiempos de carga más rápidos – Comprime el código CSS 

Cuanto más complejo sea su sitio web o tienda en línea, más necesitará recurrir a hojas de estilo, en su mayoría archivos CSS. Por lo tanto, no es sorprendente que la carga de su servidor web aumente a medida que aumenta el número y el tamaño de los archivos CSS. Al abrir una página con un cliente (navegador), todos los archivos CSS siempre deben recuperarse y reenviarse. Por esta razón, se recomienda optimizar las hojas de estilo . Las herramientas en línea y fuera de línea, como las que se muestran aquí, también permiten a los principiantes de programación eliminar información innecesaria de los archivos CSS. Desafortunadamente, sin embargo, con estos programas no es posible optimizar el código al máximo; para eso tienes que pensarlo o contactar a los expertos.