Cómo reducir el contenido CSS que no se use en WordPress

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 en WordPress

Por qué reducir el contenido css que no se use

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.

Cómo hacer un 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.

Puedes analizar qué archivos se cargan mediante la herramienta coverage en dev tools o mediante código. Más abajo de explico al detalle cómo hacerlo.

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.

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 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.

Cómo reducir el contenido css que no se use 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.

Cómo reducir el contenido css sin usar en WordPress sin plugins (Recomendado)

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:

        
function remove_global_style_webheroe(){
    wp_dequeue_style( 'global-styles' );
    wp_deregister_style( 'global-styles' );
}
add_action( 'wp_print_styles', 'remove_global_style_webheroe' );
        
      

        
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' );
        
      

        
function remove_generate_style_webheroe(){
    wp_dequeue_style( 'generate-style' );
    wp_deregister_style( 'generate-style' );
}
add_action( 'wp_print_styles', 'remove_generate_style_webheroe' );
        
      

        
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' );
        
      

        
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.

Cómo extraer el código CSS útil usando las herramientas de chrome web dev tools

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. Abrimos un buscador como Chrome
2. Cargamos la página de la que queremos eliminar los archivos CSS sin usar
3. Abrimos Chrome web dev tools haciendo click en F12 o Ctrl + Shift + I
4. Cargamos todos los archivo CSS mediante coverage como os he explicado anteriormente.
5. Hacemos click sobre el archivo del que queremos extraer el código útil
6. 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
7. 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
8. 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
9. 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í.

¿Cómo reducir el contenido css que no se use 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 reducir el/los archivos CSS que no se usen 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”. Así podremos crear un condicional que solo afecte a ese ID.

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' );

En WebHeroe también proporcionamos el servicio de desarrollo de plugins. Consúltanos y te informaremos.