Skip to main content

Ladezeiten richtig optimieren

Ladezeiten optimieren mit verkleinerten Bildern

Nimmt man sich den Grundgedanken von Google zu Herzen, nämlich das beste Ergebnis für den Suchenden, denken viele im ersten Schritt nicht an die Ladezeiten einer Website. Doch sind diese elementar wichtig, um dem Nutzer die Inhalte schnellstmöglich bereitzustellen. Schließlich möchte der Nutzer, nachdem er über die gepflegten Meta-Daten in den SERPs einen Klickanreiz verspürt hat und den Klick letztendlich ausführt, die Inhalte auch lesen können und nicht ewig warten müssen, bis die Seite geladen ist. Google sieht das mittlerweile gleich und bezieht die Ladezeiten als elementaren Bestandteil in die Bewertung einer Seite mit ein. Einer Vernachlässigung seitens eines Seitenbetreibers ist also absolut abzuraten.

Mobile Ladezeiten

Klar, bei einem stationären PC mit Glasfaserverbindung lädt auch eine schlecht optimierte Seite nicht spürbar langsam. Anders sieht es aber aus, wenn ein Nutzer diese Seite mit seinem Smartphone mit einer schlechten, mobilen Verbindung öffnen will. Hier sind Wartezeiten zwar üblicher, als am Desktop-PC, die Akzeptanz schwindet dennoch. Da Google bereits das Motto „mobile first“ angekündigt hat und extra Suchergebnisse für mobile Suchen anbieten möchte, wird die Ladezeit für mobile Seiten ein elementares Kriterium sein.

Neben Tools wie GTmetrix bietet Google mittlerweile auch eigene Tools zum Test seiner Seite – auch mobile – an. Um eine schnelle Abfrage zu starten, bietet sich das Tool Mobile Website Speed Test an. Zur genaueren Analyse, vor allem was genau das Problem ist inkl. Handlungsempfehlungen sind die PageSpeed Insights zu empfehlen.

Vor allem wenn man ein responsive Design verwendet, also keine extra mobile Version, sind Desktop-optimierte Dateien und Skripte schnell zu groß.

Ladezeiten optimieren: Google PageSpeed Insights

Bilder komprimieren

Das größte Problem stellen i. d. R. Bilder dar. Auf der einen Seite möchte man seine Website interessant und optisch ansprechend gestalten, auf der anderen sollten dadurch die Ladezeiten nicht negativ beeinflusst werden. Dies ist ein schmaler Grat, auf dem man sich bewegt, doch es gibt einige Tipps, wie man Bilder nicht nur effektiv, sondern auch effizient verwenden kann.

Bildabmessungen anpassen

Lade das Bild nur so groß hoch, wie es auf der Seite verwendet wird. Wenn die Seite bspw. eine Contentbreite von 600 Pixel hat, dann braucht es kein Bild, das breiter ist.

Vor allem bei Bilder, die nicht nur ein gestalterisches Element sind, sondern auch Inhalt rüberbringen sollen, nutzen viele mittlerweile eine Lightbox o. ä., um das Bild zu vergrößern. Ist der Größenunterschied zwischen eingebundenem Bild und gezoomten Bild minimal, kann ein und dieselbe Datei verwendet werden.

Beispiel 1:
Mein gezoomtes Bild ist 800 Pixel breit, mein Content 600 Pixel. Dann lohnt es sich eher nicht, eine zweite Datei hochzuladen.

Beispiel 2:
Anders sieht es aus, wenn die Zoom-Datei eine Desktopbreite von bspw. 1.900 Pixeln im Zoom erreichen soll. Dann ist die Datei natürlich über doppelt so breit und ein entsprechendes Vielfaches der Fläche größer, was die Dateigröße exponentiell wachsen lässt.
In diesem Fall empfiehlt es sich, die Datei in zwei Versionen hochzuladen. Einmal als Bild für die Einbindung in den Content – bei uns also mit einer Breite von 600 Pixel – und einmal als großes Zoom-Bild, welches mit einem Klick auf das Bild im Content in der Lightbox geöffnet wird.

Wichtig ist zudem, dass die Bildgröße in Pixel im HTML-Code hinterlegt werden, damit sie der Crawler lesen und einordnen kann. Bei mobilen Versionen von Seiten in Prozent.

Die Abmessungen eines Bildes können problemlos mit jedem Grafikprogramm angepasst werden. Bei Adobe Photoshop gibt es sogar die Möglichkeit, die Datei als weboptimierte Datei zu speichern. Weitere gute browserbasierende Tools sind TinyJPG bzw. TinyPNG. Für WordPress gibt es ebenfalls Plugins, die den Großteil der Arbeit für einen übernehmen können.

Ladezeiten optimieren: tinyPNG & tinyJPG

Bilddateityp nicht vernachlässigen

Auch beim Dateityp deiner Bilddatei lässt sich einiges an Platz sparen. PNG-Dateien sind von der Dateigröße (fast) immer kleiner als dasselbe Bild als JPG. Auch ist für einfache Designelemente oder Titelbilder von Artikeln nicht notwendig, diese Bilder als JPG abzuspeichern, auch wenn es heißt, dass Fotos grundsätzlich als JPG gesichert werden sollen.

Bei einem imposanten Bild von einer Landschaft im Sonnenuntergang sollte man das JPG-Format natürlich immer bevorzugen, da häufig die Farben besser zu Geltung kommen. Aber 08/15-Fotos ohne größere Bedeutung, die lediglich als Eyecatcher oder gestalterisches Element verwendet werden, fühlen sich auch im PNG-Format wohl.

CSS-Sprites nutzen

Bilder, die sehr häufig vorkommen bspw. als Designelement, können die Ladezeiten ebenfalls verlangsamen. Deshalb macht es Sinn, allgemeine Bilder wie z. B. Zertifikate, Bilder von Zahlungsdienstleistern etc. in einer Datei zu sammeln. Diese wird dann nur einmal geladen und wird immer wieder angezeigt. Über die Bestimmung im HTML-Code, welcher Teil des Bildes gezeigt werden soll, wird nur das von der Bilddatei angezeigt, was man sehen will.

Beispiel:
Im Footer befinden sich Bilder von fünf verschiedenen Zahlungsmethoden (Mastercard, Visa, Sofortüberweisung, PayPal & Vorauskasse). Die Logos aller fünf Zahlungsdienstlesitern kann man in einem Bild zusammenfassen. Dieses Bild wird nun fünf Mal angezeigt, mit dem jeweiligen Ausschnitt, jedoch muss es nur einmal geladen werden.

PHP 7.1 & PHP 7.2

Bereits seit Dezember 2015 gibt es PHP 7, welche mittlerweile bei den meisten Hostern auch einstellbar ist. PHP 7 ist von Grund auf schon 30 % schneller als die letzten PHP-5-Versionen und ist damit allein schon ein einfaches Instrument, um die Ladezeiten zu optimieren. Ein Jahr später wurde PHP 7.1 veröffentlicht und Ende November 2017 soll auch PHP 7.2 veröffentlicht werden.

Case-Study Ladezeiten PHP 7.1

Bei einer, von der OSG betreuten WordPress-Seite, haben wir die Ladezeiten unter jeweils denselben Voraussetzungen mit den verschiedenen Versionen getestet. Die Ergebnisse waren erstaunlich:

Die Ladezeit unter der ursprünglichen PHP-Version 5.6 lag bei 5,6 Sekunden. Durch die Umstellung auf PHP 7.0 sank sie auf 3,3 Sekunden, nach der PHP-7.1-Umstellung auf 3,1 Sekunden. Als wir dann zusätzlich den OpCache noch aktiviert haben, lag die Ladezeit unter PHP 7.0 bei 3,0 Sekunden, bei PHP 7.1 sogar bei sagenhaften 2,4 Sekunden.

Vergleich der Ladezeiten mit PHP 7 und OpCache

 

Wir haben die Ladezeit also um 58 % und um mehr als die Hälfte verbessert. Und das in wenigen Sekunden und mit zwei Klicks (Umstellung PHP-Version & Aktivierung OpCache). Das ist sicher eine der effektivsten und schnellsten Möglichkeiten, um die Ladezeiten nachhaltig und für alle Geräte deutlich und spürbar zu verbessern.

Umstellung auf PHP 7.1

Die Umstellung ist recht einfach und kann über die Server-Einstellungen beim Hoster durchgeführt werden. Sie muss manuell geschehen, eine automatische Umstellung erfolgt nicht. Grund hierfür ist die Kompatibilität. Die gängigen CMS wie WordPress und Co. haben in den aktuellen Versionen keine Probleme mit der Umstellung, da sie kompatibel gecodet sind. Plugins, veraltete Versionen oder auch selbst programmierte Bereiche können unter Umständen inkompatibel sein. Die ganze Seite funktioniert dann nicht mehr. Stellt man die Version wieder auf die ursprüngliche zurück, geht alles wieder.

OpCache unter PHP 7.1

Seit PHP 7 gibt es auch die Server-Einstellung OpCache. Dies ist ein sogenannter Bytecode-Cache, welchen es erst seit PHP 7 gibt. Er bezweckt, dass PHP-Skripte bei jedem Aufruf komplett neu verarbeitet werden müssen.

Auch diese Server-Funktion muss man lediglich aktivieren und es funktioniert. Tests haben gezeigt, dass OpCache bis zu 50 % Performance-Gewinn erreichen kann.

Javascript & CSS komprimieren

So schön wie Javascript für die Nutzererfahrung und die Usability scheint, so schwierig ist es für die Ladezeiten. Viele Seiten sind häufig zugemüllt mit unnötigen Javascripts, die zudem überall verteilt sind und den Crawler an seine Grenzen bringen.

Neben bekannten Javascripts wie bspw. dem Google Analytics Code, werden auch Sharebuttons von sozialen Medien, die in der Sidebar mitlaufen, „Back-to-top“-Buttons, Popups, die sich nach einer gewissen Verweildauer öffnen oder auch die immer beliebter werdenden Livechats mit dem Kundenservice via Javascript geöffnet.

Dies gilt ebenso für die Stylesheets im CSS-Format. Viele große Seiten haben mehrere und/oder sehr große Stylesheet-Dateien, die die Ladezeiten verlängern. Es gibt drei grundlegende Tipps zum Vorgehen der Komprimierung von Javascript und CSS:

  • Zusammenfassen:
    Styles und Skripte in so wenigen Dateien wie möglich vereinen. Jede Datei die ausgeliefert wird, verursacht eine Abfrage, welche Ladezeit kostet. Ziel muss es sein, so wenig wie möglich Serverabfragen zu verursachen.
  • Minifizieren:
    Unnötige Leerzeichen, Absätze/White Spaces, Tabulatoren etc. entfernen. Je kürzer der Code, desto besser die Ladezeit. Umsetzung ist vor allem bei komplexen Seiten schwierig, da die Übersichtlichkeit für den Programmierer natürlich komplett verloren geht, wobei es auch hierfür Tools gibt, die dieses Problem beheben können.
  • Komprimieren:
    Gzip-Komprimierung serverseitig aktivieren. Gzip kann man mit den ZIP-Archiven am PC vergleichen. Die Dateien werden komprimiert und als eine Datei an den Nutzer ausgeliefert. Funktioniert i. d. R. problemlos.

Priorisierung der Inhalte

