Website Performance und Google PageSpeed

Sitejet bietet unterschiedliche Möglichkeiten wie die integrierte Bildoptimierung, um deine Website fit für den PageSpeed-Test von Google zu machen. Dieser Test betrachtet viele technische Details und überprüft, ob Best-Practices für schnelles Laden eingehalten wurden. In diesem Artikel gehen wir auf die Feinheiten des Tests ein und wie Sitejet Websites optimiert.

Warum ist eine Optimierung deiner Website wichtig?

Das erste, was einem Besucher auf deiner Website auffällt, ist die Ladezeit deiner Website. Wenn deine Website langsam lädt, dann passiert es häufig, dass die Besucher abspringen und kein positives Nutzererlebnis haben. Also genau das Gegenteil von dem, was du erreichen möchtest. Die durschschnittliche Ladezeit einer heutigen Website liegt zwischen einer und drei Sekunden. Diesen Wert kann man mit einem Tool messen und anschließend optimieren. Diese Optimierung hilft dir nicht nur, das Erlebnis für die Besucher auf deiner Website zu verbessern, es kann auch ein Faktor im Ranking für die Suchergebnisse sein. 

Das Pagespeed-Tool von Google wurde entwickelt um deine Seite zu analysieren und zu bewerten. Die Analyse kann dir helfen mögliche Schwachstellen in der Performance zu erkennen. Es liefert dir Verbesserungsvorschläge und berücksichtigt dabei neben dem Aufbau von JavaScript-Dateien, HTML- und CSS-Dateien auch die Integration von Bildern oder die Cache-Vorgaben der Website. 

Sei dir allerdings darüber im Klaren, dass die Ladezeit nur einer von vielen Faktoren für ein gutes Ranking ist. Google Pagespeen wird oft als Tool zur Optimierung der Ladezeit angepriesen und dabei oft missverstanden. Das Tool selber und ein Wert von 100 oder in der Nähe davon ist nicht entscheidend für das Ranking, da der Algorithmus der Suchmaschinen viele Ranking-Faktoren berücksichtigt. Die Frage, die du dir stellen musst, ist: Sollst du Google zufrieden stellen oder steht die Benutzererfahrung im Vordergrund? 

Ein weiterer Rankingfaktor bei Google ist nämlich die Verweildauer des Nutzers auf Ihrer Seite. Du möchtest den Besucher so lange wie möglich auf deiner Website halten. Wichtiger als eine hervorragender PageSpeed Score ist eine Website mit smartem Text, schönen, passend zugeschnittenen Bildern und einem einheitlichen und überzeugenden Design, das benutzerfreundlich ist. Eine schnelle Seite ist nicht viel Wert, wenn sich der User nicht angesprochen fühlt oder sich nicht zurechtfindet. 

Daher empfehlen wir Google PageSpeed um sich einen guten Überblick zu verschaffen. Dennoch hilft es Tools und Vorschläge solcher Tools immer kritisch zu hinterfragen. Ein gutes Ergebnis in Google PageSpeed ist nicht alles.  

Was überprüft Google?

Google hat eine Liste von Optimierungen, die es sowohl auf Desktop- als auch auf mobilen Website-Versionen analysiert. Durch eine Reihe von Tests wird eine Gesamtpunktzahl von möglichen 100 für die Geschwindigkeit deiner Website ermittelt. Im Folgenden geben wir dir Tips für eine bessere Bewertung: 

• Vermeide Umleitungen von Zielseiten: Leite Website-Besucher nicht auf andere Websites weiter, bevor die Seite fertig geladen ist. Beispiele hierfür sind alternative Seiten der Homepage (z. B. für andere Sprachen).
• Reduziere die Antwortzeit des Servers: Hier wird die Reaktionszeit deines Servers überprüft. Google verlangt, dass der Benutzer nicht länger als 200 ms (1/5 einer Sekunde) wartet, um Inhalte/HTML von deinem Server zurückzubekommen.
• Eliminiere Render-Blocking von JavaScript und CSS in above-the-fold Inhalten: Dies ist bei weitem die wichtigste Überprüfung, die Google durchführt. Hierbei wird überprüft, ob Inhalte, die bereits ohne zu scrollen (= "Above the fold") sichtbar wären, gegenüber anderem Code priorisiert werden. Häufig platzieren Website-Entwickler große Skripte und CSS-Dateien ganz oben in einer HTML-Datei, obwohl diese für die "above-the-fold" Inhalte noch nicht benötigt werden. Dadurch wird der Browser diese Ressourcen zuerst laden, anstatt Inhalte zu priorisieren. Der obere Teil, der ohne zu scrollen sichtbar ist, ist in der Regel die Kopfzeile, die Navigation und der oberste Inhalt der Seite - meinst ein "Hero-Bild". Das Ganze wird auch "Header" genannt.
• Priorisiere sichtbare Inhalte: Auf diese Weise wird sichergestellt, dass Inhalte ganz oben auf der Website HTML platziert sind. Versuche, keine zusätzlichen Inhalte zu laden, die für den ersten Aufruf der Website nicht relevant sind, solange der erste, obere Teil der Website noch nicht geladen ist.
• Bilder optimieren: Die zweitwichtigste Prüfung stellt sicher, dass Bilder optimiert sind. Bilder machen etwa 65-70% der Gesamtgröße einer Website aus. Die Optimierung von Bildern bedeutet, dass die Bilder komprimiert und die Auflösung so klein wie möglich und so groß wie nötig ist, bevor der Browser sie herunterlädt.
  Hier gibt es zwei wichtige Punkte zu erledigen: 
  1. Stelle sicher, dass die Bilder komprimiert sind. Nutze Komprimierungswerkzeuge, um sie kleiner zu machen, ohne die Qualität der Bilder zu beeinträchtigen. 
  2. Stelle sicher, dass verschiedene Bildversionen für unterschiedliche Browser und Geräteauflösungen zur Verfügung stehen. Auf mobilen Geräten sind z. B. geringere Auflösungen ausreichend.
• CSS minimieren: Die Verkleinerung von CSS bedeutet, dass Sie die CSS-Datei so klein wie möglich gestalten. Das ist z. B. möglich, indem zusätzliche Leerzeichen, Zeilenumbrüche und andere Formatierungszeichen entfernt werden. Dieser Vorgang ist dem Komprimieren von Dateien ähnlich. Dadurch wird die Gesamtgröße teilweise beträchtlich reduziert.
• JavaScripts minimieren: Ähnlich wie beim Minimieren von CSS kann das Minimieren von JavaScript eine gewisse Datenmenge freigegeben, die anschließend vom Browser nicht mehr heruntergeladen wird.
• HTML minimieren: Ähnlich wie die beiden oben genannten Punkte und zusätzlich werden Abstände vom HTML-Code der Website entfernt.
• Browser-Caching nutzen: Der Caching-Check stellt sicher, dass der Browser angewiesen wird, den Inhalt lokal zu speichern, anstatt ihn beim nächsten Zugriff erneut herunterzuladen. Dies spart wertvolle Zeit beim Herunterladen von Inhalten beim Seitenaufruf.
• Komprimierung aktivieren: Dabei wird überprüft, ob dein Webserver die Rohdaten (HTML, CSS und Javascript) komprimiert (also nochmals verkleinert), bevor er sie über das Internet an deinen Browser sendet. Dies kann ebenfalls zu großen Einsparungen bei der Gesamtgröße deiner Website führen.

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

• Erste Inhalte gezeichnet: Dabei besucht ein echter Browser deine Website, lädt sie und misst wie lange es dauert, bis der erste Inhalt angezeigt wird. Dies kann ein Bild, eine Hintergrundfarbe usw. sein. Die Ladezeit wird in Sekunden angegeben. Je niedriger diese Kennzahl ist, desto schneller weiß der Website-Besucher, dass noch weitere Inhalte geladen werden. 
• Geschwindigkeitsindex: Hierbei werden während des Ladens alle 0,5 Sekunden Screenshots von einer Website gemacht. Anhand dieser Screenshots wird überprüft, welche Inhalte beim vorherigen Schritt bereits geladen waren. Je geringer der Unterschied (=Geschwindigkeitsindex) ist, desto schneller scheint die Website für den Nutzer zu laden. Das Ziel dieses Tests ist es, wirklich zu verstehen, wie schnell der Benutzer Inhalte sieht und ob etwas die Website daran hindert, Inhalte so schnell wie möglich anzuzeigen.
• Zeit bis Interaktivität: Eine weitere wichtige Kennzahl ist, wie schnell der Benutzer mit der Seite interagieren kann. Beispielsweise kann der Benutzer auf eine Schaltfläche klicken oder die Seite durchblättern. Dies ist besonders wichtig auf dem Handy, wo der Benutzer direkt einen Bildschirm berührt, um mit der Seite zu interagieren. Webentwickler sollten immer sicherstellen, dass eine Seite interaktiv ist, wann immer es irgendwelche Inhalte darauf gibt.
• Erster CPU-Leerlauf: Die Metrik ist ein Indikator dafür, wie schnell alle anfänglichen Inhalte/Ressourcen innerhalb der Website geladen und dargestellt werden und der Prozessor des Geräts in einen Ruhezustand übergeht. Der Grund dafür ist, dass sich Entwickler darauf konzentrieren sollten, zuerst die minimale Menge an Inhalten zu laden. Durch das Senden eines kleinen Teils verarbeitet der Prozessor des Zielgeräts den gesamten Code schneller wodurch die Seite insgesamt schneller dargestellt wird.
• Maximale potenzielle erste Eingabelatenz: Die letzte Metrik, über die Lighthouse berichtet, hat nichts mit der Ladezeit deiner Website zu tun. Stattdessen wird versucht, dir eine Zahl (in Millisekunden) zu geben, in der deine Website erstmalig auf Tippen/Klicken reagiert. Die Idee ist, dass umso mehr Benutzer die Seite als schnell empfinden, je schneller deine Website reagiert. 

