Google PageSpeed

IONOS hat die auf der Plattform veröffentlichten Websites so optimiert, dass sie im Google PageSpeed-Test gut abschneiden. Bei diesem Test werden viele technische Details zum Erstellen von Webseiten untersucht und überprüft, ob sie den Best Practices entsprechen, die ein schnelles Laden von Websites ermöglichen. Der wichtigste Check im PageSpeed-Test untersucht, wie der Website-Code aufgebaut ist. Google prüft, ob der Code so strukturiert ist, dass der Browser den Inhalt am schnellsten laden kann.

Warnung

Kürzlich hat Google eine wichtige Änderung in der Art und Weise vorgenommen, wie es mit PageSpeed die Geschwindigkeit von Websites testet und Ergebnisse liefert. Wir arbeiten derzeit an der Anpassung unserer Plattform an die neuen von Google bereitgestellten Standards und werden diese Aktualisierungen in unseren Produktveröffentlichungen ankündigen.

Warum IONOS dafür optimiert ist

Wir bei IONOS sind der Meinung, dass die Geschwindigkeit von Websites eines der größten Probleme ist, mit denen das Web heute konfrontiert ist. Langsam ladende Websites haben höhere Absprungraten, ein geringeres Engagement und geben dem gesamten Web einen negativen Ruf, langsam zu sein. Wir wissen, dass Websites, die schneller reagieren, den Website-Besuchern einen großen Mehrwert bieten, indem sie jeder Person ein besseres Surferlebnis bieten.

Warum Google diese toolentwickelt 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.

Was Google prüft

Google überprüft Websites für Desktops und Mobilgeräte anhand einer Liste mit 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:

  • Vermeiden Sie Landingpage-Weiterleitungen. Das bedeutet, dass Sie Benutzer beim Laden Ihrer Website nicht auf eine andere Seite Ihrer Website umleiten sollten. So sollten Sie beispielsweise nicht alle Besucher auf eine zweite Version Ihrer Homepage umleiten.

  • Beseitigen Sie JavaScript und CSS, die das Rendern blockieren, in Above-the-Fold-Inhalten. Dies ist bei weitem die wichtigste Prüfung, die Google durchführt. Dadurch wird der Code auf Ihrer Website überprüft und sichergestellt, dass Sie Inhalte gegenüber anderem Code priorisieren. Oft platzieren Website-Entwickler schwere Skripte & CSS-Dateien am Anfang einer HTML-Datei. Dies führt dazu, dass der Browser diese Ressourcen zuerst verarbeitet/lädt, anstatt zuerst den Inhalt zu laden. Diese Prüfung stellt sicher, dass Sie Inhalte oberhalb des Falzes priorisieren. (Hinweis: Above-the-Fold bedeutet den ersten Inhalt, den ein Benutzer beim Laden einer Webseite sieht. Dabei handelt es sich in der Regel um die Kopfzeile, die Navigation und den obersten Inhalt des Seitentextes.)

  • Aktivieren Sie die Komprimierung. Dabei wird überprüft, ob Ihr Webserver die Rohdaten (HTML, CSS und Javascript) komprimiert (verkleinert), bevor er sie über das Internet an Ihren Browser überträgt. Dies führt zu großen Einsparungen bei der Gesamtgröße Ihrer Website.

  • Nutzen Sie das Browser-Caching. Die Caching-Prüfung stellt sicher, dass Sie den Browser anweisen, diesen Inhalt lokal zu speichern, anstatt ihn beim nächsten Mal erneut herunterzuladen. Dies spart wertvolle Zeit, die oft für das Verbinden und Herunterladen von Inhalten beim erneuten Laden von Seiten aufgewendet wird.

  • CSS minimieren. Das Minimieren von CSS bedeutet, dass Sie die CSS-Datei so klein wie möglich machen, indem Sie zusätzliche Leerzeichen, Zeilenumbrüche und andere Formate entfernen. Stellen Sie sich dies ähnlich wie das Komprimieren der Datei vor, um die Gesamtgröße zu sparen.

  • JavaScript minimieren. Ähnlich wie bei der Minimierung von CSS kann die Minimierung von JS viel Größe in der einzelnen Datei sparen, die vom Browser heruntergeladen wird.

  • Minimieren Sie HTML. Ähnlich wie die beiden oben genannten, entfernt jedoch zusätzliche Abstände aus dem primären HTML der Website.

  • Optimieren Sie Bilder. Die zweitwichtigste Überprüfung, die Google durchführt, stellt sicher, dass die Bilder, die Sie an den Browser senden, optimiert, komprimiert und nicht zu groß sind. Bilder machen etwa 65-70% der Gesamtgröße/des Gesamtgewichts einer Website aus. Bilder optimieren bedeutet, dass Sie die Bilder komprimieren und so klein wie möglich machen, bevor Sie sie vom Browser herunterladen müssen. Hier gibt es zwei wichtige Punkte, die zu tun sind: (1) Stellen Sie sicher, dass die Bilder komprimiert sind. Dies erfordert eine Komprimierung tool , um sie zu verkleinern, ohne die Qualität der Bilder zu beeinträchtigen. (2) Ändern der Bildgröße. Sie müssen kein sehr großes Bild (z. B. 5000 Pixel) an einen mobilen Browser liefern, daher sollten Sie die Größe des Bildes ändern.

  • Priorisieren Sie sichtbare Inhalte. Dadurch wird sichergestellt, dass Sie den Inhalt am Anfang des HTML-Codes der Website platzieren. Versuchen Sie, keine zusätzlichen Inhalte zu laden, die für den ersten Aufruf der Website nicht relevant sind.

  • Reduzieren Sie die Antwortzeit des Servers. Diese Prüfung untersucht Ihren Server, um sicherzustellen, dass er sehr schnell auf Besucher reagiert, die auf Ihre Website kommen. Google verlangt, dass der Nutzer nicht länger als 200 ms (1/5 Sekunde) wartet, um Inhalte/HTML von Ihrem Server zurückzubekommen.