Da Websites oft sehr lang sind, muss man zwangsläufig scrollen. Vor allem am Smartphone ist dies noch mehr der Fall. Dies kann man jedoch für die Optimierung der Ladezeiten effektiv nutzen:
Javascripts & CSS, dass für die Darstellung im sofort sichtbaren Bereich – also „above the fold„, d. h. ohne dass man scrollen muss – benötigt wird, muss inline im HTML platziert sein. So müssen diese Skripte nicht über ein externes Sheet geladen werden. Hier gilt jedoch, die vorherigen Tipps zu beachten. Nur was wirklich notwendig ist! Sonst wird der Code wieder zu groß und der positive Effekt verpufft.

Alles Weitere sollte asynchron geladen werden. D. h. erst nachdem der zuerst sichtbare Bereich geladen hat. Bei vielen Seiten ist das üblich, dass von oben nach unten geladen wird.

Geeignete Tools für die Komprimierung von CSS und Javascript sind JScompress und CSS Minifier.

Weiterleitungsschleifen

Deine Seite kann noch so gut auf gute Ladezeiten optimiert sein, wenn Du bei den Weiterleitungen einen Fehler machst. Bei vielen Seiten werden unterschiedliche Schreibweisen zur richtigen Version weitergeleitet.

Beispiel Trailing Slash:
Deine Seite ist unter „deineseite.de/lexikon/“ und über „deineseite.de/lexikon“ erreichbar. Korrekterweise hast du „deineseite.de/lexikon/“ auf die „deineseite.de/lexikon“ per 301 weitergeleitet. Auf der Zielseite „deineseite.de/lexikon“ ist allerdings ein Canonical zur anderen Seite „deineseite.de/lexikon/“ gesetzt. Das heißt, der Crawler fährt im Kreis und springt von der ersten zur zweiten Seite und von dieser wieder zur ersten.

Es gilt: Jede neue Abfrage kostet Zeit und ist in diesem Fall völlig unnötig.

Trailing Slash

Wenn wir schon beim Trailing Slash sind: Eine Seite mit Trailing Slash lädt i. d. R. schneller, als eine Seite ohne. Das heißt, „deineseite.de/lexikon/“ mit ist der „deineseite.de/lexikon“ ohne Trailing Slash immer vorzuziehen.

Fazit

Natürlich gibt es noch unzählige weitere Optimierungsmöglichkeiten der Ladezeiten. Wie immer im SEO ist man sich auch hier nicht einig, wie viel was wirklich bewirkt. Doch unabhängig von den direkten Auswirkungen auf die Suchmaschine, muss man festhalten, dass die ausgehenden User Signals wichtig für den Kunden und somit wichtig für die Suchmaschine. Nur wer sich auf einer Seite wohl fühlt, ist ein potentieller Kunde und kommt zurück. Wenn man schon am Laden der Seite scheitert, wird der mühevoll gepflegte Content gar nicht gesehen und die Relevanz der Seite wird ad absurdum gelegt.

Optimiert Eure Seiten, denn auch für Euch selbst, ist es doch schöner, wenn Ihr Onpage-Analysen ohne lange Wartezeit durchführen könnt!

Titelbild: Copyright © iStock/den-belitsky

OSG Newsletter

Ladezeiten richtig optimieren
5 (100%) 6 votes


Ähnliche Beiträge


Kommentare


Martin 21. Januar 2017 um 0:00

Schöner Artikel und gute Zusammenstellung. Gerade bei Googles PageSpeed Insights ist aber zu beachten, dass Google selbst die Ladezeit an sich nicht einmal misst und komplett außen vor lässt. Eine blinde Überoptimierung anhand der Empfehlungen diesen Tools führt dann schnell zu Einbußen bei der Customer Experience (zum Beispiel ein unschöner grafischer Seitenaufbau bis die Seite fertig geladen ist). Eine Seite mit 60 Punkten bei Google kann also tatsächlich schneller laden als eine Seite mit einem Wert von 80.

Antworten

Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

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

*
*