Seitenladezeiten spielen für die Benutzerfreundlichkeit von Websites eine entscheidende Rolle. Google zieht die Seitenladezeit als eines der 200 Kriterien zur Berechnung der organischen Suchergbnislisten heran. Die massive Anzahl an Mitbewerbern in praktisch allen Seiten-Kategorien zwingt Betreiber heutzutage dazu, ihre Seiten kontinuierlich in Bezug auf die Vermittlung eines zufriedenstellenden Besuchererlebnisses zu optimieren. Wenn Ihre Webseite nur sehr langsam lädt, riskieren Sie, potenzielle Kunden innerhalb weniger Sekunden an Ihre Konkurrenten zu verlieren.
Hier 10 Tipps zur Beschleunigung der Ladezeit Ihrer Seite:
1. Bildgröße/Bildformat optimieren
Bildmaterial auf Ihrer Webseite kann eine Menge Bandbreite beanspruchen, was die Ladezeit Ihrer Seite verlängert. Bildgrößen mittels HTML zu reduzieren, verkleinert zwar die Darstellung, verringert jedoch nicht die Dateigröße. Verwenden Sie externe Bildeditoren, wie z. B. Photoshop, um Bildgrößen anzupassen.
Zusätzlich können Sie die folgenden Bilddatei-Kompressoren verwenden:
- JPRG & PNG Stripper
- Smush.it
- Online Image Optimizers
- SuperGIF
Zur weiteren Ladezeitenoptimierung empfiehlt es sich generell, sich im Fall von Bilddateien auf die Standformate JPG, PNG und GIF zu beschränken.
2. Abhängigkeiten optimieren
Plug-ins: Das Verwenden von Plug-ins kann die Ladezeit Ihrer Seite verlängern. Jedoch sind bestimmte Plug-ins heutzutage nicht mehr wegzudenken, insbesondere solche für soziale Medien. Prüfen Sie jedoch von Fall zu Fall, ob es u. U. bessere Alternativen gibt, z.B. die Verwendung eines CMS mit bereits integrierten sozialen Plug-ins.
Scripts für Besucher-Tracking: Website-Stats im Auge zu behalten ist generell hilfreich. Dazu multiple Analyse-Tools gleichzeitig zu verwenden ist jedoch nicht ratsam, da die entsprechenden Scripte die Ladezeiten Ihrer Seite verlängern können. Beispiel: Wenn Sie WordPress als CMS verwenden, benutzen Sie insofern entweder WP Stats oder Google Analytics, jedoch nicht beide gleichzeitig.
CMS-Software: Wenn Sie ein Content-Managment-System wie WordPress o. ä. verwenden, empfiehlt es sich bez. Upgrades up-to-date zu bleiben, die Updates aber nicht direkt auf der Live-Seite vorzunehmen. Upgraden Sie Ihre Seite stattdessen auf einem anderen Server, um die Upgrades vor der Livestellung zu testen. Software auf dem neuesten Stand zu halten hilft bei der Ladezeitenverkürzung.
3. Inline JavaScript/CSS vermeiden
Es empfiehlt sich generell, JavaScript und CSS als externe Dateien zu erstellen. Beim Laden der Seite puffert Ihr Browser dann diese Dateien extern und reduziert somit die Ladezeiten bei subsequenten Requests. Und JS- bzw. CSS-Dateien separat zu halten vereinfacht ebenfalls die Seitenpflege.
4. Cache optimieren
Jedes Mal, wenn ein Besucher Ihre Seite aufruft, werden alle Bild-, CSS- und JavaScript-Dateien erneut aufgerufen. Wenn Caching korrekt eingestellt wurde, können Browser diese für erneute Aufrufe speichern. Was bedeutet, dass Skripte und Bilder aus dem Cache gezogen und nicht heruntergeladen werden. Das reduziert die benötigte Bandbreite und die Kosten für Webhosting.
Sie können in diesem Zusammenhang Expires-Headers für statische Inhalte bzw. Cache-Control-Headers für dynamische Inhalte verwenden. Diese Header machen Bilder, Style Sheets, Script und Flash-Inhalte cachbar, was im Gegenzug die Zahl der notwendigen HTTP-Aufrufe und somit die Seitenladezeit verringert. Expires-Header erlauben das Festlegen der Zeit, die die Inhalte gecacht bleiben (siehe Beispiel unten):
Expires: Wed, 20 Apr 2015 20:00:00 GMT
Wenn Sie den Apache HTTP Server verwenden, können Sie mit der ExpiresDefault-Direktive die Zeit bestimmen, wie lange der Browser eine Datei cachen soll bevor er nach einer neuen Version fragt:
ExpiresDefault “access plus 15 years”
5. Scripts vermeiden, die das Seiten-Rendering blockieren
Platzieren Sie JavaScript-Dateien am Ende des HTML-Body, oder verwenden Sie das Async-Attribut, um JavaScript asynchron zu laden.
6. Seitenweiterleitungen vermeiden
Das Vermeiden unnötiger Redirects führt zur Reduktion von HTTP und beschleunigt Ihren Server. Prüfen Sie Ihre Seite auf tote Links und reparieren Sie diese ggfs. sofort.
7. Gzip-Komprimierung ermöglichen
Genau wie das Verwenden von Zip-Dateien im Anhang von E-Mail zur Größenreduktion der übermittelten Daten können Sie massive Dateien mit Inhalten für Ihre Webseite mit dem freien Kompressionsprogramm gzip "verpacken". Das spart Bandweite, beschleuningt Downloads und verkürzt die Ladezeit Ihrer Seite. Allerdings müssen Sie zunächst Ihren Server für die Dekomprimierung verpackter Inhalte konfigurieren.
8. HTTP-Requests reduzieren
Verwenden Sie CSS-Sprites, um die Zahl der Bildaufrufe zu reduzieren. Dazu die Bilder in einer einzigen Grafikdatei zusammenfassen und durch die CSS-Elemente background-image und background-position ein- bzw. ausblenden. Binden Sie die Sprites in Ihre gepufferten Style-Sheets ein. Vereinigen Sie ebenfalls alle Ihre JavaScripts und CSS in jeweils einer gemeinsamen Datei.
9. JavaScript- und CSS-Minifizierung
Minifizierung bedeutet Seiten-Code-Komprimierung durch Variablenumbenennung. Der reduzierte Code-Umfang beschleunigt die Seitenladezeit. Wir empfehlen Ihnen, dazu uglify.js zu verwenden.
10. Cookie-Größe reduzieren
Cookies werden verwendet, um Daten zwischen einzelnen Requests zu speichern. Die Daten werden bei jeder Anfrage aufgerufen, was die Ladezeit der entsprechenden Seite verlängert. Wenn Sie die Größe der Cookies reduzieren, verkleinert sich das Datentransfervolumen und die Seite lädt schneller. Insofern, beschränken Sie sich auf Cookies, die funktionsnotwendig sind, und limitieren Sie deren Größe so weit wie möglich.
