Eliminar archivos css sin usar wordpress

Plugin css no utilizado

Esto se debe a un increíble plugin conocido como Asset CleanUp: Page Speed Booster. Con este plugin eliminar el CSS no utilizado es tan fácil como hacer clic en unos pocos botones. Alternativamente, si no te importa gastar unos cuantos dólares al año, con WP Rocket, hay un botón para eliminar el CSS no utilizado, sólo tienes que activarlo y el plugin eliminará todo el CSS no utilizado automáticamente.

El CSS no utilizado es un archivo CSS que está presente en una página pero que en su mayoría no es necesario para que la página se cargue. Cuando un visitante abre un sitio web, el navegador normalmente tiene que descargar, analizar y procesar todas las hojas de estilo externas en la página visitada antes de poder mostrar el contenido de la página al visitante. Si en dicha página existe algún CSS que no se utiliza en la página, el navegador perderá su tiempo en ello.

Un ejemplo clásico de esto es la mayoría de los plugins de formularios de contacto que se utilizan. Estos plugins, aunque en su mayoría se utilizan sólo en la página de Contacto, cargan su CSS en todo el sitio web. No importa si es la página de inicio donde no se utiliza, el CSS se cargará.

Divi css sin usar

En mi blog, no necesito WooCommerce, comentarios (uso Disqus), y muchos elementos de este tipo. Además, algunos elementos como las tablas, los formularios, la caja de autor, los botones de compartir sólo son necesarios en la página de los posts, no en la página de inicio.

Es posible que haya oído hablar de la ruta crítica css. El css crítico son los estilos/css necesarios para renderizar los contenidos del pliegue superior. El resto del css se carga en el pie de página (evita el bloqueo de render). Hay varias herramientas y plugins para extraer el css crítico en WordPress.

Un enfoque para reducir el css no utilizado (en los temas) es dividir el gran style.css en múltiples archivos / trozos como base.css, form.css, typography.css, table.css, comment.css etc e inyectar los archivos necesarios en las respectivas páginas.

Un buen ejemplo es el plugin Contact Form 7. Inyecta/encarga archivos CSS y JS en todas las páginas y no le importa si esa página contiene un formulario o no. Pero hay plugins que pueden hacer esto de forma inteligente, como WP Forms.

Pero definitivamente es posible si estás construyendo un sitio web desde cero (incluso si usas librerías css como Bootstrap o Tailwind). Hay herramientas como Purge CSS que pueden ‘purgar’ el css no utilizado durante el proceso de construcción. Es muy fácil de configurar.

Eliminador de css duplicado

Muchos sitios web utilizan un montón de bibliotecas de terceros o algunos temas pre-construidos, con un montón de características y el código para cubrir todos los escenarios posibles, mientras que sólo una pequeña parte de ella se utiliza realmente. Acabas transfiriendo megabytes de CSS sin usar (código muerto), lo que hace que tu sitio web tarde mucho en cargar.

Si usas WordPress, desafortunadamente no hay una manera fácil de encontrar el CSS no utilizado, como por ejemplo instalando un plugin y haciendo clic a través de algunos pasos de configuración. Aunque hay algunas herramientas en línea, que ayudan a encontrar el CSS necesario enviando tu URL.

Purifycss.online, por ejemplo, rastrea tu página web y comprueba todos los archivos CSS y también los estilos en línea. Pero cuidado: eliminará todas las reglas CSS que no se utilicen en la página especificada, aunque algunas de ellas puedan utilizarse en subpáginas. Tienes la posibilidad de insertar múltiples URLs, pero si manejas un sitio con cientos de páginas, puede ser bastante engorroso.

Ahora, si ya tienes tu código CSS limpio, copiémoslo y pégalo en un nuevo archivo y llámalo styles.pure.css y súbelo a la carpeta de tu tema (si estás usando un tema pre-construido, espero que ya hayas creado un tema hijo).

Purgecss

En mi blog, no necesito WooCommerce, comentarios (uso Disqus), y muchos elementos de este tipo. Además, algunos elementos como las tablas, los formularios, la caja de autor, los botones de compartir sólo son necesarios en la página de los posts, no en la página de inicio.

Es posible que haya oído hablar de la ruta crítica css. El css crítico son los estilos/css necesarios para renderizar los contenidos del pliegue superior. El resto del css se carga en el pie de página (evita el bloqueo de render). Hay varias herramientas y plugins para extraer el css crítico en WordPress.

Un enfoque para reducir el css no utilizado (en los temas) es dividir el gran style.css en múltiples archivos / trozos como base.css, form.css, typography.css, table.css, comment.css etc e inyectar los archivos necesarios en las respectivas páginas.

Un buen ejemplo es el plugin Contact Form 7. Inyecta/encarga archivos CSS y JS en todas las páginas y no le importa si esa página contiene un formulario o no. Pero hay plugins que pueden hacer esto de forma inteligente, como WP Forms.

Pero definitivamente es posible si estás construyendo un sitio web desde cero (incluso si usas librerías css como Bootstrap o Tailwind). Hay herramientas como Purge CSS que pueden ‘purgar’ el css no utilizado durante el proceso de construcción. Es muy fácil de configurar.