Shared publicly  - 
 
Etwas längeres Tutorial: Ladezeiten der Webseiten reduzieren

Da viele Nutzer das Interesse an dem Relaunch der wpSEO Website http://wpseo.de und der dahinterstehenden Performance-Optimierung der Seiten bekundet haben, möchte ich die einzelnen Punkte auflisten und kurz durchleuchten.

Ladegeschwindigkeit einer Webseite = Ranking-Kriterium


Intro
An sich ist die Optimierung der Webseiten mehr als trivial (technisches Know-how vorausgesetzt). Warum? Diverse Tools wie Google Page Speed listen die Performance-Empfehlungen für eine bestimmte Webseite schön übersichtlich auf - man muss nur „zuhören“.

Google Page Speed existiert als Onlinedienst unter https://developers.google.com/pagespeed/ oder - in der Verwendung bequemer, da auch offline nutzbar - als Erweiterung für Firefox und Chrome: http://code.google.com/intl/de-DE/speed/page-speed/


Freund & Helfer: Page Speed Extension
Ist Page Speed im Browser ausgeführt, zeigt die Erweiterung all die Punkte an, die seitens Webentwickler verbessert werden sollen, um die Ladezeiten zu verringern. Und genau das war mein Weg bei der Optimierung der einzelnen, fertig programmierten Seiten des Projektes:

- Ersten machbaren Vorschlag aus der Page Speed Liste umsetzen
- Page Speed erneut starten
- Liste mit Punkten analysieren
- Nächsten Tipp abarbeiten
- Und so weiter bis man die mögliche Obergrenze erreicht.

Der Vorteil an Google Page Speed ist der, dass man im Web nach keinen Tutorials rund um das Thema „Performance-Optimierung“ suchen muss, um eigenen Seiten „Flügeln zu verleihen“. Das Tool liefert perfekte Empfehlungen passend zur aufgerufenen Seite. Daher nicht im Web wild nach irgendwelchen Tricks suchen, vielmehr auf die Optimierungssoftware von Google hören. So minimiert sich auch die Gefahr, das ein Projekt zu doll mit Optimierungstechniken bestückt wird, welche eher kontraproduktiv wären.


Statik statt Dynamik
Hinter der wpSEO Website steckt zwar ein Pseudo-CMS, als Ausgabeformat ist dennoch statisches HTML. Kein PHP, kein WordPress, nichts. Das hat den Vorteil, dass serverseitig kein PHP-Interpreter gestartet werden muss. Nach dieser Methode werden Seiten weder geparst noch auf andere Weise analysiert. Der Server liefert den Content ohne „Zusammenkleben“ und anderweitige Umwege als HTML aus.


Komprimierung aktivieren
Gzip ist heutzutage obligatorisch. Die Kompression kann via Apache-Konfiguration, einen Eintrag in der .htaccess oder via Script erfolgen. Für CMS-Systeme existieren zahlreiche Erweiterungen, die den Job zuverlässig übernehmen. Echte Nerds legen betroffene Dateien (HTML, CSS, JavaScript) bereits in komprimierter Form auf dem Server ab, so dass der Server bei jedem Seitenaufruf nur ausliefern und nicht aufs Neue komprimieren braucht. CPU-Schonung und zusätzliche Zeitersparnis sind das Resultat. Ein Tutorial dazu: http://playground.ebiene.de/2626/wordpress-css-vorkomprimiert/


Ressourcen reduzieren
CSS im Head, Javascript im Footer ( JavaScript später parsen in Page Speed). Das haben wir mittlerweile alle verstanden.

Um die Anzahl der Requests zu reduzieren, soll es nur eine gebündelte CSS- und eine JS-Datei (asynchrones Laden für weitere Skripte) pro Seitenaufruf geben. Lokale FIles bestenfalls minifiert und mit Gzip behandelt. Dienste wie Less, http://boxcss.com / http://boxjs.com und http://compressor.ebiene.de erleichtern das Workflow. Ebenfalls springt die Page Speed Erweiterung zur Hilfe und stellt innerhalb der Anwendungstabs (in diesem Fall CSS reduzieren bzw. JavaScript reduzieren ) eine optimierte Version der zuständigen Resourcen-Datei zur Verfügung. Stichwort "Copy&Paste".

Eine relevante Tatsache darf aus dem Blickwinkel der Entwickler nie verschwinden: Man hat keinerlei Einfluss auf von extern eingebundene Ressourcen - weder auf die Steuerung der Performance noch auf die Erreichbarkeit der Quelle. Implementierung von Social-Diensten, Banner bzw. Zählpixel der Drittanbieter sind immer mit Vorsicht zu geniessen, da die Abhängigkeit durch die Einbindung steigt.


Inhalte cachen
Auszug aus der .htaccess des Projektes:


RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg)$ $1.$3 [L]

