Einfache (SEO)-Tipps für bessere Ladezeiten

Es ist schon paradox: Die Verbindungsgeschwindigkeit (Bandbreite) steigt, und die User werden immer ungeduldiger. Das Thema Ladezeiten verbessern hat zwei positive Auswirkungen: Steigerung der Besucher-Zufriedenheit und Ranking-Verbesserung im Kontext der Suchmaschinenoptimierung (SEO). Wer schnell ist, wird also doppelt profitieren! Lesen Sie in diesem Artikel, was Sie für bessere Ladezeiten berücksichtigen sollten.

Google bevorzugt schnell ladende Webseiten. Das ist auf der einen Seite hinlänglich bekannt, auf der anderen Seite tendieren Webseiten zu immer mehr Ballast. Auch die Besucher möchten kurze Antwortzeiten und Inhalte, die schnell angezeigt werden. Google arbeitet immer wieder an der Schnelligkeit der Suchergebnis-Anzeige. Kunden sollen zügig bedient werden. Das sollten Sie auch für Ihre Internet-Präsenz beherzigen!

Pingdom Tools | www.wildner.de
Test the Load Time of a Web Page | http://tools.pingdom.com/fpt/

Welche Bereiche müssen untersucht werden?

  • Der Quelltext einer HTML-Seite
  • Die gesamten Assets der Webseite
    • Bilder / Medien
    • Stylesheets (CSS)
    • JavaScript / AJAX
    • Third party Elemente (zB Social Media Integration)
  • Das Content Management System
  • Der Server
  • Das Hosting-Paket
  • Der Provider

Die eigenen Seiten / das eigene CMS

1. Tipp: Code Entschlackung im Head-Bereich (Quelltext)

Im head Bereich der HTML-Seite stehen oftmals veraltete und unnötige Informationen. Hier kann der Rotstift angesetzt werden:

  • Löschen Sie unnötige Meta-Informationen
  • Verzichten Sie auf unnötige Leerzeilen
  • Fassen Sie externe Ressourcen zusammen (CSS / JavaScript)

2. Tipp: Bilder für das Web optimieren

Adobe Photoshop ist unverzichtbar für die professionelle Bildbearbeitung. Das Programm von Adobe hat aber deutliche Schwächen bei der Erstellung weboptimierter Bilder. Hier ist das Programm Fireworks von Adobe angesiedelt. Erstellen Sie Bilder für das Web also mit Adobe Fireworks, und nicht mit Adobe Photoshop!

  • Testen Sie unterschiedliche Ausgabeformate (JPEG | PNG | GIF)
  • Achten Sie auf sinnvolle Abmessungen
  • Jedes Byte zählt!

3. Tipp: Mit CSS Sprites arbeiten

Der Grundgedanke ist einfach: Anstatt Bilder in Einzeldateien abzuspeichern, wird eine Bilddatei mit mehreren Motiven erstellt. Die richtige Position für das Einzelmotiv wird via CSS-Hintergrundbild gesetzt. Was ist der Vorteil dabei? Die einzelne Datei ist wahrscheinlich kleiner (Dateigröße) als die Summe der Einzeldateien. Und Sie reduzieren die Anzahl der Browser-Requests.

Amazon arbeitet natürlich auch damit. Hier können Sie ein Sprite-Image bei Amazon anschauen! Hätten Sie nicht gedacht?

4. Tipp: Schlankes HTML (Quelltext im body)

Der Quelltext offenbart ein hohes Einsparungs-Potenzial. Der Eingriff ist meistens aufwändig, lohnt sich aber. Unter Umständen wird die Entschlackungskur sinnvollerweise mit einem Redesign / Relaunch kombiniert. Oftmals ist eine Neu-Erstellung (zum Beispiel auf der Basis eines neuen Templates oder Frameworks) einfacher als einen historisch gewachsenen Code zu entrümpeln…

HTML-Code Negativ-Beispiel

Dieses Beispiel aus der Praxis vereint Alles, was man nur falsch machen kann. Es handelt sich dabei nicht um eine uralte Seite, sondern um eine Website, welche erst 2011 einen kompletten Relaunch erfahren hat…

  • Nahezu jedes HTML-Element arbeitet mit einer Klasse.
  • Auf Tabellen wird immer noch nicht verzichtet.
  • Es sind viele veraltete HTML-Attribute im Einsatz.
  • Der Font-Tag wird noch verwendet.
  • Inline CSS mit dem style-Attribut gesetzt.

Vorgaben für schlankes HTML

  • Verzichten Sie möglichst auf HTML-Kommentare
  • Löschen Sie auskommentierte Bereiche
  • Verzichten Sie auf unnötige Leerzeilen
    (Der Code sollte aber lesbar bleiben)
  • Verzichten Sie weitgehend auf Tabellen (<table …>)
  • Verwenden Sie einen zentralen Bilder-Ordner
  • Verzichten Sie auf veraltete HTML-Tags und Attribute
    Siehe: SelfHTML
  • Erzeugen Sie eine saubere Trennung zwischen HTML-Struktur und CSS-Design

5. Tipp: CSS entschlacken

HTML und CSS müssen Hand in Hand arbeiten. Je besser die HTML-Struktur ist, desto weniger CSS Regeln sind notwendig. Achten Sie auf eine eindeutige Struktur, um eine schlanke Definition zu erhalten.

  • Verwenden Sie IDs, um Bereiche zu kennzeichnen
  • Arbeiten Sie mit tag-Definitionen in den IDs
  • Verwenden Sie Klassen für wiederkehrende Gestaltungen
  • Verzichten Sie auf inline CSS (style-Attribut im HTML)

