Google PageSpeed

Übersicht

Wir haben die auf der Plattform veröffentlichen Websites so optimiert, dass sie beim Google PageSpeed-Test einen hohen Wert erreichen. Bei diesem Test werden viele technische Aspekte hinsichtlich des Aufbaus von Webseiten bewertet und es wird überprüft, ob diese bewährten Methoden zum schnellen Laden von Websites entsprechen. Bei der wichtigsten Überprüfung des PageSpeed-Tests wird die Code-Struktur der Website analysiert. Google überprüft dabei, ob der Code so strukturiert ist, dass der Browser die Inhalte so schnell wie möglich lädt.

Warum wir Websites auf diesen Test hin optimieren

Wir sind der Meinung, dass die Geschwindigkeit von Websites zur Zeit zu den größten Herausforderungen im Internet gehört. Langsam ladende Websites weisen eine höhere Absprungrate sowie ein geringeres Customer Engagement auf und lassen das gesamte Internet langsam erscheinen. Uns ist bewusst, dass Websites mit schneller Reaktionszeit für Besucher attraktiv sind, da sie durch ein besseres Browsingverhalten punkten.

Warum Google dieses Tool entwickelt hat

Das PageSpeed-Tool wurde entwickelt, weil Google festgestellt hat, dass viele Websites zu langsam geladen werden und die jeweiligen Inhalte dadurch Benutzern nicht schnell genug zur Verfügung stehen. Google hat erkannt, dass Benutzer Websites bevorzugen, die Inhalte schneller anzeigen. Auf Grundlage dieser Informationen können Google und die jeweilige Website die Benutzererfahrung insgesamt verbessern. In der Regel sollte eine Website in weniger als drei Sekunden geladen werden. Da die Suche als Kernprodukt von Google auf die Websites Dritter angewiesen ist, möchte das Unternehmen dafür sorgen, dass Webmaster/Designer/Entwickler Websites erstellen, die schnell geladen werden. 

Welche Parameter Google überprüft

Google überprüft Websites für Desktops und Mobilgeräte anhand einer Liste mit 10 Optimierungen. Es wird überprüft, wie gut eine Website hinsichtlich der einzelnen Parameter optimiert ist, und anschließend wird ein Gesamtwert (maximal 100) für die Website-Geschwindigkeit ermittelt. Google überprüft folgende Punkte:

  • Vermeidung der Weiterleitung auf Landingpages: Benutzer sollten beim Laden nicht zu einer anderen Seite Ihrer Website weitergeleitet werden. Beispielsweise sollten Sie nicht alle Besucher zur zweiten Version Ihrer Homepage weiterleiten. 

  • Entfernen von JavaScript- und CSS-Code in übergeordneten Inhalten, der das Rendern blockiert: Hierbei handelt es sich bei weitem um die wichtigste von Google durchgeführte Überprüfung. Bei dieser Überprüfung wird der Code Ihrer Website analysiert und sichergestellt, dass Inhalte eine höhere Priorität erhalten als anderer Code. Website-Entwickler platzieren häufig umfangreiche Skripts und CSS-Dateien am Anfang von HTML-Dateien. Der Browser lädt bzw. verarbeitet daher als erstes diese Ressourcen, statt die Inhalte zu laden. Bei dieser Überprüfung wird sichergestellt, dass Above-the Fold-Inhalte Priorität erhalten. (Hinweis: Als „Above the Fold“ werden Inhalte bezeichnet, die Benutzern beim Laden einer Webseite als erstes angezeigt werden. In der Regel sind das der Header, die Navigationselemente und der oberste Teil des Texts.)

  • Komprimierungsaktivierung: Hier wird überprüft, ob Ihr Webserver die Rohdaten (HTML, CSS und JavaScript) komprimiert (verkleinert), bevor er sie über das Internet an den Browser sendet. Dies führt zu großen Einsparungen bei der Gesamtgröße Ihrer Website.

  • Nutzung der Browserzwischenspeicherung: Bei der Überprüfung der Zwischenspeicherung geht es darum zu testen, ob der Browser Inhalte lokal speichert, statt sie bei jedem weiteren Zugriff erneut herunterzuladen. Die Zwischenspeicherung spart wertvolle Zeit, die häufig beim erneuten Laden von Seiten für die Verbindung und das Herunterladen der Inhalte vergeudet wird.

  • Minimierung von CSS: Damit ist gemeint, dass die CSS-Datei auf ein Minimum verkleinert wird, indem zusätzliche Leerzeichen, Zeilenumbrüche und andere Formatelemente entfernt werden. Ähnlich wie bei der Komprimierung der Datei lässt sich so Platz sparen.

  • Minimierung von JavaScript: Ähnlich wie die Minimierung von CSS kann auch die Minimierung von JS die vom Browser herunterzuladende Datei deutlich verkleinern.

  • Minimierung von HTML: Ähnelt den beiden vorangegangenen Punkten. Jedoch werden hier zusätzliche Leerzeichen aus dem primären HTML-Code der Website entfernt.

  • Bildoptimierung: Bei dieser zweitwichtigsten Überprüfung durch Google wird sichergestellt, dass die an den Browser gesendeten Bilder optimiert, komprimiert und nicht zu groß sind. Bilder machen etwa 65 bis 70 % der gesamten Größe einer Website aus. Bildoptimierung bedeutet, dass Bilder komprimiert werden, um ihre Dateigröße möglichst stark zu verringern, bevor sie vom Browser heruntergeladen werden. Zwei Aspekte sind dabei wichtig: (1) Stellen Sie sicher, dass die Bilder komprimiert sind. Dafür müssen die Bilder mithilfe von Kompressionstools verkleinert werden, ohne dass dabei die Bildqualität leidet. (2) Ändern Sie die Bildgröße. Für mobile Browser müssen die Bilder nicht besonders groß sein (z. B. 5000 Pixel). Das Bild sollte daher verkleinert werden.

  • Priorisierung sichtbarer Inhalte: Diese Inhalte sollten an den Anfang der Website-HTML gestellt werden. Vermeiden Sie das Laden zusätzlicher Inhalte, die für das erste Laden der Website nicht relevant sind.

  • Reduzierung der Serverantwortzeit: Bei dieser Überprüfung wird analysiert, wie schnell Ihr Server reagiert, wenn Besucher Ihre Website aufrufen. Für Google gilt die Richtlinie, dass Benutzer höchstens 200 ms (eine Fünftelsekunde) auf die Serverantwort mit Inhalten/HTML warten dürfen.

Unser Angebot

Wir haben die auf der Plattform erstellten Websites so optimiert, dass sie insbesondere beim Google PageSpeed-Test einen hohen Wert erreichen. Dafür haben wir die oben aufgeführten Tests analysiert und unsere Websites entsprechend optimiert. Im Folgenden erhalten Sie einen Überblick über unsere Maßnahmen hinsichtlich dieser Tests:

  • Vermeidung der Weiterleitung zu Landingpages: Für die meisten Websites erhalten wir bei dieser Überprüfung 100 %. Es sollten keine Links zu Kunden, Partner usw. gesendet werden, die sich auf Seiten außerhalb der Website beziehen.

  • Entfernung von JavaScript- und CSS-Code in Above-the-Fold-Inhalten, der das Rendern blockiert: Bei der Veröffentlichung von Websites wird deren Struktur gemäß dieser Empfehlung optimiert. Unsere Vorgehensweise: (1) Wir berechnen die von uns als „kritisch“ angesehenen CSS. Wir analysieren die Website und ermitteln, welche CSS-Formate zum Anzeigen der Website erforderlich sind. Diese Inhalte werden dann so in die Website eingebunden, dass sie zuerst geladen werden. (2) Anschließend verschieben wir alle Skripts ans Ende der Website, wodurch die Inhalte zuerst geladen werden.

  • Komprimierungsaktivierung: Für Verbindungen zu unserer Website wird die gzip-Komprimierung aktiviert. So lässt sich sicherstellen, dass Dateien komprimiert, über das Internet übertragen und anschließend vom Browser wieder dekomprimiert werden.

  • Nutzung der Browserzwischenspeicherung: Wir legen für alle geladenen Dateien Cacheheader fest. So lässt sich sicherstellen, dass diese Dateien (CSS, JS, Bilder) beim Herunterladen durch den Browser im Zwischenspeicher temporär gespeichert werden können. Wenn der Browser später erneut auf die Datei zugreifen muss, ist diese bereits lokal auf dem Computer gespeichert und muss nicht erneut von der Website heruntergeladen werden.

  • Minimierung von CSS, JS und HTML: Die Minimierung aller CSS-Ressourcen ist Teil des Veröffentlichungsprozesses. Dadurch wird sichergestellt, dass sie beim Herunterladen so klein wie möglich sind.

  • Bildoptimierung: Wir führen bei allen hochgeladenen Bilddateien im JPG- oder PNG-Format eine umfassende Komprimierung und Größenänderung durch, damit diese Bilder bestmöglich gehandhabt werden können. Folgende Verfahren kommen dabei zum Einsatz:

    • Zuerst durchläuft das Bild einen verlustfreien Komprimierungsalgorithmus und wird anschließend in unserem CDN gespeichert. So lässt sich die Ausgangsgröße des Bildes verringern.

    • Anschließend erstellen wir fünf Versionen des Bildes mit unterschiedlicher Größe. 

    • Danach durchlaufen diese Bilder einen verlustbehafteten Komprimierungsalgorithmus. Dabei wird die Bildqualität leicht verringert, es werden jedoch große Einsparungen bei der Bildgröße erzielt. In der überwiegenden Zahl der Fälle sind die Qualitätseinbußen für das menschliche Auge nicht wahrnehmbar.

    • Nach der verlustbehafteten Komprimierung durchlaufen die Bilder eine weitere verlustfreie Komprimierung, um sicherzustellen, dass sie so klein wie möglich sind.

  • Priorisierung sichtbarer Inhalte: Wir strukturieren alle Websites so, dass sie diesem Prinzip entsprechen. Das bedeutet, dass Header-Inhalte an erster Stelle positioniert werden, gefolgt vom Text der Seite.

  • Reduzierung der Serverantwortzeit: Bei dieser Überprüfung kommt es darauf an, dass die Website nicht zu langsam ist. Da wir alle Websites auf unserer Plattform hosten, können wir dafür sorgen, dass alle von uns gehosteten Websites schnell antworten. Mithilfe der branchenführenden Amazon Web Services halten wir diese Standards ein.

Was wir unternehmen, wenn Ihre Website schlecht abschneidet

Wir möchten natürlich, dass alle von uns veröffentlichten Websites eine möglichst hohe Einstufung erzielen, können dies allerdings nicht garantieren. Unsere Kunden haben die Möglichkeit eigenen Code sowie eigene Inhalte und Designs zur Website hinzufügen. Uns fehlt also die vollständige Kontrolle. Daher erzielen unsere Websites bei einigen Szenarien Werte, die unterhalb einer hohen 90er-Punktzahl liegen. Hier ist eine Liste mit Problemen hinsichtlich des Aufbaus von Websites, die uns von Google PageSpeed gemeldet wurden:

  • Entfernen von JavaSkript- und CSS-Code in Above-the-Fold-Inhalten, der das Rendern blockiert:

    • Kartenelement im Above-the-Fold-Bereich: Wenn ein Kartenelement am Beginn einer Website platziert wird, wirkt sich das häufig negativ auf das PageSpeed-Ergebnis aus. Verschieben Sie das Kartenelement ans Ende der Seite, um dieses Problem zu beheben.

    • Store im Above-the-Fold-Bereich: Wird ein Store an den Anfang gestellt, wird häufig diese Warnung angezeigt. Wir arbeiten an einer entsprechenden Lösung. Derzeit sollten Sie diesen Inhalt jedoch weiter unten auf der Seite platzieren. Sie können beispielsweise ein Bild und einen Text über dem Store-Element einfügen, sodass sich der Store nicht mehr im Above-the-Fold-Bereich befindet.

    • Benutzerdefinierter Code oder benutzerdefiniertes Skript im Header: Wenn Sie im Header der Website benutzerdefinierten Code platzieren, wird von Google oft eine Fehlermeldung angezeigt, die besagt, dass das Rendern der Seite verlangsamt wird. Es gibt zwei Optionen, dieses Problem zu beheben: (1) Verschieben Sie den Code aus dem Header in die body-end.html- Datei. Dadurch wird der Code ans Ende verschoben und wird nicht mehr am Anfang geladen. (2) Stellen Sie sicher, dass das hier eingebettete Skript asynchron geladen wird. Das bedeutet, der Browser lädt es im Hintergrund, während der übrige Inhalt der Website geladen wird. Für eine Asynchronität der Skripts muss der Code wie folgt geändert werden:

      • Alter Code: <script src=”https://beispiel.com/script.js”></script>

      • Neuer asynchroner Code: <script src=”https://beispiel.com/script.js” async defer></script>

      • Wie Sie sehen, erhält der Browser die Anweisung, den Code asynchron („async“) zu laden, wodurch sich das Ergebnis bei diesem Google PageSpeed-Test verbessert.

    • Iframe-Einbettung: Wenn ein benutzerdefinierter iframe im Above-the-Fold-Bereich einer Website eingebettet wird, wird wahrscheinlich eine Fehlermeldung wie folgende zurückgegeben. Verschieben Sie diesen Inhalt auf der Seite weiter nach unten oder entfernen Sie ihn vollständig.

  • Bildoptimierung: Zur Zeit funktioniert unsere Bildoptimierung nur bei Bildern im JPG- und im PNG-Format. Wenn Sie Bilder im TIFF-, GIF- oder anderen Bildformaten hochladen, können wir diese möglicherweise nicht optimieren. Dies könnte der Grund für diese Warnung sein. Wir empfehlen für solche Bilder einen Bildoptimierungsdienst wie EzGif, Compressor.io oder TinyPNG

    .Bei einer weiteren Überprüfung durch Google wird sichergestellt, dass keine großen Bilder enthalten sind, die für kleine Bereiche verkleinert werden müssen. Wir versuchen, das Problem zu beheben, indem wir kleinere Bilder in Spalten mit weniger Platz einfügen, dieses Verfahren ist jedoch nicht optimal. Zuweilen müssen Sie ein Bild herunterladen, in der Größe genau an die gewünschte Spatenbreite anpassen und es wieder hochladen. Dies ist jedoch selten der Fall.

  • Nutzung der Browserzwischenspeicherung: Wenn Sie benutzerdefinierten Code in Ihre Website integrieren, wird er häufig von einer Drittanbieter-Website geladen. Wenn diese Website keine Browserzwischenspeicherung ermöglicht, bemerkt Google dies und empfiehlt die Aktivierung der Browserzwischenspeicherung. In diesem Fall sollten Sie sich an den Drittanbieterdienst wenden, damit er eine entsprechende Änderung auf seinem Server vornimmt.

Fälle, in denen wir die Website nicht optimieren 

In manchen Fällen optimieren wir die Website nicht vor der Veröffentlichung. Dies ist der Fall, wenn Sie benutzerdefinierten Code im Header der Website platziert haben, der jQuery (($(‘#ex’)) verwendet. Der Grund dafür ist, dass für diesen Code häufig jQuery erforderlich ist. Durch unsere Optimierung wird dieser Code jedoch auf der Seite weiter nach unten verschoben, wodurch JQuery nicht mehr funktioniert und der installierte Code beschädigt wird.