Das Sprichwort „Geduld ist eine Tugend“ trifft online oft nicht zu.

Selbst eine Verzögerung von nur einer Minute kann sich negativ auf die Anzahl Ihrer Seitenaufrufe, die Zufriedenheit Ihrer Kunden und Ihre Konversionsraten auswirken.

Die Geschwindigkeit Ihrer Seite beeinflusst auch Ihre organische Präsenz, denn seit 2010 berücksichtigt Google die Geschwindigkeit einer Seite in seinen Algorithmen.

Was beeinflusst die Geschwindigkeit Ihrer Seite am meisten?

Ihre Größe.

Internetbrowser benötigen Zeit, um den Code herunterzuladen, aus dem Ihre Seite besteht. Sie müssen Ihre HTML, Ihre Stylesheets, Ihre Skripte und Ihre Bilder herunterladen. Es kann ein Weilchen dauern, bis all diese Daten beisammen sind.

Abonnieren Sie unsere Tipps zum Zeit sparen bei WhatsApp und schaffen Sie mehr  in Ihrer Woche!

Wie können Sie überprüfen, ob Ihre Seite schnell genug ist?

Es gibt eine Reihe großartiger Tools, mit denen Sie die Geschwindigkeit Ihrer Seite messen können, wie z. B. Googles PageSpeed Insights, Website Grader und GTMetrix. Zum einen analysieren diese Services Ihre Seite, zum anderen sagen sie Ihnen, wo Nachholbedarf besteht.

Wie können Sie Ihre Seite beschleunigen?

Manche moderne Content-Management-Systeme zeigen Ihnen von Haus aus Möglichkeiten auf, wie Sie die Performance Ihrer Website optimieren können. Allerdings müssen Sie bei vielen gebräuchlichen Systemen wie WordPress und Joomla selber Hand anlegen.

Werfen wir also einen Blick auf die wichtigsten Optionen, die jeder Webmaster kennen und berücksichtigen sollte.

1. Bilder optimieren

Bilder sind einer der am häufigsten auftretenden Gründe für zu langsame Seiten.

Ein wichtiger erster Schritt für die Optimierung Ihrer Bilder ist, sie in der korrekten Größe auf Ihre Website zu bringen.

Viele Webmaster verwenden riesige Bilder und verkleinern diese dann mit CSS. Dabei denken sie nicht daran, dass der Browser diese Bilder immer noch vollständig in ihrer ursprünglichen Größe herunterlädt und erst daraufhin verkleinert darstellt.

Stellen wir uns vor, dass Sie ein Bild mit den Maßen von 1.000 x 1.000 Pixel auf 100 x 100 Pixel herunter skalieren. Ihr Browser muss auf diese Weise nur ein Zehntel der Datenmenge herunterladen.

Das folgende Beispiel verdeutlicht den Größenunterschied zwischen einem Original und einem korrekt skalierten Bild.

hubspot-inbound-marketing-ladezeit-verringern-bilder

Skalieren Sie Ihre Bilder also korrekt, bevor Sie sie hochladen. Auf diese Weise verlangen Sie Ihren Seitenbesuchern nicht mehr als nötig ab.

Eine weitere Möglichkeit zur Optimierung Ihrer Bilder besteht darin, sie zu komprimieren.

Es gibt eine Reihe kostenloser Online-Tools zur Bildkomprimierung, tinypng.com etwa. Diese Tools verringern die Größe Ihrer Bilder enorm, ohne sich dabei merklich auf die Qualität auszuwirken. Sie erleben hier Einsparungen von 25 bis 80 %!

2. Browser vorladen lassen 

Warum sollten Besucher jedes Mal dieselben Elemente laden, wenn Sie Ihre Website besuchen?

Browser-Caching erlaubt es Ihnen, zeitweise Daten auf dem Computer Ihrer Besucher vorzuhalten. Diese müssen dann nicht bei jedem Aufruf Ihrer Seite darauf warten, dass alle Elemente erneut geladen werden. 

Wie lang der Zeitraum sein soll, für den diese Daten Ihren Besuchern erhalten bleiben, hängt von den Browser-Einstellungen und den Cache-Einstellungen Ihres Servers ab.

Wenn Sie Browser-Caching einrichten wollen, empfiehlt es sich, dass Sie mit Ihrem Hosting-Provider sprechen. Alternativ können Sie sich mit den folgenden Ressourcen selbst in die Materie einarbeiten:

3. Komprimierung

Mit aktivierter Komprimierung stecken Sie Ihre Website quasi in eine .zip-Datei.

Eine Komprimierung verringert die Seite Ihrer Größe erheblich und kommt daher ihrer Geschwindigkeit zugute. varvy zufolge spart Ihnen eine Komprimierung Ihrer HTML- und CSS-Daten zwischen 50 und 70 % der Datenmenge. Das sind alles Daten, die Ihre Besucher nicht herunterladen müssen!

Die Komprimierung ist eine Server-Einstellung. Je nach Webserver und seinen Einstellungen fällt die Einrichtung unterschiedlich aus. Im Folgenden finden Sie einige Artikel für Webserver, die häufig im Einsatz sind. Wenn Ihrer nicht dabei ist, kontaktieren Sie am besten Ihren Hosting-Provider, und erfragen Sie, welche Möglichkeiten Sie haben.

