Was beeinflusst die Ladezeit einer Webseite – zielgerichtet zum Erfolg (Teil 2)

In einem unserer letzten Beiträge haben wir die Relevanz einer optimierten Ladezeit für SEO etwas ausführlicher geschildert und einige Tools zur Analyse der Web-Performance vorgestellt, mit denen Potentiale identifiziert werden können. Bei der Optimierung der Ladezeit geht es vorrangig um technisches SEO und hier reicht es schon lange nicht mehr aus, dass sich ein SEO (egal ob Inhouse oder Agentur) sich mit der Webseite strukturell auseinander setzt. Vielmehr könnte die Person, die die Aufgabe hat, die Schlüsselstellen für eine optimierte Performance zu identifizieren, eine Art iterative Checkliste erstellen, an der sich ein oder mehrere Webentwickler orientieren können. Denn meistens hat gerade die Entwicklung eine Menge um die Ohren, die Seite weiterzuentwickeln und wenig Zeit, um Dinge extra für den SEO umzusetzen. Hat man nun entsprechende „Ladehemmer“ identifiziert, weiß aber nicht was nun zu tun ist, um die Ladezeit der Webseite zu verbessern – dem hilft der folgende Beitrag.

Ladezeit der Webseite verbessernAbb.01: Ladegeschwindigkeit beeinflusst die User-Experience, daher gilt es stets die Performance zu optimieren

Performance Optimierung mit SEO & IT in Harmonie

Eine strukturell gut aufgearbeitete Tabelle, die einzelne Aufgaben auflistet, kann die nachträgliche Umsetzung beschleunigen. Ein Beispiel, wie man eine solche ferstellt, möchten wir euch im Folgenden zeigen.

Seitentypen festlegen um Optimierungsmaßnahmen zu priorisieren

Seiten vom gleichen Typ binden Onpage meist die gleichen Elemente ein und es werden ähnliche Scripte geladen. Optimiert man bspw. die CSS-Datei der Produktseiten, werden die Änderungen auf allen Seiten dieses Typs angewendet. Daher ist es sinnvoll im ersten Schritt die Webseite in Seitentypen zu strukturieren. Anschließend legt man eine Priorität für jede Ausprägung fest, die davon abhängig ist, wie wichtig diese Seite für das Ranking in Suchmaschinen ist. Je wichtiger der Seitentyp, desto dringender ist nachher die Optimierung der Ladezeit. Eine Liste könnte folgendermaßen aussehen:

SeitePrio der Seite (1 hoch…3-niedrig)
Startseite1
Hauptkategorien2
Unterkategorien2
Seiten zum Unternehmen (Über uns etc.)3

Diese Liste gilt aus Ausgangspunkt für weitere Recherchen und wird natürlich noch nicht der Entwicklung präsentiert. Als nächstes muss für jeden dieser Seitentypen identifiziert werden, welche Optimierungpotentiale bestehen und das identifizierte Problem zugeordnet werden. Im groben sind das meist die folgenden:

Die Hebel zur schnelleren Ladezeit

JavaScript

In der optimierten Verwendung von JavaScript steckt häufig das meiste Potential, für eine schnelle Seite. Denn oftmals werden Scripte seitenweit eingebunden, obwohl sie nicht auf dem Seitentyp verwendet werden. Diese müssen identifiziert und entfernt werden. Ein weiterer Punkt sind Scripte die nicht asynchron laden, auf deren Abschluss also gewartet werden muss, bevor weitere Webseiten-Elemente geladen werden. Zusätzlich sollten Scripte nie in das HTML eingebunden werden – also raus damit und in externe Dateien auslagern.

CSS

Inline-CSS und zu viele eingebundene CSS-Dateien sind ein weiterer häufiger und vor allem vermeidbarer Grund, weshalb Seiten langsamer laden als sie es müssten. Auch ungenutzte CSS-Elemente in der geladenen Datei stellen ein Optimierungspotential dar.

Bildgrößen

Sehr oft werden Bilder eingebunden, die entweder von den Abmaßen zu groß sind oder nicht weit genug komprimiert wurden (bei gleichbleibender Qualität). Hier gilt es jedoch nicht bei der Webentwicklung anzusetzen, sondern bei der Bereitstellung und die übernimmt meist die Grafikabteilung.

Caching

Caching kann einmal auf dem Server selbst oder im Browser, also clientseitig, geschehen. Der Servercache sollte nur dann geleert werden, wenn es wirklich um wichtige Updates geht, die nicht hinausgezögert werden können. Das Leeren, „weil man mal sehen möchte wie es aussieht“ sollte man sich sparen und lieber auf einen Editor mit vernünftigem Vorschau-Modus bzw. auf eine Staging-Umgebung setzen.

so funktioniert CachingAbb.2: vereinfachte Darstellung für den Caching-Vorgang

Daten, die im Browser-Cache gehalten und per HTTP-Header übermittelt werden (z.B. Trackingscripte o.ä.), sollten ein Ablaufdatum bekommen, das nicht zu knapp bemessen ist, aber auch nicht die Anzeige wichtiger Webseitenelemente behindert.

Komprimierung

Dokumente auf dem Server sollten nie unkomprimiert zur Verfügung gestellt werden. Eine sehr gute Möglichkeit dafür bietet die Ausspielung über gzip-komprimierte Inhalte, die sowohl auf Apache- als auch unter IIS-Servern angewendet werden kann. Wie gzip funktioniert, wird bei sysadminlife gezeigt. Da diese Methode ganzheitlich auf alle Dokumente des Servers angewendet wird, muss dieser Punkt keiner speziellen Seitenkategorie zugeordnet werden.

SEO-Newsletter bestellen

Ladezeitoptimierung am Beispiel base.de

Im ersten Schritt hatten wir beipielhaft festgelegt, dass die Startseite bei der Ladezeitoptimierung Prio 1 genießt. Mit dem im ersten Teil vorgestellten Tool „Google PageSpeed“ wollen wir nun die Tabelle für unsere Webentwicklung weiter auffüllen. Wichtig zu wissen ist, dass es in dem Tool eine Unterscheidung der Mobile- und der Desktop-Variante gibt, egal ob die Webseite responsive Inhalte zur Verfügung stellt oder bspw. eine mobile-optimierte Subdomain hat. Der Mobilfunkanbieter base.de hat keine mobil-optimierte Version was u.a. aus Usability-Gründen nicht optimal ist. Im folgenden Beispiel schauen wir uns nur die Optimierungspotentiale für die Desktop-Version an.

BASE StartseiteAbb.3: Startseite von BASE, an der wir exemplarisch Optimierungspotentiale aufdecken möchten

PageSpeed kategorisiert die Empfehlungen nach 3 Klassen:

  • Behebung erforderlich – was äquivalent zu Prio 1 gesehen werden kann
  • Behebung empfohlen – Prio 2
  • Bestandene Regeln – (vorerst) kein ToDo

Der folgende Screenshot zeigt die ermittelten Probleme bei der Ladezeit:

PageSpeed Analyse am Beispiel von base.deAbb.4: PageSpeed Analyse am Beispiel der Webseite von Base

Unsere Tabelle wird demnach erweitert und sieht dann wie folgt aus:

SeitePrio der Seite (1 hoch…3-niedrig)OptimierungElementePrio der Optimierung
http://www.base.de/1Festlegen eines Ablaufdatums…/track.js1
…/1×1.gif1
…/newtention.min.js1
…/acfp.js1
…/1×1.gif1
blockierendes JavaScript debuggen oder entfernen…/mmcore_base.js1
…/v5/1
CSS-Darstellung optimieren (CSS für bestimmte Elemente gliedern)…/app-base-min.css1
Server antwortet zu langsamServer2
Sicherstellen, dass alle Elemente des Servers komprimiert werden. Aufgeführte sind es bspw. nicht…/trk2
…/newtention.min.js2
…/portaldetection.js2
…/proactive.aspx2
HTML-Code reduzieren (Kommentare, Leerzeichen etc. entfernen)HTML2

