CSS sin usar
Silktide carga tus páginas en un navegador real y mide qué parte de cada hoja de estilos se utiliza realmente para mostrar la página. Se informan las hojas de estilo con una gran cantidad de estilos sin usar, junto con el ahorro potencial.
Por qué es importante
Los navegadores no pueden mostrar una página hasta que han descargado y procesado su , así que cada regla que no se utiliza igualmente retrasa el momento en que aparece tu contenido. El CSS sin usar se acumula de forma natural: los temas y frameworks incluyen estilos para todas las funcionalidades, las uses o no, y los estilos antiguos rara vez se eliminan cuando cambian los diseños. El resultado es que los visitantes esperan por estilos que nunca llegan a aplicarse.
Cómo solucionarlo
- Elimina los estilos que ya no usas. Las herramientas de compilación pueden hacer esto automáticamente escaneando tus plantillas y conservando solo el CSS que referencian.
- Divide las hojas de estilo grandes para que cada página cargue solo los estilos que necesita, en lugar de un único paquete que contenga los estilos de todas las páginas.
- Para los estilos que una página sí necesita, prioriza los que renderizan la primera pantalla y permite que el resto se cargue sin bloquear:
<!-- Carga sin bloquear el primer renderizado -->
<link rel="preload" href="rest.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>
Ten cuidado con la eliminación automática: los estilos usados solo por , o solo en otras páginas que comparten la hoja de estilo, pueden eliminarse por error.
Cómo lo prueba Silktide
- Cargar la página en un navegador real y registrar qué reglas CSS se aplican mientras se carga la página.
- Para cada hoja de estilo, medir cuántos de sus bytes no se usaron nunca.
- Informar cada hoja de estilo con desperdicio significativo, mostrando su tamaño actual, el porcentaje sin usar y los bytes que podrías ahorrar.
Solución de problemas
El CSS se usa, solo que no inmediatamente
La medición abarca la carga inicial de la página. Los estilos que solo se aplican más tarde —al pasar el ratón, en modales, después de que JavaScript muestre contenido— cuentan como no usados aunque la página los necesite finalmente. Eso sigue siendo información útil: esos estilos no necesitan bloquear el primer renderizado, por lo que son candidatos a cargarse por separado.
La hoja de estilo se comparte en todo el sitio
Una hoja de estilo compartida está en su mayoría «sin usar» en cualquier página individual. Eso puede ser un compromiso razonable, ya que el archivo se tras la primera visita. Sopesa el coste de la primera visita frente a la comodidad antes de dividirla.