Evite CSS “in√ļtil” en sus proyectos

Parece que los dise√Īadores web se esfuerzan constantemente por optimizar sus creaciones. A corto plazo, esto beneficia el rendimiento. A largo plazo, esto tambi√©n puede facilitar el mantenimiento.

Muy a menudo, esto significa optimizar imágenes, implementar el almacenamiento en caché de la página y entregar archivos a través de una red de entrega de contenido (CDN). Todas estas son medidas efectivas. Un punto que no recibe suficiente atención es la posible hinchazón en el CSS de un sitio web.

Si bien puede minimizar sus hojas de estilo o hacerlas disponibles a trav√©s de un CDN, hay m√°s que puede hacer. Espec√≠ficamente, elimine el marcado desperdicio que no se usa y a√ļn as√≠ optimice los estilos relevantes.

Esto se hace mejor desde el principio del proceso de construcción. Pero también es posible aliviar los sitios web existentes. Echemos un vistazo a los desafíos involucrados, así como algunas herramientas y técnicas que pueden resultar en un sitio web más rápido.

Caja de herramientas del dise√Īador web

Descargas ilimitadas: ¬°M√°s de 1,000,000 de plantillas web, dise√Īos, complementos, recursos de dise√Īo y mucho m√°s!

Manejo de la hinchazón integrado en temas y marcos

En el pasado, los sitios web se creaban esencialmente desde cero. Este fue un gran enfoque en el sentido de que los dise√Īadores solo pod√≠an incluir los estilos y guiones necesarios. Si se hace con cuidado, este proceso puede resultar en un sitio web perfectamente ajustado.

Por supuesto, hay varias razones por las que muchos de nosotros hemos abandonado esta práctica. Simplemente no es eficiente en términos de limitaciones de tiempo y presupuesto.

Los sitios web modernos a menudo se basan en un producto listo para usar. Puede ser un marco CSS como Bootstrap o un tema sofisticado de WordPress. En algunos casos, un tema de CMS puede incluso incluir un marco.

Estos productos deben ser de talla √ļnica. Incluir todo lo que pueda necesitar har√° que el desarrollo sea mucho m√°s r√°pido. Desafortunadamente, eso no se puede decir de su impacto en el rendimiento.

Entonces, ¬Ņqu√© se puede hacer para mejorar la situaci√≥n?

Utilice marcos ligeros o basados ‚Äč‚Äčen componentes siempre que sea posible

Te√≥ricamente, es posible utilizar ambas ventajas de un marco evitando la hinchaz√≥n. Esto se puede lograr mediante el uso de paquetes basados ‚Äč‚Äčen componentes que le permiten cargar ciertas funciones y dejar otras fuera. El bootstrap mencionado anteriormente permite este tipo de personalizaci√≥n, hasta cierto punto.

Otra alternativa es Tailwind CSSEsto ofrece estilos básicos y requiere que se base en ellos. Si está buscando un buen punto de partida en lugar de un producto más terminado, este podría ser adecuado.

No hay nada de malo en usar un marco. Sin embargo, busque uno que: a) elija qué componentes cargar, ob) ofrezca una hoja de estilo básica que sea fácil de personalizar. En cualquier caso, su proyecto se beneficia de la carga reducida.

Pantalla de inicio de Tailwind CSS.

Qué hacer con los temas de CMS

Los productos como los temas comerciales de WordPress pueden ser complicados porque a menudo vienen en una variedad de estilos, ya sea que los necesite o no.

Es posible que un tema determinado esté tan bien organizado que sea lo suficientemente simple de la cola las hojas de estilo que no quieres. Incluso podría haber un cuadro de opción de tema donde puede hacerlo con solo unos pocos clics. Sin embargo, esta es la excepción y no la regla.

La mejor forma de evitar un tema hinchado es crear el tuyo propio. Por ejemplo, un tema de inicio de WordPress tiene algunos CSS b√°sicos que puede personalizar. Esto ayuda a garantizar una hoja de estilo m√°s sencilla y elimina al menos una peque√Īa fracci√≥n de la sobrecarga asociada con un CMS.

