PageSpeed Optimierung

PageSpeed Optimierung: Mit Pagespeed Insights das Google Ranking verbessern. Erfahren Sie wie wir mit PageSpeed Optimierung und optimalen Ladezeiten der Website Ihr Ranking optimieren.

PageSpeed Optimierung ist Teil der Suchmaschinenoptimierung (SEO), genauer: der Onpage Optimierung. PageSpeed ist ein Ranking Faktor im Algorithmus der Google Suche. Ebenso von Bedeutung die Anzahl an Crawlern die von Google Spidern  in der Lage sein, mehr Seiten in der vorgegebenen Zeit zu crawlen, die für das Crawlen Ihrer Website zur Verfügung steht. Tatsächlich zeigen aktuelle Daten, dass 50% der Nutzer erwarten, dass eine Website in weniger als 2 Sekunden geladen wird. Die Recherche zeigt auch, dass jede zusätzliche Sekunde der PageSpeed Ihre Conversions um bis zu 20% senken können.

Page Speed ist ein wichtiges Instrument des Online Marketing. Unter Page Speed versteht man die Ladezeit oder die Performance der Website. Ziel einer Website ist es, möglichst hohe Conversionrate zu erlangen und somit hat Page Speed Einfluss auf den Umsatz, wenn die Website oder Online Shop beispielsweise einem gewinnorientierten Unternehmen zugehörig ist. Darum ist es besonders wichtig, dass Ladezeit der Website so kurz wie möglich ausfällt um neue Besucher nicht zu verlieren. Nichts ist mehr frustrierend für einen User als lange Ladezeiten und die Folge ist, dass der User einfach abspringt. So wird mühevoll erarbeiteter Content niemals gelesen, oder Online-Käufe werden nicht getätigt. Darüber hinaus ist die Ladegeschwindigkeit eines von vielen der dynamischen Ranking-Faktoren. Somit würde die Website beim Abspringen des Users an Relevanz verlieren. Page Speed Optimierung ist ein eines von vielen Maßnahmen der OnPage-Optimierung, und diese wiederum ist ein Teil der Suchmaschinenoptimierung (SEO). Der Begriff PageSpeed hat sich durch Google etabliert.

In Zeiten von Brandbandverfügbarkeit sind Ladezeiten von mehr als drei Sekunden nicht hinnehmbar.

Mit PageSpeed Insights die Ladezeit analysieren

Wir empfehlen mit PageSpeed Insights oder webpagetest.org – einen Test durchführen, der die Website Ladezeit analysiert und die Ergebnisse in einer leicht verständlichen Grafik anzeigt. Wenn Sie Ihre Website gegen Mitbewerber testen, können Sie mehrere PageSpeed gleichzeitig ausführen, um zu sehen, wie sie im Vergleich dazu abschneiden. Es gibt drei wichtige Faktoren, die Sie beachten müssen, um den PageSpeed im Auge zu behalten.

  1. Sie müssen auf „time to first byte“ achten, oder wie lange es dauert, bis der Server auf die erste Informationsanfrage reagiert.
  2. Als nächstes möchten Sie sich die gesamte Ladezeit für die Seite ansehen, oder wie lange es dauert, bis alle Seitenelemente vollständig heruntergeladen sind.
  3. Schließlich müssen Sie sich die gesamte Renderzeit ansehen – wie lange es dauert, alles herunterzuladen, was für die Seite benötigt wird, und es bis zur visuellen Fertigstellung zu rendern.

Wenn Sie Probleme mit Ladezeiten haben, müssen Sie feststellen, was die Ursache für die langsame PageSpeed ist. Wenn Sie eine langsame Reaktionszeit haben oder statische Objekte langsam heruntergeladen werden, müssen Sie sich mit der Verbesserung Ihres Cachings oder der Verwendung eines Content Delivery Network befassen. Wenn dynamische Seiten langsam geladen werden, werfen Sie einen Blick auf den Seitencode. Wenn Sie ein Problem mit Ihrer visuellen Render PageSpeed haben, werfen Sie einen Blick auf die externen Ressourcen. Oftmals können Plugins oder Ressourcen von Drittanbietern Ihre Website drastisch verlangsamen.

PageSpeed Insights:

  • Ressourcen beseitigen, die das Rendering blockieren
  • Bilder richtig dimensionieren
  • Nicht sichtbare Bilder aufschieben
  • CSS komprimieren
  • JavaScript komprimieren
  • Nicht verwendete CSS entfernen (Mögliche Einsparung von 12 KB)
  • Bilder effizient codieren
  • Bilder in modernen Formaten bereitstellen (Mögliche Einsparung von 14 KB)
  • Textkomprimierung aktivieren (Mögliche Einsparung von 6 KB)
  • Vorverbindung zu erforderlichen Ursprüngen aufbauen
  • Mehrere Weiterleitungen auf die Seite vermeiden
  • Wichtige Anforderungen vorab laden
  • Videoformate für animierte Inhalte verwenden
  • Vermeidet sehr große Netzwerknutzlasten (Die Gesamtgröße war 231 KB)
  • Verwendet eine effiziente Cache-Richtlinie für statische Inhalte 1 Ressource gefunden
  • Vermeidet eine übermäßige DOM-Größe 353 Elemente
  • Markierungen und Messungen für das Nutzertiming
  • JavaScript-Ausführungszeit 0,6 s
  • Nutzung von Drittanbieter-Code (Code von Drittanbietern hat den Hauptthread 80 ms lang blockiert)

PageSpeed Optimierung

PageSpeed Insights ist ein hilfreiches Werkzeug wenn es um die Einschätzung Ihrer Website geht. Obwohl es die tatsächliche PageSpeed nicht wie webpagetest.org benotet, analysiert es Ihre Website nach den gängigen Best Practices und bietet Vorschläge zur PageSpeed Optimierung. Der PageSpeed ist das erste, was Sie bemerken, wenn Sie eine Website besuchen – wenn die Website zu langsam ist. Der PageSpeed ist ein großer Teil der Benutzererfahrung, so ist es kein Wunder, dass sie offiziell zu einem Ranking-Faktor für mobile Suchanfragen geworden ist und seit langem für den Desktop gilt.

Zahlreiche Beiträge über den Zusammenhang zwischen PageSpeed Optimierung und Bounce-Raten sind zu einigen eher alarmierenden Schlussfolgerungen gekommen: Jede Millisekunde zählt. Mit unserer neuen Website Performance Research wollten wir die beängstigende Statistik um einen Silberstreifen erweitern und beweisen, dass es viel Raum für Verbesserungen in der Performance Ihrer Website gibt.

Wenn es um die Pagespeed Optimierung der Website geht, zeigen wir Ihnen, was die wichtigsten Fehler sind und welche von ihnen diese besondere Aufmerksamkeit erfordern, damit Sie den Prozess der Behebung priorisieren können.

82% Websites mit Ladezeit Problemen

Überraschenderweise ist es für uns das erste Mal, dass wir gesehen haben, dass satte 82% der analysierten Websites Probleme haben, die ihre Leistung erheblich beeinträchtigen. Dies macht Performance Probleme zu den häufigsten auf Websites. Darüber hinaus hatten 44% der analysierten Websites mindestens ein kritisches Problem (gemäß unserer Schweregradklassifizierung für das Site Audit). Positiv zu vermerken ist, dass die Mehrheit der Websites, die Leistungsprobleme haben, diese durch einfache Pagespeed Optimierung und einfache Serverkonfiguration verbessern können. Wir werden uns nun genauer mit den von uns gefundenen Problemen befassen und einige der bewährten Wege zu ihrer Beseitigung vorschlagen.

Probleme bei Website Performance

