Die "3 second rule of the web" besagt, dass ein Website-Besucher innerhalb der ersten drei Sekunden von seinem Besuch sich entscheidet eine Handlung durchzuführen oder die Website wieder zu verlassen. Die Besucher, die ohne Handlung eine Website wieder verlassen zählen zu der sogenannten Absprungrate.

Die Absprungrate jedoch ist kein entscheidender Faktor für den Erfolg einer Website. Da heutzutage Traffic nahezu nichts kostet, kann man sich im Web durchaus Streuverluste genehmigen, sofern diese Besucher nicht andersweitig bezahlt sind, also beispielsweise über die organische Google Suche auf die Website stoßen.

Effektive Nutzung der 3 wichtigen Sekunden

Braucht eine Website schon zwei Sekunden zum laden, bleibt auf der landing page nur noch eine Sekunde, um die Aufmerksamkeit des Besuchers zu erlangen und ihn von einer weiteren Handlung zu überzeugen. Demnach sollte man sich stehts darum kümmern, dass man den Pageload möglichst gering hält.

Im Nachfolgenden möchte ich auf die wichtigsten Techniken dafür eingehen und kurz erläutern, wie man dies effektiv umsetzt.

Auswahl eines Hosters

Je nach Webhoster variiert der Pageload enorm, hier sollte man nicht am falschen Ende sparen, das musste auch ich sehr schmerzhaft lernen. In der Vergangenheit kam es öfter dazu, dass die "Time to first byte" (TTFB) bei bis zu 16 Sekunden lag. Das ist eine Katastrophe für den User und sollte man stets vermeiden.

Überflüssigen Quellcode herausfiltern und Minifier benutzen

Befinden sich überflüssige CSS-Regeln in einem Stylesheet oder man benutzt Mark-Up doppelt (beispielsweise für Smartphones und Desktops), so sollte man darüber nachdenken, diese Stellen passend zu ersetzen, beziehungsweise zu entfernen.

Außerdem ist es mittlerweile eine Kleinigkeit den Quellcode (HTML, CSS, Javascript) zu minimieren indem man überflüssige Leerzeichen entfernt und die Variablennamen im Javascript verkürzt. Hierfür gibt es im Web jede Menge Minifier, welche diesen Service anbieten.

Beim Pageload selbst, ist jeder zusätzliche Request bare Zeit, also sollte man alle Stylesheets zusammenfassen und möglichst wenig .js-Datein laden.

Bilder verkleinern

Grundsätzlich sollte man keine Bilder auf einer Website laden, die größer sind, als man sie anzeigen möchte. HTML5 bietet gute Möglichkeiten, um verschiedene Auflösungen zu laden. Doch oftmals ist dies gar nicht nötig. Das skalieren des Bildes reicht in den meisten Fällen. Dennoch sollte man darauf achten, dass die Bilder keine Ebenen oder Layer mehr enthalten, was oft der Fall bei mit Adobe Fireworks erstellten Bildern ist.

Um dies sicherzustellen, aber auch um Bilder deutlich von der Speichergröße zu verkleinenern bietet sich ein Service wie TinyPNG oder Imagecompresser von websiteplanet an. Dieser Service schafft es bei normalen Fotos die Dateigröße in der Regel um 81% zu verkleinern und das bei nicht sichtbarem Qualitätsverlust. Das sollte überzeugen!

Browser- und Client-Caching

Statische Seiten sollten gecached werden, wird Serverseitig direkt das fertige Ergebnis hinterlegt, ist dieses deutlich schneller ausgeliefert. Aber auch auf Clientseite sollte das ganze ein Thema für jeden Websitebetreiber sein. Gecachte CSS-Dateien oder Javascripts verschnellern den Pageload enorm.

Das schnelle CSS3 statt langsame Bilder

CSS3 ermöglicht Farbverläufe und gewisse Hintergründe darzustellen, aber auch kleine Pfeile oder Kreise können mit CSS3 ohne größere Probleme angezeigt werden. Kann CSS3 eingesetzt werden, sollte man dies tun.