« Zurück zu allen Tipps

Der Google PageSpeed Wert

Home / Tipps / Google PageSpeed Wert /

Einführung

Der Google PageSpeed Wert bewertet Deine Ladegeschwindigkeit auf einer Skala von 1 bis 100. Google nutzt hier nicht einfach die Ladezeit einer Webseite, da sonst visuell ausgeprägte Seiten, wie zum Beispiel YouTube, abgestraft werden würden. Stattdessen prüft Google, wie gut Deine Webseite optimiert ist und berechnet mit dieser Basis Deinen Wert.

Hier geht es zum PageSpeed Test (extern, developers.google.com)

Der Test an sich ist einfach, Du gibts den URL Deiner Webseite ein und Google spuckt Dir den Wert aus, den es an Deine Webseite vergibt. Auf dem Screenshot rechts kann Du den Wert von JA Alumni sehen. Du siehst hierbei:

  1. Den URL Deiner Seite
  2. Den aktiven Tab, hier der Wert für mobile Geräte
  3. Den Tab, hinter dem sich der Desktop Wert versteckt
  4. Die Problemzone deiner Webseite
  5. Weitere Optimierungsmöglichkeiten
  6. Alle erfolgreich durchgeführten Optimierungen

Zudem kannst Du rechts daneben sehen, wie Google Deine Webseite sieht und wie der erste Blick Deiner Besucher aussieht. Googles Empfehlung hier ist mindestens 85 für mobile Geräte sowie 90 für Desktops.

Zu guter Letzt kannst Du weiter unten auf der Seite sehen, ob Google die Webseite als Smartphone-freundlich ansieht. Hier empfiehlt Google übrigens einen Score von 100!

 

Die einzelnen Optimierungs­möglichkeiten

Kommen wir nun zu den einzelnen Elementen in alphabetischer Reihenfolge:

 

Antwortzeiten des Servers reduzieren

Viele Webseiten setzen heute auf Systeme, wie zum Beispiel Wordpress, Joomla, Drupal, oder ähnliche. Diese Webseiten überprüfen bei jedem Aufruf, ob sich der Inhalt geändert hat. Falls Du auf so ein System setzt, kann es sein, dass Deine Webseite nur sehr langsam lädt. „Antwortzeiten des Servers reduzieren“ zeigt Dir, dass Dein zugrunde liegendes System nur langsam ausgeführt wird, was zu einer langsamen Antwort Deines Servers führt.

Eine ausführliche Erklärung und wie Du diesen Punkt behebst, kannst Du hier finden.

 

 

Bilder optimieren

Eine Digitalkamera sowie die meisten Programme speichern Bilder ohne deren Größe zu optimieren. Wenn Bilder nur auf der Festplatte gespeichert werden, ist das auch kein Problem. Im Internet bedeutet das allerdings, dass mehr Daten als nötig übermittelt werden müssen. Das selbe Problem betrifft Bilder, die mit einer Auflösung von 3000x3000 hinterlegt sind, allerdings nur mit 200x200 Pixel angezeigt werden.

Weitere Probleme und Wege wie du Deine Bilder optimierst, lernst Du hier kennen.

 

 

Browser-Caching nutzen

Eine richtig eingerichtete Webseite ermöglicht es Deinem Browser, bestimmte Teile zwischen zu speichern, wenn sich diese nicht ändern. Durch diese Einstellung muss Dein Browser die gespeicherten Dateien nicht mehr vom Server laden.

Eine genauere Beschreibung und wie Du Deinen Server richtig konfigurierst, zeige ich Dir hier.

 

 

CSS reduzieren

CSS bezeichnet die Design Informationen Deiner Webseite. Um Struktur in Dein Design zu bekommen, hast Du als Designer oder Dein Entwickler extra Leerzeichen und Zeilenumbrüche in die CSS Daten eingebaut. Diese benötigt Dein Browser aber nicht, da er Dein Design auch ohne sie anzeigen kann. Beim CSS reduzieren, geht es darum diese zusätzlichen Informationen zu entfernen, damit die Datei so klein wie möglich ist.

Schaue Dir an, wie Du Dein CSS reduzieren kannst. (Gerne auch automatisch.)

 

 

HTML reduzieren

Der Inhalt Deiner Webseite wird im HTML Format übertragen. Dabei gibt es die selbe Problematik, wie schon im vorherigen Punkt „CSS reduzieren“.

Verkleinere Dein HTML auf die minimale Größe. (Gerne auch automatisch.)

 

 

JavaScript reduzieren

