En los siguientes pasos vamos a entender y saber cómo encontrar el código CSS no utilizado de una manera sencilla y los procesos para eliminarlo.

Un problema que enfrentan muchos SEOS y desarrolladores es con las estadísticas de velocidad de página de Google quejándose de código no utilizado en una web o proyecto. Dado que, la mayoría de los sitios web utilizan scripts que contengan una base de código colectiva, las páginas web usarán lo que necesitan de un archivo unificado, es decir, un archivo Javascript / CSS, que contendrá partes de lo que una plantilla necesita renderizar. Todo el código CSS o Javascript que no se usa se descarga de todos modos.

Por lo tanto es importante saber cómo encontrar el código CSS y Javascript no utilizado para ver si podemos eliminarlos y mejorar las estadísticas de velocidad y Web Performance Optimization (WPO).

Pasos para identificar el codigo CSS no utilizado rápidamente:

  • Abre tu página web en Chrome
  • Presiona F12 y abra devtools
  • Ctrl + mayús + P
  • Tipo de cobertura y cobertura de hit show
  • Presione el botón de grabación gris redondo
  • La página elaborará la visualización del uso de todos los recursos utilizados (CSS/JS)
  • Luego puede hacer clic en un recurso y el editor resaltará entre azul / rojo para lo que se usa y lo que no se usa

En este ejemplo podemos ver el código CSS de la página principal de la web de Nike, te invito a que hagas la prueba tú mismo para entender cómo verlo.

codigo css no utilizado de la web de Nike

Eliminar código CSS no utilizado sin plugins

Los desarrolladores pueden crear archivos JS y CSS especificos para plantillas de página específicas para que las plantillas específicas llamen scripts / css a medida de esa plantilla en lugar de una llamada a todo el sitio, lo que ayudará a aliviar el problema de JS y CSS no utilizado.

Tenga en cuenta que esto solo funciona para scripts locales/css. Para algunos scripts externos, podría copiar la salida, modificar localmente y servir desde su propia CDN, actualizando su fuente para reflejar la nueva ubicación del script.

Plugin para eliminar código CSS no utilizado en WordPress

Utilizando la funcionalidad de Coverage hemos podido detectar código CSS no utilizado y ahora podemos saber que parte de nuestro código CSS es utilizado o realiza una acción concreta en nuestro sitio web.

Para eliminar el código CSS no utilizado en WordPress de una manera automática podemos utilizar un plugin llamado PurgeCSS que requiere de una instalación y una parte técnica.

Hay otras herramientas que analizan el código HTML/JS de nuestra web y luego comparan con el CSS en busca de código CSS no utilizado. Pero si dispones de conocimientos técnicos o un equipo de desarrollo, la opción de PurgeCSS puede ser muy óptima.

Te dejo el enlace oficial del plugin para que tengas toda la información y pasos a seguir para eliminar el código CSS no utilizado con PurgeCSS en WordPress de la manera correcta.