Tools, die dir helfen schneller zu arbeiten

Nicht genutzte Scripte können mit dem Chrome- und Firefox-Plugin WASP identifiziert werden. Um ungenutztes CSS zu identifizieren kann man das Firefox-Plugin Dust-Me nutzen oder – mit IT Power – Helium implementieren. Dust-Me ist bei uns im Einsatz und deshalb hier eine kleine Warnung zur Anwendung: das bestimmte Elemente auf einer Seite nicht genutzt werden, heißt nicht dass sie in einem anderen Bereich nicht genutzt werden – hier kann man bspw. mit SVERWEISEN in Excel arbeiten.

Webbentwickler müssen kein SEO beherrschen, aber es verstehen und unterstützen.

Um die gewinnbringendesten Optimierungsansätze als erstes anzugehen erstellt man anhand der Tabelle Aufgaben für die Webentwicklung. Alle Themen die 2-mal Prio 1 genießen müssen als erstes angegangen werden. Danach folgen diejenigen, die in der Spalte „Prio der Seite“ mit 1 markiert wurden und in der Spalte „Prio der Optimierung“ eine 2 zugewiesen bekommen haben.

Regelmäßiges updaten der Tabelle und vergleichen mit den Ergebnissen des gewählten Analyse-Tools ist Pflicht, denn meist behebt man mit der Optimierung der einen Baustelle gleichzeitig viele andere Fehler.

Fazit

Ein Auge auf die Performance der Webseite zu haben ist gleichzeitig das Betätigungsfeld des SEOs, als auch der Webentwicklung, IT oder auch der umsetzenden externen Mitarbeiter. Als SEO gilt es nicht alle auftretenden Fehler allein zu lösen, sondern an den richtigen Stellen die Aufmerksamkeit für seine Anliegen zu erhalten. Deswegen müssen Webentwickler kein SEO beherrschen, aber sie müssen es verstehen und ggf. auch schon vorab die Dinge im Blick haben und in die Entwicklung aufnehmen.

Was beeinflusst die Ladezeit einer Webseite – zielgerichtet zum Erfolg (Teil 2)
5 (100%) 7 votes
Danny Behne
Danny Behne () ist als SEO Consultant mit für den Auf- und Ausbau der SEO- & Online-Marketing-Strategien innerhalb der mediaworx berlin AG verantwortlich. Trotz oder vor allem wegen seines Daseins als Vollblut SEO, ist er ein Gedankenspieler der gerne auch mal eine Kamera in die Hand nimmt.
You may also like
Deutsche Automobilhersteller im SEO-Vergleich
Intersport.de im SEO Quickcheck
Hardgainer oder Kraftprotz – intersport.de im SEO-Check
5 Kommentare
  • 30 Dez 2014 at 22:30

    @Heiko
    Cool. Ich hatte nur das runterskalieren gesehen.
    Immer wieder lustig, wenn man selbst (in dem Fall ich) meint, alles richtig zu machen und doch einiges übersieht.

    Jedenfalls ist die Seite jetzt echt schnell. War ja schon davor nicht langsam.

    Ebenfalls einen guten Rutsch ins neue Jahr!

  • 30 Dez 2014 at 13:03

    Kleine Anmerkung zu dem Teil mit den Bildgrößen..

    ..beim Artikel hier könnten (etwa) 150KB eingespart werden 😉

    • 30 Dez 2014 at 13:24

      @Walter: Danke für deine Hinweis. Habe mal alle 4 Bilder etwas optimiert – nun sind es sogar 330KB weniger ;o)

      Wünsche Dir einen guten Rutsch ins neue Jahr!

  • […] Was beeinflusst die Ladezeit einer Webseite (Teil 2 dieser Serie) […]

  • […] Nächster Artikel → ← Vorheriger Artikel […]

Deine Meinung ist gefragt

Deine Meinung*

Dein Name*
Deine Seite