4. Optimieren Sie Ihren CSS-Code

Ihr CSS-Code wird geladen, bevor Besucher Ihre Seite zu Gesicht bekommen. Je länger es dauert, die CSS-Daten zu laden, umso länger müssen sie warten.

CSS zu optimieren bedeutet, dass Ihre Dateien schneller geladen werden und Ihre Website schneller für Ihre Besucher angezeigt wird.

Fragen Sie sich zunächst: „Nutze ich meinen gesamten CSS-Code?“ Falls nicht: Verabschieden Sie sich von überflüssigem Code. Jedes bisschen unnützer Daten summiert sich, bis Ihre Website mit Schnecken-Geschwindigkeit Besucher abschreckt.

Im nächsten Schritt minimieren Sie die Größe Ihrer CSS-Daten. Unnötige Leerzeilen und -zeichen verbrauchen mehr Platz. Bei der CSS-Komprimierung werden diese entfernt.

Wenn Ihr CMS diese Möglichkeit nicht anbietet, können Sie auf kostenlose Online-Services wie csscompressor.com zurückgreifen. Kopieren Sie einfach Ihren CSS-Code und klicken Sie „Compress“, um ein neues, schlankeres Stylesheet zu sehen.

hubspot-inbound-marketing-ladezeit-verringern-css

5. Stellen Sie Ihre Skripte hinten an

Javascript-Dateien können nach dem Rest Ihrer Seite geladen werden. Wenn sie jedoch – was häufig der Fall ist – vor dem eigentlichen Seiteninhalt platziert werden, werden Sie zuerst geladen.

Das bedeutet, dass Ihre Besucher warten müssen, bis Ihre Javascript-Dateien geladen wurden, bevor Sie Ihre Seite sehen – und wir wissen, wie gern Ihre Besucher warten.

Es gibt eine einfache Möglichkeit, etwas dagegen zu tun: Platzieren Sie Ihre externen Javascript-Dateien am Ende Ihrer Seite – direkt bevor Sie den Body-Tag schließen (</body>). Jetzt lädt mehr von Ihrer Seite, bevor die Skripte dran sind.

Einer weitere Methode gibt Ihnen noch mehr Kontrolle: Nutzen Sie das defer- und das async- Attribut, wenn Sie externe .js-Dateien auf Ihrer Seite haben.

Sowohl defer als auch async sind äußerst nützlich, doch sollten Sie den Unterschied verstehen, bevor Sie sie einsetzen:

  • Async-Tags laden Skripte, während der Rest Ihrer Seite lädt. Das bedeutet, dass Skripte nicht in Ihrer korrekten Reihenfolge geladen werden. Die Leichtgewichte unter den Skripten laden zuerst. Das funktioniert für manche Skripte, bei anderen kann es durchaus problematisch sein.
  • Das defer-Attribut lädt Ihre Skripte, nachdem Ihr Inhalte fertig geladen haben. Es behält auch die Reihenfolge Ihrer Skripte bei. Stellen Sie sicher, dass die Funktionalität Ihrer Seite nicht eingeschränkt wird, wenn die Skripte so spät laden.

Das Einzige, was Sie tun müssen, ist eine kleine Änderung in Ihren <script>-Tags.

Zum Beispiel können Sie Ihr Original-Skript nehmen:

<script type="text/javascript" src="/path/filename.js"></script>

Nun fügen Sie die erwähnten Attribute ein, um festzulegen, wie die Skripte laden sollen.

<script type="text/javascript" src="/path/filename.js" defer></script>
<script type="text/javascript" src="/path/filename.js" async></script>

Ob Sie eines der beiden Attribute verwenden und falls ja, welches, hängt von der Relevanz des jeweiligen Skripts ab. Wichtige Skripts sollten vermutlich mit dem async-Attribut versehen werden, damit sie so schnell wie möglich laden, ohne ihre übrigen Inhalte aufzuhalten. Weniger wichtige sollten bis zum Ende warten, damit Besucher Ihre Seite schneller sehen.

Vergessen Sie nie, jedes Skript zu testen! Nur so können Sie sichergehen, dass die Attribute Ihrer Seite nicht schaden.

Fazit

Online-Nutzer erwarten zunehmend bessere Nutzererlebnisse. Gleichzeitig werden unsere Seiten immer umfangreicher. Es wird immer ein verlockendes zusätzliches Javascript geben, weitere CSS-Tricks und zusätzliche Analytics-Möglichkeiten von Drittanbietern, die die Performance einer Seite herunterziehen. 

Als Marketer sollten wir nicht tatenlos zusehen.

Regelmäßige Checks zahlen sich aus. Denken Sie daran: Eine Wartezeit von einer Sekunde kann bedeuten, dass Sie einen potenziellen Leser verlieren.

 

Täglichen Tipp per WhatsApp erhalten

Dieser Artikel ist ursprünglich auf dem HubSpot.com-Blog erschienen und wurde aus dem Englischen übersetzt.

Ursprünglich veröffentlicht am 28. September 2016, aktualisiert am August 09 2018

Themen:

Technisches SEO