Schnelle Websites 13.01.2017, 09:55 Uhr

6 Turbotipps für mehr Website-Geschwindigkeit

Sobald eine Website mehr als drei Sekunden zum Laden benötigt, sind viele User bereits wieder weg - und das meisten für immer. Hier sind sechs Tipps, die helfen, die Performance der Website zu verbessern.
(Quelle: Shutterstock.com/JMiks)
21, 22, 23 - vorbei! Gerade einmal drei Sekunden Ladezeit halten die Deutschen für akzeptabel. Danach brechen fast 65 Prozent der Nutzer ab, wenn die gewählte Website immer noch nicht geladen ist. Nach drei Sekunden. Für die Betreiber langsamer Websites am schlimmsten dabei: Eine zweite Chance bekommen sie dann nur noch in den seltensten Fällen.
Nicht besser wird das Ganze dadurch, dass die Website-Geschwindigkeit bei Google seit einigen Jahren ein Rankingfaktor ist. Sie ist einer von etwa 200 Faktoren, die Google in seine Beurteilung einfliessen lässt welche Websites für eine User-Anfrage die relevantesten und lohnenswertesten sind. Schnell ladende Websites werden von Google belohnt und haben so die Chance, besser zu ranken.
Was können Sie also tun, damit Ihre Website schnell lädt, Interessenten beim Seitenaufruf nicht abbrechen und auch Google sich über die Ladegeschwindigkeit freut?
Hier sind unsere 6 Turbo-Tipps für mehr Website-Geschwindigkeit:

Bilder komprimieren

Bilder machen wenn Sie nicht Acht geben schnell den Löwenanteil der Ladezeit Ihrer Website aus. Deshalb sollten Sie jedes Bild, das Sie in die Mediendatenbank Ihres CMS laden im Vorfeld nicht nur auf die für die Online-Darstellung tatsächlich benötigte Bildgrösse verkleinern sondern zusätzlich auch komprimieren.
Wenn Sie die Komprimierungsstufe sensibel wählen, werden mit blossem Auge keine optischen Unterschiede zwischen dem Original und der bearbeiteten Version erkennbar sein. In Photoshop hilft die Funktion "Für Web speichern". Ansonsten eignen sich Tools wie zum Beispiel Kraken.io, um Bilder auf die online benötigte Dateigrösse hin zu optimieren und zu komprimieren.
Wie Sie gestochen scharfe Bilder speziell für Retina-Displays auf Ihrer Website zur Verfügung stellen können, haben wir hier beschrieben.

CSS-Dateien und Javascript zusammenfassen, minifizieren und komprimieren

Als Hauptverantwortliche für zu lange Ladezeiten sind den Bildern CSS- und Javascript-Dateien dicht auf den Fersen. Nicht per se, aber dann, wenn es zu viele von ihnen gibt und wenn sie zu gross sind.
Als kleine Beispiele: Web-Tools wie Social Media Share-Icons, die sticky an der Sidebar beim Scrollen mitwandern oder Newsletter Popups, die sich nach ein paar Sekunden Verweildauer auf einer Website öffnen sind super. Wir setzen beide Elemente mit sehr schönem Erfolg ein, sie waren irre leicht auf unserer Website zu integrieren, sie erhöhen die Interaktivität, fördern die Distribution unserer Inhalte und Angebote über Social Media und bringen uns Leads und Newsletter-Abonnenten. Toll, oder?
Leider sind solche Elemente gerne JavaScript-Schwergewichte und können die Website-Performance ziemlich hässlich verlangsamen. Das heisst aber nicht, dass Sie auf sie verzichten müssen. Sie sollten die Auswirkungen im Kopf haben, die ihre Verwendung haben kann. So können Sie Ihren Webentwicklern mitgeben, dass sie gerade beim Einsatz solcher Elemente auf das Zusammenfassen, Minifizieren und Komprimieren von Javascript- und CSS-Dateien achten müssen.
Dazu können die Entwickler Tools einsetzen wie JSCompress für das Zusammenfassen und Minifizieren von Javascript-Dateien oder CSS Minifier, das die gleiche Aufgabe für - Sie ahnen es - CSS-Dateien übernimmt. Hat Ihre Technik Grunt im Einsatz, dann kann Sie Grunt Uglify einsetzen, um alle CSS-Styles und Javasripte zusammenzufassen und zu komprimieren.

Was bedeutet CSS und Javascript zusammenfassen?

Mit Zusammenfassen ist gemeint, dass die Styles und Scripte in so wenige Dateien wie möglich vereint werden. Denn jede einzelne Datei, die vom Server ausgeliefert wird, verursacht Last und kostet Zeit. Auch wenn die Datei vielleicht nur ein paar Bytes gross ist.
Deshalb sollte Ihre Internetseite so wenige Server-Anfragen erzeugen, wie möglich. Es ist dabei meistens die bessere Taktik, eher weniger Dateien auszuliefern, die dafür etwas grösser sind, als sehr viele kleine.