Nach der Durchführung dieser Tests wird Lighthouse auch priorisierte Empfehlungen geben, wie die Gesamtgeschwindigkeit verbessert werden kann. Dies erscheint in der zweiten Hälfte des Testprotokolls und gibt technische Details darüber, was du tun kannst und welche Vorteile diese Änderungen bieten.

Was kannst du in Sitejet optimieren?

Sitejet optimiert die auf unserer Plattform erstellten Websites, um eine geringe Ladezeit und somit eine hohe Punktzahl zu erzielen. Im Folgenden findest du eine Übersicht darüber, was Sitejet optimiert:

• Vermeide Umleitungen von Zielseiten: Weiter- bzw. Umleitungen sind in Sitejet für eine optimale Navigation nicht notwendig. Sollten trotzdem Weiterleitungen gewünscht sein, kannst du diese jederzeit manuell hinzufügen. Durch das einfache Verlinken von Unterseiten innerhalb eines Projekts über den Tab "Verlinken" wird in Sitejet sichergestellt, dass keine fehlerhaften Links erstellt werden. Fehlerhafte Links würden ansonsten zu Umleitungen auf 404-Fehlerseiten führen. 
• Eliminiere Render-Blocking von JavaScript und CSS in above-the-fold Inhalten: Sitejet optimiert die Struktur von Websites, um dieser Empfehlung zu entsprechen. Beispielsweise befinden sich alle Skripte am unteren Rand der Website, so dass der Inhalt zuerst geladen wird.
• Komprimierung aktivieren: Sitejet ermöglicht die gzip-Komprimierung für Verbindungen zu allen Websites. Dadurch wird sichergestellt, dass die Datei komprimiert über das Internet übertragen und anschließend vom Browser dekomprimiert wird.
• Nutze das Browser-Caching: Sitejet setzt Cache Header auf alle geladenen Dateien. Dadurch wird sichergestellt, dass Browser, die diese Dateien (CSS, JS und Bilder) herunterladen, wissen, wie man die Datei zwischenspeichert, sodass sie beim nächsten Zugriff des Browsers lokal auf dem Computer zur Verfügung stehen und nicht erneut heruntergeladen werden müssen.
• Verkleinere CSS, JS und HTML: Ressourcen wie CSS, JS und HTML werden automatisch minimiert. Dadurch wird sichergestellt, dass sie nach dem Herunterladen so klein wie möglich sind.
• Bilder optimieren: Für jedes Bild, das du in Sitejet hochlädst, kannst du eine umfangreiche Bildkompressions- und Größenänderungsprozess. Jedes Bild wird auf eine Auflösung verkleinert, die der tatsächlichen Darstellungsgröße im Browser möglichst nahe kommt. Auch bei beschnittenen Bildern wird nur der tatsächlich sichtbare Teil heruntergeladen. Beim Verkleinern werden die Bilder durch einen Komprimierungsalgorithmus geleitet. Hierbei wird darauf geachtet, dass die Größe des Bildes so weit wie möglich reduziert wird, während die Bildqualität optimal bleibt. Lese hierzu auch unseren Artikel über die häufigsten Fragen zu Bildern. 
• Priorisiere sichtbare Inhalte: Als Teil der Art und Weise, wie Sitejet jede Website erstellt, strukturieren wir die Website so, dass sie standardmäßig dieser Empfehlung entspricht. Das bedeutet, dass zuerst der Header-Inhalt und dann der Rest der Seite dargestellt wird.
• Reduziere die Antwortzeit des Servers: Bei dieser Überprüfung geht es vor allem darum, sicherzustellen, dass deine Website nicht "zu langsam" ist. Da Sitejet alle Websites auf Hochleistungs-Servern unseres Hosting-Partners Hetzner hostet, können wir sicherstellen, dass alle von uns gehosteten Websites schnell reagieren.