Wir hoffen, dass diese Daten Ihnen helfen, Ihre Arbeit zu priorisieren und die Anzahl und Schwere der Probleme, die auf Ihrer Website auftreten besser einschätzen. Lassen Sie uns nun einen Blick auf den LadeProzess der Lösung dieser Probleme werfen. Um es einfach zu halten, werden wir unsere Empfehlungen in drei Gruppen unterteilen:

  • Seitengröße verkleinern
  • Steigern der Serverleistung
  • Umleitungen bereinigen

Beginnen wir mit einem einfachen. Redirect-Ketten und Schleifen sind klassische Probleme, die Probleme mit der Website-Leistung verursachen. Wenn Sie die Geduld Ihrer Benutzer mit Redirect-Ketten nicht testen wollen, versuchen Sie, diese zu vermeiden. Außerdem verwirren Redirect-Ketten Bots; ihr Crawling-Budget ist begrenzt, und mit jedem Redirect verliert Ihre Seite ein wenig von ihrem ursprünglichen Rang. Wenn eine Seite 3 oder mehr URLs oder eine Schleife enthält, wird sie als fehlerhaft gekennzeichnet.

Glücklicherweise hatten nur 7% der analysierten Websites dieses Problem, so unsere Studie. Umleitungen von einer Seite zur anderen sind jedoch oft notwendig, wenn es darum geht, eine Website umzubenennen oder umzubenennen, sie auf HTTPS zu migrieren, doppelte Seiten (z.B. „www“ und „non-wwww“ Versionen) zu reduzieren und in vielen anderen Fällen.

Seitengröße optimieren

Je größer und komplexer die Seite und je mehr Ressourcen sie enthält, desto länger dauert das Laden. Es ist wichtig sicherzustellen, dass Ihre Seitengröße sowie die Gesamtgröße von JS- und CSS-Dateien (Transfergröße) 2 MB nicht übersteigt.

In einem Technical Site Audit gilt alles über 2 MB als zu viel und schwer und führt zu einem Fehlern. Auch wenn 2 MB ausreichen, damit eine Seite ihr Leben in vollen Zügen genießen kann, hatten 1% der analysierten Websites noch dieses Problem. Wenn Sie sich unter den 1% befinden, empfehlen wir Ihnen, Ihre Seite auf eine Diät zu setzen und ihre Größe mindestens unter 2MB zu halten.

Auflösung von Bilder und Videos optimieren

Bilder und Videos machen den größten Teil des Gewichts einer Seite aus, das sollte also Ihr Ausgangspunkt sein. Wenn Sie das Format, die Auflösung oder die Qualität Ihrer visuellen Inhalte ändern, kann die Seite erheblich verkleinert werden. Beginnen Sie, indem Sie sich fragen, ob diese Bilder einen echten Wert haben und denken Sie daran, dass manchmal weniger mehr ist.

JavaScript und CSS optimieren

Unsere Recherche ergab, dass 68% der Websites mit unminifizierten JavaScript- und CSS-Dateien enttäuschend waren. Durch die Anpassung Ihrer JavaScript- und CSS-Dateien (Entfernen unnötiger Zeilen, Leerzeichen und Kommentare aus dem Quellcode) reduzieren Sie die Größe Ihrer Ressourcen und damit deren Ladezeit, bieten eine bessere Benutzerfreundlichkeit und verbessern Ihre Suchmaschinenrankings.

  • – JSMin und YUI Compressor. Der YUI-Kompressor kann auch CSS minimieren. Closure Compiler ist ein weiteres praktisches Tool, das Ihr JavaScript analysiert, analysiert, toten Code entfernt und den Rest neu schreibt und minimiert. Die Verdunkelung ist eine weitere Methode der Größenreduzierung, die etwas effektiver ist als die Verkleinerung, obwohl sie aufgrund des Verdunkelungsschritts selbst etwas riskanter ist, Fehler zu erzeugen.

Browser-Caching effizient nutzen

