Google PageSpeed

Duda hat 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 den 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 Duda Websites auf diesen Test hin optimiert

Bei Duda sind wir 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 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 von Landingpage-Weiterleitungen. 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.

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

• First Contentful Paint. Dies ist eine Kennzahl, die von einem echten Browser stammt, der eine Website lädt. Wenn Sie einen Lighthouse-Test durchführen, wird ein echter Browser Ihre Website besuchen, sie laden und die Leistung überwachen. Die Kennzahl „First Contentful Paint“ gibt die Zeit an, wie lange es dauert, bis nach dem Start des Ladevorgangs einer Seite irgendeine Art von Inhalt angezeigt wird. Dies kann ein Bild, eine Hintergrundfarbe usw. sein. Die Zeit bis zum First Contentful Paint wird in Sekunden gemessen. Dies ist eine wertvolle Kennzahl, weil es das erste Mal ist, dass ein Benutzer weiß, dass etwas auf der Website geladen wird — es ist der erste Hinweis, dass eine Website geladen wird.
• Speed Index. Diese Kennzahl stammt von einem alten Web-Performance-Tool namens WebPageTest. Es existiert seit 2012 und ist recht effektiv dabei, festzustellen, wie schnell eine Website ihre Inhalte lädt. Das Tool macht alle 0,5 Sekunden Screenshots von einer Website, während sie geladen wird. Anhand dieser Screenshots berechnet es den Prozentsatz des auf die Webseite geladenen Inhalts in 0,5-Sekunden-Schritten und gibt eine Geschwindigkeitsbewertung aus. Je niedriger die Zahl, desto schneller scheint die Website für den Benutzer zu laden. Das Ziel bei diesem Test ist es, genau zu verstehen, wie schnell der Benutzer Inhalte sieht und ob irgendetwas die Website daran hindert, Inhalte so schnell wie möglich anzuzeigen.
• Time to Interactive. Eine weitere wichtige Kennzahl ist, wie schnell der Benutzer mit der Seite interagieren kann. Beispielsweise möchte der Benutzer vielleicht auf eine Schaltfläche klicken oder die Seite scrollen. Dies ist besonders bei Mobiltelefonen wichtig, bei denen der Benutzer direkt einen Bildschirm berührt, um mit der Seite zu interagieren. Das Ziel für Webentwickler sollte stets sein, sicherzustellen, dass eine Seite interaktiv ist, sobald sich auf ihr Inhalte befinden. Aufgrund der Funktionsweise von Browsern stellt dies eine große Herausforderung dar.
• First CPU Idle. Diese Kennzahl steht in engem Zusammenhang mit „Time to Interactive“, 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 diese Kennzahl aufgeführt wird, ist, dass Entwickler sich zunächst darauf konzentrieren sollten, die minimale Menge an Inhalt zu laden. Wenn nur wenige Daten gesendet werden, verarbeitet die CPU des Geräts den gesamten Code schneller und erreicht schneller einen Ruhezustand.
• Estimated Input Latency. Die letzte Kennzahl, die Lighthouse ausgibt, hat nichts mit der First Load Performance Ihrer Website zu tun. Vielmehr wird versucht, Ihnen eine Zahl (in Millisekunden) anzugeben, in der Ihre Website auf Tippen/Klicken reagiert. Die Idee dahinter ist, dass je schneller Ihre Website reagiert, desto höher ist die Wahrscheinlichkeit, dass die Benutzer sie als schnell betrachten und sie nicht 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 Duda macht

Duda hat die auf unserer 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. Es gibt einen großartigen Blog-Beitrag unseres CTO, der beschreibt, wie wir die Seitengeschwindigkeit optimiert haben. Im Folgenden erhalten Sie einen Überblick über unsere Maßnahmen hinsichtlich dieser Tests:

• Vermeidung von Landing-Page-Weiterleitungen. Für die meisten Duda-Websites erhalten wir bei dieser Prüfung 100 %. Dies ist nicht vollständig unter der Kontrolle von Duda, da wir Benutzern über unsere URL-Umleitung eine Weiterleitung auf andere Seiten ermöglichen. 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 optimiert Duda deren Struktur gemäß dieser Empfehlung. 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. Duda aktiviert die gzip-Komprimierung für Verbindungen zu unserer Website. So lässt sich sicherstellen, dass Dateien komprimiert, über das Internet übertragen und anschließend vom Browser wieder dekomprimiert werden.
• Nutzung der Browserzwischenspeicherung. Duda legt Cache-Header für alle geladenen Dateien 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 von Duda. Dadurch wird sichergestellt, dass sie beim Herunterladen so klein wie möglich sind.
• Bildoptimierung. Wir führen bei allen zu Duda 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. Mehr darüber erfahren Sie hier.
  • 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. Als Teil der Art und Weise, wie Duda jede Website erstellt, strukturieren wir 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 Duda alle Websites auf unserer Plattform hostet, 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

Duda möchte 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 Duda-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:

• Entfernung von JavaScript- 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. Duda arbeitet 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 die Bildoptimierung von Duda nur bei Bildern im JPG- und im PNG-Format. Wenn Sie Bilder im TIFF-, GIF- oder anderen Bildformaten hochladen, kann Duda 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. Duda versucht, 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 Spaltenbreite anpassen und es wieder hochladen. Dies ist jedoch selten der Fall.
• Bildgröße ändern: Zwar optimiert Duda die Bilder auf Ihrer Website auf eine kleinere Größe, aber Duda ändert die Größe Ihres Bildes auf der Desktop-Version Ihrer Website nicht wirklich für Sie. Wenn Sie beispielsweise auf Ihrer Website ein Bild mit 3000 x 3000 Pixeln verwenden und die Größe mit der „Drag to Resize“-Funktion des Editors auf nur 300 Pixel ändern, bedeutet dies immer noch, dass das Bild mit 3000 x 3000 Pixeln geladen wird. Dies kann sich negativ auf das Ergebnis des PageSpeed-Tests auswirken. Sie können das Problem beheben, indem Sie die Bildgröße mit dem eingebauten Bild-Editor ändern oder indem Sie die Größe mit einem Bildbearbeitungsprogramm ändern und das Bild erneut hochladen.
• 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.
• Ihre Webseite ist möglicherweise zu groß: Wenn Sie viel Inhalt auf einer Seite haben, kann dies dazu führen, dass die Seite auch dann noch groß ist, wenn wir für Ihre Website das Optimierungs-Tool ausführen. Ziehen Sie in Betracht, weniger Bilder zu verwenden oder Ihre Inhalte aufzuteilen, indem Sie Inhalte auf andere Seiten verschieben.
• Aktuelle nicht behebbare Probleme: Dies sind von Google gemeldete Probleme mit PageSpeed, die nicht von Ihnen selbst behoben werden können. Sie müssen als Feature-Requests von Duda bearbeitet werden:
  • Nutzung der Browserzwischenspeicherung
  • Minimierung von HTML, CSS und JS
  • Optimierung der CSS-Bereitstellung

Fälle, in denen Duda die Website nicht optimiert

In manchen Fällen optimiert Duda die Website nicht vor der Veröffentlichung. Dies ist der Fall, wenn Sie im Header der Website benutzerdefinierten Code platziert haben, der jQuery (($(‘#ex’)) oder die Funktion JS API: dmAPI.runOnReady(‘code’,function(){}) ausgeführt hat. Der Grund dafür ist, dass für diesen Code häufig jQuery oder die dmAPI-Funktionen erforderlich sind. 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.