Una auditoría CSS examina el volumen de estilos, su uso y la especificidad de los selectores. «Sin usar» significa que una regla no se utilizó en el estado de la página que se comprobó. Puede seguir siendo necesaria al abrir un menú o cambiar el ancho de la ventana.
Defina las páginas y las interacciones
Seleccione páginas con distintos patrones de diseño, como una cabecera compartida, una lista de productos o un formulario. Incluya la apertura de menús, los errores de validación y el cambio de pestañas. Use los mismos anchos de ventana y las mismas interacciones antes y después de cada modificación.
Analice una página pública con CSS Scanner de Milten. Registre la hoja de estilos y los problemas detectados. Reserve para la comprobación manual los estados que el análisis no cubra.
No elimine CSS solo por el porcentaje sin usar
Considere este ejemplo ilustrativo: un menú está cerrado al cargar la página. Sus estilos pueden no utilizarse al principio, pero ser necesarios al abrirlo. Pruebe la interacción antes de considerar innecesaria una regla.
La documentación de Coverage de Chrome DevTools explica cómo registrar el uso de CSS y JavaScript mientras se interactúa con la página. Que una regla no se utilice durante una grabación no significa que sobre en todo el sitio.
Para cada regla que quiera eliminar, identifique el archivo fuente o el paso de compilación que la genera. Modifique el origen, vuelva a compilar y compruebe el resultado, en lugar de editar directamente un archivo minificado.
Revise los duplicados y la especificidad
Las declaraciones repetidas pueden aplicarse en condiciones distintas. Revise las consultas de medios, los estados de los elementos y el orden de la cascada. Tras combinar reglas, compruebe que los mismos elementos siguen recibiendo los estilos previstos.
Otro ejemplo es añadir !important repetidamente para cambiar el color de un botón. Examine primero las reglas en conflicto y su especificidad. La guía de especificidad de MDN ayuda a expresar las prioridades deseadas en el código fuente.
Compruebe el aspecto y el funcionamiento tras publicar
Vuelva a analizar la URL después del cambio. Además del tamaño del archivo, pruebe los botones, los formularios y los menús desplegables. Compruebe los saltos de línea y los indicadores de foco en móviles y pantallas grandes.
Use Design Tokens para revisar valores compartidos de colores y espaciado. Si el problema de visualización afecta al marcado, consulte la guía de comprobación HTML.
¿Eliminar CSS sin usar siempre acelera la página?
El orden de carga, la transferencia de recursos y JavaScript también afectan a la velocidad. Compare los resultados de Speed Scanner en las mismas condiciones.
¿Basta con un análisis automático?
También hay que comprobar las interacciones relevantes y distintos anchos de ventana. Registre por separado el alcance del análisis automático y los estados revisados manualmente.
Analice el CSS de una página pública. Guarde las condiciones iniciales y los problemas detectados antes de hacer cambios.