Wenn Sie das Browser-Caching für JavaScript- und CSS-Dateien aktivieren, können Browser die Ressourcen Ihrer Seite speichern und wiederverwenden, ohne sie bei der Anforderung Ihrer Seite erneut herunterladen zu müssen. Auf diese Weise lädt der Browser weniger Daten herunter, was die Ladezeit Ihrer Seite verkürzt. Insgesamt könnte durch diese einfache Lösung bis zu einem Viertel der untersuchten Websites eine deutlich bessere PageSpeed erzielen.

Site Audit

Der Site Audit liefert Ihnen statistische Grafiken, um ein allgemeines Gefühl für die technischen Probleme Ihrer Website zu bekommen; seine Tooltips erklären, worum es bei jedem Problem geht und wie Sie es beheben können. Die Liste der Probleme ist nach Schweregrad in Fehler, Warnungen und Hinweise unterteilt; sie sollten, die kritischsten Fehler zuerst zu beheben. Mit dem Leistungsbericht können Sie auch Ihr Google Analytics-Konto verbinden, um weitere Informationen über die Benutzerfreundlichkeit zu erhalten (Google Analytics Avg Page Interactive Time):

Testen Sie bestimmte Teile Ihrer Website, verwenden Sie thematische Berichte und folgen Sie unseren Empfehlungen, um Ihre Ressourcen zu schonen und mit geringstem Aufwand die besten Ergebnisse zu erzielen.

Das Technical Site Audit markiert eine Seite nur dann als „Zu viele JavaScript- und CSS-Dateien“, wenn sie mehr als 100 Ressourcen enthält, und das ist ziemlich viel. Dennoch stellte sich heraus, dass 1% der analysierten Websites zu viele JavaScript- und CSS-Dateien haben! Achten Sie darauf, dass Sie Ihre Seite nicht mit JavaScript- und CSS-Dateien überladen. Im Allgemeinen gilt: Je weniger Anfragen Sie erhalten, desto besser. Wenn Sie diese Zahl also unter 100 halten, sind Sie auf der sicheren Seite. Erwägen Sie auch, mehrere CSS- und JS-Dateien in einzelne Dateien zusammenzuführen, um den Ladevorgang zu beschleunigen.

Server Performance optimieren

Einer der Gründe für langsame Ladezeiten ist offensichtlich eine große HTML-Seite. Wie wir jedoch herausgefunden haben, stellte sich heraus, dass nur 1% der analysierten Websites eine große HTML-Seitengröße hatten. Woher kommen also die anderen 42% der Probleme mit der langsamen PageSpeed? Sehr oft ist dies auf Serverprobleme zurückzuführen.

Wenn es dem Webserver an Effizienz mangelt, wird die Website, auf die Sie zugreifen möchten, ebenfalls langsam geladen. Sie müssen Ihren Hosting-Service und das bereitgestellte Paket überprüfen; wenn es unzureichend ist, wechseln Sie den Provider oder überlegen Sie, einen dedizierten Server zu installieren. Erfahren Sie hier mehr über die Faktoren, die zu einem schnellen Hosting-Paket beitragen.

PageSpeed Optimierung für Mobile Websites

PageSpeed Optimierung für Mobile Websites ist noch kritischer. Think with Google hilft Ihnen zu schätzen, wie sich die PageSpeed Optimierung Ihrer Website auf Ihre Einnahmen auswirken könnte.

Es gibt andere Faktoren, die die Reaktion Ihres Servers verlangsamen können, wie z.B. langsame Anwendungslogik, langsame Datenbankabfragen, langsames Routing, Frameworks, Bibliotheken, Ressourcen-CPU-Hunger oder Speicherausfall. Verwenden Sie diese Empfehlungen von Google Developers, wie Sie mit diesen Problemen umgehen und die Antwortzeit des Servers verbessern können.

Wie unsere Recherche zeigt, haben 25% der analysierten Websites uncached Javascript- und CSS-Dateien. Dieses Problem wird ausgelöst, wenn das Browser-Caching nicht im Antwortkopf angegeben ist. Einfach ausgedrückt, wenn Sie das Browser-Caching nicht aktivieren, werden die Benutzer bei jedem Besuch Ihrer Seite dieselben Dateien herunterladen.

PageSpeed Optimierung Best Practices

Es gibt viele Faktoren, die sich zu der späteren PageSpeed addieren, und der manuelle Umgang mit allen von ihnen ist eine unerträgliche Aufgabe, aber Sie können sich immer an spezialisierte Tools wenden. Google’s PageSpeed Insights ist ein großartiger Einstieg; es ist kostenlos, funktional und bietet Berichte für mobile und Desktop-Versionen Ihrer Website.

Google verwendet ausschließlich Daten von Google Chrome-Nutzer um festzustellen, ob sie schnell, langsam oder durchschnittlich in Bezug auf die Ladezeit des PageSpeed ist. Für langsame und durchschnittliche Webseiten erhalten Sie Vorschläge zur PageSpeed Optimierung, die eine Liste von Best Practices zur Beschleunigung des Webseite darstellen. Diese Liste ist definitiv einen Blick wert, obwohl sie mit einem Körnchen Salz genommen werden sollte; die Jagd nach der perfekten Punktzahl könnte dazu führen, dass Sie Ihre Zeit verschwenden und eine schlechte Benutzererfahrung schaffen.

Page Speed Tipps

Es gibt viele Ursachen und Gründe für langsame PageSpeeds. Wichtig ist es diese nicht zu ignorieren, sondern dort anzuknüpfen um die Performance der Website zu verbessern. Als Webdesign Agentur möchten wir Ihnen folgende Tipps mit auf dem Weg geben:

  • CSS-, HTML- und JavaScript-Dateien, die größer sind als 150Bytes sind, sollten unbedingt komprimiert werden
  • Valider und schlanker Code: Code-Fehler vermeiden, da solche sich negativ auf das Page Speed auswirken; Code sollte nur das Nötigste beinhalten
  • CSS in externe Datei anlegen, aber:
  • Den relevanten Teil von CSS im <Head>-Bereich einbauen; Vorteil: Der Teil der Website, das dem User angezeigt wird, lädt schneller und der Rest kann auch später geladen werden
  • Bilder und Grafiken sollten mit Tools wie Photoshop komprimiert werden
  • JPEG-Dateien als „Progressive“ statt „Baseline“ anlegen. Vorteil: Bild wird direkt angezeigt, es erhöht nur noch seine Schärfe
  • der Browser sollte Caching nutzen: Dateien bzw. Ressourcen, die sich kaum verändern, sollten „cachebar“ sein; Vorteil: Datei muss nach einigen Tagen neu abgerufen werden, bis dahin bleibt es im Cache gespeichert
  • Asynchrones JavaScript: Beim <script>-Tag das Attribut „defer“ und „async“ verwenden. „defer“ sagt dem Browser, dass der Inhalt erst nach dem Rest geladen werden soll; „async“ sagt dem Browser, dass der Code parallel mit dem Rest geladen werden soll, so behindern sich die Scripte nicht beim Seitenaufbau
  • zudem sollte die Wahl auf einen schnellen Server gefällt werden

Wenn wir eine Website betreuen, achten wir ganz besonders auf Page Speed Performance und selbstverständlich auch auf andere OnPage-Optimierungen.

Links: PageSpeed Optimierung

developers.google.com/speed/pagespeed/insights

tools.pingdom.com

webpagetest.org

Why Performance Matters by Google’s Web Fundamentals

Optimizing Content Efficiency by Google’s Web Fundamentals

Best Practices for Speeding Up Your Web Site by Yahoo

Tips for Authoring Fast-Loading HTML Pages by Mozilla

11 Tips to Optimize JavaScript And Improve Website Loading and Rendering Speeds