Cómo eliminar archivos CSS sin usar en WordPress

Por qué queremos borrar archivos CSS sin usar

WordPress es un CMS magnífico, sin duda. Pero no todo el monte es orégano, hay ventajas y desventajas en su uso, como la sobrecarga de archivos sin usar, ya sean CSS o JavaScript. En este artículo quiero mostraros cómo analizar vuestro WordPress para saber:

  • Analizar y obtener qué archivos se cargan en tu web
  • Qué archivos son innecesarios y qué parte de ellos aprovechar
  • Cómo eliminar estos archivos total o parcialmente
  • Cómo cargar el código CSS aprovechable en una o varias páginas
  • Mejorar la velocidad de carga de WordPress

Por qué eliminar archivos CSS sin usar

Para quien me conozca ya sabrá que soy un partidario al 100% de la máxima personalización posible. Esto evita quebraderos de cabeza con las actualizaciones, incompatibilidades, tiempo de carga, peso de la web y, sobre todo, obtener una mejor puntuación en PageSpeed Insights para así mejorar el posicionamiento en Google. Pero para quien no tenga ni los conocimientos técnicos ni el presupuesto para una web personalizada al 100% en WordPress existen algunos truquillos que pueden ayudar a mejorar considerablemente la carga de una web. O si lo único que quieres es aprender, pues eres más que bienvenido. Coge papel y boli y al lío.

Análisis para saber qué archivos se cargan en tu WordPress

La sobrecarga de código CSS o Javascript es una de las características de una web que pueden llegar a ser un problema en tiempo de carga, experiencia de usuario y posicionamiento en Google. Te quiero mostrar 3 formas con las que obtener los archivos que se cargan en tu web. Cada una de ellas tiene su puntito bueno. Si por ejemplo, has creado tu web con alguno de los muchos maquetadores visuales para WordPress, te sorprenderás de lo mucho que podrás optimizar tu web.

Pero antes de hacer nada debes desactivar cualquier plugin que unifique los archivos CSS y JS, normalmente el plugin de caché que estés utilizando, para poder conocer cada uno de estos archivos por separado.

Analizar archivos cargados mediante GTMetrix

Informe en cascada de GTMetrix

Con esta maravillosa herramienta podemos conocer todos los archivos que se cargan en tu web con un solo click.
Es tan fácil como entrar en la web de GT Metrix y poner la URL a analizar. Eso sí, te recomiendo que te registres para poder seleccionar el servidor más cercano al dominio analizado y así recibir unos datos coherentes.

Tras haber seleccionado la localización, añadido la URL y hecho click sobre “Analyze” podremos entrar en la sección “Waterfall” (cascada), donde veremos un informe de carga en forma de cascada. Lo primero que se carga está en primer lugar, lo segundo en segundo, y así sucesivamente.

Ventajas de analizar los archivos cargados con GTMetrix

Con este informe en forma de cascada podremos seleccionar por separado qué archivos CSS se están cargando, qué archivos JavaScript, qué fuentes, imágenes, etc. y además, conoceremos el tiempo de carga de cada elemento.

Ver archivos cargados en WordPress mediante código

Para esto necesitaremos unos conocimientos algo más avanzados ya que tendremos que escribir algo de código en nuestro functions.php. Para quien no lo sepa, functions.php es un archivo que permite añadir código y podemos localizar en el panel de administración de WordPress, en Apariencia>Editor de archivos de temas>functions.php. Eso sí, si nunca antes lo habéis probado mejor no jugársela y pedirle a alguien con conocimientos que lo haga, ya que podéis romper por completo la web.

Qué tener en cuenta al hacerlo de este modo

Si tenemos la página en vivo debemos tener en cuenta que los datos se mostrarán en el footer de todas las páginas, lo que no es muy atractivo para los posibles visitantes.

El código

function ver_archivos_cargados(){
    global $wp_styles;
    global $wp_scripts;
    echo 'STYLES:';
    echo '<pre>';
    var_dump($wp_styles->queue);
    echo '</pre>';
    echo 'SCRIPTS:';
    echo '<pre>';
    var_dump($wp_scripts->queue);
    echo '</pre>';
}
add_action("wp_footer", "ver_archivos_cargados");

Explicación del código

En esta función se llama a las globales de estilos y scripts para mostrar los que están en cola. Estos se muestran en el footer a través de la acción (o gancho) “wp_footer”.

Ventajas de sacar los archivos CSS y JS mediante código

De este modo podremos obtener los manejadores ($handle) para eliminar esos archivos de la carga de WordPress. Ya lo vemos más adelante

Analizar el código CSS sin usar en WordPress mediante chrome web dev tools

Google Chrome Web Developer Tools es un grupo de herramientas a las que, si las conocemos bien, se les puede sacar muchísimo jugo. En esta ocasión os voy a hablar de “Coverage”, herramienta que permite sacar los archivos CSS y JavaScript cargados e incluso el porcentaje usado en la página.