Was ist zu tun, wenn das Testergebnis nicht zufriedenstellend ist?

Sitejet bietet dir alle Voraussetzungen für hohe Punktzahlen. Testergebnisse werden immer von individuell verwendetem Code beeinflusst. Im Folgenden findest du Tipps, die die Erstellung einer optimaler Website gewährleisten:

• Eliminiere Render-Blocking von JavaScript und CSS in above-the-fold Inhalten:
  • Kartenelement im oberen Teil der Website: Wenn du ein Kartenelement oben auf deiner Sitejet-Website platzierst, wird dies in deinen PageSpeed-Rankings oft als negativ gewertet. Um dies zu beheben, verschiebe das Kartenelement an den unteren Rand der Seite.
  • Shopansicht im oberen Teil der Website: Wenn du ein Shopsystem oben platzierst, kann das für längere Ladezeiten sorgen. Unsere Empfehlung ist, den Shop weiter unten auf der Seite darzustellen. Eine Möglichkeit hierfür ist es, ein Bild und einen hilfreichen Text über dem Shop-Element einzuzufügen, so dass sich der Shop selbst nicht im Bereich "above the fold" der Website befindet.
  • Benutzerdefinierter Code/Skript in der Kopfzeile: Wenn du benutzerdefinierten Code in den Header der Website eingefügt hast, wird oft ein Hinweis von Google angezeigt, dass dies die Darstellung der Seite verlangsamt. Es gibt zwei Möglichkeiten, dies zu beheben: (1) Platziere den Code am unteren Rand der Website und nicht im Header. Dadurch wird der Code nach unten verschoben, so dass er später geladen wird und die Darstellung nicht blockiert. (2) Stelle sicher, dass das hier eingebettete Skript asynchron geladen wird. Das bedeutet, dass der Browser es im Hintergrund lädt und gleichzeitig den Rest des Inhalts der Website aufbaut.
    
    Um das asynchrone Laden von Skripten zu aktivieren, sind folgende Änderungen erforderlich:
  • Alter Code: <script src="https://example.com/script.js"></script>
  • Neuer Code mit ansynchronem Laden: <script src="https://example.com/script.js" async defer></script>

  Der "neue" Code weist den Browser an, diesen Code "async"-hron zu laden. Das sollte dabei helfen, das Google PageSpeed-Testergebnis zu verbessern.

  • iframe einbetten: Wenn du einen benutzerdefinierten iframe in eine Sitejet-Website im Header-Bereich einbettest, wird hierfür höchstwahrscheinlich eine Warnung ausgegeben. Bitte verschiebe diesen Inhalt weiter nach unten auf der Seite. Im besten Fall vermeidest du benutzerdefinierte iframes.

• Bilder in der Größe ändern: Es kann unter Umständen vorkommen, dass Bilder nicht optimal komprimiert wurden. Oder dein hochgeladenes Bild unkomprimiert ist einfach zu groß. Reduziere in diesem Fall die Anzeigegröße dieser Bilder innerhalb deiner Website mit einem anderen Tool. Das führt wie oben beschrieben zu einer geringeren Auflösung und damit zu kleineren Dateigrößen.
• Nutze das Browser-Caching: Wenn du benutzerdefinierten Code (Skripte von Drittanbietern) auf deiner Website einfügst, wird er oft von einer Website eines Drittanbieters geladen. Wenn diese Website das Caching nicht aktiviert, dann wird Google dies bemerken und empfehlen, das Browser-Caching zu aktivieren. Wende dich in diesen Situationen an diesen Drittanbieterdienst, um ihn um Aktivierung/Anpassung des Browser-Cachings auf seinem Server zu bitten.
• Deine Seite ist möglicherweise zu groß: Wenn du viel Inhalt auf einer Seite hast, kann es dazu führen, dass die Seite auch nach der Optimierung der Website groß ist. Erwäge, weniger Bilder zu verwenden oder deine Inhalte aufzuteilen, indem du Inhalte auf andere Unterseiten verschiebst.

Wann optimiert Sitejet nicht?

Es gibt einige Fälle, in denen Sitejet nicht versucht, die Website bei der Veröffentlichung zu optimieren. Dies ist z. B. der Fall, wenn du benutzerdefinierten Code, der jQuery verwendet, in den Header der Website eingefügt hast. Der Grund dafür ist, dass dieser Code oft jQuery oder die dmAPI-Funktionen erfordert. Da unsere Optimierung diesen Code weiter nach unten auf der Seite verschiebt, würde dieser nicht mehr funktionieren und ihn somit unbrauchbar machen.

Zurück zum Anfang