Google Pagespeed Optimierung – der ultimative Ratgeber

Google Pagespeed Optimierung – der ultimative Ratgeber

Die Ladezeiten von Websites sind schon seit vielen Jahren eines der meist diskutierten Themen bei und rundum Google. So startete das Unternehmen Google bereits Mitte des Jahres 2009 eine themenspezifische Initiative für ein schnelleres Internet. Damit legte der Suchmaschinen-Betreiber die Basis für den Rankingfaktor Pagespeed. Bezeichnenderweise wählte Google dafür den Slogan “Let’s make the web faster”. Die Bedeutung der Ladezeit ist seitdem stetig gewachsen und stellt ein sehr wichtiges Qualitätskriterium für eine Website dar.

Der Page Speed – also eben die Ladezeit einer Webseite – ist mittlerweile sogar offizieller Rankingfaktor bei Google. Ein neues Update soll den Stellenwert der Ladezeit von Websites noch einmal gehörig anheben. Daher werden seit Mitte des Jahres 2021 die neuen nutzerzentrierten Messwerte der “Core Web Vitals” mit dem Page Experience Update in die Berechnung der Suchergebnisreihenfolge integriert.

Website-Betreiber müssen also zukünftig noch mehr Wert auf den Pagespeed legen. Auch auf den WordPress Pagespeed muss großer Wert gelegt werden. Wir zeigen dir im Folgenden, mit welchen Maßnahmen und Tools du den Pagespeed positiv beeinflusst und nachhaltig verbesserst.

Darum solltest du eine Pagespeed Optimierung durchführen – die relevantesten Gründe

Eine langsame Ladegeschwindigkeit reduziert die Nutzerfreundlichkeit und schreckt potenzielle Kunden ab. Zudem beeinflusst sie das Website-Ranking negativ. Spätestens bei Ladezeiten über drei Sekunden solltest du aktiv werden. Die erfahrenen Spezialisten von woogency(C) unterstützen dich bei allen erforderlichen Maßnahmen einer Pagespeed Optimierung.

Dies sind die fünf wichtigsten Gründe für eine Pagespeed Optimierung:

1. Ein guter Pagespeed ist gleichbedeutend mit einer positiven User Experience. Das ist sowohl für Google als auch für die Website- bzw. Shop-Besucher ein wichtiges Kriterium. Weist eine Website eine schnelle Ladezeit auf, führt dies zu niedrigeren Absprungraten.
2. Der Pagespeed ist ein offizieller SEO-Rankingfaktor. Damit hat er maßgeblichen Anteil an der Bewertung und Einstufung von Google. Möchtest du mit deiner Internet-Präsenz eine Top-Platzierung in der Suchergebnisliste erreichen, sind schnelle Ladezeiten unabdingbar.
3. Eine kurze Ladezeit steigert die Conversions, während Verzögerungen beim Ladevorgang die Conversion Rate und damit auch die Anzahl deiner Verkäufe mitunter deutlich schmälert. Laut Studien sollte die Ladezeit höchstens drei Sekunden betragen. Liegt die Ladezeit deines Onlineshops oder deiner Website darüber, solltest du sofort mit einer umfassenden Pagespeed Optimierung starten.
4. Langsame Websites werden von Google nicht so intensiv gecrawlt. Das hat einen simplen Grund: Für Google selbst stellt sich der gesamte Crawling-Prozess sehr kosten- und ressourcenintensiv dar. Deshalb unterliegt der Googlebot auch einem Zeitlimit. Überschreitet deine Website dieses Zeitlimit, schaut Google sich die Seite nicht so häufig an.
5. Immer mehr Nutzer setzen auf mobile Endgeräte. Es werden mittlerweile mehr Suchanfragen über Smartphone, Tablet und Co. als über die klassischen Desktops ausgeführt. Eine mobil optimierte Website stellt daher ein absolutes Muss dar, wenn du kurze Ladezeiten auf mobilen Endgeräten gewährleisten möchtest. Mit einer Pagespeed Optimierung schöpfst du das vorhandene Potenzial aus.

Wie kann ich meinen Pagespeed messen?

Die Ladegeschwindigkeit einer Website ist ein entscheidender Faktor für die User Experience. Für den Google Algorithmus wiederum zählt eine gute User Experience zu den wesentlichen Kriterien. Kommt es zu Verzögerungen bei der Ladezeit kann dies zudem für einen Rückgang der Seitenaufrufe und der Conversion Rate sorgen. Dies geht in der Regel einher mit einer deutlich gesteigerten Absprungrate. Besonders betroffen von einer schlechten Ladezeit-Performance sind vor allem die Besitzer bzw. Betreiber von Webshops.

In diesem Fall führt eine schlechte Webseiten Performance häufig zu Umsatzeinbußen. Es muss also stets das Ziel verfolgt werden, die Ladezeiten entsprechend zu optimieren. Hinzu kommt, dass geringe Ladezeiten nicht nur für die Suchmaschinen ein wichtiges Kriterium darstellen, sondern auch die Website- bzw. Shop-Besucher auf der jeweiligen Seite hält. Um deinen Website Speed zu messen, kannst du auf kostenlose Tools wie zum Beispiel Gtmetrix, Pingdom Website Speed Test, WebPageTest, dotcom-monitor, Yellow Lab Tools oder Varvy PageSpeed Optimization zurückgreifen. Besonders empfehlenswert für die Pagespeed Optimierung sind die beiden folgenden Tools.

Lighthouse

Bei Lighthouse handelt es sich um ein Tool, mit der du die Pagespeed Performance sowie die Nutzerfreundlichkeit von Websites und Progressive Web Apps messen bzw. testen kannst. Dabei bietet dir das Tool flexibel anpassbare Testbedingungen, was realistischere Umgebungen gewährleistet. Lighthouse deckt insgesamt vier Bereiche komplett ab:

• Pagespeed Performance
• Progressive Web App
• Accessibility
• Best Practices

Das Tool zeigt dir zu jedem einzelnen Segment Detailinformationen an und gibt dir Hinweise, wie du den Pagespeed der Webseiten verbessern kannst. So erfährst du zum Beispiel im Hinblick auf die Performance, wie lange es dauert, bis im Browser die ersten Elemente der jeweiligen Webseite sichtbar sind und wie lange es dauert, bis eine Seite tatsächlich genutzt werden kann.

Pagespeed Insights

Das Tool PageSpeed Insights von Google bietet dir ein großes Spektrum an verschiedenen Metriken und Funktionen. Die gemessene Pagespeed Performance unterteilt den Score dabei in langsam, durchschnittlich und schnell. Zusätzlich erhältst du Empfehlungen, wie du den Pagespeed verbessern kannst. Auch die dadurch eingesparte Ladezeit wird angegeben (Schätzwert). Zum Portfolio des Tools zählen zudem ausführliche Dokumentationen über Pagespeed Themen sowie explizite Tipps zur Pagespeed Optimierung für WordPress-Nutzer.

Die Empfehlungen und andere Scores basieren dabei auf den so bezeichneten Labdaten. Diese werden vom Projekt Lighthouse anhand von bestimmten Netzwerkeinstellungen und vordefinierten Geräten ermittelt. Als weitere Informationsquelle dienen die Felddaten. Hierbei handelt es sich um gemittelte Werte von Webseiten-Aufrufen, die aus dem Chrome User Experience Report stammen. Diese Felddaten stellen ein Alleinstellungsmerkmal von Pagespeed Insights dar und geben die durchschnittliche Ladezeit von Google im Verhältnis zu anderen Seiten an.

Aktuell: Was sind die Core Web Vitals und wie hängen sie mit Pagespeed zusammen?

Seit Mitte Juni 2021 nutzt Google die Page Experience sowie die darin enthaltenen Core Web Vital Metriken für das Ranking von Webseiten. Diese Metriken werden für die Messung der visuellen Belastung, der visuellen Stabilität und der Interaktivität herangezogen. Der Browser zeichnet dabei automatisch während des Besuchs einer Webseite die Core Web Vitals auf und sendet diese an Google. Drei verschiedene Metriken stehen hierbei zur Verfügung.

1. Largest Contentful Paint (LCP)

Hier wird die Zeit gemessen, die für das Laden von Hauptinhalten einer Seite benötigt wird. Laut Google sollte die Geschwindigkeit der Ladezeit im Idealfall maximal 2,5 Sekunden betragen.

2. Cumulative Layout Shift (CLS)

CLS ist eine Kennzahl, mit der du die Stabilität deines Layouts messen kannst. Zudem wirst du darüber informiert, ob sich während des Ladevorgangs einzelne Elemente verschieben. Auch dies ist ein Grund für eine verbesserungswürdige Ladegeschwindigkeit.

3. First Input Delay (FID)

Im Fokus steht bei dieser Kennzahl die Zeitspanne, die benötigt wird, bis der Browser auf die erste Interaktion eines Nutzers mit einer Seite reagiert. Hierbei kann es sich beispielsweise um das Klicken auf einen Link oder das Tippen auf eine Schaltfläche handeln.

Als Seitenbetreiber kannst du die Web Vitals hier messen:

• Search Console
• PageSpeed Insights
• Lighthouse
• Web Vitals Extension
• Chrome DevTools
• Chrome UX Report

Du möchtest genau wissen, wie du die Core Web Vitals wirkungsvoll optimierst? Am Ende dieses Beitrags erklären wir dir im Detail, wie du eine solche Optimierung angehst.

Aus welchen weiteren Metriken besteht der Pagespeed Score?

Um den Pagespeed Score zu ermitteln, kannst du auf viele Metriken zurückgreifen. Als besonders wichtig gelten die folgenden vier Metriken.

Time to First Byte (TTFB):

Gemessen wird hier die Zeitspanne zwischen dem Website-Aufruf und dem ersten Byte, das vom Webserver geladenen wird. Es wird also ermittelt, wie schnell der Webserver auf den jeweiligen Aufruf antwortet. Vor allem hohe Latenzen im Verbindungsaufbau sorgen für zu hohe Ladezeiten, aber auch langsame Soft- und Hardware des Webservers sorgen für Geschwindigkeitsdefizite.

First Contentful Paint (FCP):

Diese Metrik beschreibt den Zeitpunkt, an dem ein Darstellungsmerkmal einer Seite zum ersten Mal nach dem Aufrufen im Browser angezeigt wird. Je länger der Ladevorgang dauert, desto länger starren die Nutzer auf einen weißen Bildschirm. Subjektiv bewerten die User Verzögerungen beim Ladevorgang als negativ, selbst wenn der Content danach schneller geladen wird. Der Eindruck einer langsamen Internet-Präsent bleibt. Daher gilt die Beschleunigung des First Contentful Paints als ein wesentlicher Ansatz innerhalb der Pagespeed Optimierung.

First Meaningful Paint (FMP):

Hier geht es um den Zeitpunkt, an dem ein User subjektiv das Gefühl hat, dass der Ladevorgang abgeschlossen und die Website geladen ist. Explizit ist hiermit der Zeitpunkt gemeint, an dem der Browser-Sichtbereich komplett mit allen Darstellungskomponenten geladen ist. Das ist unabhängig davon, ob der Ladevorgang auch aus technischer Sicht als abgeschlossen gilt.

Time to Interactive (TTI):

Diese Kennzahl bzw. Metrik beschreibt den Zeitpunkt, an dem die jeweilige Site bereit zur Nutzereingabe ist. Dafür muss die Website vollumfänglich fertig gerendert sein. Eine langsame Datenübertragung, große Datenmengen (insbesondere Bilder) und der Verzicht auf Caching stellen allesamt Hemmschuhe dar und verlangsamen die TTI.

So werden diese vier Metriken von Google gewichtet

• TTI mit rund 35 Prozent
• FCP mit zehn Prozent
• FMP mit knapp sieben Prozent
• TTFB mit unter fünf Prozent

Was ist ein guter Richtwert für die Seitengeschwindigkeit?

Für Google ist eine schnelle Ladezeit ein wichtiges Qualitätskriterium. Die Websitegeschwindigkeit war lange Zeit zwar kein offizieller Ranking-Faktor, aber agierte schon immer als Nutzersignal. Denn eine geringe Ladegeschwindigkeit wirkt sich positiv auf die Seiten-Verweildauer und die Absprungrate aus. Google hat die Ladegeschwindigkeit mittlerweile zu einem Ranking-Faktor erklärt. Die Pagespeed Optimierung ist daher essenziell.

Google Pagespeed Insights gibt folgende Richtzeiten an:

• Largest Contentful Paint: bis 2,5 Sekunden wird die Ladezeit als gut bewertet
• First Input Delay: bis 100 Millisekunden (0,1 Sekunden) gelten als gute Performance
• Cumulative Layout Shift: auch hier sind 0,1 Sekunden die Grenze zwischen einer guten und einer verbesserungswürdigen Ladezeit.

Welche Pagespeed-Faktoren kann ich beeinflussen und welche nicht?

Eine Pagespeed Optimierung ist grundsätzlich möglich. Die geschieht in der Regel im Rahmen der OnPage-Optimierung. Aber du kannst nicht jeden einzelnen Faktor positiv beeinflussen.

Faktoren, die du nicht beeinflussen kannst:

Browsercache

Wurde der Cache des vom jeweiligen User verwendete Browser schon lange nicht mehr geleert, verzögert dies häufig den Seitenaufbau. In dem Fall bietet der Arbeitsspeicher nicht mehr genug Kapazitäten, um die Datenmenge zu verarbeiten. Das kannst du aber nicht beeinflussen bzw. steuern.
Bandbreite:

Die jeweils vorhandene Internet-Bandbreite beeinflusst die Ladezeit deiner Webseite. Gerade Smartphones mit überholter Technik stellen hier ein Problem dar. Auch daran kannst du aber nichts ändern.

Rechenleistung des Clients

Auf älteren Desktop-Computern und Handys kommt es häufig ebenfalls zu Verzögerungen beim Laden bzw. beim Seitenaufbau, da die geringere Prozessorleistung und zu wenig Arbeitsspeicher die Ausführung von Skripten und den Aufbau des DOM verlangsamen.

Faktoren, die du beeinflussen kannst

Dateigrößen

Die Größe bzw. Komplexität deiner Webseite bestimmt, wie rasch der Ladevorgang ist. Wichtige Stellschrauben sind diesbezüglich der HTML-Code an sich, Skript- und Stylesheet- Dateien sowie Bilder. Je geringer die Datenmenge in den Dateien ist, desto schneller funktioniert in der Regel auch das Laden.

Server-Performance

Ruft ein User deine Website oder auch Unterseiten auf, bearbeitet der involvierte Webserver diese Anfrage. Hier gilt: Die Bearbeitung erfolgt schneller, wenn der Server kleinere Datenmengen anfordern muss. Bei starkem Traffic und vielen Anfragen gleichzeitig können Prozessorleistung und Arbeitsspeicher zu stark beansprucht werden. Dann wird die Ladezeit quasi zum Flaschenhals. In einem solchen Fall lassen sich die Server-Kapazitäten nach oben anpassen.

Weitere beeinflussbare Faktoren:

• Schnelle DNS-Verbindungen einrichten
• Content Delivery Network nutzen (bei globaler Reichweite)
• HTTPS verwenden
• Serverseitiges Caching und Browser-Caching nutzen
• GZip-Komprimierung verwenden
• HTTP/2 aktivieren
• Bilder komprimieren
• Quellcode verschlanken
• Externe Skripte verringern
• JavaScript und CSS auslagern, minimieren oder erst am Ende laden
• Für Hintergründe CSS3 verwenden
• Prefetching und Prerendering nutzen
• Bad Requests vermeiden und 301-Weiterleitungen reduzieren
• AMP verwenden

So optimierst du die Pagespeed deiner Website!

Du weißt jetzt, was es mit dem Pagespeed auf sich hat, wie wichtig er für deine Website sowie SEO ist und wie du ihn messen kannst. Das stellt die Voraussetzung dar, um mithilfe von effektiven Maßnahmen den Pagespeed optimieren zu können. Im Folgenden stellen wir dir die relevantesten und gleichzeitig effektivsten Maßnahmen und Möglichkeiten vor, mit denen du die Ladegeschwindigkeit deiner Website oder deines Onlineshops nachhaltig verbessern kannst. Das ganze geht auch mit deinem WooCommerce Pagespeed.

Verwende HTTP/2 für die Pagespeed Optimierung

HTTP/2 (Hypertext Transfer Protocol) fungiert als ein Protokoll zur Übertragung von Daten via Internet und anderen Netzwerken. Die Internet Engineering Task Force (in Kurzform: IETF) hat das abwärtskompatible HTTP/2 im Mai 2015 offiziell als Standard eingeführt. Damit wurde der alte Standard HTTP/1.1 ersetzt. HTTP/2 erfordert allerdings eine aktive Umstellung des Webservers.

Diese Anfragemethoden stehen zur Auswahl:

• URL-Parameter
• URL-Codierung des Query-Strings
• GET
• POST
• HEAD
• OPTIONS
• TRACE
• Spezialmethoden

Mehr HTTP-Requests möglich

Das Protokoll HTTP/2 kann mehrere Anfragen zusammenfassen und wickelt diese über eine persistente Verbindung ab. Es besteht eine erweiterte Datenkompression, sodass auch Daten aus dem HTTP-Header eingeschlossen werden können. Inhalte lassen sich zudem binär kodiert übertragen. Während früher HTTP/1 nur auf Browser-Anfragen reagieren konnte, initiieren die Webserver bei Bedarf selbst Übertragungen. Zum Einsatz kommt hier das so bezeichnete Push-Verfahren. Durch die Nutzung von HTTP/2 verringerst du als Betreiber einer Website die Latenz zwischen Webserver und Browser. Gleichzeitig entlastest du die Netzwerkhardware.

Auf einen Blick – die Vorteile von HTTP/2

• Mehrere Website-Daten können über eine persistente Verbindung übertragen werden.
• Du kannst auch Header-Daten komprimieren.
• Die Antwortzeit des Servers (Latenz) verringert sich.
• Eine deutlich schnellere Pagespeed ist möglich.

Optimiere deine Pagespeed mittels Server-Caching

Als Cache wird in der Informationstechnologie ein schneller Pufferspeicher bezeichnet. Dieser stellt eine Hochgeschwindigkeitsspeicherebene dar, auf der Teilmengen von Daten in den meisten Fällen temporär gespeichert werden. Bei zukünftigen Anfragen können diese Daten im Vergleich zum primären Speicherort schneller bereitgestellt werden. Über Caching lassen sich zuvor abgerufene oder bereits berechnete Daten effizient weiter- bzw. wiederverwenden. Unterscheiden musst du dabei zwischen dem Browser-Caching und dem Server-Caching.

Browser-Caching

Bei einem Browser-Cache handelt es sich um einen Pufferspeicher des Webbrowsers. Dieser Speicher bewahrt auf dem Rechner des jeweiligen Benutzers die bereits abgerufenen Daten (Bilder, Texte etc.) als Kopie auf. Benötigst du diese Daten später erneut, lassen sie sich schnell aus dem Cache abrufen. Dadurch umgehst du, dass alle Daten wieder neu aus dem Internet heruntergeladen werden müssen. Das reduziert den Netzwerkverkehr und die Ladezeit.

Server-Caching

Hier bleiben die Ergebnisse von Website-Aufrufen im Server-Cache. Im Gegensatz zum Browser-Caching werden in diesem Fall die Daten also auf dem Server gespeichert und nicht auf einem lokalen Rechner. Wird eine Website angefragt, die bereits im Cache gespeichert ist, greift der involvierte Browser auf diese Daten zurück. Dadurch umgehst du die komplexe und ressourcenlastige Abfrage über das Internet.

Mit Server-Caching schonst du Webserver und Datenbank, was den Pagespeed deiner Website enorm verbessert. Das ist auch optisch sehr gut zu erkennen. Denn eine Seite aus dem Server-Cache baut sich nicht erst nach und nach auf, sondern erscheint sofort in kompletter Form. JavaScript-Funktionen werden zudem weiterhin ausgeführt, da diese im HTML enthalten sind. Das bedeutet: Statistiken von Google Analytics oder ähnlichen Anwendungen werden weiterhin gesammelt. Nutzt du WordPress, kannst du dein Caching schnell und einfach zum Beispiel mit dem Plugin WP Rocket einrichten.

Pagespeed durch Browser-Caching optimieren

Für eine höhere Ladegeschwindigkeit stellt das Browser-Caching ein geeignetes und sinnvolles Mittel dar. Der Browser speichert dabei statische sowie nur wenig modifizierte Ressourcen wie beispielsweise CSS-Dateien und Grafiken für einen bestimmten Zeitraum im Speicher von lokalen Rechnern zwischen. Kommt es zu einem erneuten Aufruf bzw. Besuch, werden die Daten abgerufen und somit die Anzahl der erforderlichen Serveranfragen drastisch reduziert. Dadurch verbessert sich die Ladezeit spürbar. Die schnelle Ladegeschwindigkeit erhöht zum einen den Komfort für die Website-Besucher. Zum anderen belohnen die Suchmaschinen diese Pagespeed Optimierung mit einem besseren Ranking.

Festlegung von Gültigkeitsdauer und Validierung

Der Browser muss dabei immer wissen, wie lange die Dateien bzw. Daten zwischengespeichert werden sollen. Neben Bildformaten wie .jpg, .gif und .png kannst du auch Dateitypen wie JavaScript- und CSS-Dateien oder beispielsweise binäre Objektdaten wie Mediendateien und PDFs zwischenspeichern. Du legst dabei für die verschiedenen Dateitypen jeweils individuelle Ablaufdaten fest.

Um den Browser-Cache zu aktivieren, müssen verschiedene Header-Typen an den Browser übermittelt werden. Im Fokus stehen dabei die Gültigkeitsdauer (Expires- und Cache-Control-Header) und die Validierung (Last-Modified- und E-Tag-Header). Sollte deine Internet-Präsenz auf einem Apache-Server installiert sein und dabei das Modul mod_expires verwendet werden, musst du einen speziellen Codeblock in die .htaccess-Datei einfügen. Erst dann ist das Browser-Caching aktiviert.

Optimiere die Bilder auf deiner Website

Grafiken und Bilder und Grafiken stellen einen entscheidenden Faktor für die Website-Größe dar. Gerade bei mit dem Smartphone oder der Kamera aufgenommenen Fotos kommen schnell vier bis acht Megabyte pro Bilddatei zusammen; bei hohen Auflösungen noch viel mehr. Um deinen Website-Besuchern die bestmögliche User Experience zu bieten, solltest du alle Bilder auf deiner Website entsprechend optimieren. Auf diese Weise sparst du mitunter mehrere Sekunden Ladezeit ein. Wie du dabei vorgehst und welche Optimierungsmöglichkeiten dir diesbezüglich zur Verfügung stehen, verraten wir dir in den folgenden Abschnitten.

Komprimiere die Bilder auf deiner Website

Wer die Sichtbarkeit und Ladezeit seiner Website verbessern möchte, muss für die Pagespeed Optimierung alle Bilder richtig komprimieren. Größe und Format von Bildern auf einer Website haben außerdem einen sehr großen Einfluss auf den Pagespeed und somit gleichzeitig auch auf das Suchmaschinen-Ranking. Denn Bilder benötigen viel Speicherplatz und Rechnerarbeit. Im Jahr 2020 lag das durchschnittliche Downloadvolumen alleine in Onlineshops bei rund 2 MB pro Seitenaufruf. Langsamer Pagespeed ist dabei vorprogrammiert.

Bilder komprimieren – diese Möglichkeiten stehen dir zur Verfügung

Speichern fürs Web

Ob ImageMagick, Optipng oder jpegoptim – mit Programmen dieser Art kannst du Bilder mit einem einzigen Befehl wie gewünscht optimieren und somit reichlich Zeit sparen. Mit dem Kommando “convert” stellst du zum Beispiel bei ImageMagick JPEG-Bilder auf die jeweils erforderliche Qualitätsstufe ein. Auch Adobe Photoshop bietet dir als eines der führenden Programme zur Aufbereitung und Bearbeitung von Bildern eine gute Möglichkeit zur Komprimierung.

Unter dem Reiter “Datei – Für Web speichern” findest du alle gängigen Formate, die für eine Komprimierung der Bilder zur Verfügung stehen. Spezielle Formate wie WebP fügst du über ein Plugin hinzu. Besonders empfehlenswert ist zudem das Freeware-Programm IrfanView, das mit seiner Transparenz und mit Anwenderfreundlichkeit punktet.

Online-Tools wie TinyPNG oder TinyJPG

TinyPNG komprimiert Bilder wie kaum ein anderes Online-Tool. Zur Verfügung stehen die Dienste TinyPNG und TinyJPG. TinyPNG ist als WordPress-Plugin aufgesetzt und gewährleistet vollautomatisch optimale Bildgrößen. Dabei komprimiert das Programm automatisch neue Bilder sowie deine bereits vorhandenen Bilder. PNG-Bilder werden bis zu 80 Prozent und JPEG-Bilder bis zu 60 Prozent komprimiert. Die Bildqualität wird dabei nicht sichtbar beeinträchtigt.

Das optimale Dateiformat

Um deine Bilder zu komprimieren, steht dir ein großes Spektrum an Datei- bzw. Bildformaten zur Verfügung. Im Hinblick auf die Pagespeed Optimierung solltest du dich immer für ein Format entscheiden, dass die Datenmenge maßgeblich reduziert. Im Allgemeinen unterscheiden sich sämtliche Formate in den beiden Punkten Komprimierung und Kompatibilität.

PNG: sehr gutes verlustfreies Format; eignet sich besonders gut für Bilder mit scharfen Übergängen und mit Vollfarbe; die Dateigröße stellt gerade im Hinblick auf den Pagespeed ein Problem dar

GIF: sehr altes und verlustfreies Format; empfohlen für Grafiken und Werbebanner mit Volltonfarben; es gibt nur eine 24-Bit-RGB-Farbunterstützung, für farbstarke Bilder daher nicht geeignet

JPEG: ideal geeignet für farbenfrohe Bilder und Aufnahmen mit überblendenden Farbtönen; nicht geeignet für Symbole und Logos mit angemessener Skalierbarkeit

SVG: wird durch gzip komprimiert; sehr vielseitiges Format; besonders beliebt für die Erstellung von Logos oder Drucksachen

Weitere Bildformate für die Komprimierung: WebP, PSD (Photoshop Document), PDF (Portable Document Format), EPS (Encapsulated Postscript), AID (Adobe Illustrator Document) oder RAW (Rohbildformate)

WebP benutzen

Das Bildformat WebP wurde von Google entwickelt. Es ist besonders flexibel einsetzbar, da es sowohl eine verlustbehaftete als auch verlustfreie Kompression anbietet. Das vergleichsweise junge Format ist konsequent auf “Web Performance” optimiert und drängt JPEG und PNG immer mehr ins Abseits. WebP weist also einen Komprimierungsvorteil auf. So lassen sich zum Beispiel PNG-Bilder um rund 30 Prozent verkleinern. WebP wird von allen relevanten Bild-Programmen und Browsern unterstützt.

Mit AVIF und JPEG XL

Das Bildformat AVIF gibt es seit 2019, entspricht modernen Standards und wird bereits als Nachfolger von WebP gehandelt. Es ähnelt dem von Apple genutzten HEIC-Format, ist allerdings offener angelegt. AVIF bietet eine enorm hohe Kompressionsrate. Auch das stark komprimierte WebP kann da nicht mithalten. Im Gegensatz zu WebP benötigt das AV1-basierte Bildformat allerdings viel Zeit und Leistung bei der entsprechenden Codierung. Durch das langsame Arbeiten der AV1-Encoder, kann es gerade bei umfangreichen Projekten zu Problemen bekommen.

Bei JPEG XL handelt es sich dagegen um ein lizenzfreies Raster-Grafikformat, das verlustfreie und verlustbehaftete Komprimierungen unterstützt. Ende 2021 soll das Format erscheinen. JPEG XL soll für die sichtbare Komprimierung mit der halben Bitrate vom alten Format JPEG auskommen. Außerdem bietet es einen größeren Farbraum sowie eine höhere Farbtiefe. Zudem kannst du in nur einer Datei mehrere Frames speichern. Gleiche Bildteile lassen sich dabei subtrahieren. Weiterer Vorteil: JPEG XL soll sich doppelt so schnell wie das Bildformat JPEG decodieren lassen.

Lazy Loading verwenden

Lazy Loading ist ein Script, das direkt im Website-Quellcode integriert wird. Es gewährleistet, dass Bilder und andere Objekte immer erst dann hochgeladen werden, wenn du sie tatsächlich benötigst. Das ist zum Beispiel dann der Fall, wenn ein Besucher deiner Website nach unten scrollt oder den Browser vergrößert. Dadurch verhindert Lazy Loading, dass Objekte und Inhalte außerhalb des Sichtbereichs laden. Somit kommt es nicht zu unnötigen Ladezeiten und damit einhergehend zu einem höheren Datenverbrauch. Im Endeffekt profitiert davon die Ladegeschwindigkeit deiner Website.

Du kannst Lazy Loading auf verschiedene Arten umsetzen

• Lazy Loading mit JavaScript: Die bekanntesten Scripte sind Lazy Load Remastered und LazyLoad. Bei letzterem Script hast du die Möglichkeit, Lazy Loading für Bilder, Videos, iFrames und weitere Objekte zu aktivieren.
• Lazy Loading mit einer Intersection-Observer-API: Alle involvierten Elemente stehen unter permanenter Beobachtung. So werden Veränderungen oder beispielsweise Abstandsänderungen zwischen zwei Elementen explizit angezeigt.
• Lazy Loading mithilfe von WordPress PlugIns: Du kannst auf verschiedene Erweiterungen zurückgreifen. Besonders bewährt hat sich das Plugin a3 Lazy Load.
• Natives Lazy Loading: Dies ist eine besonders einfache Art, Lazy Loading einzubinden. Du musst lediglich das jeweilige Attribut in den Quellcode eintragen.

Binde deine Bilder in nativer Auflösung ein

Empfehlenswert ist es zudem, dass du deiner Bilder in nativer Auflösung einbindest. Eine native Auflösung liegt dann vor, wenn du ein Bild in derselben Größe (also mit der identischen Pixelzahl) hochlädst und einbindest, wie es auch auf deiner Website erscheint. Generell gelten 1920 x 1080 Bildpunkte als Standard-Auflösung, die auch als native Auflösung bezeichnet wird. Damit arbeiten gerade Full HD 24 Zoll (60,96 cm) TFT-Monitore.

Auch die Displays vieler Smartphones lösen nativ mit 1.920 x 1.080 Bildpunkten auf und geben die ebenfalls in dieser Auflösung hochgeladenen Bilder detailreich und scharf wieder. Bei kleineren Auflösungen kommt es dagegen zu einer Skalierung durch den Bildschirm bzw. durch das Display, was wiederum zu Reduktionen im Bereich der Bildschärfe führt. Nur die Vervierfachung der Auflösung stellt hier eine Ausnahme dar: Die Qualität bleibt in diesem Fall unverändert.

Bilder mit den richtigen Abmessungen verwenden

Um die richtigen Abmessungen zu identifizieren, kannst du die Bildgrößen anhand von Größen-Standards bestimmen. Webseiten weisen in der Regel ein Gestaltungsraster auf, das vorzugsweise in Spalten interpretiert wird. Ganz wichtig dabei: Verwende Abmessungen immer gemessen an der größten Darstellung. Achte dabei genau auf die Proportionen. Stimmen diese nicht, erscheint das Bild verzerrt.

Content Delivery Network (CDN) benutzen und Latenz reduzieren

Ein Content Delivery Networks (kurz: CDN) sorgt für ein zuverlässigeres und gleichzeitig schnelleres Onlineerlebnis. Dies funktioniert, indem CDNs Inhalte näher an die User bringen. Auf diese Weise lässt sich mit CDN die Anzeige von besonders großen Dateien und vor allem Bildern beschleunigen. Die CDN-Server werden dabei geografisch verteilt. Auf diese Weise können Daten immer in der Nähe von Usern und Internetanbietern zwischengespeichert werden. Und das ganz unabhängig davon, wo sie sich gerade befinden.

Dabei wird ein klares Ziel verfolgt: Die Latenz soll reduziert werden. Unter Latenz kannst du die lästigen Verzögerungen beim Laden bzw. Aufbau der Seitenelemente verstehen, die Website-Besucher beim Zugriff auf eine Website erleben. Diese Verzögerungen beim Laden gipfeln unter Umständen sogar in einer Zeitüberschreitung oder in einem Ladefehler.

Du kannst zwei verschiedene CDN-Verfahren nutzen, um deinen Pagespeed zu verbessern. Zur Verfügung stehen dir hierbei Origin Push und Origin Pull. Die beiden Verfahren unterscheiden sich in verschiedenen Punkten.

– Origin Push

In diesem Fall werden die Daten manuell oder automatisiert vom Ursprungssystem auf den ersten CDN-Server übertragen. Der CDN-Anbieter nutzt hierfür ein definiertes Protokoll. Häufig kommt hierbei FTP zum Einsatz. Als Seitenbetreiber verfügst du mit Origin Push über die größtmögliche Flexibilität. Dies stellt vor allem dann eine effiziente Lösung dar, wenn eine Website eher weniger Traffic und Aufrufe aufweist.

– Origin Pull

Bei diesem Verfahren für die Pagespeed Optimierung zeigen die URLs der Mediendateien auf die CDN-Domain, wobei die Originale immer auf dem Webserver verbleiben. Der Ursprungs-Server muss dementsprechend konfiguriert werden. Wird dann eine referenzierte Datei erstmals von einem Nutzer abgerufen, überträgt der CDN-Stammserver diese an das Netzwerk. Dort werden die Daten intern verteilt und bleiben bis zum Ablauf der Gültigkeitsdauer verfügbar. Seiten, die schnell neue Inhalte veröffentlichen oder sich häufig verändern, sind typisch für Origin Pull. Sollen dabei viele Bilder hochgeladen werden, verringert Origin Pull den Aufwand.

Betreibst du eine Site mit WordPress, solltest du die CDN-Einrichtung mit Cache-Plug-ins wie beispielsweise W3 Total Cache oder WP Super Cache vornehmen. Erweiterungen dieser Art sind bereits für den CDN-Einsatz vorbereitet. Es muss nur noch die URL zu den jeweiligen Anbieter-Servern eingegeben werden.

Komprimiere die Dateien auf deiner Website

Das Komprimieren von HTML-, CSS- sowie JavaScript-Dateien zählt ebenfalls zu den Stellschrauben einer effektiven Pagespeed Optimierung. Webseiten moderner Prägung bestehen häufig aus umfangreichem Code. Dies liegt am mittlerweile üblichen hohen Funktionsumfang und an den umfangreichen Templates und Designs. Dateien mit mehreren Hunderten von Kilobyte an HTML-, CSS- sowie JavaScript-Dateien sind längst keine Seltenheit mehr. Das bedeutet gleichzeitig zahlreiche Serveranfragen in Form von so bezeichneten HTTP-Requests des jeweiligen Webbrowsers. Das Problem dabei: Je höher die Anzahl der Requests ist, desto länger muss eine Website laden. Im Rahmen einer effizienten Pagespeed Optimierung solltest du die Dateien daher minifizieren bzw. komprimieren.

So komprimierst du CSS und JavaScript

Die Kompressionsrate von CSS- und JavaScript-Texten beträgt im Mittelwert rund 70 Prozent. Eine entsprechende Komprimierung von CSS-Scripten (PHP) kannst du dabei ganz einfach realisieren, indem du vor der ersten Ausgabe des Scripts den folgenden Code einfügst: ob_start(‘ob_gzhandler’,xxx. Das xxx ersetzt du durch die Zahlen 1 bis 9. Allerdings solltest du die maximale Komprimierungsstufe nur dann nutzen, wenn du ein Cache-System nutzt und täglich lediglich eine Komprimierung durchführst.

Ansonsten bleibe bei der Pagespeed Optimierung lieber unterhalb der Zahl 7, da die Serverbelastung ansonsten extrem ansteigt. Ist dir die Komprimierung mittels PHP zu mühsam, kannst du alternativ die Komprimierung von CSS und JavaScript auch via .htaccess regeln. Empfehlenswert ist aber auch der Einsatz von speziellen Plugins für die Minifizierung von Plugins. Nutzt du WordPress, sind vor allem diese Plugins für dich interessant:

• Merge + Minify + Refresh
• Fast Velocity Minify
• Autoptimize
• WP Super Minify
• WP Speed of Light

Nutze die gzip-Komprimierung

Mithilfe des Moduls mod_deflate (Apache-Webserver) kannst du über gzip HTML- und CSS-Dateien bis zu 70 Prozent reduzieren. Dadurch verschaffst du deine Website kürzere Ladezeiten. Am einfachsten regelst du das über die .htaccess-Datei. Das funktioniert aber nur dann, wenn das oben genannte Modul auch tatsächlich auf dem Webserver aktiviert ist. Um die Komprimierung dann zu realisieren, musst du die entsprechenden Dateiendungen in der .htaccess-Zeile “” einfügen.

Zudem ist es im Rahmen der Pagespeed Optimierung möglich, die gzip-Komprimierung mit der Skriptsprache PHP umzusetzen. Dafür fügst du den folgenden Code in jede einzelne PHP-Datei (erste Zeile) ein:

Verwende zur Unterstützung spezielle Plugins für die gzip-Komprimierung

Die gzip-Komprimierung kann auch mit Unterstützung von speziellen Plugins umgesetzt werden. In den meisten Fällen basieren derartige Erweiterungen auf PHP, sodass automatisch die erforderlichen PHP-Zeilen in die Dateien eingefügt werden. GZIP Ninja Speed Compression stellt hier beispielsweise für WordPress-Nutzer eine sehr gute Lösung dar. Da die gzip-Komprimierung in den beschriebenen Fällen sehr mühsam und aufwändig ist, bietet sich als Alternativlösung die manuelle Komprimierung an. Führen unsere SEO-Profis diese durch, geht das schneller als bei der PHP-Variante.

Unnötige Weiterleitungen vermeiden

Rufen der Google Bot oder ein echter Besucher eine bestimmte Datei mittels einer URL auf, die wegen fehlender Verfügbarkeit nicht mehr auf dem Webserver abrufbar ist, erscheint in der Regel die Fehler-Meldung 301 bzw. 404. Diese Meldungen verweisen auf eine nicht gefundene Ressource (Dokument, Seite, Bild, Video etc.).

Das passiert zum Beispiel dann, wenn du Inhalte verschiebst, entfernst oder vereinst. Auch eine neue URL-Struktur im Rahmen eines Relaunches sowie ein Server- oder CMS-Umzug führt zu nicht mehr gültigen URLs. In diesen Fällen solltest du eine Weiterleitung (Redirections) einrichten. Dadurch weiß der Server, wo sich die angeforderte Datei aktuell befindet. Neben 301- und 302-Weiterleitungen kommen dabei oftmals auch 303-, 307- und 308-Weiterleitungen zum Einsatz.

Ersetze aufeinanderfolgende Weiterleitungen durch direkte Weiterleitungen

Auch wenn diese Weiterleitungen ein wichtiges SEO-Instrument darstellen, solltest du die Verwendung sorgfältig planen und unnötige Weiterleitungen vermeiden. Denn jede Weiterleitung erhöht gleichzeitig auch die Ladezeit deiner Website. Google akzeptiert nach eigener Aussage diesbezüglich maximal zwei aufeinanderfolgende Redirections.

Alles, was darüber hinausgeht, wird als Weiterleitungskette bezeichnet. Diese Ketten erhöhen die Ladezeit von Seiten. Zudem bricht die gesamte Weiterleitungskette zusammen, wenn nur eine der Weiterleitungen beschädigt ist bzw. ausfällt. Umleitungsfehler verhinderst du durch das Einrichten von direkten Weiterleitungen. Schöner Nebeneffekt dabei: Auf diese Weise lassen sich auch etwaige Backlinks direkt weiterleiten.

Bad Request vermeiden

Greift der Browser nach entsprechenden Anfragen auf fehlerhafte oder gar nicht mehr existierende Dateien zurück, resultieren daraus die so bezeichneten Bad Requests. Das passiert zum Beispiel, wenn du Bilder gelöscht fast, aber die URL noch vorhanden ist. Wird diese aufgerufen, kommt es innerhalb des Browsers zu einer unnötigen Kettenreaktion, die den Pagespeed deiner Website herabsetzt. In diesem Fall liegt ein HTTP-Statuscode 400 Bad Request Fehler vor. Er entsteht

Die sogenannten Bad Requests resultieren aus fehlerhaften oder fehlenden Dateien, auf die der Browser zugreifen will. Wenn du beispielsweise Bilder löschst, die URL aber noch existiert und aufgerufen wird, führt dies zu einer Kettenreaktion innerhalb des Webbrowsers, die die Geschwindigkeit deiner Website herabsetzt.

Diese Ursachen können Bad Request auslösen:

1. URL-String-Syntaxfehler (beispielsweise durch eine falsche URL-Kodierung)
2. Beschädigter Browser-Cache und fehlerhafte bzw. abgelaufene Cookies
3. DNS Lookup Cache (die registrierten DNS-Informationen sind nicht mit den lokal gespeicherten DNS-Daten synchronisiert)
4. Komplexe Dateigrößen (hängt stark mit der Dateigrößenbeschränkung des jeweils genutzten Servers zusammen
5. Allgemeine Serverfehler und -störungen sowie temporäre Probleme

CSS3 für Icons, Buttons, Infografiken und Co. nutzen

Hilfreich bei der Pagespeed Optimierung ist auch CSS3. Das Kürzel CSS steht dabei für “Cascading Style Sheets”. Dieser Ausdruck bezeichnet Formatvorlagen für Internet-Seiten. Prinzipiell werden in HTML die Inhalte der Seiten strukturiert und demgegenüber in CSS entsprechend formatiert. Du kannst via CSS also Schrifttypen sowie -farben, Zeilenabstände und ähnliche Elemente definieren.

Dabei lässt sich ein Layout immer gleich mehreren Seiten zuordnen. Das spart zum einen massig Zeit und reduziert zum anderen den Aufwand. Die neueste Version CSS3 wartet mit einem nochmals erweiterten Funktionsumfang aus und ist prädestiniert für die Gestaltung von Seitenelementen wie Buttons, Icons und Infografiken. Die Bandbreite an Gestaltungsmöglichkeiten reicht von abgerundeten Ecken über mehrere Hintergründe bis hin zu Schlagschatten für Block-Elemente sowie Texte.

Für kurze Ladezeiten: Halte CSS3-Dateien kompakt

Besonders professionell arbeitest du mit externen CSS3-Dateien, die mit den einzelnen HTML-Seiten verknüpft sind. Das unterstützt die strikte Trennung von Layout und Inhalt, was wiederum eine bessere barrierefreie Strukturierung ermöglicht. CSS3 ist dabei bereits funktionell vergleichsweise suchmaschinenfreundlich aufgebaut. Es empfiehlt sich aber, dass du zusätzlich CSS3-Dateien komprimierst, um kurze Ladezeiten zu unterstützen. So solltest du beispielsweise überflüssigen Weißraum eliminieren, die Eigenschaften in einer einzelnen Zeile schreiben und Kommentare sowie leere Zeilen automatisch löschen lassen.

Optimiere den Rendering-Pfad

Bei der Pagespeed Optimierung spielt zudem der kritische Rendering-Pfad eine wichtige Rolle. Mit dem Rendering-Pfad werden alle erforderlichen Prozesse abgebildet, die der Browser durchläuft, bevor die Website komplett angezeigt wird. Verkürzt du diesen Pfad durch Anpassungen und Optimierungen, kann dies die Ladezeit deiner Webseiten sehr positiv beeinflussen.

Pagespeed Optimierung – so optimierst du den Rendering-Pfad

Zu Beginn solltest du immer den kritischen Rendering-Pfad messen und analysieren. Hierfür kannst du Tools wie Navigation Timing API und das von Google entwickelte Lighthouse nutzen. Auf diese Weise erhältst du auch genaue Informationen zu der erforderlichen Anzahl der kritischen Ressourcen. Auf Grundlage dieser Informationen kannst du dann gegebenenfalls die Anzahl der kritischen Ressourcen reduzieren. Dies gelingt dir, indem du Renderblockierungsressourcen verschiebst. Im Detail sind dies die relevantesten Maßnahmen für eine Pagespeed Optimierung im Hinblick auf den Rendering-Pfad:

Seitengeschwindigkeit mit dem async- oder defer-Attribut verbessern

Du kannst den sichtbaren Ladevorgang im Browser durch das Aufschieben nicht unmittelbar erforderlicher Skripte deutlich beschleunigen. Dafür musst du einfach nur Ressourcen wie Skripte und Styles verschieben sowie nachlagern und nachladen. Bei Java-Skripten funktioniert das mithilfe der HTML5-Attribute”async” und “defer”:

Auf den ersten Blick sorgen beide Attribute durch das Aufschieben nicht direkt notwendiger Ressourcen dafür, dass der jeweilige Ladevorgang deutlich schneller abläuft. Trotzdem gibt es dabei einen wesentlichen Unterschied. Dieser liegt in einer unterschiedlichen Ausführungsart der Skripte. Während das Attribut “defer” für eine Abarbeitung der Skripte in zuvor festgelegter Reihenfolge nach dem Laden des DOMs (Document Object Model) steht, ignoriert das Attribut “async” die Reihenfolge der Einbindung und lädt die Skripte direkt nach Beendigung des HTML-Ladevorgangs.

Vorausladen von notwendigen Dateien

Nutze die Möglichkeit, bestimmte Ressourcen wie beispielsweise CSS- und JavaScript-Dateien, Fonts oder Bild-Dateien bereits vorab zu laden. Damit gewährleistest du ihre Verfügbarkeit für ein späteres Rendern von Seiten. Du kannst dich dabei zwischen zwei verschiedenen Möglichkeiten entscheiden:

1. Übermittle die Ressourcen durch den Befehl . Du kannst die Anweisung dabei im HTML Head-Bereich einfügen.

2. Verwende das HTTP/2 Server Push Verfahren, bei dem Daten bereits ausgeliefert werden, bevor sie tatsächlich angefordert werden. Diese Vorgehensweise macht das so bezeichnete Inlining von JavaScript und CSS überflüssig. Realisieren kannst du das bei einem Apache-Server über die .htaccess Datei und einer entsprechenden Codierung realisieren.

Du hast auch die Möglichkeit, Stylesheets asynchron zu laden. Je nach Browser benötigst du dafür zusätzlich ein kleines JavaScript und zum Vorausladen das jeweilige -Element sowie ein Noscript-Fallback.

Kritisches CSS priorisiert laden

Auch CSS-Dateien selbst blockieren als eingebundene Stylesheets das Rendering. Ohne CSS wäre die Darstellung beeinträchtigt, daher kannst du darauf nicht verzichten. Um in diesem Fall das Rendering zu optimieren, solltest du das erforderliche CSS in zwei Teile aufteilen.

1. Teil: Binde das so bezeichnete Critical-CSS (kritisches CSS) inline in das entsprechende HTML-Dokument ein. Hierbei handelt es sich um CSS-Dateien, die im Bereich Above-the-fold für die Darstellung aller Elemente (hier: First Paint) benötigt werden.

2. Teil: Die weiteren Stile sollten auf ein externes Stylesheet ausgelagert werden. Dann blockiert der Ladevorgang nicht das Rendering des kritischen Bereichs.

Auf diese Weise umgehst du auch Fehlermeldungen in der Google Search Console zur Mobilfreundlichkeit. Lädt dein kritisches CSS nicht möglichst schnell, stuft Google dies unter Umständen als mobilunfreundlich ein, obwohl du eigentlich über eine mobilfreundliche Website verfügst.

WebFonts optimiert laden

WebFonts werden genauso wie Websites von einem Server heruntergeladen. Das bedeutet dann zusätzlichen Datentransfer. Es stehen dir mehrere Optimierungsmöglichkeiten zur Verfügung, um den Ladevorgang zu beschleunigen:

• Reduziere Schriftarten und Schriftschnitte.
• Limitiere den Zeichenvorrat auf die von deiner Website maximal genutzten Zeichen. Mithilfe eines Webfont-Generators oder mit Anwendungen wie beispielsweise FontForge, FontLAP oder Fontographer lassen sich die nicht benötigten Zeichen aus dem entsprechenden Zeichensatz löschen.
• Über CSS kannst du den Zeichenvorrat auch nach Unicode extrahieren. Das klappt mithilfe von Programmen wie etwa unicode-range.
• Generiere einen Browser Cache und führe eine Komprimierung (Deflate) via der Konfigurationsdatei .htaccess durch.
• Nutze WOFF 2.0, um schnellere Ladezeiten für Webfonts zu erzielen. Dabei profitierst du von der optimierten Kompression des Formats. So sind die ausgelieferten Dateien bis zu 30 Prozent kleiner und lassen sich dadurch entsprechend schneller übertragen.

Content-visibility einsetzen

Um das Rendern von Webseiten nachhaltig zu beschleunigen, solltest du zudem Content-visibility einsetzen. Hierbei handelt es sich um eine neue CSS-Eigenschaft, die gezielt steuert, ob ein Seitenelement im Browser unsichtbar bleibt oder sichtbar dargestellt wird. Dies funktioniert im Grunde genommen ähnlich wie Lazy Loading. Bei Content-visibility geht es dabei allerdings um ganze HTML-Elemente und nicht nur um Bilder.

Je mehr HTML-Elemente auf einer Website integriert sind, desto voluminöser ist auch das allgemeine Datenaufkommen und der Traffic für den Hoster. Lädt der vom jeweiligen User verwendete Browser alle Elemente voraus, beeinträchtigt dies das Rendering bzw. die Performance deiner Website. Content-visibility verhindert dies und ruft immer lediglich die HTML-Elemente auf, die sich auch tatsächlich im Sichtbereich des Users befinden. Das bringt dir handfeste Vorteile:

• ein um ein Vielfaches beschleunigtes Rendering
• eine deutliche Verbesserung der Performance
• weniger Traffic für den Hostrechner
• mehr Dynamik für deine Website durch den Nachlade-Effekt

HTTP-Request minimieren

Überlege dir ganz genau, wie viele Elemente bzw. Dateien du auf deiner Website platzierst. Denn mit der Anzahl der Website-Dateien steigen gleichzeitig auch die erforderlichen HTTP-Anfragen des von einem User genutzten Browsers. Je höher die Zahl der HTTP-Fragen ist, desto länger dauert der Ladevorgang deiner Website und der entsprechenden Inhalte. Hinzu kommt, dass die Browser immer nur eine bestimmte Anzahl an HTTP-Objekten gleichzeitig abrufen können. Dadurch bilden sich Warteschlangen. Zudem lassen einige Server aus Sicherheitsgründen lediglich 256 HTTP-Requests von Nutzern gleichzeitig zu.

Für potenzielle Website-Besucher ist dies nicht nur störend, sondern oftmals regelrecht frustrierend. Insbesondere bei Mobilgeräten erhöht sich die Wartezeit massiv. Die Konsequenz daraus: Du verlierst bereits im Vorfeld potenzielle Kunden und erleidest einen starken Imageschaden.

Um gegenzusteuern, musst du die HTTP-Requests minimieren. Dabei kannst du folgendermaßen vorgehen:

• Entferne überflüssige Bilder
• Reduziere die Dateigrößen der verwendeten Bilder
• Fasse CSS und JavaScript-Libraries in einer Datei zusammen
• Vereine häufige Buttons, Icons und Navigationselemente zu einem CSS-Sprite
• Nutze Load-Sharing
• Verwende JavaScript asynchron

Allerdings ist seit der Einführung von HTTP/2 die Mindestanzahl an Requests aufgehoben. Darauf solltest du aber trotzdem nicht alleine bauen. Halte daher die Anzahl an Requests grundsätzlich möglichst klein, um die Seitengeschwindigkeit zusätzlich zu optimieren.

EXIF-Daten und Meta-Tags entfernen

Im Wesentlichen transportieren Fotos drei Arten von Metadaten mit jeweils eigenen Datei-Bereichen: EXIF, IPTC und XMP. EXIF-Daten sind beispielsweise Informationen über Zeit und Ort (GPS-Koordinaten), Korrekturfilter, Verarbeitungs-Presets, Verschlusszeit sowie Blendenöffnung. In IPTC-Feldern kannst du dagegen Copyrightinformationen, die Bildunterschrift, den Aufnahmeort oder auch Schlagwörter hinterlegen. Im Rahmen einer Pagespeed Optimierung solltest du auch EXIF-Daten und Meta-Tags entfernen, da diese das Datenvolumen erhöhen.

Für eine entsprechende Bearbeitung stehen dir verschiedene Programme zur Verfügung. Kostenlos erhältlich ist beispielsweise der Betrachter IrfanView, der via Stapelverarbeitung in der Lage ist, nur die Bildbeschreibung oder EXIF- und IPTC-Daten zu löschen. Als Nutzer von Windows kannst du per Klick auf ein markiertes Foto das Menü aufrufen und unter der Rubrik “Details” die Metadaten löschen. Interessant ist auch das Programm “exif Purge”. Ebenfalls kostenlos punktet die Anwendung mit einer gut strukturierten und verständlichen Oberfläche. Zudem lassen sich die EXIF-Daten gleichzeitig bei mehreren Bildern löschen.

Inhalte per AJAX nachladen

Wenn Inhalte von Websites verändert oder nachgeladen werden, ohne dass eine vollständige Neuladung nötig ist, wird dies als AJAX (Asynchronous JavaScript and XML) bezeichnet. Werden Inhalte via AJAX nachgeladen, verbesserst du die Performance deiner Website. Mithilfe von AJAX erzielst du eine asynchrone Datenübertragung zwischen Server und Client. Dabei profitierst du davon, dass Webseiten bei Nutzer-Eingaben nicht mehr komplett neu laden. So bleiben statische Inhalte erhalten und nur veränderliche Informationen müssen gegebenenfalls ergänzt werden. AJAX ermöglicht es, dass jederzeit per JavaScript ein Request gesendet wird. Abhängig vom Ergebnis kann dann nachträglich eine entsprechende DOM-Meldung eingefügt werden. JavaScript sorgt dann dafür, dass auch eine dynamische Manipulation der Website erfolgt. Das bedeutet: JavaScript funktioniert erst dann, wenn die Seite bereits geladen ist. Auf diese Weise kann ein Request an der Server immer ganz nach Bedarf erfolgen, um nachträgliche Daten für die Website anzufordern.

Optimiere zuerst für den mobilen Nutzer

Seit März bewertet Google mit dem Mobile-First-Index nur noch die Informationen und Inhalte, die auf der Mobilversion der Webseite verfügbar sind. Dadurch wird dein Google-Ranking dann auch von der mobilen Version stark beeinflusst. Laut einer aktuellen Studie (https://de.statista.com/statistik/daten/studie/301012/umfrage/marktanteile-der-suchmaschinen-und-marktanteile-mobile-suche/) kommt Google bei der mobilen Suche auf einen Marktanteil von über 97 Prozent.

Eine Pagespeed Optimierung sollte daher immer zuerst für die mobile Nutzung realisiert werden.
Enorm wichtig ist dabei insbesondere eine bedienungsfreundliche Oberfläche, bei der das Layout in optimaler Form an die Bildschirmoberfläche angepasst wird. Alle Inhalte müssen so angezeigt werden, dass die User nicht viel scrollen oder zoomen müssen. Auch Responsive Webdesigns stellen wesentliche Erfolgsfaktoren dar. Sie gewährleisten die automatische Anpassung des Contents auf die jeweilige Bildschirmgröße, ohne dass sich die URL und der HTML-Code ändern.

Wie optimiere ich die Core Web Vitals?

Google stellte im Mai 2020 offiziell die Core Web Vitals vor. Es handelt sich hierbei um bestimmte Metriken, anhand derer die User Experience von Webseiten beurteilt werden kann. Die Ergebnisse lassen sich beispielsweise in der Google Search Console abrufen. Im Fokus stehen dabei die drei Werte LCP (Largest Contentful Paint), FID (First Input Delay) und CLS (Cumulative Layout Shift). Für die Pagespeed Optimierung ergeben sich dadurch neue Möglichkeiten.

Grundsätzlich lassen sich die Metriken lassen in zwei Teilbereiche aufgliedern:

1. Labor-Daten: Diese werden in einer fest fixierten technischen Umgebung (Gerät, CPU sowie Verbindungsgeschwindigkeit) gemessen. Mit diesen Werten befassen sich LCP und CLS.

2. Feld-Daten: Hier geht es um Daten, die von Google über den Chrome Browser gesammelt werden. Der FID-Wert stellt hier eine entscheidende Metrik dar.

Um die Werte zu messen, kannst du verschiedene Tools nutzen:

• PageSpeed Insights
• Lighthouse
• Chrome UX Report
• Search Console
• Chrome DevTools
• Web Vitals Extension

Gezielte Optimierung der einzelnen Werte

Im Folgenden stellen wir dir konkrete Maßnahmen vor, mit denen du die Core Web Vitals optimieren kannst und damit die einzelnen Messwerte verbesserst.

1. So optimierst du LCP

– Langsame Server-Antwortzeiten optimieren

Um langsame Server-Antwortzeiten zu optimieren, musst du darauf achten, dass der Server technologisch auf dem neuesten Stand ist. Eventuell gibt es diesbezüglich auch noch Möglichkeiten, die Server-Performance zu verbessern. Achte zudem darauf, dass der Server-Standort nahe bei den Nutzern ist. Statische Inhalte wie Bilder, CSS und JS müssen immer mit den richtigen Caching-Angaben ausgeliefert werden. Eventuell können auch HTML-Seiten gecacht werden. Zudem solltest du frühzeitig Domains für 3rd-party Skripte verbinden.

– Render-Blockierung von CSS und JavaScript umgehen

Für die Pagespeed Optimierung ist diesbezüglich wichtig, dass du die für den direkten Seitenaufbau relevanten JavaScript-Dateien so spät wie möglichst lädst. Bestenfalls platzierst du die Dateien am Fuß der Seite. Bei der entsprechenden Einbindung nutzt du dann defer und async. Ganz wichtig ist auch die Komprimierung der Dateien, um das Datenvolumen zu reduzieren.

– Client-seitiges Rendering optimieren

Du solltest es auf jeden Fall vermeiden, dass Seiten im Browser mit JavaScript gerendert werden. Daher ist es wichtig, einen weit vorgerenderten HTML-DOM auszuliefern.

– Langsame Ladezeiten der Ressourcen verbessern

Zur Auslieferung von statischen Inhalten rundum Bilder, CSS und JS solltest du idealerweise CDN-Server nutzen.

2. So optimierst du FID – die wichtigsten Maßnahmen

– Die Reaktionszeit deiner Website auf Nutzer-Eingaben verkürzen

Hier gibt es ein Problem. FID liegen lediglich als Feld-Daten aus dem Chrome UX Report vor. Weiche daher alternativ auf den TBT-Wert (Total Blocking Time) aus. JavaScript Tasks sollten eine Laufzeit von unter 50 Millisekunden aufweisen. Liegt die Laufzeit über diesem Wert, musst du sie entsprechend reduzieren. Zudem solltest du Code-Splitting sowie async oder defer nutzen. Mithilfe dieser Funktionen verschiebst du unkritische Java-Skripte. Dazu zählen auch Skripte von Drittanbietern.

3. So optimierst du CLS – die wichtigsten Maßnahmen

• Doppelte Überprüfung sichern

Eigentlich lässt sich CSL am effektivsten in den Chrome DevTools kontrollieren. Um die Maßnahmen aber zusätzlich überprüfen zu können, solltest du auch auf Daten aus dem Chrome UX Report zurückgreifen.

– Wichtigste Maßnahmen (teilweise auch von Google selbst empfohlen)

Ob Iframes, Bilder oder Anzeigen – füge stets die jeweiligen Dimensionen hinzu. Achte darauf, dass sich im oberen Seitenbereich keine dynamisch eingefügten Inhalte befinden. Bettest du deine Web-Schriften ein, füge stets die Angabe swap hinzu. Gleiches gilt für CSS-Anweisungen. Hier solltest du die Angabe font-display hinzufügen. Auf diese Weise verhinderst du die Effekte FOIT/FOUT. Lass bestenfalls erst dann die auf eine Netzwerkantwort wartenden JavaScript-Aktionen zu, wenn der DOM aktualisiert wurde.

Pagespeed Optimierung – mit woogency(C) erreicht du den höchsten Level

Wenn du den Text aufmerksam gelesen hast, weißt du, wie komplex eine Pagespeed Optimierung ist. Stell dich aber auch darauf ein, dass die Optimierung eigentlich nie aufhört. Das ist zum einen eine echte Herausforderung, zum anderen aber auch spannend.

Jede noch so kleine Änderung kann die Werte bzw. den Pagespeed beeinflussen. Allerdings nicht nur positiv. Bewegst du die falschen Stellschrauben, sind jederzeit auch negative Auswirkungen möglich. Der Teufel liegt sozusagen im Detail. Um sämtliche Bereiche deiner Website im Hinblick auf den Pagespeed zu optimieren, sind fundierte Kenntnisse und auch praktische Erfahrungen unabdingbar.

Als langjährig aktive und praxisorientierte WooCommerce-Agentur besitzen wir von woogency(C) das erforderliche Know-how, die erforderliche Expertise und die optimalen Skills, um deine Seite in den Formel 1 Modus zu hieven. Davon kannst du dich jederzeit selbst überzeugen.

 

FAQs

Warum ist die Pagespeed Optimierung so wichtig?

Zahlreiche Messwerte und Bewertungskriterien von Google und Co. hängen mit dem Pagespeed zusammen. Zudem profitierst du von schnellen Ladezeiten in Form von geringeren Absprungraten und einer höheren Conversion Rate. Dein LearnDash Pagespeed ich ebenfalls wichtig.

Was sind die Kosten einer professionellen Pagespeed Optimierung?

Das ist pauschal nicht zu beantworten. Jede Pagespeed Optimierung hat einen individuellen Charakter. Die Kosten für die Pagespeed Optimierung deiner Website ermittelt woogency(C) gezielt auf deine Anfrage.