Hast du schon einmal eine Webseite besucht, die einfach nicht geladen hat? Dieses Gefühl zwischen gelangweilt sein, genervt sein, Frustration und Ungeduld? Nach ein paar Sekunden fragst du dich, warum du genau diese Website überhaupt besuchen wolltest – deine Aufmerksamkeitsspanne ist vorbei, du schließt das Browserfenster und surfst woanders im Web weiter.
Das Szenario passiert jeden Tag Millionen Mal im Internet. Aufmerksamkeit ist in unserer digitalen Welt eine extrem kostbare Ressource. Die Ladegeschwindigkeit deiner Website macht hier den entscheidenden Unterschied zwischen einem erfolgreichen Online-Kauf oder völliger digitaler Unsichtbarkeit.
Doch eine schlechte Ladezeit verschreckt nicht nur User, sondern zieht auch deine Performance in Suchmaschinen runter. Die Ladegeschwindigkeit ist ein wichtiger Teil des Top3-Rankingfaktors User Experience. Und wenn die nicht stimmt, dann lädt nicht nur deine Website wie mit Handbremse. Auch deine Rankings in Google & Co kommen nicht vom Fleck.
Wenn deine Website also so langsam lädt wie in einem Brandenburger Funkloch, dann ist es höchste Zeit, die Zügel in die Hand zu nehmen und den Pagespeed deiner Website zu optimieren! Wie das geht, zeigen wir dir jetzt:
TL;DR – Das bringt dir Pagespeed Optimierung
Hier die wichtigsten Punkte schnell zusammengefasst, was dir eine Pagespeed Optimierung bringt:
Pagespeed Optimierung: Basics
Diese Optimierungen sind grundlegend für deine Ladegeschwindigkeit. Sie haben einen großen Effekt auf die Ladezeit und / oder sind schnell umgesetzt, auch ohne ein abgeschlossenes IT-Studium. Wenn du auf Marketing-Sprech stehst, dann sind das die oft-bedienten Low Hanging Fruits.
Dein Pagespeed Status Quo – Wie schnell lädt es jetzt?
Weißt du, wie schnell deine Website lädt? Wenn nicht, dann ist der erste Schritt auf deinem Weg zur blitzschnellen Website. Denn bevor du damit anfängst, deine Website zu optimieren, musst du herauszufinden, wo überhaupt Verbesserungsmöglichkeiten und Potenziale liegen, um die Performance deiner Website zu steigern. Ahnungslos ins Blaue “optimieren” hat noch nie jemandem schnellere Ladezeiten gebracht.
Nutze dazu kostenlose Tools wie Googles PageSpeed Insights, Webpagetest oder GTmetrix. Sie verraten dir, wo deine Seite gerade steht und wo es hakt. Ein besseres Verständnis ist der erste Schritt zur Verbesserung.
Du weißt nicht, welche Tools du dafür nehmen kannst? Das sind unsere 3 Empfehlungen:
Google PageSpeed Insights: Das kostenlose Tool von Google bietet eine gute Grundlage für die Pagespeed-Analyse deiner Website, sowohl auf Desktop- als auch auf Mobilgeräten. Es bewertet die Ladezeiten und zeigt dir, wie deine Website abschneidet. Es liefert dir auch direkt konkrete Empfehlungen zur Verbesserung – die muss man aber ab und zu mit etwas Vorsicht genießen.
Nicht jede Empfehlung, die hier empfohlen wird, hälts was sie verspricht (wie immer bei solchen Tools). Mit den PageSpeed Insights bekommst du dennoch eine gute Grundlage, um an der Performance deiner Website zu arbeiten und sicherzustellen, dass sie für deine User schneller und benutzerfreundlicher wird.
Mit Webpagetest kannst du die Ladezeit deiner Website aus verschiedenen Standorten und auf verschiedenen Endgeräten testen. Es bietet detaillierte Informationen zur Ladezeit und zeigt, wie einzelne Ressourcen auf deiner Seite geladen werden. Das ist wichtig, um sicherzustellen, dass Nutzer auf der ganzen Welt eine perfekte Nutzungserfahrung beim Besuch deiner Website haben.
Webpagetest geht über die allgemeinen Bewertung der Geschwindigkeit hinaus und bietet sehr detaillierte Informationen zur Ladezeit. Du erhältst zum Beispiel einen Einblick in die genaue Reihenfolge, in der Ressourcen auf deiner Website geladen werden.
In der Bezahlversion kannst du mit Webpagetest auch schnell feststellen, wie sich Änderungen an deiner Website auf die Ladezeit auswirken. Das Tool ermöglicht es dir dann, verschiedene Szenarien zu simulieren, um die Auswirkungen auf die Pagespeed-Optimierung zu testen. Wenn du also sicherstellen möchtest, dass deine Website weltweit und auf verschiedenen Geräten schnell lädt, ist Webpagetest ein gutes Werkzeug in deinem Arsenal für die Pagespeed-Optimierung.
GTmetrix ist ein ebenfalls ein beliebtes Tool zur Pagespeed-Analyse deiner Websites. Es bewertet die Pagespeed-Performance deiner Seite und zeigt dir ebenfalls auf, in welchen Bereichen du Verbesserungen vornehmen kannst.
Mit GTmetrix kannst du einen detaillierten Überblick darüber erhalten, wie gut deine Website in Bezug auf die Ladezeiten abschneidet und welche spezifischen Maßnahmen du ergreifen kannst, um die Nutzererfahrung zu optimieren – ebenfalls ein wertvolles Werkzeug, das dich bei der Pagespeed-Optimierung deiner Website unterstützt.
Weg mit dem Ballast – Reduziere unnötige Ressourcen
Du kennst das Sprichwort „Weniger ist mehr“? In der Welt der Pagespeed-Optimierung gilt das umso mehr. Im 1. Schritt einer Pagespeed-Optimierung geht es darum, unnötigen Ballast loszuwerden, der deine Ladegeschwindigkeit ausbremst. So gehts:
Überladene Javascripts beseitigen
Du möchtest deine Website wirklich auf Hochtouren bringen? Dann ist ein wichtiger erster Schritt die Beseitigung von überladenem Javascript, wie es sich oft in Plugins und Modulen, etwa für fancy Animationen oder dynamische Website-Elemente versteckt. Diese Skripts sind oft die wahren Bremser deiner ansonsten ansehnlichen Ladezeit. Nimm dein Javascript gründlich unter die Lupe und entferne alles, was nicht unbedingt notwendig ist. So kannst du nicht nur die Ladezeit erheblich reduzieren, sondern auch die User Experience deiner Website deutlich verbessern.
Unnötiges CSS verkleinern
Die Ladegeschwindigkeit deiner Website ist umso besser, je weniger Daten geladen werden müssen (macht Sinn, oder?). Daher ist es wichtig, unnötig große Dateien zu vermeiden. Und oft sind es die CSS-Dateien, die zu den größten Dateien auf dem Server gehören (gleich hinter Javascripts).
CSS-Dateien sind das Design und die Darstellung deiner Webseite, hier werden Größen, Farben, Formen uvm. festgelegt. Aber sie neigen leider dazu, überflüssigen und ineffizienten Codes anzuhäufen, vor allem wenn deine Website schon ein paar Jahre und Relaunches auf dem Buckel hat. Das kannst du machen, um deine CSS-Dateien zu entschlacken:
- Beseitige unnötige CSS-Klassen, -IDs und Auszeichnungen: Gehe deine CSS-Dateien durch und entferne alles, was nicht zwingend erforderlich ist. Oft schleichen sich im Laufe der Entwicklung nicht veraltete Styles ein, CSS-Klassen, die einmal wichtig waren, aber längst nicht mehr benutzt werden etc.
- Zusammenfassen und Minifizieren: Nutze Techniken wie das Zusammenfassen (Concatenation) und Minifizieren deiner CSS-Dateien. Durch das Kombinieren mehrerer Dateien zu einer einzigen, verringerst du die nötigen Serverabfragen. Und durch das Entfernen von Leerzeichen, Zeilenumbrüchen und Kommentaren kannst du die Dateigröße erheblich reduzieren. Dann sind sie zwar für einen Menschen nicht mehr so hübsch lesbar, aber dein Browser kommt damit weiterhin problemlos zurecht.
Bildoptimierung – Schlankere Bilder, schnellere Ladezeit
Kommen wir zum Klassiker unter den Pagespeed Optimierungen: Der Bildoptimierung. Auf 9 von 10 langsam ladenden Websites sind die Bilder der Faktor, der die Ladegeschwindigkeit maßgeblich nach unten zieht. So kriegst du den Bilddatenwahnsinn in den Griff:
Bildgröße reduzieren
Stelle sicher, dass die Größe der Bilder (in Pixel) in der Bilddatei, der Größe auf deiner Website entspricht. Also: Wird ein Bild auf deiner Website in 200×300 Pixel angezeigt, dann soll die Bilddatei auch so groß sein. Und nicht 4000×3000 Pixel. Denn sonst müssen die Farbdaten der ganzen zusätzlichen Pixel mitgeladen werden, nur um dann auf deiner Website fies runterkomprimiert zu werden. Solche überdimensionierte Bilder verlangsamen die Ladezeit deiner Website natürlich erheblich.
Die gute Nachricht ist, dass du das leicht beheben kannst. Verwende ein Bildbearbeitungstools wie GIMP , Canva oder Photoshop , um die Größe deiner Bilder zu optimieren. Und dann speichere sie dann weboptimiert, ohne die Qualität zu beeinträchtigen. Dazu kommen wir jetzt.
Bilder weboptimiert (komprimiert) speichern
Das weboptimierte Speichern von Bildern ein entscheidender Faktor. Große, unkomprimierte Bilder können die Ladezeiten deiner Website erheblich verlangsamen. Um das zu vermeiden, solltest du darauf achten, dass deine Bilder in einem geeigneten Format vorliegen. Nutze dazu Bildkomprimierungstools TinyPNG, um die Dateigröße zu reduzieren, ohne dabei die visuelle Qualität zu beeinträchtigen.
Denke auch an responsive Bilder, die sich an verschiedene Bildschirmgrößen anpassen, um Ladezeiten auf mobilen Geräten zu optimieren. Indem du Bilder weboptimiert speicherst, verbesserst du nicht nur die Ladezeiten deiner Seite, sondern bietest auch ein schnelleres und ansprechenderes Erlebnis für deine Besucher.
Moderne Bildformate nutzen
Welche Bildformate kennst du? Sicher JPG, PNG und das gute alte GIF. Wir treffen sie auch oft noch im Internet auf Websites. Nur leider sind diese Bildformate heutzutage alles andere als optimal, wenn es um Datenlast und Ladegeschwindigkeit geht. Moderne Bildformate wie WEBP oder AVIF bieten eine deutlich bessere Bildkomprimierung bei gleicher Qualität. Das bedeutet, dass du Bilder in gleicher Qualität, aber mit einer erheblich kleineren Dateigröße auf deiner Website verwenden kannst. Und mit „erheblich kleiner“ meine ich 80-95% kleiner!
Muss ich noch einmal erwähnen, dass das einen direkten Einfluss auf die Ladezeiten deiner Website hat? Indem du deine Website-Bilder also auf moderne Bildformate umstellst, sorgst du also für eine schnellere Website und verbesserst die Nutzungserfahrung deiner User maßgeblich.
Wenn du dir Sorgen machst, dass die Browser deiner User moderne Bildformate noch nicht unterstützen, keine Sorge. Alle modernen Browser kommen heutzutage mit WEBP (außer dem eingestellten Internet Explorer) klar. Und fast alle auch mit AVIF (außer Internet Explorer und Edge. Microsoft hinkt mal wieder hinterher…)
Wenn du nochmal im Detail nachschauen willst, ab welche Versionen welcher Browser welches Bildformat unterstützt, schau hier:
Reduziere interne Weiterleitungen
Jede Weiterleitung, besonders wenn sie in einer Kette auftritt, verlangsamt den Ladeprozess, da der Server zusätzliche HTTP-Anfragen bearbeiten muss. Überprüfe deine internen Links und stelle sicher, dass sie direkt auf die endgültige Zielseite verweisen, ohne Umwege über alte oder irrelevante URLs. Das reduziert Serverbelastung und verbessert die Gesamtperformance der Seite. Insbesondere bei mobilen Nutzern, wo die Netzwerkverbindungen oft langsamer sind, macht sich dieser Unterschied deutlich bemerkbar.
Entferne unnötige Plugins / Module / Add-ons
Deaktiviere unnötige Plugins (Module / Add-ons / …) auf deiner Website, um die Ladezeit deiner Website voranzubringen. Plugins sind oft sehr nützlich und erweitern die Funktionalität deiner Website, aber zu viele von ihnen können deine Website auch überladen und so ihren Pagespeed verlangsamen. Hier ist, was du tun kannst: Gehe die Liste der installierten Plugins durch und deaktiviere und (!) entferne alle, die du nicht aktiv verwendest.
Das hat nicht nur den Vorteil, dass deine Website schneller wird. Es reduziert auch erheblich das Risiko, das ein nicht-aktualisiertes, schlecht programmierte oder angreifbares Plugin zu einem Einfallstor für Hacker und finstere Gestalten wird. Wie so oft im Leben gilt auch für Plugins die alte Weisheit, dass weniger oft mehr ist. Eine schlankere Website verbessert nicht nur den Pagespeed, sondern verbessert häufig auch die restliche Nutzererfahrung deiner User erheblich.
Pagespeed Optimierung: Advanced
In dieser Kategorie haben wir Pagespeed Optimierungen versammelt, zu deren Umsetzung du oft ein bisschen mehr IT-Kenntnisse besitzen musst. Trotzdem sind sie genauso wichtig für deine Ladegeschwindigkeit, wie die bisher genannten Schritte.
HTTP/2: Expresszustellung für deine Website-Daten
Jedes Mal, wenn du in deinem Browser die Domain einer Website eintippst, wird eine Anfrage an den Website-Server gestellt, doch bitte die Daten der gewünschten Website rüberzuschicken. Hast du dich schon einmal gefragt, warum das bei manchen Websites unglaublich schnell geht, während andere eine Ewigkeit brauchen? Eine Antwort liegt im Internetprotokoll, das zum Versand der Websitedaten benutzt wird. Und hier kommt HTTP/2 ins Spiel. HTTP/2 ist die (derzeit) modernste und effektivste Version den Datenverkehr im Internet. Während vorher Websitedaten stumpf in Reihenfolge verschickt wurde (wofür der Browser jedes Mal eine neue Anfrage an den Server stellen musste), wird bei HTTP/2, bildlich gesprochen, einmal das Scheunentor geöffnet und dann darf alles raus, was drin ist (also alle Websitedaten. Das bringt eine Fülle von Vorteilen. Hier die für uns wichtigsten beiden
- Per HTTP/2 ist es dem Server möglich, mehrere Browser-Anfragen gleichzeitig bzw. unmittelbar hintereinander abzuarbeiten, ohne Pause dazwischen. Früher galt die Devise: „Klatsch möglichst viele kleine Daten in eine große zusammen“ (daher kommen bis heute viele große Javascript- und CSS-Dateien). Mit HPPT/2 ist das heute nicht mehr nötig, da hier die Dateien ohne Pause direkt hintereinander weg rausgeschickt werden – wodurch deine Website blitzschnell laden kann.
- HTTP/2 erlaubt es, Prioritäten für die einzelnen Website-Ressourcen festzulegen. So können wichtige Elemente wie CSS und Webfonts zuerst geladen werden, während andere (das letzter Bild auf der Seite, das Javascript für netten Effekt ganz unten) erst später an die Reihen kommen. So ist deine Seite für User viel schneller nutzbar und lädt gefühlt schneller, was wichtig für UX, Abbruchrate und auch die Conversion Rate ist.
Quelle: https://blog.cloudflare.com/http-2-for-web-developers
Vermeide Inline-CSS
Ja, es gibt gute Gründe für Inline-CSS, meist schlechte Programmierung / Programmierbarkeit. In allen anderen Fällen gilt: Vermeide Inline-CSS!
Jede CSS-Auszeichnung, die du mehr als 1x benötigst, ist besser in einer CSS-Datei aufgehoben, wo sie 1x geladen und dann im Cache (s.u.) abgelegt wird, also dass sie jedes Mal neu geladen und interpretiert werden muss.
So vermeidest du unnötigen Code in deinen HMTL-Dateien und hältst dich an das Webentwickler Best-Practice „Trenne Struktur (HMTL) von Gestaltung (CSS)“
Dazu passt auch sehr gut der nächste Punkt:
Clean Code – Jeder mag Spaghetti, doch keiner im Code
Stelle sicher, dass dein HTML, CSS und Javascript sauber und gut strukturiert sind. Das erleichtert nicht nur die Wartung und Administration deiner Website, sondern sorgt auch für eine schnellere Ladegeschwindigkeit.
Erstens: sauber geschriebener und strukturierter Code erleichtert die Wartung deiner Website. Wenn etwas geändert oder gefixt werden muss, wird der Prozess viel reibungsloser verlaufen als bei fiesem Spaghetti-Code. Denn unordentlicher Code kann zu Folgefehlern führen und benötigt dann zusätzliche, teure Entwicklerzeit.
Zweitens: Ein gut strukturierter Code sorgt dafür, dass der Browser deiner User die Website effizienter interpretieren kann und keine Darstellungsfehler entstehen. Das reduziert im besten Fall neben der gefühlten auf die tatsächliche Ladezeit und führt in jedem Fall zu einer besseren Nutzungserfahrung.
Zum Glück sind die meisten CMS- und E-Commerce System heute in der Lage guten Code zu schreiben. ChatGPT & Co mal so mal so. Aber das gilt nicht für jedes Drittanbieter-Theme, -Template und -Plugin.
Je kleiner, desto besser Teil 1 – Minifiziere deinen Code
Was bedeutet es deinen Code zu minifizieren? Ganz einfach: Entferne alle überflüssigen Elemente aus deinem HTML, CSS und JavaScript. Dazu zählen Leerzeichen, Zeilenenden und Kommentare, die zwar für dich beim Programmieren nützlich sind, aber für die Ausführung des Codes nicht benötigt werden. Diese Minimierung verringert die Dateigröße, was wiederum die Ladezeit deiner Seite beschleunigt. Das ist besonders wichtig, da Suchmaschinen wie Google die Seitenladezeit als einen Faktor für das Ranking berücksichtigen. Vergiss nicht, eine lesbare Version deines Codes zu speichern, da der minifizierte Code für spätere Anpassungen oder Wartungen schwerer zu handhaben ist.
Je kleiner, desto besser Teil 2 – Nutze die Gzip-Komprimierung
Du möchtest, dass deine Website schneller lädt und die Benutzer nicht ungeduldig auf Inhalte warten müssen? Dann ist die Aktivierung der Gzip-Komprimierung der Schlüssel. Gzip ist eine clevere Technologie, die deine Website-Ressourcen, wie HTML, CSS und JavaScript, in komprimierte Dateien verwandelt. Das Ergebnis? Schnellere Ladezeiten und zufriedenere User.
Hier ist, wie du es tun kannst:
- Prüfe deinen Webserver: Stelle sicher, dass dein Webserver, sei es Apache, Nginx oder IIS, Gzip unterstützt. In den meisten Fällen ist das der Fall.
- Konfiguriere den Server: Je nach Servertyp gibt es verschiedene Konfigurationsoptionen. Die Einstellungen variieren leicht, aber im Wesentlichen musst du Gzip aktivieren und festlegen, welche Dateitypen komprimiert werden sollen.
- Teste deine Website: Nachdem die Gzip-Komprimierung aktiviert ist, teste deine Website mit Tools wie Google PageSpeed Insights, um sicherzustellen, dass die Komprimierung ordnungsgemäß funktioniert und die Ladezeiten verbessert werden.
- Mit der Gzip-Komprimierung kannst du die Übertragungszeit deiner Website erheblich verkürzen, was nicht nur die Benutzerfreundlichkeit verbessert, sondern auch ein positiver Faktor für SEO ist.
Browser-Caching – 1x speichern & unendlich wiederverwenden
Kennst du das noch aus der Schule? Du hast diese verdammte Vokabel gelernt, aber trotzdem musst du jedes Mal wieder im Schulbuch nachschlagen, was es hieß. So geht es Webbrowsern auch. Von Haus aus sind sie grottenschlecht darin, sich an die besuchte Website von vor 5 Minuten zu erinnern.
Aber zum Glück gibt es den Cache, das Gedächtnis eines Browsers (den gibt’s übrigens auch für Server). Und das Beste: Den Cache deiner User kannst du von außen befüllen und so dafür sorgen, dass er sich auch 2 Wochen später noch perfekt an deine Website „erinnert“ – wenn der User mal wieder vorbeischaut.
Warum ist das gut? Stell dir eine Welt ohne Cache vor: Du besuchst eine Website, die du regelmäßig nutzt. Jedes Mal muss der Browser sämtliche Ressourcen wie Bilder, CSS-Dateien, Javascripts, Webfonts, etc. komplett neu herunterladen. Das kostet Zeit. Zeit und manchmal auch viel Bandbreite.
Jetzt unsere gute alte Internetwelt mit Caching: Du besuchst eine Website, die du regelmäßig nutzt. Dein Browser hat schon sämtliche Ressourcen im Cache gespeichert. Die Seite wird direkt in deinem Browser angezeigt. Nur die wenigen geänderten Elemente, etwa die Texte und Bilder einer neuen Unterseite, werden eben noch Server geladen. Der Rest (CSS, Javascript, Webfonts, … ) sind schon da.
Browser-Caching ist also ein schlauer Trick, den du verwenden kannst, um wiederholte Besuche, und sogar das Anzeigen von Unterseiten beim ersten Besuch deutlich zu beschleunigen!
Das Beste daran ist, dass du Browser-Caching leicht aktivieren kannst, indem du ein paar Zeilen Code in die .htaccess-Datei deiner Website einträgst (Bei Apache-Servern. Bei Nginx geht es auch, aber etwas anders). Oder du installierst ein Caching-Plugin. Im Idealfall übernimmt das dein CMS / E-Commerce-Plattform automatisch für dich. Aber das ist leider immer noch nicht der Normalfall.
Priorisiere den sichtbaren Content
Priorisiere den sichtbaren Content: Deine Leser wollen keine Sekunden verschwenden, bis sie auf deine Website zugreifen können. Stell dir vor, du öffnest eine Buchseite, und statt sofort mit der Geschichte zu beginnen, musst du erst eine Ewigkeit auf den Text und die Illustrationen warten. Das frustriert!
Genau deshalb ist es entscheidend, den sichtbaren Content, also den Teil einer Seite, den Nutzer zuerst sehen, so schnell wie möglich zu laden. Marketer und Webentwickler nennen das auch gerne „above the fold“ oder den 1. Bildschirm.
Mit einer guten Code-Struktur deiner Website hast du hier oft schon das Wichtigste erledigt. Aber achte auf Funktionen und Skripte, die du above the fold einsetzt und die erst zu einem späteren Zeitpunkt oder langsam geladen werden (Javascript-Slider mit unoptimierten Bildern sind typische Problemkinder).
Denke daran, dass ein schneller Start den Unterschied zwischen einem User ausmachen kann, der auf deiner Seite bleibt, und einem, der die Geduld verliert und auf das kleine X oben rechts im Browser drückt.
Benutze ein Content Delivery Network (CDN)
Content Delivery Networks (CDN) sind ein wichtiges Werkzeug, wenn du mit deiner Website nicht nur regional und national, sondern internationale User ansprichst. Die Idee hinter einem CDN ist so simpel wie effektiv: Es verteilt die Daten deiner Website auf Servern in verschiedenen Regionen der Welt. Was bedeutet das für dich? Auch wenn deine Website-Daten mit nahezu Lichtgeschwindigkeit durch die Glasfaserkabel der Internetwelt geschossen werden, merkt man es dennoch, wenn der Server in Covilhã, Portugal steht, ein User aber gerade aus New York auf deine Website zugreifen will. Und ein anderes Mal jemand aus Tokio. Das bedeutet einige Sekunden mehr Ladezeit. Bei jeder Anfrage, jedes Hin und Zurück zwischen Browser und Server. Nicht schön für den Goldfisch und seine Aufmerksamkeitsspanne.
Liegen deine Websitedaten in einem CDN, dann werden die benötigten Bilder und Dateien nicht mehr nur von deinem Hauptserver, der sich wahrscheinlich in Europa befindet, geladen. Stattdessen holt sich jeder User diese Ressourcen von einem Server in seiner geografischen Nähe. Das Ergebnis? Ein paar Sekunden weniger Datenversand und damit schnellere Ladezeiten für alle. Mit einem CDN sorgst du dafür, dass deine Website in jedem Winkel der Welt geladen wird.
Lazy Loading – zu faul für Mehrarbeit
Hast du deine Hausaufgaben und Seminararbeiten auch immer erst am letzten Tag erledigt? Das ist Lazy Loading für deine Website. Es ist eine Technik, bei der Bild-Dateien erst dann geladen werden, wenn sie im sichtbaren Bereich des Bildschirms erscheinen. Anders gesagt: Wenn deine User durch deine Seite scrollen, werden die Bilder erst dann geladen, die sie auch wirklich gesehen werden können.
Das spart nicht nur Datenvolumen ein, das nicht geladen werden muss, sondern beschleunigt auch die gesamte Seitenladegeschwindigkeit. Außerdem macht es Platz für Daten, die der User sofort sehen kann (Thema „Priorisiere den sichtbaren Content“) und erhöht damit auch die gefühlte Ladezeit.
Lazy Loading ist eine gute Technik zur Verbesserung der User Experience deiner Website, umso mehr je bildlastiger sie ist. So bietest du deinen Usern ein schnelleres Nutzungserlebnis bieten. Sie werden es dir danken.
Pagespeed Optimierung: Expert
Jetzt kommen wir zur letzten Kategorie an Optimierung-Techniken. Sie sind nicht weniger effektiv als die bisher genannten. Nur kommst du hier meist nicht ohne robuste IT-Kenntnisse oder einen Entwickler weiter.
Eliminiere Render-Blocking
Du möchtest sicherstellen, dass deine Website so schnell wie möglich geladen wird. Eine der effektivsten Maßnahmen zur Steigerung der Pagespeed-Performance ist die Beseitigung von Render-Blocker Ressourcen. Gemeint sind hier vor allem CSS- und JavaScript-Dateien, die bei falscher Struktur, Implementierung oder Ladereihenfolge das sofortige, geschmeidige Rendering deiner Seite behindern.
Um dieses Problem zu beheben, kannst du diese Ressourcen entweder verschieben oder, wenn möglich, ganz entfernen. Indem du dies tust, ermöglichst du deiner Website, schneller und reibungsloser zu laden, was sich positiv auf die Benutzererfahrung auswirkt und gleichzeitig deine SEO-Rankings verbessern kann. Es ist eine wichtige Maßnahme, die du in Erwägung ziehen solltest, um die Geschwindigkeit deiner Website zu optimieren.
Quelle: https://gtmetrix.com/blog/how-to-eliminate-render-blocking-resources/
Prüfe Drittanbieter-Scripts und optimiere deine Server-Response-Zeit
Überprüfe, aktualisiere oder limitiere Skripte von Drittanbietern, die die Performance beeinträchtigen können. Erstens, stelle sicher, dass sie auf dem neuesten Stand sind, und beschränke sie, wenn sie die Performance deiner Website beeinträchtigen. Manchmal sammeln sich im Laufe der Zeit viele Drittanbieter-Scripts an, die die Ladezeit deiner Seite verlangsamen können. Zweitens optimiere deine Server-Response-Zeit. Das bedeutet, dass du die Leistung deines Servers verbessern oder sogar zu einem leistungsfähigeren Hosting-Anbieter wechseln solltest. Eine schnelle Server-Response-Zeit ist hier entscheidend
Optimiere deine Datenbank
Wenn deine Website über eine Datenbank läuft (was die meisten modernen Websites tun), kannst du die Ladezeiten deiner Website erheblich verbessern, indem du deine Datenbank regelmäßig bereinigst und seine Struktur auf dem neusten Stand hältst. Falls du dich fragst, was die Datenbank ist: Es ist der Ort, an dem alle Inhalte und Informationen deiner Website gespeichert sind – vom Newsartikel bis zu den Produktdaten. Im Laufe der Zeit können sich hier ungenutzte und überflüssige Daten ansammeln, was das Laden deiner Website verlangsamen kann.
Durch regelmäßige Bereinigung und Optimierung deiner Datenbank kannst du unnötigen Ballast entfernen und sicherstellen, dass Abfragen an die Datenbank so effizient wie möglich durchgeführt werden. CMS wie WordPress bieten oft Plugins oder integrierte Funktionen, mit denen du diesen Vorgang vereinfachen kannst. Aber Achtung: Erstelle immer erst eine Sicherung deiner Datenbank, bevor du sie optimierst! Du wärst nicht der erste, bei dem plötzlich etwas nicht mehr funktioniert. Und das kann schnell fatale Folgen für die Website haben, wenn du keine Sicherung hast.
Optimiere deine Fonts
Ein einfacher und effektiver Schritt ist die optimale Nutzung von Webfonts. Webfonts sind eine großartige Möglichkeit, deiner Website ein individuelles Design zu verleihen, aber leider wirken sie sich gerne negativ auf die Ladezeit aus. Um das Beste aus ihnen herauszuholen, verwende Webfonts sparsam und lade sie effizient. Statt viele verschiedene Schriftarten zu verwenden, wähle gezielt wenige aus. Mehr als 3 sollten es nicht sein, eher 1 oder 2, sonst sieht deine Website schnell merkwürdig und zusammengewürfelt aus – was sich dann nicht nur auf den Pagespeed auswirkt.
Noch wichtiger ist die Art und Weise, wie du diese Fonts lädst. Die besten Ergebnisse erzielst du, wenn du sie direkt auf deinem eigenen Server bereitstellst. Auch aus Sicht der DSGVO ist das nach derzeitigem Stand ratsam. Das reduziert die Ladezeit, da der Browser weniger externe Anfragen stellen muss. Wenn du Webfonts gezielt und effizient einsetzt, verhinderst du eine unnötige Steigerung deiner Ladegeschwindigkeit und verbesserst gleichzeitig die Nutzererfahrung deiner User.
Quelle: https://fonts.google.com/
Keep calm and load quick – Teste deinen Pagespeed regelmäßig!
Diese Liste an Optimierungen begann mit dem Erheben deines Pagespeed Status Quo. Und damit endet sie auch. Denn es bringt zwar schon viel, wenn du all diese Optimierungen umsetzt.
Aber wie sieht die Welt in 6 Monaten aus oder einem ganzen Jahr? Zu oft wird einmal groß reingemacht und danach alle Best Practices wieder vergessen und über Bord geworfen. Wieder landen Bilder in Auflösung für Plakatwände auf der Website, URLs werden offline genommen und die Weiterleitungen vergessen, undundund. Damit deine Website auch für die Zukunft schnell, wie der Blitz bleibt, ist vor allem eins wichtig: Teste deine Pagespeed Performance regelmäßig!
Dann erkennst du neue Speedblocker schnell oder deckst direkt Schwachstellen im Pagespeed Know-How deines Teams auf, bei denen es nochmal nachzuschärfen gilt.
Wie machst du das? Wie beim allerersten Pagespeed Status Quo – nutze die dort genannten Tools regelmäßig und halte die Ergebnisse fest, um deine Pagespeed-Entwicklung nachhalten zu können.
Wenn du so weit bist, macht es für dich vielleicht auch Sinn, sich die Bezahlvarianten der Tools anzuschauen. Besonders die Features für automatisierte Checks, eine Pagespeed-Historie und das automatische Senden von Reports an dein Email-Fach werden wir dabei helfen, die Ladezeiten deiner Website konstant zu prüfen, statt es vor sich herzuschieben oder ganz zu vergessen zu werden. Aus eigener Erfahrung kann ich dir sagen, dass es sehr angenehm und zeitsparend im üblichen Agentur-Alltags-Stress ist, wenn und die Ergebnisse eines Pagespeed-Checks jeden Monat fertig zu Auswertung direkt in deinem Email-Fach landen. Keine Chance, den Überblick oder die Prioritäten aus den Augen zu verlieren. 🙂
Wrap-up
Pagespeed-Optimierung ist der Schlüssel zu einer guten User Experience und hohen Rankings in Suchmaschinen. Klappts mit dem Laden der Seite nicht, dann klappt auch sonst nichts. Das kannst du dir schon einmal merken.
Stell dir dagegen vor, du besuchst eine Website, und – zack – sie lädt im Handumdrehen. Du kannst sofort spannende Storys lesen, im Sortiment zu stöbern oder dir mit einem Online Game die Zeit vertreiben. Das wäre eine schöne Welt, oder?
Das ist nicht nur sehr bequem für deine User, es ist auch entscheidend für den Erfolg deiner Website. Warum? Weil Menschen ungeduldig sind. Wenn deine Seite zu langsam lädt, verlieren deine User das Interesse und du potenzielle Leser und Kunden.
Die Geduldsspanne im Internet ist kurz. Sehr kurz. Sehr sehr k…. Und vorbei! Laut Google kann sich eine Ladezeit von nur einer Sekunde mehr zu 20% höheren Absprungraten führen.
Deswegen lieben auch Suchmaschinen wie Google schnelle Websites: Ihre Nutzer haben eine bessere User Experience, und Suchmaschinen wollen zufriedene Nutzer, damit sie bald wieder vorbeikommen für die nächste Suche.
Daher belohnen Suchmaschinen schnelle Websites mit besseren Rankings in ihren Suchergebnissen. Das bedeutet, wenn du die Geschwindigkeit deiner Website optimierst, machst du sie nicht nur für Menschen, sondern auch für Suchmaschinen unwiderstehlich.
