So geht’s: Serverlast minimieren mit einem einfachen Trick

In diesem Artikel möchte ich euch einen interessanten Trick zeigen, wie man die Serverlast, die eine Website produziert, geschickt minimieren kann. Und zwar geht es diesmal nicht direkt um die Optimierung von seinen PHP-Skripts, sondern um die Reduzierung der HTTP-Requests an den Webserver. Um den Artikel zu verstehen, sollte man ein paar Dinge wissen. Diese werde ich im Folgenden erläutern.

Die Basics

Wird eine Website im Browser aufgerufen, wird ein HTTP-Request (eine Anfrage) an den Webserver (meistens dürfte das Apache sein) gesendet. Dieser Request wird bearbeitet (z.B. von einem PHP-Skript) und eine Antwort wird zurück zum Browser geschickt. Soweit, so gut. Eine Website beinhaltet in der Regel aber noch weitere Elemente, z.B. Bilder. Wenn sich diese Bilder auf dem gleichen Server wie das PHP-Skript befinden, entsteht durch jedes Bild ein weiterer Request an den Server.

Das Problem

Da ein Server aber nur X gleichzeitige Anfragen bearbeiten kann, entsteht irgendwann ein Problem. Dann werden die Bilder nicht mehr geladen oder der Ladevorgang dauert ewig. Für die Besucher der Seite wirkt das störend und evtl. verlassen diese die Seite auch sofort wieder. Als Webmaster sollte man darum bemüht sein, das Problem in den Griff zu bekommen.

Es gibt mehrere Lösungen, die auch kombiniert werden können. Eine dieser Lösungen ist ein sogenannter Load-Balancer, der die Requests auf mehrere (redundante) Server verteilt, so dass immer der am wenigsten ausgelastete Server verwendet wird.

Eine andere Lösung aber habe ich vor kurzem bei Facebook gesehen. Facebook hat etliche Millionen Besucher täglich und ist wahrscheinlich eine der am meisten aufgerufenen Seiten weltweit. Trotzdem wird Facebook meist recht schnell geladen. Da fragt man sich doch: Wie macht Facebook das? Einerseits benutzt die Website Hip Hop for PHP, ein PHP-Compiler, der PHP-Skripts in Binärcode übersetzt und die Abarbeitung dieser Skripts so enorm verbessert. Zum anderen minimiert Facebook die Anzahl der Requests pro Seitenaufruf geschickt. Wie das geht, zeige ich euch jetzt.

Die Lösung

Eine andere/ergänzende Lösung zum Loadbalancer ist die Zusammenfassung von mehreren ähnlichen Requests. Werden auf einer Seite 50 verschiedene Bilder geladen, ist es möglich, die 50 Anfragen auf eine zu reduzieren. Diese Technologie wird auch CSS Sprites genannt.

Schritt 1: Zusammenfassung von ähnlichen Requests

Das ist eigentlich ganz einfach. Man kopiert alle Bilder, die auf der Seite angezeigt werden sollen, in eine große Bilddatei. Natürlich sollte man zwischen den Bildern genügend Abstand lassen, um die einzelnen Bilder (meist werden es wohl Icons sein) unterscheiden zu können.

Schritt 2: Anzeigen des richtigen Bilds

Eine Schwierigkeit, die sich nun ergibt, ist, dass man ja immer nur eines der vielen Bilder an einer bestimmten Stelle anzeigen möchte. Da jeder moderne Browser CSS unterstützt, ist diese Schwierigkeit leicht zu meistern. Man benötigt nur die folgenden Style-Attribute:

  • background-position
  • height
  • width

Mithilfe von background-position kann man jetzt angeben, an welchen Koordinaten sich das Bild (ich gehe im Folgenden einfach mal davon aus, dass es sich um ganz viele kleine Icons handelt) befindet. Mit height und width gibt man dann die Breite und Höhe des Icons an. Das sieht dann z.B. so aus:

<a href="#" style="background-image:url(my_icons.gif); background-position: 0px 16px; height: 16px; width: 16px;">Link</a>

es wird nun das Icon aus der großen Icon-Sammlung geladen, das sich an Position 0px : 0px befindet und 16x16px groß ist.

