Mit 5 Schritten zur besseren Seitenladezeit und einer besseren Performance
Kommentare

Manche Seiten brauchen gefühlte Ewigkeiten zum Laden – doch kaum jemand bringt die Geduld auf, darauf zu warten. Stattdessen wird das Browser-Tab geschlossen und zur nächsten Seite navigiert. Als Entwickler hat man also nur ein sehr eingeschränktes Zeitfenster, um die Aufmerksamkeit des Users zu erhalten; glaubt man Ilya Grigorik liegt das bei gerade einmal einer Sekunde.

Die Seitenperformance und –ladezeit muss also so gut es geht optimiert werden, um das Zeitfenster auch voll ausnutzen zu können. Pedro Semeano erklärt, mit welchen Schritten man dabei vorgehen sollte.

Vor der Optimierung Benchmark-Tests durchführen

Je schneller eine Website lädt, desto besser ist es für die User Experience des Website-Besuchers – und den Erfolg der Seite. Viele Webentwickler lassen allerdings die Optimierung der Seitenladezeit oft ein wenig schleifen, obwohl es zahlreiche Strategien gibt, wie man sie auch in die tägliche Arbeit mit einbinden kann.

Einige Schritte sind dabei allerdings unumgänglich. So sollte vor dem Beginn des Optimierungsprozesses zunächst erstmal die aktuelle Performance der Seite gemessen werden, um Performance-Probleme leichter erkennen zu können und den Fokus der Optimierung richtig zu priorisieren. Um ein solches Benchmarking durchzuführen, gibt es verschiedene Tools auf dem Markt, zum Beispiel Googles Performance-Analyse-Tools PageSpeed Insights oder Mobile-Friendly Test.

Performance-Verbesserung mit den richtigen Tools

Grundsätzlich gibt es zwei mögliche Ansätze, mithilfe von Developer-Tools die Seitenperformance zu verbessern: entweder nutzt man Online-Tools, oder man nutzt Open-Source-Webentwicklungs-Tools direkt auf dem eigenen Computer. Während der erste Ansatz zwar als die einfachste Lösung erscheint – immerhin muss man dabei die Dateien nur in die Online-Tools laden und sie ihre Arbeit tun lassen – stößt man bei größeren Dateimengen schnell an die Grenzen. Zudem ist man beim Einsatz von Open-Source-Webentwicklungs-Tools deutlich flexibler; darum ist dieser Ansatz trotz einer größeren Komplexität in den meisten Fällen vorzuziehen.

Ein besonders nützliches Tool zur Optimierung der Seitenladezeit ist der JavaScript-Task-Runner Gulp. Nach der Installation des Tools werden zunächst mithilfe von Node-Modulen die CSS- und JavaScript-Dateien minified – die Dateien also auf eine deutlich geringere Dateigröße verringert, um so die Ladezeit zu verbessern.

Auch das Zusammenfassen aller CSS- beziehungsweise JavaScript-Dateien in jeweils eine einzige .css– und .js-Datei trägt zu einer besseren Ladezeit bei. Das Linting von JavaScript-Dateien hilft dabei, Fehler und potenzielle Probleme im JavaScript-Code zu finden und zu beheben. Pedro Semeano nutzt in seinem Tutorial JSHint, es gibt allerdings auch noch viele andere Linting-Tools auf dem Markt.

Bilder und HTML-Dateien minimieren

Bilder sind ebenfalls meist einer der Knackpunkte, die die Seitenladezeit schwächen, weil sie zu groß sind. Gerade bei mobilen Netzwerkverbindungen schlägt das deutlich zu Buche, darum ist die Bildoptimierung – insbesondere die Minimierung der Bildgröße – einer der wichtigsten Punkte bei der Seitenladezeit-Optimierung. Genauso sollte man unterschiedliche Bildgrößen für die verschiedenen Displaygrößen von Desktops, Smartphones und Tablets bereitstellen oder gleich Sprites nutzen.

Minimierung ist auch bei der HTML-Datei das Stichwort. In vielen Fällen lässt sich die Dateigröße hier mithilfe eines Gulp-Tasks besonders gut verringern und so für eine bessere Performance der Seite sorgen.

In seinem Tutorial zeigt Pedro Semeano die einzelnen Schritte mit Code-Beispielen ausführlicher und erklärt detailliert wie man Gulp für den Optimierungsprozess einsetzt. Dabei zeigt sich, dass die Optimierung der Seitenperformance kein Hindernis sein muss und sich mit den richtigen Tools leicht umsetzen lässt.

Aufmacherbild: Blue key with Optimization word on laptop keyboard. von Shutterstock / Urheberrecht: scyther5

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -