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 oder Tag
einbindet wird damit ein HTTP-Request ausgelöst. Das selbe gilt
auch für das einbinden von Bildern via 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.



Ähnliche Artikel:
Header-Collage Navigation in Photoshop Webdesign-Podcast hat
ein neues Zuhause