Minifizieren ist die bekannteste Optimierung im Web und zugleich die am meisten überschätzte. Leerzeichen, Zeilenumbrüche und Kommentare aus einer Datei zu entfernen spart Bytes, keine Frage. Aber das ist die einfache Hälfte dieser Guideline. Die schwierige und viel wirksamere Hälfte steckt im zweiten Kriterium, und genau die packen die wenigsten an.
Die zwei Erfolgskriterien von Guideline 3.2 (meine Übersetzung des Originals):
Minifizierter Code: Minifiziere Code- und Datendateien, indem Du unnötige Leerzeichen, Kommentare und nicht benötigte Zeichen entfernst. Wende das systemweit einheitlich an, um die Dateigröße zu senken und die Ladeeffizienz zu verbessern. Das reduziert in der Summe die übertragene Datenmenge und den Verarbeitungsaufwand, verbessert die Ressourceneffizienz und senkt den Energieverbrauch.
Redundanz entfernen: Finde und entferne ungenutzten oder doppelten Code, besonders in CSS und JavaScript.
Meine Einordnung
Die beiden Kriterien oben sehen verwandt aus, sind aber grundverschieden schwer. Das erste, das Minifizieren, ist reine Mechanik: Eine Maschine wirft Leerzeichen, Umbrüche und Kommentare raus, und moderne Build-Werkzeuge erledigen das mit einem einzigen Schalter. Der Aufwand ist einmalig, danach läuft es von allein.
Das zweite Kriterium, das Entfernen von totem Code, ist die eigentliche Arbeit. Es braucht ein Urteil darüber, was wirklich noch gebraucht wird, und das kann keine Automatik zuverlässig treffen. Hier liegen auch die großen Zahlen: Minifizieren schrumpft eine Datei je nach Inhalt um etwa 10 bis 20 Prozent. Bei den meisten Seiten sind aber über die Hälfte des geladenen CSS und JavaScript auf genau dieser Seite überhaupt nicht in Gebrauch. Rechne das gegeneinander, und es wird deutlich: Die sauberste Minifizierung bringt Dir weniger als das Weglassen der Hälfte, die nie zum Einsatz kommt.
Das heißt nicht, dass Minifizieren unwichtig ist. Es heißt, dass Du es einschalten, automatisieren und dann vergessen solltest, damit Deine Aufmerksamkeit für den teureren Teil frei wird.
Wo ich weiter gehe
Hier gehe ich über den Wortlaut der Guideline hinaus. Sie sagt: Entferne ungenutzten Code. Ich sage: Verhindere, dass er überhaupt erst ausgeliefert wird. Das ist ein Unterschied. Minifizierter toter Code ist immer noch toter Code, nur kleiner. Du überträgst ihn weiter bei jedem einzelnen Aufruf.
Der Hebel ist nicht Komprimieren, sondern Zuschneiden: Code nur dort laden, wo er wirklich gebraucht wird. Ein Beispiel von meiner eigenen Seite. Der Podcast-Player und die Suche bringen beide ihr eigenes JavaScript und CSS mit. Beides lädt ausschließlich auf den Seiten, die es benutzen, nicht global über die ganze Website. Wer bei mir einen News-Artikel liest, lädt keine einzige Zeile des Players und keine der Suche. Das spart mehr als jede Minifizierung dieser Bausteine, weil die Bytes bei den meisten Aufrufen gar nicht erst reisen.
Dein erster Schritt heute
Fang mit dem einfachen Teil an, dem systemweiten Minifizieren, und prüfe, ob es bei Dir wirklich greift. Viele Systeme können es, aber längst nicht überall ist es von Haus aus eingeschaltet.
Und wenn das steht, nimm Dir den teuren Teil vor. Geh Deine größten CSS- und JavaScript-Dateien durch und frag bei jedem Baustein, auf welchen Seiten er wirklich gebraucht wird. Alles, was nur ein Teilbereich braucht, gehört auch nur dorthin geladen, nicht auf jede Seite.
Die billigste Byte-Einsparung erledigt Dein System automatisch. Die größte erreichst Du, indem Du Code gar nicht erst dorthin schickst, wo ihn niemand braucht.
Quelle: W3C-Fassung von Guideline 3.2