Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Neujahrsputz, oder Schnelle Webseiten

Sonntag, 5. Januar 2014

Wenn Webseiten sich nicht in 8 Sekunden aufbauen … das war einmal das Kriterium für userfreundliches Webdesign. Lang ist‘s her. DSL und schnelle Mobilfunkstandards ermöglichen viel kürzere Ladezeiten, und das hat leider zur Sittenverrohung seitens mancher Webseitenbastler geführt. Mehrere MB schwere Webseiten gehören heute schon fast zum guten Ton. Dabei wird häufig wenig Inhalt in viel grafisches Gedöns verpackt. Im WLAN mit DSL-Anbindung mag das ja akzeptabel sein. Wenn ich aber unterwegs so eine Website auf meinem Smartphone aufrufe, und mein Volumenbudget für 11 kB Text mit 3 MB belastet wird, dann gibt‘s für mich nur eins: Schnell weg!

Genug gepredigt. Taten!
Ich hab‘ meine eigene Site mal einem Neujahrsputz unterzogen, um auch noch die letzten Millisekunden Ladezeit herauszukitzeln. Das Ergebnis: 0,6 Sekunden Ladezeit für die Startseite.
Gut, im Umgang mit Dateigrößen war ich schon immer geizig. Schließlich ist die Site in Zeiten von ISDN entstanden. Bei den heutigen Übertragungsgeschwindigkeiten spielt aber Dateigröße nicht mehr die einzige Rolle. Andere Faktoren werden zunehmend wichtig. Z. B. die Anzahl der HTTP Requests.
Ich habe die Anzahl der HTTP Requests von 26 auf 21 reduziert, indem ich einige Icons nicht mehr als separate Dateien einbinde, sondern base64 encoded direkt ins CSS einbinde.
Beispiel:
An Stelle von
list-style-image:url(/images/down.gif);
steht jetzt
list-style-image:url('data:image/gif;base64,R0lGODlhBwAIAAAAACH5BAkAAAEALAAAAAAHAAgAgKg2AAAAAAIOTIBmcNqsGEQywbaSuwUAOw==');
Das geht ganz einfach mit diesem Online Tool: www.base64-image.de.

Schon lange verwende ich konsequent gzip Kompression. Und zwar nicht nur für den Text der Seiten, sondern auch für JavaScript und CSS. Auf der Seite feedthebot.com/pagespeed/enable-compression.html wird eine Möglichkeit beschrieben, das zu realisieren. (Ich verwende eine andere Technik, die ich gelegentlich beschreiben werde.)

JavaScript muss nicht in jedem Fall vor der Anzeige des Inhalts geladen werden. Ein Beispiel dafür sind Analysetools wie Google Analytics oder Piwik oder evtl. auch Bibliotheken wie jQuery. Diese Scripts erst zu laden, wenn die Seite bereits fertig geladen ist, der User den Inhalt also sieht, nennt man Deferring of JavaScript. Damit kann die Ladezeit teilweise erheblich reduziert werden. Leider ist Deferring of JavaScript nicht ganz trivial. Die einzige mir bekannte Technik beschreibt feedthebot.com/pagespeed/defer-loading-javascript.html

Bei www.feedthebot.com/pagespeed/ gibt es noch weitere gute Tipps unter dem Titel „Google page speed guidelines“. Richtig! Nicht nur User, auch Google mag schnelle Seiten, und belohnt Geschwindigkeit mit einer besseren Position in den Suchergebnissen.



1 Kommentar

  1. Danke für die Anregung. Die Requests dürften bei mir jetzt auch passen. Ein paar Ladezeiten sind noch sehr lang. Aber dazu muss ich erst lernen die Ergebnisse des Testtools richtig zu interpretieren.

    Kommentar von Robert Lender — Sonntag, 5. Januar 2014 - 22:46 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE