Tutorial: Geschwindigkeit und Ladezeit von Webseiten optimieren

Die letzten Tage habe ich mich intensiv damit befasst, die Ladezeit für den Aufruf von www.ihrwebprofi.at zu reduzieren. Dieser Beitrag ist eine Zusammenfassung der aus meiner Sicht wichtigsten Erkenntnisse und Best Practices.

Eines gleich vorweg: Kleinvieh macht auch Mist, aber: Perfektion ist auch beim Thema Geschwindigkeitsoptimierung v.a. bei kleineren Webseiten nicht notwendig. Oft reicht es, die größten Geschwindigkeitsbremsen ausfindig zu machen, um dadurch die Ladezeit teilweise um Sekunden zu reduzieren.

Erster Ansatzpunkt wären hier für mich Bilder und Grafiken sowie die Anzahl der HTTP-Requests, die für den Aufbau der Seite erforderlich sind.

Hilfreiche Analysetools

Bevor man beginnt, seine Webseite zu optimieren, empfehle ich erst mal eine Analyse mit Hilfe folgender Tools:

• Firefox Plugin „Web Developer Toolbar„: hier ist v.a. die Funktionalität „View Document Size“ unter „Information“ hilfreich, um Größe der Webseite, Anzahl der Bilder, Skripte und Stylesheets zu messen. Danach kann man sich jedes einzelne Objekt im Detail ansehen und Wege suchen, um z.B. die Anzahl der HTTP-Requests zu reduzieren.
  
