Webseiten Performance Optimierung:

Critical Rendering Path

Die Optimierung sorgt für eine möglichst schnelle Response beim Endkunden. Somit kann der Kunde bereits mit der Webseite interagieren, ohne dass die Webseite vollständig geladen ist.

Bevor Sie mit der Optimierung beginnen, sollte erst einmal die aktuelle Seite geprüft werden, um zu wissen an welchen Faktoren Sie arbeiten müssen.
Für diese Analyse können Sie GTmetrix und Google PSI zur Hilfe nehmen.

Das Performance Budget besteht aus Folgenden Optionen:

• Seiten Ladezeiten
• Seiten Größe
• Anzahl der Requests
• Script Ladezeit
• first paint
• time to first byte

Das Ziel ist es, dem Endkunden möglichst schnell einen Response zur Verfügung zu stellen, mit dem er beginnen kann zu arbeiten/lesen. 

Ein gutes Performance Budget für Webseiten könnte sein:

• 1 MB
• 30 Request
• < 1s to first print
• < 3s to first print in 3G

Bei größeren Seiten, kann gerade die “Seitengröße” und die  “Anzahl der Requests” von den Zielvorgaben deutlich abweichen.

Jeder von Ihnen kennt das Problem, Sie besuchen eine Seite und die Seite lädt Ewigkeiten. Dieses schreckt natürlich viele Kunden ab und kostet uns wertvollen Traffic.

Hier ein Überblick wie viele Kunden die unterschiedlichen Ladezeiten wahrnehmen:

• 0 bis 100 ms: Sofort ohne Verzögerung
• 100 bis 300ms: Leichte Verzögerung
• 300 bis 1000ms:  Wahrnehmbare Verzögerung
• 1s+ Mentaler Kontextwechsel
• 3s+ Die bounce rate steigt um 30%
• 5s+ Die bounce rate steigt um 90%
• 10s+ Der Benutzer verlässt die Seite

Natürlich sind höhere Ladezeiten auf mobilen Endgeräte eher akzeptiert, als auf einem Desktop PC. Dieses wird sich jedoch in den nächsten Jahren relativieren, da der Ausbau des 5G Netzes schnell voranschreiten wird.

Durch die Analyse mit der Google PSI, sehen wir welche Optimierungen für die jeweilige Webseite noch vorzunehmen sind. Einige der Punkte sind durch eine simple Konfiguration der .htaccess, oder durch wenige Handgriffe möglich. Bei anderen hingegen bedarf es etwas mehr Kenntnis.
Hier eine Liste aller aktuell möglichen Kriterien laut Google PSI:

• Antwortzeit des Servers reduzieren
• Bilder optimieren
• Browser-Caching nutzen
• CSS reduzieren
• HTML reduzieren
• JavaScript reduzieren
• JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen
• Komprimierung aktivieren
• Sichtbare Inhalte priorisieren
• Zielseiten-Weiterleitungen vermeiden

Neben den technischen Optimierungen einer Webseite gehört auch der Server und die Technik dahinter dazu. Besonderen Wert sollte man hierbei auf das HTTP Protokoll legen. Mit dem Wechsel des HTTP/1.1 Protokolls zum HTTP/2 Protokoll kann man deutlich an Performance gewinnen, ohne überhaupt etwas am Code der Seiten vorzunehmen.

Leider bieten viele Hoster dieses noch nicht an.

Viele Kunden wünschen gerne einen Score von 100/100. Das ist aber in den meisten Fällen nicht realistisch, da auch externe Faktoren wie Google Analytics Scripte oder Icon-Fonts und externe Schriften selbst eine Rolle spielen.

Alleine durch die Einbindung des Google Analytics Script verliert man einen Score Punkt. Daher setzen Sie sich realistische Ziele, ein Score von 90/100 gehört schon zu einem Top Score. Selbst big player wie Apple oder Samsung kommen nicht annähernd auf diesen.

Wie Sie diese Optimierung im Detail angehen, können Sie in den folgenden Artikeln finden:

1. Performance Optimierung: Critical Rendering Path
2. Performance Optimierung: Imagemin
3. Performance Optimierung: Above The Fold
4. Performance Optimierung: TYPO3

Sollten Sie danach noch Fragen haben, oder benötigen Hilfe bei der Umsetzung, nehmen sie gerne Kontakt mit mir über XING oder EMail auf.