Erfahren Sie, wie Sie im Handumdrehen Ihre Website Ladezeit verbessern – bis auf unter eine Sekunde.
Schnelle Ladezeiten sind heutzutage kein “nice-to-have” mehr – Nutzer erwarten, dass eine Website in maximal 3 Sekunden (oftmals sogar noch weniger) lädt, da sie sonst wegklicken.
Mit jeder weiteren Sekunde Ladezeit verlassen immer mehr Nutzer die Website, bevor sie überhaupt geladen ist.
Google zeigte in 2018, dass ein Anstieg der Ladezeit von 1 auf 3 Sekunden die Absprungrate um 32 % erhöht. Bei 5 Sekunden waren es sogar 90%.
Und nicht nur das macht die PageSpeed-Optimierung so unglaublich wichtig, denn es ist zu einem großen Teil der technischen SEO-Optimierung einer Website geworden.
In diesem Beitrag werden Sie herausfinden, wie Sie die Ladezeiten messen können und wir zeigen Ihnen die 17 besten Tipps zur Optimierung Ihrer Website-Geschwindigkeit.
Auf geht’s!
Wie messe ich die Ladezeiten?
Um Ihre Website-Ladezeiten zu messen, empfehlen wir, Online-Tools wie PageSpeed Insights, GTMetrix und WebPageTest.org zu verwenden, die Ihnen genaue Angaben über den PageSpeed machen und alle möglichen Probleme auflisten.
Außerdem sollten Sie auch stets Ihre Website manuell auf verschiedenen Geräten testen, da ein hoher PageSpeed Score nicht bedeutet, dass die Website überall schnell lädt.
17 Tipps zur Optimierung der Website Ladezeiten
Wenn Sie alle 20 Tipps umsetzen, wird Ihre Website garantiert schneller laden, besser ranken, besser konvertieren und mehr Kunden anziehen.
Bilder optimieren
Bilder machen einen riesigen Teil der Website-Größe aus. Das Problem ist: Die meisten Websites haben viel zu große Bilder, die die Ladezeiten unglaublich verlangsamen.
So optimieren Sie Ihre Bilder:
Bilder komprimieren
Mit Tools wie TinyJPG, Smush (WordPress Plugin) und anderen Online-Tools können Sie die Größe Ihrer Bilder meist um 75-95% reduzieren ohne, dass die Qualität dadurch leidet.
Dies ist der wichtigste Schritt, um Website-Ladezeiten zu verbessern.
Moderne Formate verwenden
Bilder müssen nicht nur verkleinert, sondern auch in Formate wie WebP oder AVIF umgewandelt werden, da .png und .jpg Dateien deutlich größere Dateien sind.
So kann man die Bildgröße nochmal um ca. 10-25% reduzieren.
Richtige Skalierung
Vermeiden Sie es, extrem große Bilder für kleine Elemente zu nutzen.
Oftmals werden für Elemente, die z.B. nur 500px groß sind, Bilder genutzt, die 3000px oder größer sind.
Passen Sie die Bildgrößen stets an die Elemente an, damit nicht unnötig große Dateien geladen werden müssen.
Lazy Loading
Nutzen Sie Lazy Loading für alle Bilder, die nicht Above the Fold (direkt sichtbar, sobald die Seite geladen ist) sind.
Beim Lazy Loading wird das Bild erst geladen, wenn es tatsächlich notwendig ist – nicht direkt, wenn die Website angeklickt wird.
Nutzen Sie im HTML loading=“lazy“ oder installieren Sie ein Plugin für Ihr CMS, das Lazy Loading für Bilder aktiviert.
SVG für Logos & Icons
Nutzen Sie stets das .svg Format für Logos & Icons, da diese deutlich kleiner als die meisten anderen Formate sind und immer scharf aussehen.
Feste Breite & Höhe
Wenn Sie Bilder auf Ihrer Website verwenden, sollten diese eine definierte Breite und Höhe haben, da sich sonst während des Seitenaufbaus das Layout öfters verschiebt, was schlecht für die Nutzererfahrung und für die Website-Performance ist.
Bilder löschen
Löschen Sie Bilder, die Sie nicht verwenden.
Diese Bilder fressen unnötig Speicherplatz und verlangsamen Ihre Website.
Code optimieren
Der zweitgrößte Hebel, den Sie haben, um Ihre Website-Ladezeiten zu verbessern ist Ihr Code, da dieser einen großen Teil der Website-Größe ausmacht.
HTML/CSS/JS minifizieren
Der Großteil des Codes auf Ihrer Website sieht so aus:
.main-image, .secondary-image, .featured-image {
width: 100%;
max-width: 800px;
background-color: #FFFF00;
border-color: #000000;
border-radius: 20px;
border-width: 5px;
}Das macht den Code einfacher zu lesen und zu bearbeiten.
Jedoch verschwendet dieser Code eine Menge Platz – die Leerzeichen und Zeilenumbrüche sind nicht nötig.
Nach dem Minifizieren würde der oben gezeigte Code so aussehen:
.main-image,.secondary-image,.featured-image{width:100%;max-width:800px;background-color:#FFFF00;border-color:#000000;border-radius:20px;border-width:5px;}Das ist zwar nur ein kleiner Codeschnipsel (auf einer echten Website gibt es viele tausend mehr), jedoch konnten wir den Code bereits um 15,54% reduzieren.
Ungenutzen Code / Ungenutzte Plugins entfernen
Dasselbe wie bei den Bildern: Entfernen Sie ungenutzen Code, ungenutzte Plugins (z.B. bei WordPress – diese beeinflussen die Performance stark!) und ungenutzte Seiten, um die Website-Größe zu verringern und etwas mehr Ordnung zu schaffen.
Render-blockierendes CSS/JS vermeiden
Hiermit haben viele Websitebetreiber große Probleme.
Wenn der Browser eine Website lädt, liest er den HTML-Code von oben nach unten.
Trifft er auf CSS, stoppt er kurz, lädt die CSS-Datei herunter und verarbeitet sie, da ohne CSS die Website kein Styling hat.
Trifft er auf JavaScript (JS), stoppt der Browser auch hier, lädt die JS-Datei, führt sie aus und macht erst danach weiter.
Wenn solche <script>-Dateien oben im HTML (z.B. im <head>) stehen, muss der Browser jedes Mal stoppen, herunterladen, lesen, ausführen und kann dann erst weitermachen.
Deswegen sollte bei allen nicht-essentiellen <script>-Tags ein “defer” stehen.
Also statt
<script type="text/javascript" src="https://...></script>sollte dort
<script type="text/javascript" defer src="https://...></script>stehen.
Das führt dazu, dass diese Dateien im Hintergrund geladen werden und erst ausgeführt werden, sobald das HTML vollständig geladen wurde.
gzip-Komprimierung
Eine weitere tolle Methode, um die Website zu verkleinern, ist gzip.
Mithilfe von gzip lassen sich HTML/CSS/JS-Dateien noch mehr verkleinern.
Fügen Sie dazu einfach diesen Code zu der .htaccess-Datei Ihrer Website hinzu:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript </IfModule>Hosting & Serverleistung optimieren
Oftmals liegt es einfach am Hosting/Server, wenn die Website nicht lädt oder sehr langsam ist. Hier sind ein paar weitere Methoden, die Ladezeiten zu optimieren:
In PageSpeed gibt es den Indikator TTFB (Time-To-First-Byte), der anzeigt, wie lange es dauert, bis der erste Byte der Website geladen wird. Wenn dieser Indikator schlecht ist, kann es Probleme beim Hosting / bei dem Server geben.
Hosting upgraden
Oftmals ist der einfachste Weg einfach ein besseres Hosting für die Website zu buchen. Viele Webhosting-Unternehmen bieten sehr günstige Angebote an (manchmal schon ab 1€/Monat), jedoch sind diese qualitativ meist nicht sehr gut.
Wir empfehlen, kein günstiges Shared-Hosting zu verwenden und stattdessen in einen leistungsfähigeren Hosting-Tarif oder einen eigenen Server zu investieren.
Der richtige Serverstandort
Nutzen Sie stets einen Server, der Ihrer Zielgruppe am nächsten ist. Wenn Sie eine Website betreiben, die hauptsächlich auf Nutzer aus Deutschland ausgelegt ist, sollte Ihr Server nicht in den USA oder China liegen.
PHP Version
Für die beste Leistung und Sicherheit sollten Sie stets die neueste PHP-Version für Ihre Website nutzen. Das können Sie bei Ihrem Hosting-Anbieter meist direkt auswählen.
Caching & Content-Delivery
Content-Delivery-Network
Ein CDN verbessert die Ladezeiten einer Website ungemein und ist einer der besten Methoden, um die Website-Performance stark zu steigern.
Es sendet die Website-Dateien an Server in der Nähe des Nutzers und verringert somit die Ladezeit immens.
Wir empfehlen Cloudflare als CDN, da es beliebt, effektiv und günstig ist.
Serverseitiges Caching
Serverseitiges Caching lässt sich sehr einfach mithilfe von Plugins (z.B. WP Rocket) einrichten und sorgt dafür, dass der Server fertige Inhalte zwischenspeichert, die sonst jedes Mal dynamisch erstellt werden müssen – das spart eine Menge Zeit.
Browser Caching
Beim Browser-Caching speichert der Browser (Chrome, Firefox, Safari etc.) bestimmte Dateien einer Website lokal auf dem Gerät des Besuchers.
Wenn der Besucher die Seite dann erneut aufruft, muss der Browser diese Dateien nicht erneut vom Server laden, sondern nutzt die gespeicherte Version – das spart Zeit und Datenvolumen.
Um Browser Caching einzurichten, installieren Sie ein passendes Plugin für Ihr CMS oder fügen Sie diesen Code zu Ihrer .htaccess-Datei hinzu:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 hour"
ExpiresByType text/css "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/png "access plus 30 days"
ExpiresDefault "access plus 1 day"
</IfModule>Oder diesen Code zu NGINX:
location ~* \.(jpg|jpeg|png|gif|css|js|svg|woff|woff2)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}Wie die Alphanauten Ihre Website-Ladezeiten verbessern können
Wenn Sie diese Optimierungsschritte umsetzen, wird Ihre Website spürbar schneller, stabiler und benutzerfreundlicher.
Doch gerade die technische Umsetzung ist zeitintensiv und erfordert Fachwissen, um Fehler zu vermeiden und das volle Potenzial auszuschöpfen.
Genau hier kommen wir ins Spiel.
Wir von den alphanauten unterstützen Sie gerne dabei, Ihre Website-Ladezeiten dauerhaft zu verkürzen – messbar, sicher und nachhaltig.
Wir analysieren Ihre Website, beheben Bremsfaktoren und setzen professionelle Performance-Optimierungen um – individuell auf Ihr System abgestimmt.
Kontaktieren Sie uns heute unter der 02303 / 929 5000 oder schreiben Sie uns eine Nachricht – wir freuen uns auf Sie!