Wie im Beispiel oben zu sehen ist, verwenden wir kein img-Tag zum Anzeigen eines Bildes, sondern ein Anker-Tag (das meist zum Realisieren von Links benutzt wird). Es ist fast jedes beliebige andere Tag für diesen Zweck nutzbar, z.B. ein span-Tag.

Nachteile der Lösung

Leider hat die Lösung auch Nachteile. So muss z.B. bei jedem anzuzeigenden Bild per CSS angegeben werden, wo genau es sich in der großen Icon-Sammlung befindet. Ändert sich nun die Position eines Icons, hat man ein Problem. Natürlich könnte man das Ganze auch automatisiert machen, aber der Aufwand ist dennoch sehr hoch.

Außerdem sollte man die Lösung nur für Icons benutzen. Wer vor hat, ganze Bilder (z.B. große Fotos) so zusammen zu packen, sollte sich die Sache nochmal anders überlegen. Die dadurch resultierende Datei wäre extrem groß und die Ladezeit extrem hoch. Zwar wäre die Anzahl der Requests minimiert, aber was bringt das schon, wenn die Besucher aufgrund der hohen Ladezeit die Seite verlassen?

Zudem macht man sich damit die Möglichkeit kaputt, ein Bild direkt mit der rechten Maustaste und „Bild speichern unter“ zum Download anzubieten.

Das geht nicht nur mit Bildern…

Vorhin habe ich schonmal etwas von „Zusammenfassung ähnlicher HTTP-Requests“ geschrieben. Damit meinte ich nicht nur Bilder bzw. Icons, sondern auch Dateien wie CSS-Files oder JS-Skriptdateien (JS = JavaScript). Wenn man mal 20 CSS-Dateien und 10 JS-Skriptdateien hat, kommen auch einige Requests zusammen, die natürlich auch Zeit kosten. Diese kann man geschickt zusammenfassung und so die Serverlast reduzieren.

Und man muss auch nicht alles manuell erledigen

Wahrscheinlich werden viele von euch jetzt denken: Ne, auf den Aufwand habe ich keine Lust, da extra alle möglichen Dateien zusammenzufassen. Und ich kann euch sagen: Müsst ihr gar nicht!

Dank PHP können wir das alles von PHP erledigen lassen. Das geht sogar soweit, dass man PHP nur diejenigen Dateien zusammenfassen lässt, die auch tatsächlich benötigt werden. Klingt auf den ersten Blick kompliziert, ist es aber eigentlich gar nicht. Die einzige Schwierigkeit, die wir beachten müssen, ist dass die HTML-Seite, die dann ja letztlich die Bilder, CSS-Dateien oder JS-Dateien beinhaltet, in einem anderen Request ausgeliefert wird, als die Dateien selbst.

Diesem Problem gehen wir mit Sessions aus dem Weg. Leider wäre es jetzt zu komplex, alles komplett inkl. Beispielcode zu erklären. Deshalb mache ich eine kleine Artikelserie daraus und erkläre euch nun erstmal den groben Ablauf. Der 2. Teil dieser Artikelserie kommt in den nächsten Tagen.

  1. In unseren HTML-Templates binden wir Bilder / andere Dateien nicht mehr gewohnt mit img-Tag ein, sondern wir benutzen einen View-Helper. Dieser Helper kennt so am Ende des Skripts alle Dateien, die benötigt werden. Jetzt wird diese Dateiliste in die Session geschrieben.
  2. Alle Anfragen an Bilddateien (ist natürlich auch auf CSS/JS anwendbar) werden nun über ein PHP-Skript laufen gelassen. Das geht ganz einfach mit einer .htaccess-Datei.
  3. In diesem PHP-Skript wird die Session ausgelesen und es werden alle benötigten Dateien geladen und zusammengefügt. Im Bilder-Beispiel geht das recht einfach mit den image-Funktionen von PHP. Bei CSS-Dateien geht es noch einfacher mit String-Verkettung.
  4. Dadurch dass wir die Dateien mit einem View-Helper eingebunden haben, ist der View-Helper auch direkt in der Lage, das benötigte CSS (background-position) bei den Bildern zu generieren. Denn der Helper kennt die Position der Bilder.

