Ungenutzte JS und CSS Files aus WordPress entfernen

80% Deiner CSS und JS Dateien könnten auch gelöscht werden!

Krasse These? Nun gerade wenn man WordPress benutzt eigentlich eher der Standard als das krasse Extrembeispiel. Die Frage ist ja: Woher kommt das denn bitte?

Es gibt für alles ein Plug-In

In der WordPress-Welt wird sehr viel über Plug-Ins abgedeckt. Selbst für die Geschwindigkeits-Optimierung und JSS Reduzierung wird ein Plug-In installiert, dass sich selbst mit noch mehr JavaScript und CSS im Source Code festsetzt. Der Klassiker zum Beispiel wäre das Revolution Slider Plugin, das fein säuberlich auf jeder einzelnen Seite seine Dateien lädt obwohl nur auf der Startseite ein Slider eingebaut wurde.

Welche Scripte lädt meine Seite eigentlich?

Um ungewolltes JavaScript zu entfernen, sollte man wissen welche Dateien eigentlich geladen werden.

Eine Möglichkeit wäre nun den Source Code der Seite zu öffnen und eine Liste zu erstellen. Und das macht man dann für jede einzelne Seite, damit man feststellen kann wo welche Dateien geladen werden. Doch das ist umständlich, zeitaufwendig und nervig. Es geht auch viel leichter!

Ausgabe der benutzten JS Handles pro Seite

Einfach mal alles auflisten was mit wp_enqueue_script geladen wurde

Der erste Schritt besteht darin, sich ein eigenes Plug-In anzulegen. Alternativ könnt Ihr natürlich auch das Beispiel Plugin nutzen, dass ich euch hier zur Verfügung stelle.

Erstellt also eine Datei mit dem Namen wp_remove_unused.php (oder etwas Vergleichbares, in der Namensgebung bin ich relativ kreativlos) und tragt den Plug-In Header ein.

<?php
/*
 * Plugin Name: SameMission räumt auf
 * Plugin URI: https://benjamin-mylius.de/ungenutze-js-css-dateien-entfernen/
 * Version: 1.0
 * Description: Gibt im Frontend für Administratoren eine Handle-List aller JS und CSS Dateien aus. Handles die nicht geladen werden sollen können hier definiert werden.
 * Author: Benjamin Mylius
 * Author URI: https://www.samemission.de/
*/

Was das Plug-In als erstes können muss: Auflisten was überhaupt auf der Seite geladen wird.

Es gibt zwei globale Variablen in WordPress um Scripte und Styles zu speichern:

  • $wp_scripts
  • $wp_styles

Lässt man sich nun also einen var_dump für beide Globalen ausgeben würde man sehen, welche Scripte und Styles von allen Plug-Ins und von WordPress registriert worden sind. Uns interessieren aber nur die, die geladen wurden.

// Liste alle Assets auf, die geladen werden. Nur für Administratoren sichtbar!
add_action('wp_print_footer_scripts', 'sm_list_stuff', 900000);

function sm_list_stuff(){
    if ( !current_user_can('delete_users') ){
        return;
    }
 
    echo '<h2>Liste aller Scripte, die auf dieser Seite geladen wurden.</h2>';
    echo '<p>Die Ausgabe kann von Seite zu Seite verschieden sein, je nachdem welche Scripte geladen worden sind.</p>';
 
    // Zeige alle geladenen Scripte (JS)
    global $wp_scripts;
    sm_print_assets($wp_scripts);
 
    echo '<h2>Liste aller CSS Dateien, die auf dieser Seite geladen wurden.</h2>';
    echo '<p>Die Ausgabe kann von Seite zu Seite verschieden sein, je nachdem welche Scripte geladen worden sind.</p>';
    // Zeige alle geladenen Styles (CSS)
    global $wp_styles;
    sm_print_assets($wp_styles);
}

Also hängen wir uns an den wp_print_footer_scripts Hook mit einer sehr hohen Priorität um sicher zu gehen, dass auch alle Scripte geladen wurden, bevor sie aufgelistet werden.

