Wir bei der trendmarke haben es schon lange erkannt, weniger ist oft mehr. Das gilt auch für Veränderungen an der Website. Nur kleine Veränderungen reichen aus, um deren Performance zu steigern. Welche das sind und wie sie ideal umgesetzt werden, was zu beachten ist – dazu gibt es hier einige wichtige Tipps:
Ladezeit optimieren
Viele Seiten bauen sich länger als zehn Sekunden auf – Stück für Stück. Das nervt! Nur etwas mehr als die Hälfte aller Suchenden warten maximal drei Sekunden, bevor sie abbrechen, 60 Prozent der befragten 18- bis 24-Jährigen warten höchstens zwei Sekunden. Als Performance oder Page Speed (Ladezeit von Webseiten) wird die Verarbeitungsleistung eines Computers definiert. Im Google Ranking Algorithmus spielt die Ladezeit eine wichtige Rolle, denn diese zählt zu einer positiven Nutzererfahrung. Jede Sekunde Ladezeit-Verkürzung kann ein Plus bei der Conversion Rate und schließlich beim Umsatz bedeuten!
Woran hängt’s?
– Datenmengen auf den Webseiten zu umfangreich
– Bilder zu groß
– Datenbanken zu langsam
– Komprimierung nicht aktiviert
– Server zu langsam
Wie können Ladezeiten verkürzt werden?
1. Tipp: Webmaster sollten JavaScripts und CSS minimieren, indem Whitespaces (unnötige Leerzeichen) beseitigt werden.
Hier ist es ist auch möglich, für die Minimierung spezielle Tools einzusetzen (YUI Compressor, cssmin.js für die CSS-Minimierung). Für die Minimierung von Java Script bieten sich YUI Compressor, Closure Compiler oder JSMin an. Erst nach dem Laden aller JavaScripts und CSS-Dateien wird die Webseite vollständig angezeigt. Das bedeutet, wenn die JavaScript-Dateien am Code-Anfang stehen, werden dem User bei langsamen Servern nur weiße Seiten angezeigt. CSS kommt in den Header, JavaScript in den Footer des Quellcodes. Die JavaScript-Dateien sollten zuletzt geladen werden, damit der Webseiteninhalt nach kürzester Zeit bereits sichtbar ist. Call-to-Action-Buttons (JavaScript) werden erst nachträglich angezeigt.
2. Tipp: Die Auslagerung der CSS- und JavaScript-Dateien
Das ständige Auslesen durch die Suchmaschinen bei jeder Seitenöffnung kann wertvolle Zeit kosten. Der Quellcode kann durch die Auslagerung von CSS- und JavaScript-Dateien verringert werden, wobei die ausgelagerten Daten jeweils in ein eigenes Dokument gespeichert werden. Der Browser sollte außerdem die externe Datei nur einmal laden und zwischenspeichern. Dazu wird ein Expires- oder Cache-Control: max-age Header verwendet, welcher das Datum enthält, bis zu dem die Datei zwischengespeichert wird. Der Browser prüft damit die Gültigkeit, wobei das Auslaufdatum zwischen einer Woche und einem Jahr festgelegt werden kann.
1. JavaScript-Dateien aus dem HTML-Code ausschneiden.
2. Daten mittels Texteditor (WordPad oder SimpleText) in neues Dokument einfügen.
3. Dokument unter main.js in dem Ordner abspeichern, der alle HTML-Dokumente enthält.
4. Im HTML-Code die Befehle entfernen.
5. Folgenden Befehl einfügen:
3. Tipp: Minimierung der HTTP-Requests (Anfragen)
Dabei handelt es sich um die Kommunikationswege vom Browser zum Server. Die Darstellung beispielsweise eines Videos auf der Website realisiert der Browser mittels eines Requests. Etwa 80 Prozent der Gesamtladezeit gehen zulasten des Front-Ends einer Webseite. Dieses kann Bilder, Flash-Animationen, Stylesheets, Scripts und anderes beinhalten, was die Ladezeiten der Website erheblich ausbremst.
Ein vereinfachtes Design ist durch Löschen einzelner Bilddateien aus dem Code möglich. Soll jedoch das Design unverändert bleiben, dann können mittels CSS sprites mehrere Hintergrundbilder zu einem Bild zusammengefasst werden. Die Position der Bildausschnitte definieren sich über die CSS-Einstellungen. Dadurch erkennt der Browser, wo welcher Ausschnitt des CSS sprites dargestellt werden soll. Sämtliche Hintergrundbilder werden in ein CSS sprite zusammengefügt und als Gesamtbild sichtbar.
Der Browser benötigt für die exakte Positionierung der einzelnen Bildausschnitte und die korrekte Anzeige einige CSS-Einstellungen für die vertikale und horizontale Ausrichtung.
4. Tipp: Bild-Optimierung
Bereits bei der Bildbearbeitung können Bilder durch die Speicherung im Webseitenformat für die Webseite optimiert werden. Durch die reduzierte Datengröße laden sie schneller. Bei Seiten mit vielen Bildern werden durch ein Content Delivery Network (CDN) die Bilder auf externe Server ausgelagert und so rascher dargestellt. Das richtige Dateiformat spielt eine große Rolle: html umfasst 6 kB, während CSS und GIF bereits 8 kB Datenvolumen haben. JS-Bilder verbrauchen 16 kB, PNG 18 kB und JPEG 27 kB. Absoluter Spitzenreiter im Datenverbrauch ist das Flash-Format mit stattlichen 96 kB.
Im GIF-Format kann es zu Qualitätseinbußen kommen. JPEG eignen sich für naturgetreue, hochauflösende Bilder, GIF für kleine, schlichte Grafiken bis zu 3 Farben oder Animationen. Ideal sind PNG-Dateien.
Die Optimierung der Bildgröße von JPGs ist mit jpegtim und jpegtran möglich, PNG-Dateien lassen sich mit OptiPNG oder PNGOUT verbessern. Im Code wird die (Original-)Größe des Bildes direkt eingegeben, damit der Browser die Bildmaße nicht berechnen und nichts skalieren muss.
Eine regelmäßige Ladezeiten-Kontrolle sollte mit speziellen SEO-Analyse-Tools, Google-Analytics oder Google Page Speed erfolgen.
Ich freue mich auf Ihre Anfrage
0711 460 520 23