Damit können CSS-, JS- und Bild-Dateien nach dem Muster default.15112011.js aufgerufen werden und zugleich Proxy-Server glücklich stellen, da hier ein Request ohne Parameter erfolgt. Das Datum weist den Browser auf eine geänderte Datei hin und zwingt den Client das File vom Server anstatt aus dem eigenen Cache zu laden.


<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript application/rss+xml
</IfModule>

Relevante Inhalte werden vor der Auslieferung an den Browser auf der Serverebene gezippt (soweit das Deflate-Modul installiert ist).


<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 year"
ExpiresByType text/html "access plus 1 day"
ExpiresByType application/rss+xml "access plus 1 day"
</IfModule>

Zwischenspeicherung aller Dateien wie Bilder, CSS, JS etc. für ein Jahr im Browser-Cache. Von der Regel sind HTML und XML-Dateien ausgenommen. Wird eine Datei nachträglich geändert, so gehört auch der Name geändert, siehe die Rewrite-Regel oben.


<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
Header unset ETag
FileETag None
</IfModule>

Korrekte Header an den Client senden.


Bilder verkleinern
Als Faustregel gilt: JPEG als Bildformat für Fotos, der Rest mit PNG-Endungen. Beim Speichern der PNGs ist darauf zu achten, ob das Bild optisch verlustfrei als PNG-8 abgelegt werden kann - man spart dabei einiges an Bytes. Idealerweise sind alle Grafikelemente einer Website in einem Sprite gesammelt, beispielsweise http://wpseo.de/img/sprite.png - die Machbarkeit der Umsetzung kommt aber wirklich auf die Größe eines Projektes an.

Anschließend - unabhängig vom gewählten Grafikformat - mit ImageOptim http://playground.ebiene.de/2515/png-bilder-optimieren/ behandeln, um überflüssige Metadaten zu entfernen und die Dateigröße ohne visuelle Einbüsse um ein Vielfaches zu reduzieren.


HTML säubern
Auch an dieser Stelle gilt: Im Code nur das Nötigste ausgeben. Keine überflüssigen (Meta)Tags und Kommentare. Im Quelltext gesetzte Hilfsmittel und Formatierungen sorgen auf der Entwicklungsumgebungen für Unterstützung, auf Live sind diese nur unnötiger Balast (Server muss weniger übertragen, Browser müssen weniger verarbeiten). Weg damit.

Und zum Schluss: HTML Minify. Per Konsole, Desktop-Tools wie z.B. https://gist.github.com/1219542 oder händisch im Web http://htmlcompressor.com/compressor.html


Kleinigkeiten
- Viel CSS, weniger Grafiken.
- „Luftiges“, nicht überladenes Layout
- Es wurde keine Subdomain für Grafiken und andere Ressourcen angelegt, da die Anzahl der Requests pro Domain meistens unter 6 liegt. Auch kein CDN, da ausschließlich regionale Besucher.


Outro
Wie Ladezeiten von Blogseiten hinter einem WordPress-System optimiert werden können, hatte ich mal im Blog zusammengefasst: http://playground.ebiene.de/2686/wordpress-performance/

Danke für bis hierher lesen ;)
49
37
Sören Hentzschel's profile photoPeter Klein (Piet)'s profile photoMichael Hohlfeld's profile photosascha rode's profile photo
14 comments
 
Ich habe mit HTML 5 Boilerplate (dort die Einstellungen für .htaccess), GZIP und W3 Total Cache sehr gute Ergebnisse erzielt. Beim Page Speed Test von Google komme ich in der Regel über 90 Punkte, aktuell erreicht die Startseite von depechemode.de sogar 94 von 100 Punkten.
Translate
Translate
 
+Thomas Broda Das kannst du bei größeren Projekten machen. Normalnutzer hat weder einen Balancer noch nginx.
Translate
 
Ich habe vor Kurzem gzip aktiviert, doch leider hat das meine Feeds außer Kraft gesetzt. Hat jemand eine Ahnung, woran das liegen könnte?
Translate
Translate
 
Ganz wichtig: DSL Anschluß holen!
Translate
 
Hey Sergej, vielen Dank für diesen Beitrag, der war wirklich sehr informativ. :)
Translate
 
Hallo Sergej,
sorry das hatte ich gar nicht mitbekommen. Muss meine Kreise aufräumen dringend. Es ist mit auf jeden Fall machbar 100/100 zu erreichen. Ich habe es mit der Blogger World auch geschafft.

Danke für den Beitrag
Translate
 
Danke, Sergej.
Das hier ist dann mein erster G+ Bookmark. Damit ichs wiederfinde wenn ichs brauche. :)
Translate
 
Kurz und sehr interessant, thx :-)
Translate
 
Sergej, hast du einen Tipp wie ich eingebundene Schriftarten mittels gzip/deflate komprimieren kann? (.ttf Dateien)
Translate
Translate
Add a comment...