Optimización CSS: 21 formas de acelerar su sitio web

Escucha este artículo

CSS debe pasar por una canalización relativamente compleja, al igual que HTML y JavaScript. El navegador debe descargar los archivos del servidor y luego proceder a analizarlos y aplicarlos al DOM. Debido a los niveles extremos de optimización, este proceso suele ser bastante rápido: para proyectos web pequeños que no se basan en marcos, CSS suele representar solo una pequeña parte del consumo total de recursos.

Los marcos rompen este equilibrio. Incluya una pila de GUI de JavaScript como jQuery UI y observe cómo su CSS, JS y HTML crecen exponencialmente. A menudo, los desarrolladores no se sienten mal: cuando se sientan en una potente estación de trabajo de ocho núcleos con T3 Internet, a nadie le importa la velocidad. Esto está cambiando a medida que entran en juego latencias o dispositivos con limitaciones de CPU.

optimización CSS requiere un enfoque multidimensional. Si bien el código escrito a mano se puede reducir usando varios métodos, iterar el código del marco a mano es ineficiente. En estos casos, usar el minimizador automático da mejores resultados.

Los siguientes pasos te ayudarán a optimizar tu CSS. No todos ellos pueden ser directamente aplicables a su proyecto, téngalo en cuenta.

El contenido del artículo:

• Usar sugerencias de CSS de acceso directo
• Eliminar el código CSS no utilizado
• Trabaja con CSS de una forma más cómoda
• Esté siempre al tanto de los problemas relacionados con sus estilos.
• CSS crítico en línea
• Análisis antiparalelo
• Reemplace sus imágenes con CSS
• Usa combinaciones de colores
• Eliminar ceros y unos innecesarios
• Eliminar puntos y comas adicionales
• Usar sprites de textura
• Eliminar píxel no deseado
• Evita proporciones exigentes
• Eliminar espacios innecesarios
• Eliminar comentarios no deseados
• Usar compresión automática
• Ejecutar desde NPM
• Mantenga a Sass y a otros bajo control
• Configurar el almacenamiento en caché
• limpiar cache
• No olvides lo básico

Usar sugerencias de CSS de acceso directo

La oración CSS más rápida es la que nunca se analiza. El uso de sugerencias abreviadas como la declaración de campo que se muestra a continuación reducirá drásticamente el tamaño de sus archivos CSS. Se pueden encontrar muchas abreviaturas adicionales buscando en Google "Taquigrafía CSS".

Aquí hay un ejemplo:

p { margen superior: 1px; margen derecho: 2px; margen inferior: 3px; margen izquierdo: 4px; } p { margen: 1px 2px 3px 4px; }

Eliminar el código CSS no utilizado

La eliminación de partes innecesarias de su marcado obviamente da como resultado un gran aumento en la velocidad. El navegador Google Chrome tiene esta función lista para usar.

Simplemente vaya a Ver> Desarrollador> Herramientas de desarrollador, abra la pestaña Fuentes en la última versión y abra el menú de comandos. Después de eso, seleccione "Mostrar cobertura" y admire la ventana de análisis de cobertura que resalta el código no utilizado en la página web actual.

Trabaja con CSS de una forma más cómoda

La navegación a través del análisis línea por línea no es necesariamente conveniente. Chrome Web Performance Audit devuelve información similar: simplemente ábralo desde la barra de herramientas, elija Ver > Desarrollador > Herramientas para desarrolladores > Auditoría y ejecútelo. Cuando haya terminado, aparecerá una lista de elementos problemáticos.

Esté siempre al tanto de los problemas relacionados con sus estilos.

Tenga en cuenta que el análisis automático de CSS siempre puede generar errores. Realice una prueba exhaustiva de todo el sitio web después de reemplazar los archivos CSS por archivos minimizados; nunca se sabe qué errores cometió el optimizador. Y en el futuro, un servidor web decente puede ayudarlo a eliminar las arrugas de su sitio.

CSS crítico en línea

La carga de hojas de estilo externas lleva tiempo debido a la latencia. ¿Alguien recuerda el "flash de contenido sin estilo"? De esta manera, las piezas de código más importantes se pueden colocar en la etiqueta del encabezado.

Sin embargo, trate de no exagerar. Tenga en cuenta que el código también debe ser leído por personas que realizan tareas de mantenimiento.

Aquí hay un ejemplo:

<html> 
<head> 
<style> .blue{color:blue;} </style>
</head> 
<body> 
<div class="blue"> ¡Hola Mundo! </div>

Análisis antiparalelo

@importar agrega estructura a su código CSS. Desafortunadamente, los beneficios no son gratuitos: dado que las importaciones se pueden anidar, no se pueden analizar en paralelo. La forma más paralela utiliza una serie de etiquetas que el navegador puede obtener a la vez.

Ejemplo:

@importar URL("a.css"); @importar URL("b.css"); @importar URL("c.css");

Reemplace sus imágenes con CSS

Hace unos años, un conjunto de archivos PNG translúcidos para crear efectos translúcidos en los sitios web era común. Actualmente, los filtros CSS son una alternativa de ahorro de recursos. Por ejemplo, el fragmento que acompaña a este paso garantiza que la imagen en cuestión se muestre como una versión en escala de grises de sí misma.

Ejemplo:

img { -webkit-filter: escala de grises (100%); /* viejo safari */ filter: grayscale(100%); }

Usa combinaciones de colores

El sentido común dicta que los descriptores de color de seis dígitos son la forma más eficiente de expresar los colores. Este no es el caso; en algunos casos, las descripciones abreviadas o los nombres de los colores pueden ser más cortos.

