Ladezeiten-Optimierung von Webseiten

In dieser Podcast-Folge möchte ich euch einige Techniken zur Optimierung der Ladezeit von Webseiten zeigen. Die Techniken sind einfach einzusetzen und effizient, des Weiteren erzähle ich euch ein paar Worte über das neue Apache Modul von Google: mod_pagespeed.

Nach unten springen, um das Video zu sehen.

Googles mod_pagespeed umfasst mehrere Anpassungen der Apache Konfiguration, die das Laden von Webseiten beschleunigen sollen. Dadurch werden Optimierungen umgesetzt, die Google seit geraumer Zeit im Rahmen seiner Pagespeed-Initiative propagiert. Das Apache Modul steht unter einer Open Source Lizenz und ist somit für jeden frei nutzbar. Jeder der über einen eigenen Root-Server verfügt, kann das Modul z.B. als rpm ganz einfach installieren. Wer seine Webseite auf einem Shared-Webspace hostet, hat es hier nicht ganz so einfach, denn in diesem Fall seid ihr auf euren Hoster angewiesen und das er dieses Modul installiert. mod_pagespeed Video auf YouTube

Kommen wir nun zu den Optimierungs-Möglichkeiten die ihr relativ einfach für eure eigene Webseite umsetzen könnt:

HTTP-Requests reduzieren

Ein HTTP-Request ist eine einfache Anfrage an den Webserver z.B. eine GET oder POST Methode. Anders gesagt, wenn ihr z.B. eine CSS oder JavaScript Datei via <link /> oder <script> Tag einbindet wird damit ein HTTP-Request ausgelöst. Das selbe gilt auch für das einbinden von Bildern via <img /> Tag oder wenn Bilder in der CSS-Datei mit Hilfe von background-image eingebunden werden, hierbei wird ebenfalls jedesmal ein HTTP-Request ausgeführt.

Je mehr HTTP-Requests eine Webseite ausführt um komplett geladen zu werden, umso langsamer wird sie, daher macht es Sinn diese HTTP-Requests auf ein Minimum zu reduzieren. Welche Möglichkeiten es da gibt, zeige ich euch in den folgenden Beispielen:

Zusammenlegen von CSS und JavaScript Dateien:
Eine Möglichkeit um HTTP-Requests zu reduzieren ist z.B. wenn ihr mehrere CSS und / oder JavaScript Dateien habt die in einzelne Dateien aufgeteilt sind, aber trotzdem auf allen Seiten geladen werden, diese einfach zusammenzulegen.

Als konkretes Beispiel stellen wir uns vor, dass wir in unserer Webseite die normale CSS und JavaScript Datei und zusätzlich noch zwei JavaScript Dateien und eine CSS Datei von der Lightbox integriert haben. So könnten wir nun die zwei CSS Dateien zu einer Datei bündeln und auch die insgesamt drei JavaScript Dateien in einer einzigen Datei zusammenführen. Auf diese einfache Art und Weise hätten wir bei diesem Beispiel drei HTTP-Requests gespart.

CSS Media Types in einer Datei bündeln:
Wenn ihr auf eurer Webseite mehrere CSS-Dateien mit unterschiedlichen Media Types verwendet besteht die Möglichkeit diese in einer Datei zu bündeln (wie oben bereits erwähnt). Hier gilt allerdings Obacht, denn eine Handheld CSS wird normalerweise nur geladen, wenn die Webseite auch mit einem mobilen Endgerät aufgerufen wird. Werden diese Dateien nun gebündelt und die Handheld CSS enthält z.B. über 50-100 Zeilen Code extra für Mobilgeräte, so wird dieser Code jedes mal mitgeladen auch wenn die Seite gar nicht von einem mobilen Endgerät geöffnet wurde. Würde unsere Handheld CSS nun aber z.B. nur aus 5-10 Zeilen bestehen, so wäre es kein Probleme diese in die normale Screen CSS mit aufzunehmen.

Hier ein Beispiel wie eine CSS-Datei mit mehreren Media Types auszusehen hat:

/* Der allgemeine CSS Code */
body{font-weight:bold;}
 
@media print {
  /* StyleSheet für den Druck der Webseite */
}
 
@media handheld {
  /* StyleSheet für Mobilgeräte */
}

Grafiken zusammenfügen zu einer großen Grafik:
Bei einem sehr grafiklastigen Layout habt ihr in der Regel viele Bilder die in der CSS Datei via background eingebunden werden. Das verursacht nicht nur eine enorme Menge an HTTP-Requests, sonden bedeutet auch eine Erhöhung der Gesamtgröße aller Bilder zusammen, z.B. wenn in jeder Grafik das ICC-Profil mit eingebunden wird.

Abhilfe schafft hier folgende Methode: Ihr verfrachtet soweit wie möglich alle PNG Bilder in ein großes PNG, alle JPG Bilder in eine einzige große JPG Datei usw. Hierbei sollte natürlich beachtet werden, dass sinvoll aufgeteilt wird: Nur weil z.B. eine PNG 24-Datei vorhanden ist die Transparenzen benötigt, sollten nicht auch die restlichen JPG Bilder in eine große PNG Datei gebündelt werden, denn ein PNG ist von der Dateigröße später viel größer als ein JPG es mit allen Grafiken wäre. In so einem Fall bleibt die PNG dann einfach als Einzelgrafik weiter bestehen bzw. wird mit anderen PNG-24 Grafiken gebündelt, sowie alle JPG Bilder in einer JPG Datei zusammengefasst werden.

Wenn ihr dann später eine Grafik aus diesem großen Paket als Hintergrund für einen Div-Container verwenden wollt, so könnt ihr via CSS background-position die Hintergrundgrafik soweit verschieben, dass auch nur der gewünschte Bereich zu sehen ist.

Durch diese Methode spart ihr euch eine Menge HTTP-Requests und reduziert die Dateigröße der Grafiken, da nicht in jeder Grafik aufs neue (z.B.) das ICC-Profil eingebunden wird.

Beispiel für CSS Background-Position:

/* 200px 250px ( X / Y ) */
background:url(images/layout.jpg) no-repeat 200px 250px;

Grafiken richtig komprimieren und speichern

Ihr solltet Grafiken im richtigen Format und mit entsprechend passender Kompression speichern. So sollte ein kleines Icon mit z.B. 64 Farben nicht als JPG gespeichert werden, sondern als GIF (bis zu 256 Farben möglich) Datei.

Des Weiteren bietet euch das JPG Format die Möglichkeit Bilder mit einem bestimmten Qualitätsfaktor (Kompression) zu speichern um die Dateigröße zu veringern.

Sehr hilfreich ist hier auch der Dialog „Für Web und Geräte speichern…“ in Photoshop, mehr dazu im Podcast.

Podcast Info:
Titel: Ladezeiten-Optimierung von Webseiten
Autor: Pascal Bajorat
Länge: 23 Min
Dateigröße: 120MB

Video-Podcast in HD 720p über Vimeo ansehen:

Ladezeiten-Optimierung von Webseiten from Pascal Bajorat on Vimeo.