Was bedeutet CSS und Javascript minifizieren?

Die Minifizierung wiederum wird dadurch erreicht, dass unnötige Leerzeichen, Tabulatoren und Zeilenumbrüche entfernt und dass Variablen und Funktionsnamen gekürzt werden. Das macht den Code weniger leserlich, er kann dadurch aber signifikant gekürzt werden - ohne dass sich an der Funktionalität oder der Optik der Website etwas ändert.

Was bedeutet CSS und Javascript komprimieren?

Die Minifizierung wird häufig auch als Komprimierung bezeichnet. Wir möchten diese Begriffe aber trennen. Das Minifizieren betrifft Massnahmen auf Code-Ebene innerhalb von CSS- und Javascript-Dateien (siehe oben).
Mit Komprimieren dagegen ist hier ganz klassisch das Komprimieren ganzer Dateien gemeint. Sie sollten unbedingt darauf achten, dass eine Komprimierung auf Datei-Ebene erfolgt. Dazu empfehlen wir, die gzip-Komprimierung auf Ihrem Server zu aktivieren. Das geht z.B. auf einem Apache-Server durch einen Eintrag in der .htaccess-Datei.
Durch gzip werden die Dateien dann komprimiert vom Server zum Browser-Client Ihrer Nutzer übertragen. Ebenfalls eine wichtige Massnahme, die die Ladezeit Ihrer Website beschleunigt.

Browserseitiges Caching einsetzen

Durch intelligentes Browser-Caching können Sie grosse Geschwindigkeitsvorteile erreichen. Browser-Caching ist immer dann sinnvoll, wenn Nutzer Ihre Webseiten öfter besuchen.
Damit dynamische Seiten nicht jedes Mal neu aufgebaut werden, können diese als statische HTML-Dokumente im Browser Ihrer Nutzer abgelegt und abgerufen werden. Somit werden sie bei erneutem Aufruf nicht mehr vom Webserver geladen, sondern von der lokalen Festplatte eines Nutzers. Das führt entsprechend zu einer beschleunigten Darstellung der Website.

Sichtbare Inhalte priorisiert laden

Ihre Webseiten passen in den allermeisten Fällen nicht auf den Screen des Users. Sie sind länger und er muss scrollen, um eine Seite ganz zu sehen. Das können Sie für sich nutzen.
Ihre Entwickler können den Style, der für die Darstellung des sofort sichtbaren Bereiches der Website benötigt wird, inline im HTML platzieren. So wird er nicht erst über ein externes Styleshet dazugeladen. Der Rest der Styles und Skripte kann dann asynchron geladen werden, also erst nachdem der direkt sichtbare Bereich der Webseite angezeigt wird.

Redirects vermeiden

Der direkte Weg ist immer der schnellste: Jede Webseite, die erst durch einen oder mehrere Umwege erreichbar ist, hat logischerweise eine höhere Ladezeit. Besonders 301-Redirects oder ganze Ketten davon - bremsen die Ladegeschwindigkeit enorm.
301-Redirects lassen sich nicht immer vermeiden. Nach einem Website Relaunch sind sie etwa ein sehr wichtiges Hilfsmittel. Sie können alte oder nicht mehr vorhandene URLs auf die neuen URLs umleiten und vermeiden so, dass Nutzer auf einer Fehlerseite (404-Seite) landen.
Sie sollten allerdings prüfen, ob wirklich alle 301-Redirects, die Sie im Einsatz haben auch wirklich benötigt werden.

Ihre URLs sollte immer mit einem Slash (/) enden

Der Slash ist nur ein kleiner Strich - doch er spart ordentlich Ladezeit: Denn immer wenn ein Server eine URL ohne Slash am Ende lädt, muss der Browser erst identifizieren, ob es sich um eine Datei oder ein Verzeichnis handelt. Das kostet wertvolle Zeit.
Suchmaschinenfreundlicher und schneller ist es also, wenn Sie darauf achten, dass Ihre URLs immer mit einem Slash enden.

Fazit

Ihre Nutzer sind ungeduldig, und auch Google liebt die Geschwindigkeit Ihrer Website. Deswegen sollten Sie unbedingt ein Auge auf die Ladezeit Ihrer Website haben.
Die können Sie übrigens sehr einfach selbst prüfen - mit den Google PageSpeed Insights. Die Tipps in diesem Post helfen Ihnen dabei, den Turbo Ihrer Website einzuschalten und Ihren Webentwicklern auf die Finger zu schauen.
Dieser Artikel erschien zuerst auf digitalmobil.com.



Das könnte Sie auch interessieren