Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Speed

Samstag, 19. Juli 2014

Ich bin ein Speed-Freak. So lange ich „Web“ denken kann.
Aus den Zeiten von 56 kB Modems stammt mein Streben, zumindest die Startseite jeden Webauftritts so klein wie möglich zu gestalten. Ursprünglich war meine Zielmarke 50 kB.
Aus dieser Zeit stammt auch die Aussage

Wenn sich eine Seite nicht in 8 Sekunden aufbaut, klicken 30% der Besucher wieder weg.

Aus dieser Zeit stammt auch mein eigener Webauftritt. Mit gerade mal 64 kB für die Startseite. Ich gebe ja zu: Die Seite wirkt nicht sehr „modern“. Aber sie lädt verdammt schnell. In ca. 0,5 Sekunden.
Damit bin ich recht nahe am Ideal.

Wie nimmt ein User die Geschwindigkeit wahr
Quelle: radware
Legende:
0 - 100 ms Sofort
100 - 300 ms: Kurze, gerade eben wahrnehmbare Verzögerung
300 - 1000 ms: Die Maschine arbeitet
1000+ ms Die Gedanken (des Besuchers) wandern anderswohin.
10.000+ ms Die Aufgabe wird abgebrochen.

Es hat sich also nichts geändert. 8 bzw. 10 Sekunden Ladezeit werden vom User nicht akzeptiert. Anzustreben ist weniger als 1 (eine!) Sekunde.

Sehr wohl geändert haben sich aber die durchschnittlichen Seitengrößen:

Durchschnittliche Seitengrößen von 1995 bis 2014
Quelle: websiteoptimization.com
2003: 93 kB - 2014: 1,6 MB

Nein, ich rede nicht der Technik von 2003 das Wort. Moderne Seiten machen richtig Spaß. Aber nicht, wenn Sie 2 oder 3 MB schwer sind, und ich sie unterwegs im Mobilfunknetz aufrufe. Dabei sind viele Seiten Ihre MB gar nicht wert. Häufig ist es einfach Schlamperei (oder fehlendes Können?) der Seitenschreiberlinge. Man kann nämlich sehr gut grafisch ansprechende, ja sogar interaktive Seiten mit weniger als 1 MB erstellen. Und es gibt sie tatsächlich: Seiten, die in weniger als 1 Sekunde laden.

Selbstverständlich sollte heutzutage sein, dass Vorsorge getroffen wird für mobile Geräte und Menschen „on the road“.

So, genug des Grundsatzgeschwafels. Fakten her!

Maßnahmen zur Optimierung der Seitengröße und der Ladezeit:

Die folgenden Listen sind absteigend nach Nutzen / Wichtigkeit, und nach zunehmender Schwierigkeit der technischen Umsetzung geordnet.

  • Grafiken: Hier steckt das größte Potenzial, und gleichzeitig wird hier am häufigsten geschlampt.
    1. Bilder in der darzustellenden Größe bereitstellen, und nicht vom Browser verkleinern lassen.
    2. Das „richtige“ Grafikformat wählen. .jpg ist das Format der Wahl für Fotos. Grafiken, wie die obigen Grafiken im diesem Artikel, werden häufig als .png kleiner, bei besserer Qualität.
    3. Grafiken komprimieren. Das kann Photoshop (für Web und Geräte speichern), aber auch viele andere Grafikprogramme sowie Zusatzprogramme, z. B. ImageAlpha und ImageOptim (beide für Mac; für Windows gibt es entsprechende Programe).
    4. Bilder ohne Metadaten speichern (auch das kann z. B. Photoshop)
    5. jpg progressiv speichern (z. B. mit Photoshop). Damit werden Grafiken zwar nicht kleiner, aber sie werden vom Browser schneller dargestellt (zuerst in niedriger, dann zunehmend besserer Qualität), und damit wird die Seite subjektiv als schneller empfunden.
    6. Adaptive Images einsetzen, um Bilder mit großen Abmessungen automatisch für kleine Monitore (Smartphones) zu optimieren.
    7. Sprites für Icons, Buttons usw. verwenden. Wenn man sie nicht gleich per CSS darstellen kann / will.
  • GZIP-Kompression auf dem Server für Textdateien. Also für HTML, PHP, CSS und JavaScript. Fast so wichtig wie das Optimieren von Grafiken. Textdateien werden damit vom Server um 50 bis 70% kleiner ausgeliefert, ohne die Les- und Pflegbarkeit zu beeinträchtigen, wie dies bei anderen Kompressionstechniken der Fall ist.
  • Fortgeschrittene Techniken:
    1. Defer JavaScript. JavaScript, das nicht bereits zum Seitenaufbau benötigt wird, erst nach dem Rendern der Seite laden. Ein guter Anwendungsfall hierfür sind Tracking-Tools wie Google Analytics. Es gibt nur eine Technik, die wirklich funktioniert: feedthebot.com/pagespeed/defer-loading-javascript.html
    2. Lazyload. Bilder erst dann laden, wenn Sie (durch Scrollen) in den Viewport rücken. Eine verblüffende, recht einfache, aber leider viel zu wenig angewandte Technik. Interessant ganz besonders für Onepager, und die kleinen Monitore von Smartphones.
      Eine interessante Alternative für Lazyload ist Unveil. Interessant vor allem für iOS Browser wegen der Treshold-Funktion.
    3. Anzahl der HTTP-Request reduzieren.
    4. HTML, PHP, CSS und JavaScript komprimieren. Kann man machen, ich halte davon allerdings nicht allzu viel. Weil es relativ wenig bringt; eine einzige, schlecht optimierte Grafik wiegt schwerer als das Komprimieren aller Textfiles. Und dann sind komprimierte Textdateien praktisch nicht mehr pflegbar.
      Auch das manuelle Entfernen aller Kommentare halte ich persönlich aus dem gleichen Grund nicht für sinnvoll.
      Wer es dennoch umsetzen will: Eine Google-Suche nach z. B. „html css javascript komprimieren“ liefert zahllose brauchbare Treffer. Oder gleich Google Pagespeed Insights verwenden.
    5. Ein interessanter neuer Ansatz: Adaptive Web Design AWD.
      Man muss aber nicht in jedem Fall „mit Kanonen auf Spatzen schießen“. Den Grundgedanken von AWD kann man auch fallweise manuell umsetzen; indem man per JavaScript die Bildschirmgröße ausliest, und je nach Ergebnis Seiteninhalte nachlädt.
      Das könnte dann so aussehen:
      <script>
      if (!mobile || mobile >= 500) {
      document.writeln('bla bla bla …

      Kandidat für diese Technik sind die heute fast unverzichtbaren wechselnden Bilder. Für mobile Geräte kann (und sollte) man diese Schwergewichter durch ein statischen Bild ersetzen.
      NB.: Natürlich muss die Variable mobile vorher mit einer geeigneten Technik gesetzt werden.

Hab‘ ich etwas vergessen? Es sollte mich wundern, wenn nicht. Für diesen Fall bitte ich um entsprechende Kommentare.

Nachtrag 24.07.2014

Eine gute Alternative zu Adaptive Images ist picturefill.js. Ich werde die Technik in einem separaten Artikel beschreiben.



1 Kommentar

  1. Bei einem aktuellen Projekt, das speziell für mobile Nutzung vorgesehen ist, konnte ich mit Lazyload die Dateigröße von 350 auf 95 kB drücken. Ohne Beeinträchtigung des subjektiven Erlebnisses bei der Benutzung der Web-App.

    Kommentar von Fritz — Sonntag, 20. Juli 2014 - 13:21 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