• Firefox Plugin „lori (life-of-request-info„: zeigt in der Statusleiste an, wie lange es dauert, eine Webseite zu laden, wieviele Requests gemacht werden und welche Datenmenge übertragen wird. Die Funktionsweise ist ähnlich wie der Web Developer Toolbar – nur sieht man hier die Ergebnisse beim Laden einer jeden Webseite in der Statusleiste.
  
• http://www.webpagetest.org – führt kostenlos Performancetests von verschiedenen Standorten weltweit durch und liefert Ansatzpunkte zur Optimierung.
  
• Anzahl der SQL-Abfragen im Template anzeigen lassen – dazu folgenden Code in der Datei footer.php im Template-Verzeichnis direkt vor </body> einfügen. Hinweis: wird nur im Quelltext der Seite angezeigt!

  • <!--<?php echo get_num_queries(); ?&gt; Abfragen in &lt;?php timer_stop(1); ?&gt; Sekunden.-->

  Best Practices für die Optimierung

  • Bilder nur in der tatsächlichen Größe einbinden und nicht große Bilder klein skalieren
  • Sind die Bilder im richtigen Format gespeichert? JPG für Bilder, PNG oder GIFs für Icons? Ist wirklich die höchste Komprimierungsrate bei JPG-Bilder notwendig?
    Tipp 1: Mit dem Tool Smush.it können die Grafiken bestehender Webseite einfach analysiert und optimiert werden.
    Tipp 2: Checklist for Better Web Graphics
    Tipp 3: Adobe Air Application „Shrink O´Matic„
  • Elemente wie z.B. Bilder oder Videos auf möglichst wenigen unterschiedlichen Domains platzieren oder am besten gleich auf den eigenen Webspace hochladen. Dadurch kann Zeit für DNS-Lookups eingespart werden.
  • Skripte falls möglich im Footer der Webseite platzieren, weil die Webseite erst aufgebaut wird, wenn alle Skripte im Header geladen sind. V.a. viele WordPress-Plugins unterstützen dies über eine Einstellungsmöglichkeit im Admin-Bereich. Falls diese Option nicht vorhanden ist, kann man dies meist durch direkte Anpassung der Funktion wp_enqueue_script in der Plugin-Datei selbst ändern.
    Artikel-Tipp: How to disable scripts and styles
  • Statt vieler kleiner Bilder falls möglich CSS Sprites verwenden, um die Anzahl der HTTP-Requests weiter zu reduzieren.
    Tipp: leicht zu bedienende CSS Sprite-Generatoren verwenden.
  • Tipps speziell für WordPress-Blogs
    • Brauche ich wirklich ALLE Plugins?
    • Gewisse Funktionen wie z.B. Favicon oder RSS-Feedburner-Link gleich direkt im Template einbauen, statt ein Plugin zu verwenden.
    • Inaktive Plugins löschen statt ewig mitzuschleppen.
    • Stylesheets einzelner Plugins in das Hauptstylesheet übertragen und im Plugin deaktivieren.
      Nachteil: bei Updates des Plugins wird diese Änderung wieder überschrieben. Ich hab dies daher nur bei Plugins gemacht, wo es schon länger kein Update mehr gegeben hat oder ich keine zusätzliche Funktionalitäten benötige.
      Kleiner Tipp: bei geänderten Plugins die Versionsnummer im Plugin-File manuell erhöhen, um das versehentliche Aktualisieren durch die Auto-Update-Funktion von WordPress zu vermeiden.
    • Ist es notwendig, auf der Startseite die letzten 10 Beiträge anzuzeigen oder reichen nicht auch die 5 neuesten?
      Tipp: WordPress-Plugin „Different Posts Per Page„, wenn man die Ausgabe für verschiedene Bereiche der Webseite (z.B. Kategorieansicht, Archivansicht, Feed, Suche…) genauer steuern möchte.
    • mySQL-Datenbank regelmäßig optimieren – entweder über phpmyadmin oder z.B. mit Hilfe des Plugins „DB-Optimize„.
    • Falls Artikelüberarbeitungen nicht benötigt werden, dies direkt in der wp-config.php deaktivieren:

      <?php define('WP_POST_REVISIONS', false ); ?>

  • Komprimierte Übertragung der Webseite (gzip) aktivieren (z.B. durch das Plugin W3 Total Cache).
  • Caching wo möglich verwenden (z.B. Gravatar-Bilder bei Kommentaren lokal speichern mit dem Plugin „GravatarLocalCache„).
  • HTTP expire headers für statische Objekte festlegen, damit die gecachten Objekte beim erneuten Aufruf der Seite vom Browser-Cache und nicht vom Webserver abgerufen werden.
    Tutorial Tipp: Mit Expires-Header die Performance von Websites verbessern (Teil 2, Teil 3)
  • Eigenes Template für mobile Geräte verwenden, da diese auf Geschwindigkeit optimiert sind.
    Tipp für WordPress: WP-Touch oder WP-Touch Pro (wird auf www.ihrwebprofi.at verwendet).

  Plugin W3 Total Cache

  Eine einfache Möglichkeit, sein WordPress-Blog zu optimieren, bietet das Plugin „W3 Total Cache„. Hier kann man beispielsweise mit einem Klick Seiten-, Objekt-, Datenbankcache oder die GZIP-Komprimierung aktivieren. Für eine detaillierte Konfiguration des Plugins sollte man sich jedoch ausführlicher Zeit nehmen (Tutorial-Tipp: How to Install and Setup W3 Total Cache for Beginners).

  Kleiner Tipp noch für Caching-Einsteiger: beim Page Cache auch beachten, dass Änderungen am Template erst sichtbar werden, wenn dieser wieder manuell geleert wurde – also nicht wundern, wenn z.B. eine Änderung im Template nicht gleich sichtbar ist.

  Amazon S3 / Cloudfront

  Ein Content Distribution Network ist eine Möglichkeit, um v.a. bei Webseiten mit globalem Publikum für eine gleichmäßige Performance zu sorgen. Dabei werden statische Dateien auf CDN-Server wie z.B. Amazon S3 überspielt und dann abhängig vom Standort des Besuchers von einer unterschiedlichen Region ausgeliefert (im Falle von www.ihrwebprofi.at über den Amazon Webservice Cloudfront).

  Die Integration eines CDN ist über das Plugin W3 Total Cache einfach möglich. Die Kosten für Webseiten mit geringen  Zugriffszahlen liegen im Cent-Bereich, ein Kalkulationsrechner hilft bei der Kostenabschätzung.

  Das Festlegen von HTTP expire headers war über Amazon Cloudfront etwas schwierig – neue Header-Infos werden erst mit einigen Stunden Verspätung übernommen und angezeigt. Hilfe bietet hier das (kostenlose) Tool „Cloudberry Explorer„, mit dem durch die Funktion „CloudFront Invalidation“ diese Wartezeit verkürzt werden kann.

  Zusammenfassung

  Durch die oben genannten Maßnahmen konnte ich z.B. die Ladezeit meiner Startseite von
  ca. 5 Sekunden auf ca. 2 Sekunden beim ersten Aufruf und auf unter 1 Sekunde ab dem zweiten Aufruf reduzieren. Generell gilt auch hier wie bei jedem IT-Projekt, dass durch zunehmende Customisierung von z.B. WordPress-Plugins das Update komplexer wird.
  Oft reichen jedoch bereits einfache Maßnahmen wie Bilder im richtigen Format abspeichern, um einen spürbaren Geschwindigkeitsgewinn zu erzielen.

  Falls Sie wissen möchten, wieviel Optimierungspotential in Ihrer Webseite steckt, kontaktieren Sie mich bitte. Ich werfe gerne einen unverbindlichen Blick auf Ihre Webseite und sende Ihnen eine kurze Analyse mit konkreten Ansatzpunkten zur Geschwindigkeitsoptimierung.