Wie verbessere ich die Ladezeit meiner Webseite?
Warum laden einige Webseiten mit Bildern schneller als Text-Webseiten?
Das nötige Wissen dazu findest Du in diesem Tutorial!
Starten wir.
Warum soll die Webseite paar Sekunden schneller sein?
Wieso soll ich überhaupt die Ladezeit optimieren?
Reicht nicht eine funktionierende Webseite aus? Eine Verkaufswebseite, welche in 1 Sekunde lädt, hat eine 250 Prozent bessere Konversationsrate als eine Webseite, die 5 Sekunden lädt. Das bedeutet, dass 2,5 mehr Verkäufe pro 1000 Nutzer getätigt werden (Konversationsrate) 1.
Der Umsatzunterschied zwischen einer langsamen und schnellen Webseite begründet jede Webseitenoptimierung, welche nicht das Budget explodieren lässt. Je größer der Webseiten-Traffic bereits ist, desto höher fällt der Return on Investment (Programmierkosten vs. Plus an Umsatz) aus.
Steffen Lippke
Brauche ich nicht einfach bessere Hardware?
Du solltest immer auf die Effizienz der Webseite und Software achten, bevor Du an die Hardware verbesserst.
Statt Geld auf ein Problem in Form von besserer Hardware zu werfen, solltest Du immer die Softwareoptionen ausreizen. Eine schlechte Webseite reizt schnell Deine neue Hardware aus und kostet Dich auf Dauer mehr Geld und Nerven.
Wie messe ich Ladezeiten?
Klassische Online-Tools
Die schlechteste Variante ist es mit der Stoppuhr neben Deinem Computer zu sitzen. Die Ladezeit hängt von der Internetleitung (Glasfaser vs. DSL) und der Prozessorpower (Gurke vs. Workstation) ab. Die Online Tools gehen von einem standardisierten Durchschnittsgerät aus bzw. achten auf die absolute Menge der übertragenen Daten.
Die realistischere „Befragungen“
Statt einen PC zu simulieren, kann Google mit seiner Browser-Dominanz die Geschwindigkeit direkt bei vielen der Endnutzern (Clients) messen.
Die Clients melden die Ladezeiten an das PageSpeed Tool zurück.
Wie schnell lädt die Webseite auf den Computern und Handys der realen Kundschaft oder Webseitenbusucher?
Google sagt es Dir
Wenn Du einen Blog über Gaming schreibst, lädt die Webseiten schneller wegen der Gaming-CPU und gute Verbindungen als bei einem Blog über Reisenomaden (schlechte 3G-Verbindung). Bei der zweiten Blogs musst Du noch intensivere Optimierungen Dir überlegen.
Wahl des Frameworks, Themes und Erweiterungen?
Zwei Webseiten. Gleiche Features. Doch unterschiedlich schnell.
Die Codebasis für einen Blog kann unterschiedlich groß sein, selbst wenn alle Standardfeatures
- Text anzeigen
- Kommentarfunktion
- Teilen
- Kontaktformular
… vorhanden sind.
Je nach Framework (Angular, React, WordPress, …) kann die Mächtigkeit von einfachen Dingen wie ein Formular die Ladezeit stark beeinflussen. Manche Software ist über die Jahrzehnte gewachsen und wurden nicht optimiert, während einige „frische“ Software leicht und schlank ist.
Die besten On-Server Optimierung
Selbst ist der Hoster! Wenn Du Skripte, Bilder, Videos und sonstige Inhalte auf Deinem Server zentral zur Verfügung stellst, hast Du viele Vorteile …
- Hohe, garantierte Geschwindigkeit (wenn der Server keine Gurke ist)
- Unabhängigkeit (Keine Ausfälle, Änderungen beim anderen Hoster)
- Datenschutz – DSGVO schreibt es zwingend vor, dass Du Schriftarten nicht von amerikanischen Unternehmen lädst
Überlege wie Du geschickt alle Services auf einen Server oder Server-Cluster bei Dir packst.
Timing ist alles
Laden zum passenden Zeitpunkt ist wichtig! Webseiten laden langsam, wenn diese vollgestopft sind mit Inhalten. Trotzdem möchte der Betreiber den Nutzer einen ausführlichen Artikel oder einen umfangreichen Online-Shop zur Verfügung stellen.
Der Zeitpunkt des Laden der Bestandteile ist entscheidend. Die Inhalte, welche weit oben oder von zentraler Bedeutung sind, soll der Browser zuerst laden. AJAX kann die Webseite Inhalte, wie Bilder nachladen, sobald der Nutzer scrollt.
Caches sind Segen und Fluch
Zwischenspeicher (Caches) sind genial, wenn man die Webseitengeschwindigkeit verbessern will. Der große Nachteil liegt auf Deiner Seite. Du musst bei jeder Änderung alle Caches auf dem Weg zum Auge des Nutzer invalidieren und neu beladen. Deshalb sind Caches Segen und Fluch zugleich.
Keine unnötige Arbeit – Datenbank Cache
Datenbanken sind ultra-flexibel und lassen tausende Arten der Abfrage zu. Die komplizierten und rechenaufwendigen Abfragen können Dir wertvolle Zeitkosten. Die Realität zeigt, dass die Datenbank immer wieder die gleichen Abfragen bearbeiten muss. Deshalb kann man einfach die Ausgabe zwischenspeichern.
Gesammelte Werke – PHP Objekt Cache
Die PHP-Anwendung auf Deinem Server kann Inhalte auch zwischenspeichern. Ein Ordner im Dateisystem speichert die dynamischen Inhalte als statische Dateien, sodass PHP diese nicht immer neu generieren muss. Der Cache hilft bei allen Inhalten, welche die Nutzer regelmäßig einsehen.
Schnelle Hilfe – Reverse Proxy Cache
Eine Ebene über der PHP-Anwendung sitzt ein Nginx oder Apache, welche die Optionen einer Zwischenspeicherung anbietet. Die Speicherdauer von häufig angefragten statischen Dateien kannst Du so optimieren.
Nicht zu viel senden – Browser Cache
Gewisse HTTP-Header, welche Dein Browser bei jeder Übertragung mitsendet, verhindert, dass wiederverwendbare Dateien nochmal aus dem Netz bezogen werden müssen. Wieso muss der Browser beim Wechsel des Blogeintrags, zweimal das gleiche Logo herunterladen?
Eine lokale Zwischenspeicherung bei Endnutzer ist hier interessant. Schriftarten und JavaScript Bibliotheken können noch viel länger im Speicher verweilen.
Schnelle und sichere Übertragung
Nur so gehts effizient – HTTP/3 und QUIC
Schnell! HTTP/3 und QUIC sind hier die Zauberworte. Der HTTP-Standard hat früher ineffizient die Daten in Textform oder base64 übertragen. Heute sind gleichzeitige Datenströme im Binärformat möglich. Die Anzahl des Frage-Antwort-Spiels sind minimiert, während die Inhalte priorisiert sind. Moderne Reverse Proxies können diesen Standard. Genauso wie neue Browser (Firefox, Chrome, Opera)
Bitte immer – Sicher mit TLS
Sicher! Das Transport Layer Security Protokoll der Version 1.2/1.3 garantiert in 2024 eine sichere Übertragung von Webseiten. Ältere Protokolle sind nicht mehr zu empfehlen.
Die meisten Endgeräte unterstützen diese Standards, aber ein paar alte Kisten haben den Standard nicht. Die große Frage ist, ob Du unbedingt Dich mit Viren-verseuchten Windows 95 Computern verbinden willst.
Von wem oder was laden?
Eins! Verwende möglichst nur einen Server. Alle Skripte, Bilder, Schriftarten sollen von einem Server kommen. Der Browser muss bei anderen Domains, diese per DNS auflösen und Inhalte von einem anderen Server laden. Das kostet Zeit.
Optimierungen für Browser
Nachladen! Lade immer Bilder und Script nach der HTML (async und defer). Zuerst lade nur die Texte und Bilder im oberen Teil der Webseite. Die Bilder, welche auf der Webseiten weiter unten folgen, kannst Du später laden.
Selbst Skripte, die für die Navigation notwendig sind, darfst Du später laden, weil der Nutzer im allerersten Moment nur Inhalte sehen will. Funktioniert die Webseite überhaupt? Dann muss sich der Nutzer erst orientieren und überlegen, wo er als Nächstes klicken möchte.
Minimal! Textdateien wie HTML und JavaScript kann eine Software komprimieren. Der Mensch kann diese nicht mehr lesen, aber ein Browser versteht diese.
Vermeide Nutzloesen Kram! Vermeide, dass Deine Webseiten mit verschiedene JavaScript-Frameworks, Analytics-Software, A/B-Testing-Sofware, Chatbots oder anderes zugemüllt ist.
Die Software, welche von außerhalb kommt, ist meistens so umfangreich, dass eine einzelne Software, die Webseite unglaublich langsam machen kann. Die Analyse ist aufwendig.
Deshalb starte mit einer absolut minimalen Webseite und füge Schritt-für-Schritt Erweiterungen hinzu. Teste die Geschwindigkeit der Webseiten, wenn Du etwas änderst.
