Ladezeit Webseite verbessern und optimieren – Top Tipps

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 die Ladezeit optimieren?

Was sollen die paar Sekunden / Millisekunden Unterschied ausmachen? 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)¹.

Die meisten Menschen sind ungeduldig und wollen ein Ziel erreichen: Einkaufen, Wissen erhalten oder Unterhaltung. Im Internet haben wir eine Vielzahl an Optionen in den Suchmaschinen gelistet. Wenn die Option 1 10 Sekunden braucht zum Laden, springt der Nutzer zur nächsten Webseite.

Der Umsatzunterschied zwischen einer langsamen und schnellen Webseite begründet jede Webseitenoptimierung in Effizenz, 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 die Hardware verbesserst.

Statt Geld auf ein Problem in Form von besserer Hardware zu werfen, solltest Du immer die Softwareoptionen immer zuerst ausreizen. Eine schlechte Webseite reizt schnell Deine neue Hardware aus und kostet Dich auf Dauer mehr Geld und Nerven. Schlanke Webseiten skalieren leichter und produzieren weniger Fehlerfälle.

Wie messe ich Ladezeiten?

Online-Tools

Die schlechteste Variante ist es mit der Stoppuhr neben Deinem Computer zu sitzen. Die Ladezeit hängt von der Internetleitung (Glasfaser, Mobilfunk, 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 Webseitenbesucher?

Google sagt es Dir

Wenn Du einen Blog über Gaming betreibst, lädt die Webseiten wegen der Gaming-CPU und gute Verbindungen schneller als bei einem Blog über Reisenomaden (schlechte 3G-Verbindung). Wenn Deine Audienz aus Reisenomaden besteht, musst Du noch intensiver Dich mit dem Thema auseinander setzen.

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, Vue, HTML-Pure, WordPress, …) kann die Mächtigkeit von einfachen Features wie ein Formular die Ladezeit stark beeinflussen. Manche Software ist über die Jahrzehnte gewachsen und wurden kaum optimiert, während einige „frische“ Software leicht und schlank ist. Node-Frameworks wie Angular und React werden von der langen Abhängigkeitskette von JavaScript-Bibliotheken ausgebremst. Im Jahr 2026 haben wir viele Optimierung für das Problem gebaut, trotzdem ist die Abhängigkeitslast erdrückend.

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 Ladens der Bestandteile ist entscheidend. Die Inhalte, welche weit oben oder von zentraler Bedeutung sind, soll der Browser zuerst laden. AJAX kann Webseite Inhalte, wie Bilder nachladen, sobald der Nutzer scrollt. Alle Bilder und Skripte, die erst weiter unten auf der Webseite relevant werden, kann der Browser nach allen anderen Bildern (above the fold) laden.

Bilder sind ein zentraler Bestandteil von Webseiten State-of-the-Art sind das Laden von Bildern im avif-Format in Kombination mit den HTML-Tags picture und source (src-set). Der Browser sucht sich das Bild im richtigen Format aus – je nach Endgerät.

<picture>
  <source
    srcset="photo-400.avif 400w, photo-800.avif 800w, photo-1200.avif 1200w"
    type="image/avif"
    sizes="(max-width: 800px) 100vw, 800px">
  <source
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    type="image/webp"
    sizes="(max-width: 800px) 100vw, 800px">
  <img
    src="photo-800.jpg"
    alt="Description"
    loading="lazy"
    width="800"
    height="600">

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 generien. 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 in Kombination mit Datenbank und PHP können der Webseite wertvolle Zeitkosten. Die Realität mit echten Nutzern zeigt, dass die Datenbank immer wieder die gleichen Abfragen bearbeiten muss. Deshalb kann der Server die Ausgabe zwischenspeichern und nicht immer neu berechnen lassen.

Gesammelte Werke – PHP Objekt Cache