Zu guter Letzt ist das JavaScript für alle aktiven Elemente auf Deiner Webseite zuständig. Das beinhaltet alles, was sich bewegt und auf deine Klicks reagiert. Auch hier können zusätzliche Leerzeichen und Umbrüche benutzt werden, um das JavaScript zu strukturieren.

Lerne, die Du Dein JavaScript reduzieren kannst. (Gerne auch automatisch.)

 

 

JavaScript- und CSS-Ressourcen, die das Rendern blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen

Der sogenannte „Fold“ einer Webseite zeigt an, welcher Teil der Webseite dem Besucher angezeigt wird, ohne dass er skrollen muss. Bei der sogenannten „Above the Fold“-Optimierung werden alle wichtigen Informationen zuerst gesendet, die zum Anzeigen dieses Inhalts benötigt werden. Dies ist die Königsdisziplin der Webseitenoptimierung.

Was Du über „Above the Fold“ wissen musst und wie Du die „Above the Fold“-Optimierung durchführst, erfährst Du hier.

 

 

Komprimierung aktivieren

Jeder Webserver kann eine Webseite komprimieren, wenn er sie ausliefert. Du kannst Dir das wie eine ZIP-Datein vorstellen. Damit Dein Server dies macht, muss er richtig eingestellt werden.

Alle weiteren Informationen und wie du die Komprimierung aktivierst, siehst du hier.

 

 

Sichtbare Inhalte priorisieren

Wenn Du eine Webseite aus dem Internet lädst, bekommst du Sie in vielen kleineren Paketen zugeschickt. Manche Webseiten sind so groß, dass mehrere Pakete ohne den eigentlichen Inhalt an Dich geschickt werden. Das verlangsamt das Anzeigen von Webseiten, besonders auf mobilen Geräten.

Lerne, was genau das Problem ist und wie Du Deine Sichtbaren Inhalte priorisieren kannst hier.

 

 

Zielseiten-Weiterleitungen vermeiden

Manche Webseiten leiten Dich bei dem ersten Aufruf auf eine andere Unterseite weiter. Bei Google wirst du zum Beispiel von „http://www.google.de“ zu „https://www.google.de/?gws_rd=ssl“ weitergeleitet. Google macht dies, um bei Dir eine sichere Verbindung zu aktivieren. Diese Weiterleitungen kosten allerdings extra Zeit, weshalb man auf sie verzichten sollte.

Wie du Weiterleitungen verhinderst und warum sie ein Problem sind, erfährst du hier.

 

 

 

Die einzelnen Nutzer­erfahrungen

Unter den Punkten der Nutzererfahrung fallen alle Optimierungsmöglichkeiten für Smartphones:

 

Anpassung von Inhalten auf einen Darstellungsbereich

Wenn Deine Webseite nicht für mobile Endgeräte optimiert ist, kann es sein, dass einzelne Elemente größer sind, als das gesamte Display. Versuche Deine Seite auch in einer mobilen Version zur Verfügung zu stellen, um hier die volle Punktzahl zu erreichen.

 

 

Darstellungsbereich konfigurieren

Für mobile Browser solltest Du den sogenannten Viewport definieren. Dieser sagt dem Smartphone, wie Deine Webseite dargestellt werden soll. Zudem gibt er an, ob Deine Webseitenbesucher die Seite vergrößern dürfen. Für Ratschläge zum Viewport kannst du nach dem Element meta viewport suchen.

 

 

Lesbare Schriftgrößen verwenden

Ein weiteres Manko mancher Webseiten ist das Benutzen von kleinen Schriftarten. Auch hier ergibt sich die Problematik, dass man diese Schriftarten auf einem kleinen Display nicht lesen kann. Falls Deine Webseite hier noch Nachholbedarf hat, vergrößere alle kleinen Schriftarten.

 

 

Optimale Größe von Links oder Schaltflächen auf Mobilgeräten einhalten

Es kann sein, dass kleine Buttons oder Links nur sehr schwer zu treffen sind, wenn Deine Webseite auf einem Mobilgerät geöffnet wird. Dieser Punkt zeigt Dir, dass du Dein Design für Smartphones noch einmal über denken solltest.

 

 

Plugins vermeiden

Smartphones können verschiedene properitäre Formate wie Flash, Sliverlight, usw. nicht darstellen. Mit diesem Punkt möchte Dich Google darauf aufmerksam machen, dass Du noch auf solche Technologien setzt. Da sie allerdings veraltet sind, wird es langsam Zeit auf neuere Technologien umzusteigen.