Sitespeed Tuning leicht gemacht
Kommentare

Wie schaffen es die Betreiber eigentlich, dass Facebook so performant ist, obwohl sich Millionen Benutzer zeitgleich darauf tummeln und ohne Ende Daten produzieren? Kai Radanitsch (eBusinessLab GmbH) konnte beim Responsive Design Day auf der IPC Spring 2013/webinale eine Erklärung liefern: Eigentlich werde für Facebook ein normales LAMB-System benutzt. Um die LAMB-Umgebung aber werden zigfach Performance-Layer eingebaut.

So sieht also Sitespeed Tuning im ganz großen Stil aus, aber auch mit einfachen Mitteln, können und sollten Entwickler Webseiten optimieren

Warum ist Tuning sinnvoll?
Entwickler müssen sich über diverse Aspekte im Klaren sein, die den Erfolg einer Webseite ausmachen und in klarer Abhängigkeit zur Performanz stehen:
1. User Experience:  Im Idealfall klicken sich Besucher durch mehrere Seite, und man kann mehr Informationen an sie herantragen. Dies geschieht aber meist nur, wenn die Seitenaufrufe schnell beantwortet werden, ansonsten steigt die Abbruchrate.
2. Wer die Serverlast gering hält, hält auch Kosten unten.
3. Eine schnelle Website generiert ein besseres Suchmaschinen-Ranking
4. Conversions-Optimierung

Zum Website-Tuning gehört im Allgemeinen: Das Caching optimieren, RTT minimieren, Request Overhead verringern, Payload-Größe verkleinern, Browser Rendering optimieren und die Optimierung für Mobile.

Kai Radanitsch führte die Teilnehmer durch einen Tuning Walkthrough und zeigte, wie man mit verschiedenen Tools relativ einfach optimieren kann. Zunächst sollten Entwickler eine Analyse via pingdom.com durchführen. Auf der Speed-Test-Seite gibt man einen beliebigen URL ein und erhält einen Performancegrade.
Dann geht es an die verschiedenen angezeigten Speedtime-Bremsen: CSS verkleinern, kann man in nur 3 Schritten: Entschlaken über unusedcss.com, zusammenführen über http://buildercss.wemakesites.net/ und schließlich verkleinern mit cssminifier.com. „Alles super easy“, so Radanitsch
Die Erweiterung für den Webbrowser Mozilla Firefox Firebug ermöglicht die Fehlersuche, das Monitoring und das direkte Bearbeiten von Webseiten.
Bilder lassen sich via smushit.com einfach komprimieren, Sprites, also mehrere Bilder in einem, ertellt man mit spritepad.wearekiss.com. „Das nimmt uns einen riesigen Haufen Arbeit ab“, erklärte Radanitsch: Man erstellt eine Schablone und zieht die gewünschten Bilder per Dran & Drop rein.
Das Firebug Plug-in von Yahoo, yslow.org, hilft dabei, Dateien zu chachen, das Firebug Plug-in Pagespeed via developers.google.com/speed/docs/insights/using_firefox kann durch die Installation des Moduls Mod_deflate in Apache Dateien komprimieren. Dazu werden einfach folgende Zeilen in .htaccess kopiert:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>

Die Nutzung eines Content Delivery Network kann ebenfalls bei der Optimierung helfen. Hier bietet sich zum Beispiel das Web Application Hosting Amazon Web Services an. Die Cloud Front macht die Round-Trip-Zeit kürzer, denn sie verteilt Daten aus S3 an Rechenzentren in der Nähe meiner Besucher.

Google bietet geich eine ganze Reihe von Tools: Google Analytics etwa gibt Aufschluss über die Website-Gewschwindigkeit. Google PageSpeed Insights zeigt, was Google für mich tun kann, z.B. Geschwindigkeit aufbauen durch Aufzeigen von Optimierungspotenzialen. Das Mod_pagespeed-Modul kann ebenfalls in Apache installiert werden und verspricht eine Speedotimierung von bis zu 50 Prozent.

Wenn wir alle nötigen Werkzeuge schon an die Hand bekommen, warum sind dann aber nicht alle Websites schnell? Kai Radanitsch listete mehrere Faktoren auf, die Entwickler stets im Blick behalten sollten. Um Schnelligkeit zu gewährleisten, sollte man stets versuchen zu minimieren, Sprites nutzen, inlined und mit wenig RTT arbeiten, lange Cache-Zyklen haben, Browser-Features nutzen und Servereinstellungen beachten. Bei der Wartung gelten schnelle Entwicklungszeiten, Changerequests schneller umzusetzen, Unterstützung für alle Browser zu gewährleisten, die Serverwartung im Idealfall professionell machen lassen, CMS zu nutzen und den Fokus auf Inhalte zu setzen.

Bestimmt finden Entwickler hier das ein oder andere hilfreiche Tool, um die eigenen Websites hier und da etwas schneller zu machen. Alle Links gibt es auch auf ebusinesslab.com/speed

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -