PageSpeed- und Ladezeit-Optimierung
Analyse, Beratung und Umsetzung vom SEO-Freelancer
Die Geschwindigkeit einer Website hat eine immense Auswirkung auf die User Experience und damit auch auf die Zielerreichung der Website, beispielsweise die Anzahl der Verkäufe in einem Online-Shop. Die Optimierung von Ladezeiten sollte in erster Linie für den Nutzer erfolgen. Eine halbe Sekunde mehr oder weniger macht dabei bereits einen erheblichen Unterschied. Doch auch hinsichtlich der Rankings in der organischen Google-Suche profitiert man von einer möglichst schnellen Website-Ladezeit.
Als Suchmaschinenoptimierer und Web-Entwickler decke ich mit einer umfassenden Analyse der Ladezeiten bei jeder Website unabhängig vom Content Management System die Schwachstellen auf und kann die Spezifikation der Optimierungsmaßnahmen für die umsetzenden Entwickler übernehmen. Ich arbeite in agilen Scrum Teams mit Ticketsystemen, wie beispielsweise Atlassian Jira und Confluence und bin selbst auch als Scrum Master und Product Owner zertifiziert.
WordPress-Ladezeiten verbessern
Für das CMS WordPress kann ich als Web Entwickler ebenfalls die Umsetzung der Optimierungsmaßnahmen für eine schnelle Ladezeit eigenständig übernehmen.
Wie hoch ist der Aufwand für die Verringerung von Website-Ladezeiten?
Der Aufwand für die Optimierung von Website-Ladezeiten richtet sich nach dem Umfang der zu optimierenden Website (Anzahl untersch. Seiten und Seitentypen) und nach dem jeweiligen Optimierungsgrad zu Beginn des Projekts. Ich verschaffe mir gerne kostenlos einen Kurzüberblick, um Ihnen eine ungefähre Aufwandsschätzung geben zu können.
Core Web Vitals – Optimierung der User Experience (UX)
Seit einiger Zeit beinhaltet die Google PageSpeed Analyse auch Faktoren zur Bewertung der User Experience (UX), welche in den Google PageSpeed Score einfließen und die Optimierung somit noch einmal schwieriger gemacht haben. Gemessen wird jeweils mobil.
Gemessen werden die folgenden Faktoren:
Cumulative Layout Shift (CLS)
Layoutverschiebungen beim Ladevorgang der Seite (Ruckeln): Häufig, wenn beispielsweise Werbebanner oder Bilder laden und keine festen Dimensionen im Code definiert sind. Auch Cookie Banner sind manchmal Auslöser für Verschiebungen im Layout der Seite. Der Wert darf bei maximal 0,1 liegen.
Total Blocking Time (TBT)
Die Gesamtzeit, in der eine Webseite nicht auf Benutzereingaben wie Mausklicks, Bildschirmberührungen oder Tastatureingaben reagieren kann. Maximal 200 ms darf die TBT betragen.
Speed Index
Der Geschwindigkeitsindex misst, wie schnell der Inhalt während des Ladens der Seite visuell dargestellt wird. Lighthouse nimmt ein Video vom Laden der Seite im Browser auf und berechnet den visuellen Verlauf zwischen den Frames. Anschließend ermittelt Lighthouse den Speed Index. Der Speed Index darf bei maximal 3,4 Sekunden liegen.
Largest Contentful Paint (LCP)
LCP misst, wann das größte Inhaltselement im Darstellungsbereich auf dem Bildschirm gerendert wird. Der LCP darf maximal 2,5 Sekunden dauern.
Time To Interactive (TTI)
Die Messung der TTI ist wichtig, weil einige Websites die Sichtbarkeit der Inhalte auf Kosten der Interaktivität optimieren. Dies kann zu einer schlechten Benutzererfahrung führen: Die Website scheint bereit zu sein, aber wenn der Nutzer versucht, mit ihr zu interagieren, passiert nichts. Höchstens 3,8 Sekunden darf die TTI betragen.
First Contentful Paint (FCP)
Der FCP misst, wie lange der Browser braucht, um das erste Stück HTML-DOM-Inhalt zu rendern, nachdem ein Benutzer zu der Seite navigiert hat. Maximal 1,8 Sekunden darf der FCP dauern.
Optimierungspotenziale für die Website-Performance
Tipps zur Verbsserung der Website-Performance, des Google PageSpeed Scores und der Core Web Vital Werte:
- Komprimierung, Zusammenfassung und Auslagerung von JavaScript- und CSS-Code
- Entfernung nicht verwendeter Scripte
- Bereitstellung von Ressourcen (CSS, JS) für versch. Seitentypen/Templates
- Critical Path CSS für den sofort sichtbaren Bereich der Seite bereitstellen
- Render-Blocking JS und CSS eliminieren
- HTML-Komprimierung aktivieren und HTML-Kommentare entfernen
- HTML-DOM optimieren, tiefe Verschachtelung von Elementen vermeiden
- Asynchrones Laden von JavaScript-Code (async / defer)
- Nutzung des HTTP/2-Protokolls, um mehr Ressourcen parallel laden zu können
- Website-Caching aktivieren
- Browser-Caching nutzen
- GZIP Komprimierung verwenden
- Bilder komprimieren
- Bild-Dimensionierung (Bereitstellung von Bilder
- Bild-Größenangaben für alle Bilder setzen
- WebP-Format für Bilder und Fallback auf dem Server bereitstellen
- Lazy Loading für Bilder, Videos und Iframes
- Video-Formate für animierte Inhalte bereitstellen
- Text-Sichtbarkeit während des Ladevorgang
- Passive Listener verwenden
- Externe Scripte reduzieren
Nutzen einer schnellen Website-Ladezeit
✔️ Nutzererfahrung: Verbesserung der User Experience
✔️ Nutzerbindung: Verringerung der Absprungrate
✔️ Geschwindigkeit verkauft: Umsatzsteigerung
✔️ SEO Erfolg: Verbesserung der Google-Rankings
✔️ Senkung der Betriebskosten für den Server
Google PageSpeed Optimierung
Der Google PageSpeed Score ist ein Google Ranking Faktor zur Bewertung von Websites. Einen guten Mobile Score erzielt man ab einem Wert von 90/100.
Wie aufwändig die Optimierung der Ladezeiten auf einen solch guten Score ist hängt von vielen Faktoren ab, beispielsweise: Server-Hardware, Anzahl und Medien-Format der Seiten-Elemente (Texte, Bilder, Videos), Anzahl extern eingebundener Scripte und vieler weiterer.
Der Google PageSpeed Score wird fälschlicherweise häufiger mit der Ladezeit gleich gesetzt. Diese wird allerdings in Sekunden gemessen und muss bei der Performance-Optimierung ebenfalls Berücksichtigung finden. Die eigentliche Ladezeit kann teilweise weit von den Werten des Google PageSpeed Score abweichen.
Tools zur Messung und Optimierung der Ladezeiten
Für die Analyse, Messung und Optimierung der Ladezeiten, des Google PageSpeed Scores und der Core Web Vitals nutze ich gängige frei verfügbare Tools, wie Google Page Speed Insights, Google Search Console, webpagetest.org und gtmetrix.com.
- Philipp Wolff ★★★★★ vor einem Jahr Christian hilft uns dabei unsere Internetpräsenz aufzubauen. Er ist extrem engagiert und hat es innerhalb … mehr lesen kürzester Zeit geschafft unseren Bekanntheitsgrad zu erhöhen. Das merkt man vor allem durch die steigende Zahl an Interessenten. SEO ist so eine Sache für ich. Christian hat sie für uns greifbar gemacht. Vielen Dank. Ich sehe sehr positiv in die Zukunft, was diese Kooperation angeht 😉
- Stefan Büttner ★★★★★ vor einem Jahr SEO-technisch arbeite ich seit vielen Jahren mit Christian zusammen. Für mich gibt es keine Alternative … mehr lesen - definitiv eine klare Empfehlung!!
- Dr. Alexander Georgi ★★★★★ vor einem Jahr
- Sarah Lauer ★★★★★ vor einem Jahr Wer auf der Suche nach einem professionellen SEO Consultant ist, ist bei Christian genau richtig! Ich … mehr lesen fühle mich super aufgehoben!
📞 Telefon: 0162 / 75 060 34
🕗 Mo-Fr von 09:00 bis 18:00 Uhr
Google PageSpeed Score verbessern: Ressourcen bei Nutzerinteraktion nachladen
Einen guten Google PageSpeed Score (Mobile: >= 90) zu erzielen kann mitunter herausfordernd sein. Häufig ist es insbesondere durch die Einbindung vieler JavaScript-Dateien sehr schwierig. […]
Google Maps: HTTP-Requests deutlich reduzieren
Die Problematik Die Einbindung von Google Maps Karten verursacht leider viele Anfragen/Requests, wie man auf der folgenden Abbildung aus dem Tool webpagetest.org gut sehen kann: […]
Render-Blocking jquery.js eliminieren
Während der Ladezeit- und Google PageSpeed Score-Optimierung tritt mitunter immer wieder das folgende Problem auf: Die Datei „jquery.js“ blockiert das Rendering der Seite Alle anderen […]