Ich hoffe, dass ich die Thematik einigermaßen verständlich erklären konnte und dass ihr an einer Fortsetzung der Artikelserie interessiert seid. Außerdem wäre ich froh, wenn ihr die Kommentarfunktion ausgiebig nutzen würdet 🙂

Interessante Links zum Thema

Schlusswort

Klug eingesetzt bringt das Zusammenfassung von ähnlichen Dateien einen großen Performancegewinn. Bei großen Projekten kann sich das lohnen, siehe Facebook!

1 Star2 Stars3 Stars4 Stars5 Stars (Wurde noch nicht bewertet)
Loading...


9 Kommentare zu “So geht’s: Serverlast minimieren mit einem einfachen Trick”

  1. Ich persönlich nutze unterschiedliche Techniken. Mittlerweile ist AJAX ( JQuery ) für mich die nummer 1. Wenn man oft mit der DB arbeitet, würde ich feste Felder in Konstanten im PHP Skript auslagern und nicht mehr in der DB speichern. Es gibt zahlreiche Möglichkeiten und es kommt immer etwas an das Projekt an.

  2. Ja gut, aber das hat ja mit den Sprites jetzt relativ wenig zu tun 😉

  3. Ich habe damals einen kompletten Reload der Seite gemacht. Nun arbeite ich will mit Ajax (JQuery Framework). Die Umstellung hat echt Wochen gebraucht aber es hat sich gelohnt. Zwar kann Google damit nicht will anfangen, aber für die echten User war es nicht mehr auszuhalten.

  4. Dominik videothek-dvd-verleih.de on Januar 24th, 2011 at 21:39

    Man kann Ajax Seiten auch für Google crawlbar machen http://www.google.com/support/webmasters/bin/answer.py?hl=de&answer=174992 .

    Ich frage mich nur ob der letzte Punkt Sinn macht. Also die Zusammenfassung mit PHP. Wenn man dadurch vielleicht 2-3 Requests spart, hat man trotzdem eine gesteigerte CPU/RAM Belastung / Aufruf. Ohne gescheites Caching wird das keine bessere Performance bringen.

    Ich würd mich auch über eine Erweiterung dieser Artikelserie freuen, welche darauf eingeht wie beispielsweise Applications vom Softwaredesign gestaltet sind, die in ähnliche Größe wie Facebook liegen.

  5. Wenn ich deinen Link aufrufe, erhalte ich nur eine verstümmelte Google-Seite ohne Inhalt… Nach was hast du denn gesucht? Das mit Ajax und Google würde mich brennend interessieren!

    Ja, die Zusammenfassung macht Sinn, wenn klug gecached wird. Aber das ist ja selbstverständlich 🙂

    Leider kenne ich den Code von Facebook nicht und habe selber auch noch kein Projekt dieser Größenordnung umgesetzt. Deshalb fühle ich mich nicht in der Lage, so einen Artikel zu verfassen. Tut mir leid!

  6. Also bei mir geht der Link nach wie vor. Titel der Seite „AJAX-Crawling: Leitfaden für Webmaster und Entwickler“

  7. Jetzt geht er bei mir auch wieder!
    Vielen Dank

  8. Hallo Simon, ich betreue bei uns auf dem Blog das Thema Last- Performancetests. Dein Bericht ist zwar kein „Test“ aber passt super in unser Bild. Der Inhalt ist auch sehr interessant. Falls du nochmal deine neusten Erkenntnisse dazu äußern magst und dies ggf. mal bei uns anstatt bei dir, melde dich sehr gerne. Ich würde mich sehr freuen.

    Hier unser Blog zu Performance Themen:
    https://www.testautomatisierung.org/lasttest-performancetest/

    Liebe Grüße
    Sebastian

  9. Die Homepager on April 5th, 2016 at 10:50

    Immer wieder schön solche Tipps zu lesen.

Hinterlasse einen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

»Informationen zum Artikel

Autor: Simon
Datum: 25.10.2010
Zeit: 19:43 Uhr
Kategorien: Internet
Gelesen: 9115x heute: 2x

Kommentare: RSS 2.0.
Diesen Artikel kommentieren oder einen Trackback senden.

»Meta