Mit der Zeit wuchert die CSS-Datei zu. Hier sollten Sie regelmäßig ausdünnen. Löschen Sie nicht mehr benötigte Bereiche. Entfernen Sie auch auskommentierte CSS-Bereiche.

6. Tipp: Weniger DNS-Abfragen

Jeder Datei-Abruf ist ein Browser-Request. Werden Dateien von anderen Domains für die Webseite verwendet, muss zusätzlich eine DNS-Abfrage erfolgen. Das kostet Zeit. Die benötigte Resource (URL) muss aufgelöst werden. Die IP-Adresse muss ermittelt werden. Das Domain Name System ist hierfür verantwortlich.

Überlegen Sie also sorgfältig welche Dateien lokal ausgeliefert werden können, und welche zwangsläufig von einer anderen Adresse bezogen werden müssen.

7. Tipp: Auf allgemeine Ressourcen verweisen

Speichern Sie allgemeine Dateien nicht auf Ihrem eigenen Server. Prominentes Beispiel ist hier jQuery. Anstatt die Datei auf dem eigenen Server zu lagern, bietet es sich an die Datei von einer allgemeinen Adresse zu beziehen. So wird die Datei automatisch aus dem Browsercache verwendet, wenn der Besucher diese Datei früher auf einer anderen Website angefordert hatte. Und die Wahrscheinlichkeit ist mittlerweile groß!

Nicht so gut:

<script type="text/javascript" src="/js/jquery.min.js"> </script>

Deutlich besser:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>

Server-Einstellungen

8. Tipp: Komprimierte Übertragung via gzip

Die Übertragung erfolgt schneller, wenn die Dateien gepackt übertragen werden. Im Browser müssen die Dateien dann im Hintergrund entpackt werden. Damit dies automatisiert erfolgen kann, muss Ihr Provider dieses Feature unterstützen.

9. Tipp: Cache sinnvoll nutzen

Für wiederkehrende Besucher (die zwischenzeitlich Ihren Cache nicht löschen) können Sie genaue Vorgaben für Dateien machen. Bei SEOmoz ist ein sehr interessanter Artikel zum Thema Cache erschienen. Aus meiner Sicht sollte dieses Feature eher als letzte Option betrachtet werden. Wichtiger ist die Ladezeit beim ersten Aufruf.

Hosting & Provider

10. Tipp: Der eigene Server | Die eigene IP-Adresse

Wer’s erst mal einfacher haben möchte, kann mehr Geld in die Hand nehmen und das Hosting-Paket und / oder den Provider wechseln. Mit einem eigenen Server können Sie die Performance deutlich steigern:

  • CPU – Prozessor
  • RAM – Arbeitsspeicher
  • SSD – Solid State Disk Festplatte

Auf den eigenen Server läuft exklusiv das eigene Angebot. Damit hat man keine IP-Nachbarn. Wer es noch luxuriöser haben möchte, mietet auch gleich noch einen Fallback Server, der für Backups zuständig ist und einspringt, falls der Server ausfallen sollte…

Lesenswerte Artikel zum Thema im Web:

Ladezeiten überprüfen (Online Tools)

Wie immer gibt es sehr viele Tools zu diesem Thema im Web. Daher erhalten Sie hier nur eine kleine aber feine Auswahl:

Ladezeiten sind ein großes Thema! In diesem Artikel habe ich viele Ansatzpunkte aufgezeigt, um die Lade und Antwortzeiten zu verbessern. Die Anregungen reichen von leicht umsetzbar bis zu tiefen Eingriffen in die Website. Sie müssen zwar nicht alle Punkte erfüllen, bedenken Sie aber: Sie sollten in jedem Fall schneller laden als die Konkurrenz!

Veröffentlicht von

Philip Hoevels

Akademieleitung Wildner AG Qualitätsmanagement Online Marketing

3 Gedanken zu „Einfache (SEO)-Tipps für bessere Ladezeiten“

  1. Halli, hallo,

    nach dem Lesen dieses Artikels bin ich zwar deutlich schlauer geworden. Danke dafür aber es stellen sich bei mir einige Fragen:

    – Die Navigation mit HTML 5: wie soll sie aussehen, ich weiss, dass man die Navi aus SEO-Sicht am besten als Liste darstellen sollte. Wie sollte sie aber in HTML 5 aussehen

    – Bilder: Aus SEO-Sicht sollte man sich das Skalieren von Bilder mit HTML lieber sparen und die benötigten Bilder im passenden Format auf dem Server haben. Wie ist das den in HTML 5, da gibt es sowas wie „sizes“-Attribut. Ist das das gleiche wei Skalieren?

    – Wie schnell sollte man auf HTML 5 umstellen und welche auswirkung hat es auf SEO. wurde es mal irgendwie gemessen?

    Gruß

  2. Ich finde deinen Artikel sehr nützlich. Ich las schon öfter, wie wichtig die Pagespeed ist. Ich sah aber noch keinen so nützlichen Artikel über dieses Thema. Du widmest dich der Pagespeed sehr detailgetreu.

  3. Ich habe mich schon seit Längerem gefragt, ob es Sinn macht, Subdomains mit weniger guten Ladezeiten mit „noindex“ einfach von der Indexierung auszuschließen. Ist aber wahrscheinlich auch nicht unbedingt von Vorteil, oder?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.