Die PHP-Anwendung auf Deinem Server kann Inhalte zwischenspeichern. Ein Ordner im Dateisystem speichert die dynamischen Inhalte als statische Dateien, sodass PHP diese nicht immer neu generieren muss. Dieser Cache hilft bei allen Inhalten, welche die Nutzer regelmäßig einsehen.

Erstelle eine Datei .opcache im Hauptverzeichnis Deines Webservers.

zend_extension=opcache.so;
opcache.enable=1;
opcache.memory_consumption=64;
opcache.interned_strings_buffer=8;
opcache.max_accelerated_files=5000;
opcache.revalidate_freq=180;
opcache.fast_shutdown=0;
opcache.enable_cli=0;
opcache.revalidate_path=0;
opcache.validate_timestamps=2;
opcache.max_file_size=0;
opcache.file_cache=/pfad/zu/ihrem/webspace/.opcache;
opcache.file_cache_only=1;

Schnelle Hilfe – Reverse Proxy Cache

Eine Ebene über der PHP-Anwendung sitzt der Webserver (Nginx oder Apache), welche die Optionen einer Zwischenspeicherung anbietet. Die Speicherdauer von häufig angefragten statischen Dateien kannst Du so optimieren.

Für Nginx-Datei

proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g 
                 inactive=60m use_temp_path=off;

server {
    # ...
    location / {
        proxy_cache my_cache;
        proxy_cache_revalidate on;
        proxy_cache_min_uses 3;
        proxy_cache_use_stale error timeout updating http_500 http_502
                              http_503 http_504;
        proxy_cache_background_update on;
        proxy_cache_lock on;

        proxy_pass http://test;
    }
}

Nicht zu viel senden – Browser Cache

HTTP-Header, welche Dein Browser bei jeder Übertragung mitsendet, verhindert, dass der Browser wiederverwendbare Dateien nochmal aus dem Netz beziehen muss. Wieso muss der Browser beim Wechsel des Blogeintrags, zweimal das gleiche Blog-Logo herunterladen?

Cache-Control: max-age=604800
Age: 100

Eine lokale Zwischenspeicherung bei dem Endnutzer ist hier interessant. Schriftarten und JavaScript Bibliotheken können länger im Speicher verweilen, als der Nutzer auf der Webseite sich befindet. Viele Nutzer kehren zu der gleichen Webseite zurück. Speicherzeiten dürfen auch 1 Jahr betragen.

<meta http-equiv="Cache-Control" content="max-age=31536000, must-revalidate">

Schnelle und sichere Übertragung

Nur so gehts effizient – HTTP/3 und QUIC

Schnell! HTTP/3 und QUIC sind hier die Zauberworte. Der HTTP-1-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 wie Nginx können diesen Standard. Genauso wie neue Browser (Firefox, Chrome, Opera)

QUIC in der Nginx-Config

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    listen 443 quic reuseport;
    listen [::]:443 quic reuseport;

    http2 on;

    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    add_header Alt-Svc 'h3=":443"; ma=60' always;

    ##### snipped #####
}

Bitte immer – Sicher mit TLS

Sicher! Das Transport Layer Security Protokoll der Version 1.2/1.3 garantiert in 2026 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 für alle Ressourcen. 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 Webseite weiter unten folgen, kann der Browser später laden.

<img src="image.jpg" alt="Description" loading="lazy">

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 nutzlosen Erweiterungen! Vermeide, dass Deine Webseiten mit verschiedene JavaScript-Frameworks, Analytics-Software, A/B-Testing-Sofware, Chatbots oder anderen Erweiterungen zugemüllt ist.

Die Software, welche von außerhalb kommt, ist meistens so umfangreich, dass eine einzelne Erweiterung, die Webseite unglaublich langsam machen kann. Die Analyse ist aufwendig. Software von extern kannst Du in der Regel gar nicht beeinflussen und die Inhalte laden nicht so optimiert, wie Du es gestalten würdest.

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.