logologo

Webseite Schneller Laden Anleitung

Webseiten sollen benutzerfreundlich sein. Um die organischen Suchergebnislisten zu erstellen, verwendet Google circa 200 Kriterien.

Die besten Ranking-Plätze sind nur schwer zu erreichen. In allen Seitenkategorien zwingt der Wettbewerb die Seitenbetreiber dazu, stetig eine Optimierung der Webseite durchzuführen. Das Ziel dabei ist die Zufriedenstellung der Besucher und die Vermittlung eines Erlebnisses. Ein wichtiger Aspekt sind dabei die Seitenladezeiten von Webseiten. Denn wenn die Webseite nur sehr langsam lädt, verlieren Seitenbesucher schnell die Geduld. Für Sie heisst das, dass Sie Ihre Besucher an Ihre Konkurrenten verlieren.

1. Optimierung von Bildgrösse und Bildformaten

Bilder sind in der Regel grosse Dateien und um geladen zu werden, braucht das eine grosse Bandbreite. Die Ladezeit Ihrer Webseite verlangsamt sich somit. Deshalb sollten Sie die Bilder verkleinern.

Sie sollten dabei beachten, dass eine Verringerung der Bildgrösse mittels HTML lediglich die Darstellung, nicht aber die Dateigrösse verkleinert. Deshalb sollten Sie für die Verkleinerung externe Bildeditoren verwenden, wie beispielsweise Photoshop.

Um Bilder, Graphiken und Fotos zu komprimieren, können Sie zudem folgende Tools verwenden

  • Smush.it
  • SuperGIF
  • JPRG & PNG Stripper
  • Online Image Optimizers

Wenn Sie für Ihre Bilder die Standardformate JPG, PNG oder GIF verwenden, tragen Sie auch schon automatisch zur Verbesserung der Seitenladezeiten bei.

2. Optimieren von Abhängigkeiten

Um Abhängigkeiten zu optimieren, können Sie sich auf die folgenden drei Einstellungen konzentrieren:

  1. Plug-ins

Plug-ins können die Seitenladezeiten stark verlangsamen. Allerdings sind bestimmte Plug-ins heute unausweichlich. Dies gilt ins Besondere in Bezug auf soziale Medien.

Überprüfen Sie für jeden Fall neu, ob ein Plug-in notwendig ist oder ob auch eine Alternative verwendet werden kann, wie beispielsweise ein CMS (Content Management System) mit integrierten sozialen Plug-ins.

  1. Scripts für ein Besucher-Tracking

Die Bewegungen von Besuchern auf der Webseite überprüfen und nachverfolgen zu können, ist essentiell, um etwaige Anpassungen vornehmen zu können. Allerdings hat das Besucher-Tracking negative Auswirkungen auf die Seitenladezeiten. Verwenden Sie aus diesem Grund nur ein Analyse-Tool. Dies könnte beispielsweise WP Stats sein, wenn Sie mit dem WordPress CMS arbeiten. Alternativ können Sie auch auf die Dienste von Google Analytics zurückgreifen.

  1. Content Management Systeme

Content Management Systeme (CMS) erleichtern die Verwaltung von Webseiten extrem. Zudem werden sie selbst stetig verbessert. Insofern empfiehlt es sich, die angebotenen Upgrades der CMS durchzuführen, um auf dem neuesten Stand zu bleiben. Allerdings sollten Sie dabei beachten, dass das Upgrade nicht direkt auf Ihrer Liveseite vorgenommen wird, falls Komplikationen auftreten. Es empfiehlt sich aus diesem Grund, die Upgrades auf einem anderen Server durchzuführen und vor der Livestellung zu testen. Um eine Verbesserung der Seitenladezeiten zu erreichen lohnt es sich, die angebotenen Upgrades zu installieren.

3. Vermeiden von Inline JavaScript/CSS

Generell ist es ratsam, JavaScript und CSS in getrennten Dateien zu speichern. Sobald Ihre Seite aufgerufen wird, bezieht der Browser die Dateien extern und bewirkt, dass bei nachfolgenden Anfragten die Ladezeiten reduziert werden.

Zudem hat das getrennte Speichern der Dateien den Vorteil, dass die Verwaltung der Seitenpflege vereinfacht wird.

4. Optimierung des Caches

Webseiten beinhalten Bild-, JavaScript- und CSS-Inhalte, welche bei jedem Ladevorgang neu aufgerufen werden müssen. Ist allerdings der Cache optimiert eingestellt, werden die Inhalte im Browser gespeichert. Wird dann die Seite nochmals aufgerufen, werden die Daten nicht heruntergeladen, sondern direkt vom Cache übernommen. Dadurch wird die Seitenladezeit verringert.

Für die Optimierung des Caches können Sie für statische Inhalte Expires-Headers und für dynamische Inhalte Cache-Control-Headers nutzen. Die Folge ist, dass Bilder, Style Sheets sowie Script- und Flash-Inhalte cachbar werden, wodurch eine Verringerung der HTTP-Aufrufe erzielt wird. Die Seitenladezeiten reduzieren sich.

Wie der Name schon sagt, kann bei Expires-Headers festgelegt werden, bis wann die Inhalte gecacht bleiben sollen.

Beispiel: Expires: Wed, 20 Apr 2015 20:00:00 GMT

 

Gleiches können Sie in der ExpiresDefault-Direktve für Apache HTTP Server festlegen. Hier wird die Zeit bestimmt, wie lange Browser Dateien cachen können, bzw. ab wann die neue Version der Seite neu heruntergeladen werden soll.

Beispiel: ExpiresDefault “access plus 15 years”

5. Vermeiden von Scripts, welche Seiten-Rendering blockieren

Erst am Ende des HTML-Bodys sollten die JavaScript-Dateien platziert werden. Alternativ können Sie das Async-Attribut verwenden. Dies ermöglicht das asynchrone Laden.

6. Vermeiden von Seitenweiterleitungen

Das Vermeiden von Seitenweiterleitungen, sogenannte Redirects, reduzieren HTTP und beschleunigen den Server.

Tote Links sollten auf jeden Fall vermieden werden. Nehmen Sie diese aus Ihrer Seite raus oder tauschen Sie sie durch aktuelle Links aus.

7. Ermöglichen von Gzip-Komprimierung

Zip-Dateien sind bekannt und beliebt. Ihn Zip-Dateien „verpackt“, können Sie grosse Dateien via E-Mail einfach verschicken. Gleiches gilt für Gzip-Dateien. Der einzige Unterschied ist, dass es sich bei den „verpackten“ Inhalten um Content Ihrer Webseite handelt. Auf diese Weise können Bandweite gespart, Downloads beschleunigt und Ladezeiten verkürzt werden. Der einzige Mehraufwand: Im Voraus müssen Sie Ihren Server für die Dekomprimierung konfigurieren.

8. Reduzieren von HTTP-Requests

Um eine Reduzierung der Bildaufrufe zu erhalten, können Sie CSS-Sprites verwenden. Fassen Sie dazu die Bilder in einer Grafikdatei zusammen und blenden Sie die CSS-Elemente background-image und background-position ein, bzw. aus. Zudem sollten Sie die Sprites in die gepufferten Style-Sheets einbinden. Zuletzt sollten noch alle JavaScript-Daten in einer Datei und alle CSS-Daten in einer anderen Datei vereinigt werden.

9.  Minifizierung von JavaScript und CSS

Minifizierung wird eine Variablenumbenennung genannt, wodurch eine Seiten-Code-Komprimierung erlangt wird. Dadurch, dass sich der Code-Umfang reduziert, beschleunigt sich die Seitenladezeit. Für diesen Vorgang können Sie beispielsweise uglify.js verwenden.

10. Reduktion der Cookie-Grösse

Das Abrufen grosser Datenmengen verlangsamt die Seitenladezeit. Werden Cookies verwendet, werden Daten zwischen den einzelnen Abfragen gespeichert. Wenn Sie nun die Grösse der Cookies verkleinern, reduziert sich das Datentransfervolumen. Die Seite lädt in der Folge schneller.

Das Ziel dabei ist, dass Sie sich auf die funktionsnotwendigen Cookies beschränken. Die einzelnen Cookies sollten dabei so weit wie möglich limitiert werden.

Doch das kann man vermeiden. Folgend finden Sie 10 Tipps zur Optimierung Ihrer Seitenladezeiten: