Im ersten technischen Teil der High Performance Websites Serie dreht sich alles um die Reduzierung von HTTP-Requests.
Interessant zu wissen ist, dass bei den meisten Webseiten (bei leerem Browser Cache) weniger als 10-20% der Antwortzeit für den eigentlichen Abruf der HTML Dokumente verwendet wird. Im Umkehrschluss werden dann 80-90% der Ladezeit durch HTTP-Requests verbraucht. Durch dieses Verhältnis wird deutlich das die Anzahl der HTTP-Anfragen zur Ladezeit der gesamten Webseite und damit auch zur Gesamtperformance bedeutend beiträgt.
Um unnötige Requests zu vermeiden gibt es mehrere Möglichkeiten, eine davon ist mehrere vereinzelte Bilder zu einem Ganzen zusammenzufassen und mittels Imagemap oder CSS-Sprite in einzelne Links zu unterteilen.
Genauer beleuchtet kann z.B. die Navigationsleiste einer Webseite aus vielen einzelnen Bildern bestehen wodurch für jeden Abruf eines Bildes ein eingener HTTP-Request erzeugt wird. Werden nun diese einzelnen Bilder zusammengefasst entsteht nur noch eine einzige HTTP-Anfrage.
Eine weitere Möglichkeit ist die direkte Einbettung von Bildern in eine HTML oder PHP Seite mittels sog. Inline-Images. Dabei wird direkt im Sourcecode der Seite das „data:“ URI Schema wie folgt verwendet:
HTML URI Schema:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
Siehe auch: http://en.wikipedia.org/wiki/Data_URI_scheme
Bei der Verwendung von Inline-Images ist hervorzuheben das diese nicht Seitenübergreifend gecached werden was bedeutet das jede Seite die das Bild enthält auch um dessen Größe im Cache anwächst.
Leider werden Inline-Images nicht von allen Browsern verarbeitet, dazu gehört unter anderem der Internet Explorer, daher wird diese Variante eher selten benutzt. Imagemaps bzw. CSS-Sprites sind also den Inline-Images vorzuziehen.
Abschließend soll auch noch auf die Kombination von einzelnen JavaScript und Stylesheets hingewiesen werden. Hier ist es empfehlenswert die jeweils voneinander getrennten einzelnen JavaScript und Stylesheet includes zu vereinheitlichen sodass noch jeweils ein gesamtes Script geladen werden muss. Auch diese Maßnahme verringert HTTP-Anfragen.
NETWAYS Blog
Serie High Performance Websites – Teil 1: Vorarbeiten
Nachdem die MySQL Performance Serie ein großer Erfolg war, haben wir uns dazu entschlossen eine weitere Reihe mit dem Titel „High Performance Website“ aufzulegen.
In dieser Blogserie versuchen wir Anregungen zu liefern auf welche Einstellungen zurückgegriffen werden kann um lahmenden Webseiten Beine zu machen oder zu erwartende Lastspitzen besser abzuarbeiten. Ziel ist es dem Anwender in einem möglichst kleinem Zeitfenster die gewünschte Website auszuliefern. Hierbei ist wichtig dem Gast möglichst schnell eine Darstellung im Browser zur Verfügung zu stellen. Ein Ladebalken in der Statusleiste des Browsers ist hierbei die schlechteste der vorhandenen Möglichkeiten.
Um mögliche Veränderungen wahrnehmen zu können ist wichtig diese auch zu protokollieren. Für die technischen Messwerte wie Ladezeit oder HTTP-Header können Tools wie Firebug oder YSlow unter Firefox sowie die integrierten Developmenttools von Apple`s Safari unterstützen. Zum anderen sollten zusätzlich zu den gemessenen Werten auch Konfigurationsänderungen und subjektive Wahrnehmungen beim Aufruf der Seite wie z.B. verlangsamt ladende Bilder oder ein verzögerter Aufbau des Seiteninhaltes dokumentiert werden.
In den nächsten Artikeln geben wir einen Einblick in diverse Möglichkeiten um den Aufruf zu beschleunigen. Hier werden sowohl Server- als auch Codeseitige Verbesserungen dargestellt und beschrieben, im Detail werden folgende Themen behandelt:
- Teil 1: Vorarbeiten und Grundlagen
- Teil 2: Minimieren von HTTP-Requests
- Teil 3: Einbinden von Expires-Header
- Teil 4: Komprimierung der Seiten
- Teil 5: DNS Lookups und Redirects
Wir hoffen die aufgezeigten Lösungen helfen Ihnen weiter. Für Rückfragen zu den genannten Themen stehen wir selbstverständlich gerne zur Verfügung.
Fluid – Websites in Desktopapplikationen verwandeln
Fluid ist ein Tool, mit dem man aus web basierten Applikationen lokale Anwendungen bauen kann. Natürlich baut das nicht die Anwendung um, aber es generiert quasi einen eigenen Webbrowser, der nur eine einzige Anwendung enthält und integriert diese in den Finder oder das Mac OSX Dock. Im Ergebnis sieht das dann so aus, als wenn es sich um eine selbständige Anwendung handeln würde. Dabei kann das Tool alles simulieren was man sonst auch gerne im Browser nutzt und noch viel mehr. Beispielsweise User Scripts mit Greasemonkey, JavaScript, Tabbed Browsing oder Growl Notifications.
Noch interessanter ist das ganze beispielsweise mit lokal installierten Webapplikationen, wie beispielsweise TWiki. Wenn das Programm auf dem lokalen System läuft und unter http://localhost/twiki erreichbar ist, kann man das TWiki ganz einfach in das Dock einbauen.
Julian Hein
Executive Chairman
Julian ist Gründer und Eigentümer der NETWAYS Gruppe und kümmert sich um die strategische Ausrichtung des Unternehmens. Neben seinem technischen und betriebswirtschaftlichen Background ist Julian häufig auch kreativer Kopf und Namensgeber, beispielsweise auch für Icinga. Darüber hinaus ist er als CPO (Chief Plugin Officer) auch für die konzernweite Pluginstrategie verantwortlich und stösst regelmässig auf technische Herausforderungen, die sonst noch kein Mensch zuvor gesehen hat.