Mit der Einführung des Open-Source-Projekts Lighthouse im November 2018 betrachtet Google Page Speed nun neben der Geschwindigkeit auch eine breite Palette von Website-Eigenschaften (wie SEO, Accessibility, PWA und Best Practices). Zusätzlich zu den oben genannten Tests prüft Lighthouse jetzt auf:

  • Erste inhaltliche Farbe. Dabei handelt es sich um einen Kennzahlen, der von einem echten Browser kommt, der eine Website lädt. Wenn Sie einen Lighthouse-Test durchführen, besucht ein echter Browser Ihre Website, lädt sie und überwacht die Leistung. Der First Contentful Paint Kennzahlen gibt an, wie lange es dauert, bis irgendeine Art von Inhalt angezeigt wird, nachdem eine Seite geladen wurde. Dabei kann es sich um ein Bild, eine Hintergrundfarbe usw. handeln, und die Zeit bis zum ersten Contentful Paint wird in Sekunden gemessen. Der Grund, warum dies ein wertvoller Kennzahlen ist, ist, dass es das erste Mal ist, dass ein Benutzer weiß, dass etwas auf der Website geladen wird – es ist der erste Hinweis darauf, dass eine Website geladen wird.

  • Geschwindigkeitsindex. Dabei handelt es sich um einen Kennzahlen, der aus einem alten Web Performance tool namens WebPageTest stammt. Es gibt es seit 2012 und ist sehr effektiv bei der Bestimmung, wie schnell eine Website ihre Inhalte lädt. Es funktioniert, indem alle 0,5 Sekunden Screenshots einer Website gemacht werden, während sie geladen wird. Anhand dieser Screenshots wird der Prozentsatz der auf die Webseite geladenen Inhalte in Schritten von 0,5 Sekunden berechnet und eine Gesamtgeschwindigkeitsbewertung ausgegeben. Je niedriger die Zahl, desto schneller scheint die Website für den Benutzer zu laden. Das Ziel dieses Tests ist es, wirklich zu verstehen, wie schnell der Benutzer Inhalte sieht und ob es etwas gibt, das die Website daran hindert, Inhalte so schnell wie möglich anzuzeigen.

  • Zeit für Interaktiv. Ein weiterer wichtiger Kennzahlen ist, wie schnell der Nutzer mit der Seite interagieren kann. Der Benutzer kann z. B. auf eine Schaltfläche klicken oder einen Bildlauf auf der Seite durchführen. Dies ist besonders wichtig auf Mobilgeräten, wo der Benutzer direkt einen Bildschirm berührt, um mit der Seite zu interagieren. Das Ziel für Webentwickler sollte immer darin bestehen, sicherzustellen, dass eine Seite interaktiv ist, wann immer sie Inhalte enthält. Dies ist aufgrund der Funktionsweise von Browsern eine sehr schwierige Herausforderung.

  • Erste CPU im Leerlauf. Diese Kennzahl bezieht sich eng auf die Zeit bis zur Interaktivität, da sie ein Indikator dafür ist, wie schnell alle anfänglichen Inhalte/Ressourcen innerhalb der Website geladen werden und die CPU des Geräts in einen Ruhezustand (Nichtstun) übergeht. Der Grund, warum darüber berichtet wird, ist, dass Entwickler sich zuerst darauf konzentrieren sollten, die minimale Menge an Inhalten zu laden. Wenn Sie eine kleine Menge senden, verarbeitet die CPU des Geräts den gesamten Code und gelangt schneller in einen Leerlaufzustand.

  • Geschätzte Eingabelatenz. Die finalen Kennzahlen, über die Lighthouse berichtet, haben nichts mit der Erstladeleistung Ihrer Website zu tun. Stattdessen versucht es, Ihnen eine Zahl (in Millisekunden) zu geben, in der Ihre Website auf Tippen/Klicks reagiert. Die Idee ist, dass je schneller Ihre Website reagiert, desto mehr Benutzer halten sie für schnell und es ist weniger wahrscheinlich, dass sie die Website verlassen.

Nach der Durchführung dieser Tests gibt Lighthouse auch priorisierte Empfehlungen, wie Sie zur Verbesserung der Gesamtpunktzahl in Bezug auf die Geschwindigkeit beitragen können. Diese erscheinen in der unteren Hälfte der Seite und enthalten sehr technische Details darüber, was Sie tun können und welche Vorteile diese Änderungen bringen können.

Was IONOS macht

IONOS hat die auf unserer Plattform erstellten Websites optimiert, um eine hohe Punktzahl zu erzielen, insbesondere im Google PageSpeed-Test. Das bedeutet, dass wir uns die oben aufgeführten Tests angesehen und unsere Websites für jeden einzelnen von ihnen optimiert haben. Hier ist eine Übersicht darüber, wie wir mit den einzelnen Überprüfungen umgegangen sind:

  • Vermeiden Sie Landingpage-Weiterleitungen. Bei den meisten IONOS Websites bestehen wir diese Prüfung zu 100%. Dies liegt nicht vollständig unter der Kontrolle von IONOS, da wir es Nutzern ermöglichen, über unsere URL-Weiterleitung auf andere Seiten weiterzuleiten. Hier empfiehlt es sich, darauf zu achten, dass Sie keine Links an Ihre Kunden, Partner usw. senden, die keine echte Seite Ihrer Website sind.

  • Beseitigen Sie JavaScript und CSS, die das Rendern blockieren, in Above-the-Fold-Inhalten. Im Rahmen der Veröffentlichung von Websites optimiert IONOS die Struktur von Websites, um dieser Empfehlung zu entsprechen. Wir tun dies, indem wir: (1) Berechnen, was wir als "kritisches" CSS bezeichnen. Das bedeutet, dass wir uns die Website ansehen und sehen, welche CSS-Stylings erforderlich sind, um die Website anzuzeigen. Wir platzieren diese Inhalte dann inline innerhalb der Website, so dass sie zuerst geladen werden. (2) Wir verschieben dann alle Skripte an den unteren Rand der Website, so dass die Inhalte zuerst geladen werden.

  • Aktivieren Sie die Komprimierung. IONOS aktiviert die gzip-Komprimierung für Verbindungen zu unserer Website. Dadurch wird sichergestellt, dass die Datei komprimiert, über das Internet übertragen und dann vom Browser dekomprimiert wird.

  • Nutzen Sie das Browser-Caching. IONOS setzt Cache-Header für alle Dateien, die wir laden. Dadurch wird sichergestellt, dass Browser, die diese Dateien (CSS, JS, Bilder) herunterladen, wissen, wie sie die Datei vorübergehend im Browser-Cache store können, sodass der Browser beim nächsten Zugriff auf diese Datei lokal auf dem Computer stores wird, anstatt sie erneut von der Website herunterladen zu müssen.

  • Minimieren Sie CSS, JS und HTML. Im Rahmen des Publishing-Prozesses von IONOS minimieren wir die überwiegende Mehrheit der CSS-Ressourcen. Dadurch wird sichergestellt, dass sie nach dem Herunterladen so klein wie möglich sind. Es ist wichtig zu beachten, dass externe Assets zwar in der Regel über unser CDN weitergeleitet werden, aber möglicherweise nicht minimiert werden.

  • Optimieren Sie Bilder. Jedes jpg- oder png-Bild, das Sie auf IONOS hochladen, durchlaufen wir eine umfangreiche Bildkomprimierung & Ändern Sie die Größe, um die bestmögliche Bildverarbeitung zu erzielen. Wir führen die folgenden Prozesse durch:

    • 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.

  • Priorisieren Sie sichtbare Inhalte. Als Teil der Art und Weise, wie IONOS jede Website erstellt, strukturieren wir die Website standardmäßig so, dass sie dieser Empfehlung entspricht. Das bedeutet, dass der Header-Inhalt an erster Stelle steht, gefolgt vom Hauptinhalt der Seite.

  • Reduzieren Sie die Antwortzeit des Servers. Bei dieser Überprüfung geht es hauptsächlich darum, sicherzustellen, dass Ihre Website nicht zu langsam und nicht schnell genug ist. Da IONOS alle Websites auf unserer Plattform hostet, können wir sicherstellen, dass alle von uns gehosteten Websites schnell reagieren. Wir verwenden branchenführende Amazon Web Services, die uns helfen, diese Standards einzuhalten.

Was tun, wenn Ihre Website schlecht überprüft wird?

IONOS wünscht sich zwar, dass jede Website, die wir betreiben, immer einen hohen Stellenwert hat, aber das können wir nicht versprechen. Dies liegt daran, dass unsere Kunden ihren eigenen Code, ihre eigenen Inhalte und Designs zur Website hinzufügen können, sodass wir nicht die volle Kontrolle darüber haben, was sie hinzufügen können und was nicht. Aus diesem Grund gibt es einige Szenarien, in denen IONOS Websites nicht in den hohen 90ern punkten werden. Hier ist eine Liste von Fehlern/Problemen, die Google PageSpeed an uns meldet, basierend darauf, wie die Website erstellt wurde:

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

    • Map-Element oberhalb des Falzes. Wenn du ein Kartenelement oben auf deiner Website platzierst, wird dies oft negativ auf deinem PageSpeed- rankingzurückschlagen. Um dies zu beheben, verschieben Sie das Kartenelement an den unteren Rand der Seite.

    • store Vorderseite über dem Falz. Wenn Sie eine store oben platzieren, kann dies häufig dazu führen, dass diese Warnung angezeigt wird. IONOS arbeitet an einer Lösung dafür, aber im Moment haben wir nur die Empfehlung, den Inhalt auf der Seite nach unten zu verschieben. Eine Möglichkeit, dies zu tun, besteht darin, ein Bild und einen hilfreichen Text über dem store -Element hinzuzufügen, so dass sich das store selbst nicht im Bereich "above the fold" der Website befindet.

    • Benutzerdefinierter Code/Skript in der Kopfzeile. Wenn Sie benutzerdefinierten Code im Kopfbereich der Website platziert haben, wird von Google häufig ein Fehler angezeigt, der besagt, dass dies das Rendern der Seite verlangsamt. Es gibt zwei Möglichkeiten, dies zu beheben: (1) Platzieren Sie den Code in der body-end.html Datei der Website anstelle des Headers. Dadurch wird der Code an den unteren Rand verschoben, wodurch er gezwungen wird, eher später als früher geladen zu werden. (2) Stellen Sie sicher, dass das hier eingebettete Skript asynchron geladen wird. Das bedeutet, dass der Browser es im Hintergrund lädt, während der Rest des Website-Inhalts weiterhin geladen wird. Um async für Skripts zu aktivieren, müssen Sie es wie folgt ändern:

      • Alter Code: <script src="https://example.com/script.js"></script>

      • Neue async: <script src="https://example.com/script.js" asynchrone Verzögerung></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 einbetten. Wenn Sie einen benutzerdefinierten iframe in eine Website above the fold einbetten, wird er höchstwahrscheinlich mit dieser Fehlermeldung zurückkommen. Bitte verschieben Sie diesen Inhalt weiter unten auf der Seite oder entfernen Sie ihn vollständig.

  • Bilder optimieren: Heute funktioniert die Bildoptimierung von IONOS nur auf JPG & PNG-Bilder. Wenn Sie ein TIFF-, GIF- oder anderes Bildformat hochladen, kann es sein, dass IONOS es nicht optimieren kann und dies der Grund für diese Warnung sein könnte. Wir empfehlen, das Bild über einen Bildoptimierungsdienst wie EzGif, Compressor.io oder TinyPNG laufen zu lassen.Eine weitere Überprüfung, die Google durchführt, besteht darin, sicherzustellen, dass Sie keine großen Bilder haben, deren Größe für kleine Stellen geändert wird. IONOS versucht, hier Abhilfe zu schaffen, indem kleinere Bilder in Spalten mit geringerer Größe platziert werden, aber dieser Prozess ist nicht perfekt. Manchmal müssen Sie ein Bild herunterladen, die Größe genau an die gewünschte Spaltengröße anpassen und das Bild erneut hochladen. Dies ist ein ziemlich seltener Fall.

  • Bildgröße ändern: Während IONOS Bilder optimiert, um sicherzustellen, dass sie in einer kleineren Größe komprimiert werden, ändert IONOS die Größe Ihres Bildes in der desktop Version Ihrer Website nicht für Sie. Wenn Sie z. B. ein Bild mit einer Größe von 3000 x 3000 Pixeln auf einer Seite verwenden und die Größe mit der Drag-to-Resize-Funktion des Editors auf nur 300 Pixel ändern, bedeutet dies immer noch, dass das gesamte Bild mit 3000 x 3000 Pixeln geladen wird. Dies kann sich negativ auf Ihren Pagespeed-Score auswirken. Sie können das Problem beheben, indem Sie die Größe des Bildes mit dem eingebauten Bild-Editor ändern oder indem Sie es in einer Bildbearbeitungssoftware ändern und erneut hochladen.

  • Nutzen Sie das Browser-Caching: Wenn Sie benutzerdefinierten Code in Ihre Website einfügen, wird dieser oft von einer Website eines Drittanbieters geladen. Wenn diese Website das Caching nicht aktiviert, wird Google dies feststellen und empfehlen, das Browser-Caching zu aktivieren. Sie sollten sich an diesen Drittanbieterdienst wenden, um ihn dazu zu bringen, diese Änderung auf seinem Server zu implementieren.

  • Ihre Seite ist möglicherweise zu groß: Wenn Sie viele Inhalte auf einer Seite haben, kann dies dazu führen, dass die Seite auch nach dem Ausführen des Optimierungs tool auf Ihrer Website groß wird.Erwägen Sie, weniger Bilder zu verwenden oder Ihre Inhalte aufzuteilen, indem Sie Inhalte auf andere Seiten verschieben.

  • Aktuell nicht behebbare Probleme: Zu beachten ist, dass es sich hierbei um von Google gemeldete Pagespeed-Probleme handelt, die nicht von Ihnen selbst behoben werden können und als Feature-Requests für IONOS bearbeitet werden müssen:

    • Nutzung der Browserzwischenspeicherung

    • Minimierung von HTML, CSS und JS

    • Optimierung der CSS-Bereitstellung

Fälle, in denen IONOS die Website nicht optimiert

Es gibt einige wenige Fälle, in denen IONOS nicht versucht, die Website bei der Veröffentlichung zu optimieren. Wenn Sie benutzerdefinierten Code platziert haben, der jQuery (($('#ex')) oder die JS-API verwendet: dmAPI.runOnReady('code',function(){}); in den Header der Website. Der Grund, warum wir dies tun, ist, dass dieser Code oft jQuery oder die dmAPI-Funktionen benötigt, aber da unsere Optimierung diesen Code auf der Seite nach unten verschiebt, funktioniert er nicht mehr und beschädigt somit den installierten Code.