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.
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.
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.
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.
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.