Ausserdem soll nicht jeder User auf unserer Seite diese Liste sehen können, deswegen stellen wir sicher, dass die Ausgabe nur für Administratoren gilt.

Jetzt folgen noch Zwei weitere Funktionen: sm_print_assets und sm_asset_template:

function sm_print_assets($wp_asset){
    $nb_of_asset = 0;
    foreach( $wp_asset->queue as $asset ) :
        $nb_of_asset ++;
        $asset_obj = $wp_asset->registered[$asset];
        sm_asset_template($asset_obj, $nb_of_asset);
    endforeach;
}
 
function sm_asset_template($asset_obj, $nb_of_asset){
    if( is_object( $asset_obj ) ){
        echo '<div class="wra_asset" style="padding: 2rem; font-size: 0.8rem; border-bottom: 1px solid #ccc;">';
 
        echo '<div class="wra_asset_nb"><span style="width: 150px; display: inline-block">Nummer:</span>';
        echo $nb_of_asset . '</div>';
 
 
        echo '<div class="wra_asset_handle"><span style="width: 150px; display: inline-block">Handle:</span>';
        echo $asset_obj->handle . '</div>';
 
        echo '<div class="wra_asset_src"><span style="width: 150px; display: inline-block">Quelle:</span>';
        echo $asset_obj->src . '</div>';
 
        echo '<div class="wra_asset_deps"><span style="width: 150px; display: inline-block">Abhängigkeiten:</span>';
        foreach( $asset_obj->deps as $deps){
            echo $deps . ' / ';
        }
        echo '</div>';
 
        echo '<div class="wra_asset_ver"><span style="width: 150px; display: inline-block">Version:</span>';
        echo $asset_obj->ver . '</div>';
 
        echo '</div>';
 
    }

Was wir damit auflisten werden:

  • Die Nummer der JavaScript oder CSS Datei: um einen Überblick zu behalten.
  • Der Handle: Das ist nämlich der eindeutige Identifizierer der von der wp_enqueue_scripts genutzt wird
  • Die Quelle: Der Speicherort der Datei
  • Die Version: Die aktuelle Version der Datei

Für unsere Zwecke brauchen wir nur den Handle, aber mit additionalen Informationen sieht das ganze runder aus und man bekommt eine Idee davon warum und wo diese Dateien geladen werden.

Ungenutzes CSS und JS in WordPress entfernen

Zum entfernen von den Dateien stellt WordPress insgesamt 4 Funktionen zur Verfügung:

Mit WordPress conditional Tags und custom post types kann man das entfernen der Scripte und Styles noch gezielter steuern.

function sm_filter_scripts(){
    #wp_deregister_script($handle);
    #wp_dequeue_script($handle);

    if( !is_page( 'contact' ) ){
        // Contact-Form-7 soll nur auf Contact-Form-7 Seiten geladen werden.
        wp_deregister_script('contact-form-7');
        wp_dequeue_script('contact-form-7');
    }

}

Als Beispiel hier dient das Contact-Form-7 Handle, da ein Kontaktformular nur auf der Contact Page existiert soll auch nur auf dieser Seite das JavaScript geladen werden.

Eine Liste der verschiedenen conditional tags, die Seitens WordPress genutzt werden können, gibt es hier

Das fertige Plug-In

Wie versprochen, wer nicht die Muse hat sich bis hier hin durchzuarbeiten, kann das Plugin auch ganz einfach herunterladen. Eine Anleitung, wie das Plugin-gehandhabt wird folgt in kürze

Vernetz Dich

Benjamin

Head of Development bei Samemission UG (haftungsbeschränkt)
Ich arbeite mit Computern seit ich vier Jahre alt bin. Angefangen mit den C64 über den Amiga, zum PC10 und weitergemacht beim x486er bis zum neumodischen PC..SEO und Onlinemarketing sind nunmehr seit über 10 Jahren meine Passion
Benjamin
Vernetz Dich