objetivo { color de fondo: #ffffff; } objetivo { fondo: #fff; }

Eliminar ceros y unos innecesarios

CSS admite una amplia gama de unidades y formatos de números. Son un objetivo bienvenido para la optimización: tanto los ceros finales como los finales se pueden eliminar, como se muestra en el fragmento a continuación. Además, tenga en cuenta que cero siempre es cero y que agregar una dimensión no aumenta el valor de la información contenida.

relleno: 0.2em margen: 20.0em valor: 0px; relleno: .2em; margen: 20em valor: 0;

Eliminar puntos y comas adicionales

Esta optimización es algo crítica ya que afecta los cambios de código. La especificación CSS le permite omitir el último punto y coma en un grupo de propiedades. Dado que los ahorros que se consiguen con este método de optimización son mínimos, lo mencionamos principalmente para quienes trabajan con el optimizador automático.

pag { . . . tamaño de fuente: 1.33em

Usar sprites de textura

La carga de múltiples sprites pequeños es ineficiente debido a la sobrecarga del protocolo. Los sprites de CSS combinan una serie de imágenes pequeñas en un archivo PNG grande, que luego se divide usando reglas de CSS. Programas como empaquetador de texturas , simplifica enormemente el proceso de creación.

.descargar { ancho:80px; altura: 31px; posición de fondo: -160px -160px; } .download:hover {ancho:80px; altura: 32px; posición de fondo: -80px -160px; }

Eliminar píxel no deseado

Una forma ingeniosa de mejorar el rendimiento es una característica del estándar CSS. Se supone que los valores numéricos sin unidad son píxeles; al eliminar píxeles, se ahorran dos bytes para cada número.

h2 {relleno: 0px; margen:0px;} h2 {relleno:0; margen: 0}

Evita proporciones exigentes

El análisis mostró que algunas etiquetas cuestan más que otras. La lista que acompaña a este paso se considera especialmente exigente en el rendimiento: evítela cuando tenga la oportunidad de hacerlo.

border-radius box-shadow transform filter :nth-child position: fixed; etc.

Eliminar espacios innecesarios

Los espacios (piense en tabulaciones, retornos de carro y espacios) facilitan la lectura del código, pero no hacen mucho desde el punto de vista de un analizador. Elimínelos antes del envío. Mejor aún, delegue este trabajo a un script de shell o dispositivo similar.

Eliminar comentarios no deseados

Los comentarios también son inútiles para el compilador. Cree su propio analizador para eliminarlos antes de la entrega. Esto no solo ahorra ancho de banda, sino que también dificulta que los atacantes y los clonadores descubran qué hay detrás del código.

Usar compresión automática

El equipo de interfaz de usuario de Yahoo ha creado una aplicación que hace mucho trabajo de compresión. Viene como un archivo JAR y se puede ejecutar con la JVM de su elección.

java -jar yuicompressor-xyzjar Uso: java -jar yuicompressor-xyzjar [opciones] [archivo de entrada] Opciones globales -h, --help Muestra esta información --type Especifica el tipo del archivo de entrada.

Ejecutar desde NPM

Si prefiere integrar el producto en Node.JS, visite npmjs.com/package/yuicompressor . El repositorio mal mantenido contiene un conjunto de archivos de contenedor y una API de JavaScript.

var compresor = require('yuicompressor'); compresor.compress('/ruta/al/ archivo o cadena de JS', { //Opciones de compresor: juego de caracteres: 'utf8', tipo: 'js',

Mantenga a Sass y a otros bajo control

Si bien el rendimiento del selector de CSS no es tan crítico como lo era hace unos años (ver recurso), los marcos como Sass a veces producen código extremadamente complejo. Revise los archivos de salida de vez en cuando y piense en cómo optimizar los resultados. ¿Tienes resultados para compartir con el equipo? Almacene archivos en almacenamiento en la nube pública.

Configurar el almacenamiento en caché

El viejo dicho dice que el archivo más rápido es el que nunca pasa por el cable. Consultar el caché del navegador logra esto de manera eficiente. Desafortunadamente, la configuración de los encabezados de almacenamiento en caché se debe realizar en el servidor. Haga un buen uso de las dos herramientas que se muestran en las capturas de pantalla, proporcionan una forma rápida de analizar los resultados de sus cambios.

limpiar cache

A los diseñadores a menudo no les gusta el almacenamiento en caché por miedo a los problemas con los próximos cambios. Una buena manera de resolver este problema consiste en incluir etiquetas con el nombre del archivo. Desafortunadamente, el esquema descrito en el código que acompaña a este paso no funciona en todas partes, ya que algunos servidores proxy se niegan a almacenar en caché archivos con rutas "dinámicas".

<link rel="stylesheet" href="style.css?v=1.2.3">

No olvides lo básico

La optimización de CSS es solo una parte del esfuerzo de optimización. Si su servidor no usa HTTP/2 y compresión gzip, se pierde mucho tiempo al transferir datos. Afortunadamente, resolver estos dos problemas es bastante simple. Mi ejemplo muestra varias configuraciones para un servidor Apache ampliamente utilizado que usa un archivo .htaccess. Si se encuentra en un sistema diferente, simplemente consulte la documentación del servidor.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css

Estaré muy contento si este artículo es útil para usted. Bueno, continuaré agregando nuevos materiales relevantes sobre este tema.

Leyendo este artículo:

• Cómo hacer una redirección 301 en un archivo .htaccess - ejemplos detallados
• Optimización del rendimiento de la página web

Gracias por leer: AYUDANTE DE SEO | NICOLA.TOP