Cómo saber los archivos CSS que están sin usar mediante coverage

Cómo saber qué archivos CSS están sin usar en una página de WordPress

Para realizar este proceso solo tenemos que seguir los siguientes pasos en Google Chrome:

  1. Cargamos la URL deseada
  2. Pulsamos F12 o Ctrl + Shift + I
  3. Buscamos los 3 puntitos verticales en la esquina superior derecha de web tools
  4. Una vez clicamos buscamos: more tools>coverage
  5. Ahora debe haberse abierto la ventana de coverage en la parte más baja de web tools. La abrimos lo suficiente para poder verla bien y pulsamos el círculo, que se pondrá en rojo
  6. Refrescamos la página y comenzarán a aparecer todos los archivos JS y CSS cargados en esa página
  7. Hacemos click en una pestañita para seleccionar solo CSS

Bien, aquí podremos ver todos los archivos CSS cargados y el porcentaje inútil de cada uno de ellos. Toda esta información nos servirá para saber si es necesario borrar totalmente un archivo, extraer solo una parte del código o mejor dejarlo enterito.

Eliminar archivos CSS sin usar en WordPress con plugins (No recomendado)

No me voy a extender mucho en esta sección ya que no la recomiendo por muchos motivos como añadir funcionalidades extra a la web, no tener dominio completo sobre todo el código, aumentar posibilidades de errores e incompatibilidades y más, no, y mucho más. Hay que entender que un usuario que no tenga un nivel básico/medio de WordPress también quiera beneficiarse de esta técnica. Ya no me enrrollo más, los plugins más conocidos para poder eliminar estos archivos CSS son:

Asset CleanUp

Este plugin gratuito te permite eliminar archivos CSS y JS entre un gran número de funcionalidades más.

WP Rocket

Este plugin de pago que presume de ser el más potente del mundo en optimización de rendimiento (o eso dicen ellos) dispone de una funcionalidad para eliminar todo el CSS sin usar de forma automática.

Eliminar archivos CSS sin usar en WordPress sin plugins (Recomendado)

Si eres de los que quieren lo mejor aunque requiera algo de esfuerzo (y aprendizaje), este es tu método.

Para poder eliminar un archivo CSS cargado en WordPress primero deberemos conocer su manejador ($handle). Y para esto tendremos que seguir obligatoriamente el paso mencionado anteriormente “Ver archivos cargados en WordPress mediante código”.

Una vez conocemos el manejador tendremos que colocar el siguiente código en functions.php:

function remove_custom_styles(){
    wp_dequeue_style("manejador");
    wp_deregister_style("manejador");
}
add_action("wp_print_styles", "remove_custom_styles");

Tan solo tendremos que sustituir la palabra manejador por el del archivo seleccionado. Eso sí, manteniendo las comillas.

Explicación del código

Para esta función hemos usado el gancho de WordPress «wp_print_styles» que, como su nombre indica, se encarga de imprimir (o cargar) los estilos a nuestra página. Dentro de este gancho nos encontramos con dos funciones que se encargan de quitar de la cola de carga («wp_dequeue_style») y eliminar del registro («wp_deregister_style») el estilo deseado.

Ejemplos de código para eliminar algunos archivos CSS:

Eliminar archivo CSS incorporado desde WordPress 5.9. Es muy probable que no se esté usando si nuestra web existía anteriormente:
        
function remove_global_style_webheroe(){
    wp_dequeue_style("global-styles");
    wp_deregister_style("global-styles");
}
add_action("wp_print_styles", "remove_global_style_webheroe");
        
      
Eliminar archivo CSS del plugin Contact Form 7
        
function remove_cf7_style_webheroe(){
    wp_dequeue_style("contact-form-7");
    wp_deregister_style("contact-form-7");
}
add_action("wp_print_styles", "remove_cf7_style_webheroe");
        
      
Eliminar archivo CSS general de GeneratePress
        
function remove_generate_style_webheroe(){
    wp_dequeue_style("generate-style");
    wp_deregister_style("generate-style");
}
add_action("wp_print_styles", "remove_generate_style_webheroe");
        
      
Eliminar archivo CSS del tema hijo de GeneratePress
        
function remove_generate_child_style_webheroe(){
    wp_dequeue_style("generate-child");
    wp_deregister_style("generate-child");
}
add_action("wp_print_styles", "remove_generate_child_style_webheroe");
        
      
Todos Juntos en una misma función
        
function remove_every_style_webheroe(){
    wp_dequeue_style("global-styles");
    wp_deregister_style("global-styles");
    wp_dequeue_style("contact-form-7");
    wp_deregister_style("contact-form-7");
    wp_dequeue_style("generate-style");
    wp_deregister_style("generate-style");
    wp_dequeue_style("generate-child");
    wp_deregister_style("generate-child");
}
add_action("wp_print_styles", "remove_every_style_webheroe");
        
      

Eliminar todos los archivos CSS y colocar el código útil en un solo archivo

Para esto os voy a explicar dos formas: la sencilla (y cutre…) y la elaborada.

Extraer CSS usando la extensión “CSS Used”

La forma sencilla se realiza a través de una extensión de Chrome llamada “CSS Used” y que podéis descargarla de aquí. Una vez instalada seguimos los siguientes pasos:

  1. Cargamos la página de la que queremos extraer el código CSS útil
  2. Abrimos Chrome web dev tools haciendo click en F12 o Ctrl + Shift + I
  3. Hacemos click en el signo doble “mayor que” >>
  4. Presionamos sobre “CSS Used”
  5. Y voilá, mágicamente tendremos todo el código útil de esa página listo para copiar y pegar en un único archivo

Ventajas de “CSS Used”:

La mayor ventaja es, sin duda, el tiempo invertido para extraer el código. La mayor desventaja es que no es 100% fiable y el código no está muy limpio ni optimizado.

Extraer el código CSS útil usando las herramientas de chrome web dev tools

Extraer el código CSS útil

Este método es mucho más tedioso pero con él obtendrás muchos más beneficios, ya verás. Los pasos a seguir son:

  1. Cargamos la página de la que queremos eliminar los archivos CSS sin usar
  2. Abrimos Chrome web dev tools haciendo click en F12 o Ctrl + Shift + I
  3. Cargamos todos los archivo CSS mediante coverage como os he explicado anteriormente. Concretamente aquí.
  4. Hacemos click sobre el archivo del que queremos extraer el código útil
  5. Se nos abrirá el archivo en la pestaña “sources” (fuentes) donde podremos ver con un margen izquierdo rojo el código CSS sin usar, y en azul el usado
  6. Hacemos click en el botón de responsive y se pondrá azul
    • En la esquina superior izquierda veremos un iconito que representa un móvil y una tablet
  7. Arrastramos el margen derecho hacia lo mínimo posible y volvemos a ponerlo en el máximo posible
    • Esto es para que cargue todo el código usado en los diferentes anchos por dispositivo. Es decir, el código que hace que tu web sea responsive
  8. Ahora solo nos queda copiar cada uno de los bloques de código pintados en azul en un nuevo archivo

Debemos repetir todo el proceso para cada archivo del que queremos extraer el código útil.

Ventajas de extraer el código mediante las Chrome Web Dev Tools

A pesar de lo tedioso de este método podemos estar seguros al 100% de que tenemos exactamente el código que queremos y de una forma limpia y clara. Y si queremos ir un paso más allá podremos unir el código para cada ancho de dispositivo, las media queries (lo que hace responsive y que tu web se vea bien en el móvil).

Eliminar los archivos y cargar el código útil en un solo archivo

Habiendo seleccionado cualquiera de los métodos anteriores ya tendremos el código útil copiado en un solo archivo. Pues bien, solo quedaría eliminar los archivos CSS seleccionados mediante el método anteriormente explicado. Concretamente aquí.

Eliminar archivos CSS sin usar de una página o varias en WordPress

¿Pero qué sucede si quiero eliminar los archivos CSS sin usar de una sola página en WordPress?

Esto es muy útil cuando queremos que una funcionalidad exista solo en una o varias páginas determinadas. Imaginemos que, por ejemplo, solo tenemos un formulario de contacto en una página. Entonces ¿para qué queremos que los archivos CSS (y/o JS) del plugin de formularios se sigan cargando en todas las otras páginas?

Para poder eliminar el/los archivos CSS sin usar de una forma selectiva necesitaremos conocer el ID (identificador) de la página en concreto. Este ID aparece reflejado en la etiqueta body de nuestro código HTML bajo el atributo class de una forma así como “page-id-123”.

Una vez conocemos el identificador de esa página deberemos crear la función del siguiente modo:

function remove_custom_styles_webheroe(){
	if(is_page(123)){
	    wp_dequeue_style('manejador');
	    wp_deregister_style('manejador');
	}
}
add_action("wp_print_styles", "remove_custom_styles_webheroe");

¿Y si quiero eliminar esos archivos de varias páginas al mismo tiempo?

Tan solo deberemos añadir un array en el condicional. De este modo:

function remove_custom_styles_webheroe(){
	if(is_page(array(123, 222, 456))){
            wp_dequeue_style('manejador');
	    wp_deregister_style('manejador');
	}
}
add_action("wp_print_styles", "remove_custom_styles_webheroe");

2 comentarios en «Cómo eliminar archivos CSS sin usar en WordPress»

Si tienes alguna pregunta, sugerencia o simplemente quieres dar tu opinión no lo dudes y deja tu comentario

Aviso Legal

Política de Privacidad

Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo