Liefern Sie Bilder in den richtigen Abmessungen, in einem modernen Format und in responsiven Varianten aus und laden Sie das Haupt-LCP-Bild priorisiert. Entfernen Sie ungenutztes CSS und JavaScript, teilen Sie den Code nach Seiten und Interaktionen auf und begrenzen Sie Drittanbieter. Stellen Sie Schriften und dynamische Elemente so ein, dass sie das Layout nicht verschieben.
Die Optimierung von Bildern, CSS und JavaScript reduziert die Datenmenge und den Aufwand, die der Browser benötigt, bevor er eine Seite anzeigen und bedienbar machen kann. Ziel ist nicht die kleinste Datei um jeden Preis. Ein Bild muss ausreichend hochwertig bleiben, Styles dürfen nicht flackern, und die Interaktion muss auch nach dem Aufteilen des Codes funktionieren. Gute Optimierung geht vom kritischen Pfad des konkreten Templates und von realen Geräten aus.
Messen Sie zuerst das Wasserfalldiagramm der Requests, den Main Thread und die Elemente, die LCP, INP und CLS bestimmen. Entfernen Sie anschließend ungenutzte Ressourcen und komprimieren Sie erst danach den Rest. Ein universelles „Speed“-Plugin ohne Test hinzuzufügen, kann Lazy Loading verdoppeln, die Reihenfolge von Skripten ändern oder ein Formular beschädigen. Jede Regel braucht deshalb einen klaren Zweck, Ausnahmen und eine Regressionsprüfung.
Bereiten Sie einen effizienten Bildprozess vor
Verarbeiten Sie das Original beim Hochladen in mehrere Größen entsprechend den tatsächlichen Komponenten. Bieten Sie dem Browser srcset und sizes an, damit ein Mobilgerät nicht die Desktop-Datei herunterlädt. Wählen Sie ein modernes Format je nach Inhalt und Unterstützung mit einem angemessenen Fallback. Fotos, Logos und einfache Illustrationen erfordern unterschiedliche Einstellungen. Beurteilen Sie die Kompression visuell in der Zielgröße, nicht nur anhand eines Prozentwerts im Tool.
Geben Sie Breite und Höhe an, damit der Browser Platz reserviert. Bilder unterhalb des ersten sichtbaren Bereichs können natives Lazy Loading nutzen, der LCP-Kandidat sollte jedoch früh entdeckt und in der Regel nicht verzögert geladen werden. Laden Sie nicht die gesamte Galerie vorab. Für dekorative Hintergründe bietet sich CSS an, für inhaltliche Bilder HTML mit passendem Alternativtext. Testen Sie einen automatischen CDN-Transformator bei Zuschnitten, Caching und Nichtverfügbarkeit des Originals.
Verkürzen Sie das Render-Blocking durch CSS, ohne das Layout zu beschädigen
Ermitteln Sie, welche Styles für das erste Rendering erforderlich sind und welche nur zu weiter unten liegenden Komponenten oder zu anderen Seiten gehören. Entfernen Sie alte Bibliotheken und doppelte Frameworks, bevor Sie versuchen, alles zu minifizieren. Kritisches CSS kann angemessen eingebettet oder priorisiert und der Rest nicht blockierend geladen werden, die Generierung muss jedoch den realen dynamischen Inhalt berücksichtigen. Ein zu aggressives Entfernen ungenutzter Selektoren kann Zustände löschen, die per JavaScript erzeugt werden.
Ein globales Designsystem verringert die Zahl zufälliger Regeln und Ausnahmen. Komponenten sollten ihre Styles selbst verwalten und sie dort laden, wo sie verwendet werden, sofern die Architektur dies zulässt. Minifizierung spart Übertragungsvolumen, serverseitige Komprimierung weitere Daten, doch beide sind erst die letzte Ebene. Prüfen Sie die Darstellung ohne Cache, bei langsamerem Laden, mit langem Text, bei einem Formularfehler und in unterschiedlichen Breiten.
- Entfernen doppelter und ungenutzter Grundlagen
- Angemessenes Critical CSS
- An reale Komponenten gebundene Styles
- Visueller Regressionstest dynamischer Zustände
Reduzieren Sie JavaScript und die Arbeit des Main Threads
Teilen Sie das Bundle nach Routen und Funktionen auf, damit ein Artikel nicht den Code des Konfigurators oder des Checkouts lädt. Entfernen Sie unnötige Bibliotheken und lösen Sie kleinere Funktionen mit nativen Browser-Schnittstellen, sofern die Unterstützung für Ihr Publikum ausreicht. Tree Shaking funktioniert nur bei geeigneter Modulstruktur. Komprimierung verringert die Übertragungsmenge, senkt aber die Parse- und Ausführungszeit nicht so wie das Entfernen von Code.
Teilen Sie lange Aufgaben auf und verlagern Sie unwesentliche Arbeit aus der kritischen Interaktion. Event-Handler sollten nur das Nötigste tun; aufwendige Berechnungen lassen sich verschieben oder im Voraus vorbereiten. Halten Sie das DOM angemessen und erzeugen Sie nicht Tausende versteckter Elemente. Kennzeichnen Sie Skripte je nach Abhängigkeiten mit defer oder async, nicht pauschal. Testen Sie nach einer Änderung Menü, Formulare, Cookie-Einstellungen, Analytics und alle Zustände ohne schnelles Netzwerk.
Prüfen Sie Schriften, Drittanbieter und Regressionen
Verwenden Sie nur die benötigten Schriftfamilien, Schnitte und Zeichensätze. Lokales Hosting kann Kontrolle und Datenschutz verbessern, sofern die Lizenz diese Nutzung erlaubt. Font-Preload gehört nur zu kritischen Dateien; zu viele Preloads konkurrieren mit dem Hauptbild. Setzen Sie font-display und eine Fallback-Schrift mit ähnlichen Metriken, damit der Text verfügbar bleibt und sich das Layout nicht spürbar verschiebt.
Jeder Chat, jedes Analyse-Tag, jedes eingebettete Video und jedes Werbeskript verursacht Netzwerk- und Rechenkosten. Erfassen Sie Verantwortlichen, Zweck, Einwilligungsbedingung und die Möglichkeit, das Laden bis zur Interaktion aufzuschieben. Entfernen Sie regelmäßig Tools, die niemand auswertet. Ein Performance-Budget und ein automatischer Test beim Release erkennen wachsende Dateigrößen; Felddaten bestätigen die tatsächliche Wirkung. Optimierung ist ein Prozess des Änderungsmanagements, keine einmalige Bereinigung.
Führen Sie eine sichere Reihenfolge der Optimierung ein
Erstellen Sie zuerst eine Bestandsaufnahme der Ressourcen und kennzeichnen Sie deren Verantwortliche. Entfernen Sie ungenutzten Code, alte Bildvarianten und Tags ohne Zweck. Legen Sie danach die richtigen Abmessungen, Formate und die Aufteilung der Bundles fest. Erst anschließend optimieren Sie Priorität, Preload, Minifizierung und Cache. Diese Reihenfolge verringert das Risiko, dass Sie aufwendig eine Datei optimieren, die die Website gar nicht braucht, oder durch Preload eine wirklich kritische Ressource verdrängen.
Deployen Sie jeden Schritt auf Staging mit leerem und vorgewärmtem Cache und vergleichen Sie das Wasserfalldiagramm vor und nach der Änderung. Testen Sie funktional Navigation, Formulare, Suche, Sprachmenü und gegebenenfalls den Checkout. Prüfen Sie visuell das erste Rendering und Layoutverschiebungen bei langsamer Verbindung. Halten Sie das Ergebnis im Performance-Budget und in einem automatisierten Test fest. Beruht eine Optimierung auf einer bestimmten Ausnahme, dokumentieren Sie diese bei der Komponente, damit sie beim nächsten Refactoring nicht entfernt wird.
- Erst entfernen, dann komprimieren
- Messung mit kaltem und warmem Cache
- Funktionaler und visueller Regressionstest
- Ausnahmen direkt an der Komponente dokumentiert
Häufige Fragen
Welches Bildformat ist für das Web am besten?
Das hängt von Inhalt, gewünschter Qualität, Transparenz und Unterstützung ab. Moderne Formate verringern oft die Größe von Fotos, SVG eignet sich für sichere Vektorelemente. Wichtiger ist es, die richtigen Abmessungen auszuliefern und eine visuell geprüfte Kompression zu verwenden.
Soll ich Lazy Loading für alle Bilder aktivieren?
Nein. Bilder außerhalb des ersten sichtbaren Bereichs profitieren davon, das Haupt-LCP-Bild kann es jedoch verzögern. Entscheiden Sie nach Platzierung und Template. Geben Sie immer die Abmessungen an und überprüfen Sie das Ergebnis im Ladewasserfall.
Ist die Minifizierung von CSS und JavaScript sicher?
In der Regel ja, bei einem korrekten Build-Prozess, doch das Zusammenführen und Ändern der Reihenfolge kann Abhängigkeiten oder dynamischen Code beschädigen. Entfernen Sie zuerst unnötige Ressourcen, spielen Sie die Änderung im Staging ein und testen Sie kritische Interaktionen.
Quellen und weiterführende Lektüre
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
