Contenido
- 01. Utilice selectores poco profundos
- 02. Usar propiedades de taquigrafía
- 03. Utilice la sugerencia de recursos de precarga
- 04. Elimina redundancias con csscss
- 05. Haz un esfuerzo adicional con cssnano
¿Ha pensado en el tamaño del CSS de su sitio? Si su hoja de estilo se dispara, podría estar retrasando el procesamiento de la página.
- 16 ejemplos principales de animación CSS
Aunque CSS no es el tipo de recurso más grande que ofrecerá, es uno de los primeros que descubre el navegador. Debido a que el navegador no puede representar la página hasta que se descargue y analice CSS, debe ser lo más sencillo posible. Aquí hay cinco consejos que le ayudarán a conseguirlo.
¿Tienes un sitio complejo? Necesita el servicio de alojamiento web perfecto. O, si desea crear un sitio sin complicaciones, pruebe con un creador de sitios web.
01. Utilice selectores poco profundos
Tus padres te dijeron que la superficialidad no es una virtud, pero cuando se trata de CSS, se equivocan. Si se usan de manera constante, los selectores poco profundos pueden recortar kilobytes de hojas de estilo grandes. Toma este selector:
nav ul li.nav-item
Esto podría expresarse de manera más sucinta:
.nav-item
Además de ayudar a mantener su CSS esbelto, el navegador también renderizará los elementos objetivo de los selectores superficiales más rápido. Los navegadores leen los selectores de derecha a izquierda. Cuanto más profundos son los selectores, más tiempo tarda el navegador en renderizar y volver a renderizar los elementos a los que se aplican esos selectores. Para DOM complejos que se refluyen con frecuencia, los selectores cortos también pueden reducir el jank.
Idealmente, desea que los selectores sean lo más superficiales posible, pero esto no significa que deba cortar todo hasta la médula. A veces, necesita especificidad adicional para ampliar componentes. Logre el equilibrio adecuado, pero también sea pragmático.
02. Usar propiedades de taquigrafía
Esto parece sentido común, pero se sorprenderá de la frecuencia con la que se utilizan innecesariamente las propiedades a mano. A continuación, se muestra un ejemplo de algunas propiedades a mano alzada en uso:
tamaño de fuente: 1.5rem; altura de línea: 1,618; familia de fuentes: "Arial", "Helvetica", sans-serif;
¡Eso es mucho CSS! Ordenemos eso:
fuente: 1.5rem / 1.618 "Arial", "Helvetica", sans-serif;
La fuente La propiedad taquigráfica condensa varias declaraciones en una práctica línea que ocupa mucho menos espacio.
En el ejemplo que se muestra arriba, la taquigrafía usa aproximadamente un 40 por ciento menos de espacio que su equivalente a mano alzada. No es tan legible a primera vista, pero la sintaxis se convierte en una segunda naturaleza después de haber pasado algún tiempo usándola.
Por supuesto, fuente no es la única taquigrafía disponible para usted. Por ejemplo, margen se puede utilizar en lugar de propiedades más largas como margen superior, margen derecho y así.
La relleno la propiedad funciona de la misma manera. Para conocer más formas de limpiar su CSS, Mozilla Developer Network ofrece una lista útil de referencias de propiedades abreviadas.
¿Qué sucede si necesita anular un valor más abajo en la cascada? Por ejemplo, supongamos que tiene un elemento de título que necesita cambiar su tamaño de fuente para pantallas más grandes.
En este caso, debe utilizar el más específico tamaño de fuente propiedad en su lugar:
h1 {fuente: 1.5rem / 1.618 "Arial", "Helvetica", sans-serif; } @media (ancho mínimo: 60rem) {h1 {tamaño de fuente: 2rem; }}
Esto no solo es conveniente, también aumenta la flexibilidad de los componentes. Si alguna otra parte del subyacente fuente se modifica la propiedad, esos cambios se filtrarán a pantallas más grandes. Esto funciona muy bien para anulaciones de componentes donde un nuevo contexto requiere un tratamiento diferente.
03. Utilice la sugerencia de recursos de precarga
La precarga La sugerencia de recursos puede darle al navegador una ventaja para cargar el CSS de su sitio. La precarga La sugerencia de recurso le dice al navegador que inicie una búsqueda anticipada de un activo.
Puede configurarlo como enlace> etiqueta en HTML:
link rel = "preload" href = "/ css / styles.css" as = "style">
O como un encabezado HTTP en la configuración de su servidor:
Enlace: /css/styles.css>; rel = precarga; as = estilo
En ambos escenarios, precarga le da al navegador una ventaja en la carga /css/styles.css. Utilizando precarga en un encabezado HTTP es preferible, ya que esto significa que el navegador descubrirá la pista antes en los encabezados de respuesta, en lugar de más adelante en el cuerpo de la respuesta.
Otra razón para usar precarga en un encabezado HTTP es que iniciará un evento de inserción del servidor en la mayoría de las implementaciones HTTP / 2. La inserción del servidor es un mecanismo mediante el cual los activos se envían de manera preventiva al cliente cuando se realizan solicitudes de contenido, y ofrece beneficios de rendimiento similares a CSS en línea.
La inserción del servidor no está disponible en HTTP / 1. Sin embargo, usando precarga en un entorno HTTP / 1 aún puede mejorar el rendimiento.
04. Elimina redundancias con csscss
Puede resultar útil comprobar su CSS en busca de reglas duplicadas con un comprobador de redundancia. Tome la herramienta csscss basada en Ruby, por ejemplo.
Los usuarios de Ruby pueden instalarlo con:
gema instalar csscss
Una vez instalado, puede examinar su CSS en busca de redundancias como esta:
csscss -v styles.css
Este comando enumera qué selectores comparten reglas que puede desduplicar para ahorrar espacio:
{h1} Y {p} comparten 3 declaraciones - color: # 000 - altura de línea: 1.618 - margen: 0 0 1.5rem
Puede mover reglas duplicadas en un selector:
h1, p {color: # 000; altura de línea: 1,618; margen: 0 0 1.5rem; }
Le sorprendería saber cuánto espacio puede ahorrar este proceso en proyectos grandes. Utilizar el --ayuda opción para ver más comandos que puede usar para modificar aún más las cosas.
05. Haz un esfuerzo adicional con cssnano
Para la cereza en la parte superior, puede usar cssnano, una herramienta dependiente de nodo y PostCSS. cssnano no solo minimiza CSS, también hace muchas optimizaciones enfocadas que pueden reducir su CSS aún más. Instálelo en su sistema con npm así:
npm i -g cssnano-cli
Luego utilícelo para optimizar su CSS:
cssnano styles.css optimizado-styles.css
Si ejecutar comandos ad hoc no es su estilo, puede automatizar cssnano con un sistema de compilación. A continuación, se explica cómo usar cssnano en un archivo gulp:
const tragar = require ("tragar"); const postcss = require ("gulp-postcss"); const cssnano = require ("cssnano"); const buildCSS = () => {return trago.src ("css / styles.css") .pipe (postcss ([cssnano ()]) .pipe (trago.dest ("css / optimizado"));}; const watch = () => {gulp.watch ("css / styles.css", buildCSS);}; export.buildCSS = buildCSS; export.watch = watch;
La buildCSS la tarea lee el CSS en el que escribes css / styles.css, luego canaliza la salida optimizada al css / optimizado directorio. La mirar la tarea comienza buildCSS siempre que ocurran cambios en css / styles.css.
La mirar La tarea se puede invocar en la terminal de la siguiente manera:
reloj de trago
Con algunos ajustes, puede crear un flujo de trabajo que realice esta optimización específica además de otras tareas relacionadas con CSS, como crear archivos Sass / Less, prefijos automáticos y más.
¿Quiere guardar las páginas de su sitio web? Exporte como PDF y guárdelo en un almacenamiento confiable en la nube.
Este artículo apareció originalmente en neto, la revista líder mundial para diseñadores web. Suscríbete aquí.