Subraya la pantalla de inicio del tema de inicio de WordPress.

Disolver hojas de estilo existentes

Cambiar nuestro enfoque en un sitio web existente, depurar y redise√Īar CSS se puede hacer de dos maneras:

Comprobación de estilos manualmente

Lanzar su editor de código favorito y abrir las hojas de estilo de su sitio es siempre un buen lugar para comenzar. Sí, puede ser una experiencia tediosa. Pero también es una forma eficaz de cuidar la fruta madura.

No es necesario comprobar todas las líneas de CSS. En cambio, la idea es encontrar elementos que sepa que no se están utilizando o que no son tan eficientes como podrían ser.

Digamos que est√° ejecutando un sitio web de WordPress con algunos estilos personalizados para anular los de un complemento. ¬ŅQu√© pasa si dejas de usar ese complemento en particular? En este caso, los estilos se pueden eliminar f√°cilmente.

O tal vez hay una selecci√≥n de estilos que solo usa espor√°dicamente, como durante las vacaciones de invierno. Puede resultar √ļtil mover estos estilos a un archivo separado y recuperarlos solo cuando sea necesario.

Luego est√°n los selectores de CSS que simplemente no est√°n muy bien escritos. Pueden tener varios prefijos de navegador innecesarios o propiedades duplicadas innecesarias. Esta es un √°rea lista para la limpieza.

Si el dise√Īo de su sitio web tiene m√°s de unos pocos a√Īos, es posible que se sorprenda de la cantidad de estilo excesivo que puede encontrar.

Código CSS mostrado en una pantalla.

Utilice una herramienta automatizada

Hay una serie de herramientas que escanean su sitio (o al menos parte de él) y le informan con una lista de CSS no utilizado. Sin embargo, no contenga la respiración mientras espera la perfección.

De manera similar a las funciones de accesibilidad automatizadas, los escáneres CSS que no están en uso solo pueden proporcionar cierta información. Por lo tanto, es mejor tomar los resultados con un grano de sal y usarlos como guía, no como una respuesta definitiva a su pregunta.

Chris Coyier de CSS-Tricks escribió un artículo destacado artículos sobre este tema en particular que vale la pena ver. Además de probar algunas de estas herramientas, también se ocupa de los problemas más importantes, como: B. Consultas de los medios.

Sin embargo, si desea probar una o m√°s de estas herramientas, algunas de las opciones m√°s populares son:

Una combinaci√≥n de una herramienta automatizada y una revisi√≥n manual es probablemente la mejor pr√°ctica. Hacer ambas cosas le brinda una imagen m√°s completa de las posibles optimizaciones de rendimiento. Es posible que no capte todos los elementos, pero a√ļn existe la oportunidad de tener un impacto medible. Puede hacer algunas pruebas antes y despu√©s con una herramienta como GTmetrix para ver los resultados.

Pantalla de inicio de CSS sin usar.

Cuando se trata de CSS, no desperdicie, no quiere

Es asombroso lo grande que puede llegar a ser una hoja de estilo, especialmente cuando se usa un marco CSS predise√Īado. Claro, es bueno que el autor haya trabajado mucho para ti en algunos elementos de estilo. Al mismo tiempo, quedan muchas cosas sobre la mesa cuando se trata de renderizar p√°ginas y tiempos de carga.

Vale la pena prestar atenci√≥n a esto desde el principio. Al tratar de reducir el peso de una hoja de estilo, est√° ayudando a obtener la √ļltima gota de optimizaci√≥n de su sitio.

Si su sitio web ya está disponible para el mundo, todavía hay pasos positivos que puede tomar. Verifique el CSS y busque elementos que se puedan modificar o eliminar. Utilice una de las muchas herramientas automatizadas para encontrar elementos que podría haberse perdido.

La conclusión es que reducir su CSS a lo esencial no es un proceso perfecto. Sin embargo, todavía vale la pena.