20. Jun 2011 08:06
Keine Kommentare

Website schneller machen

Google PageSpeed Score von 99
Google PageSpeed Score von 99
Der Titel "Website schneller machen" klingt ein bisschen nach einem billigen Buchtitel - soll es aber keinenfalls sein. Ich möchte mich nicht nur damit beschäftigen, wie man seine Website schneller machen kann, sondern vor allem auch, warum man seine Website schneller machen sollte. Bereits im Mai startete ich das Kammerath Network auf Basis meiner Eigenentwicklung, dem Kammerath Network Website System, neu. Als Hauptgrund dafür nannte ich die schlechte Performance von WordPress. Ladezeiten von bis zu 10 Sekunden waren trotz Super Cache Plugin an der Tagesordnung. Mit dem neuen System erziele ich jetzt bedeutend bessere Ladezeiten. Kurz nach dem Start des neuen Systems konnte ich die Website schneller machen und auf 74 Page Speed Punkte beim Google Page Speed Test bringen. Der Google PageSpeed Test existiert für verschiedene Browser und es gibt auch eine mehr oder minder gute Online Version. Die Plugin-Downloads für Chrome und Firefox finden sich auf der Google Page Speed Download Seite.

Der Page Speed Test bewertet Websites auf einer Skala von 0 bis 100, wobei 100 das beste Ergebnis darstellt. Google.de selbst hat einen Score von 99, Amazon und eBay haben jeweils 91. Ich habe es geschafft das Kammerath Network innerhalb von 2 Tagen von einem Score von 74 auf 94 zu bringen und Du kannst das auch! Klingt wie eine Abnehm-Werbung, im Prinzip geht es auch genau darum: Abnehmen. Natürlich sollst Du nicht abnehmen, aber Deine Website kann abnehmen und Sie wird sich danach wohler fühlen und bessere Ergebnisse erzielen. Aber fangen wir Vorne an: Widmen wir uns zuerst der Frage nach dem Wieso.

Wieso soll ich meine Website schneller machen?

Kammerath Network mit PageSpeed Score von 94
Kammerath Network mit PageSpeed Score von 94
Sowohl die Mozilla Foundation als auch Google haben bereits mehrfach Zahlen auf den Tisch gelegt, welche finanziellen Vorteile es mit sich bringt, wenn man die eigene Website schneller machen kann. Einige Forscher sprechen davon, dass es lediglich 500 Millisekunden dauert, bis ein Nutzer den ersten Eindruck der eigenen Website hat. Eine Zeitspanne, die man nicht mit dem Laden der Seite vergeuden sollte. Die Zeit, in der der Nutzer den ersten Eindruck von der Website erhält, sollte ausschließlich dem Inhalt der Seite zu Gute kommen. Darum und allein darum handelt es sich ja nur. Eine schnelle und optimierte Seite wird nach meinen Erfahrungen hier mit dem Kammerath Network die folgenden Vorteile mit sich bringen...

  • Um bis zu 20% niedrigere Bounce Rates
  • Deutlich längere Verweildauer der Nutzer (Time Spent On Site)
  • Häufigeres Crawling durch den GoogleBot (Bis zu 200% und mehr)
  • Besseres Ranking in den natürlichen Suchergebnissen

All diese Vorteile bringen natürlich einen direkten finanziellen Vorteil mit sich. Google hat z.B. festgestellt, dass bei einer schnelleren Ladezeit der Suchergebnisse auch bedeutend mehr Suchen durchgeführt werden. Das wirkt sich natürlich bedeutend auf die Werbe-Umsatze aus. Genauso bedeutet es für Medienseiten wie Spiegel Online, dass eine schnellere Ladezeit und die damit verbundene längere Aufenthaltsdauer der Besucher auch mehr Werbe-Impressionen (engl. Ad Impressions) mit sich bringt. Bei E-Commerce Seiten bedeutet das, dass Nutzer mehr Produktansichten (Product Impressions) und eine höhere Konversionsrate haben.

Rechnet man die Zahlen für seine eigene Website hoch, dann wird man schnell feststellen, dass der finanzielle Vorteil beim Thema "Website schneller machen" enorm ist. Es gibt also nichts besseres als sofort damit anzufangen. Mein eigenes Beispiel vom Kammerath Network ist wohl eines der krasseren, denn ich habe für eine schnelle Ladezeit kurzerhand meine komplette Software gewechselt, mich von WordPress verabschiedet und alles selbst neu entwickelt.

Ergebnisse einer schnelleren Website

Oben habe ich bereits ein paar Zahlen genannt, gleichwohl diese etwas weich waren. Ich möchte jetzt mal genau benennen und belegen, was es gebracht hat nachdem ich meine Website schneller machen konnte. Zunächst möchte ich einmal einen Blick auf die Auswirkungen im Suchmaschinen-Bereich werfen.

GoogleBot mag schnellere Websites

Der GoogleBot, also das System das die Seite abruft und in den Google-Index aufnimmt, mag besonders schnelle Websites und Google verspricht positive Ergebnisse bei der Suchmaschinenoptimierung, wenn man seine Seite für eine schnelle Ladezeit optimiert. Auch as diesem Grunde oder hauptsächlich deswegen bietet Google den besagten Page Speed Test an und ermittelt mit dem GoogleBot einen Page Speed Score. Wie ich ja oben erwähnt habe, ist es bei mir zu entsprechenden Ergebnissen gekommen. Dies kann man auf dem nachfolgenden Diagramm aus den Google Webmaster Tools auch erkennen.

Erhöhtes Google-Crawling nach Verbesserung der Geschwindigkeit

Erst einmal zur Erläuterung: Was zeigt dieses Diagramm? Ich habe hier die beiden Diagramme aus den Webmaster Tools unter "Diagnose" und dann "Crawling-Statistiken" zusammen geführt. Zusätzlich habe ich meine Ereignisse in den einzelnen Phase, in denen ich meine Website schneller gemacht habe, eingefügt. Darunter steht dann auch entsprechend der Page Speed Score, die den Seite danach hatte. Die Aussage zum Ergebnis ist eindeutig: Desto besser der Page Speed Score desto häufiger kommt der GoogleBot zum Crawling und desto mehr Seiten indiziert er auch. Wer sich also darüber beschwert, dass es weig dauert, bis der GoogleBot die eigenen Seiten indiziert, dem kann ich hiermit nur sagen: Sofort die Website schneller machen!

Besucher mögen schnellere Websites

Der Grund, warum Google möchte, dass Sie Ihre Website schneller machen ist schlicht und ergreifend, dass Google dadurch Bandbreite spart und dem Nutzer relevantere Inhalte bieten kann. Das Verhalten vieler Nutzer bei Suchabfragen ist heute so, dass die Leute mehrere Ergebnisse öffnen. Dies tun sie entweder mit Tabs oder nacheinander. Hier gilt: der Schnellere gewinnt. Braucht eine Seite zu lange, um zu laden, so schließt der Nutzer das Tab oder verwendet den Zurück-Button seines Browsers.

Verwendet man zudem Google AdWords, dann wirft man mit einer langsamen Website das Geld zum Fenster heraus. Ziel muss es sein den Benutzer auf die eigene Seite zu locken, also das Ladezeit-Rennen zu gewinnen und zum Anderen dazu zu bewegen auch länger zu bleiben. Es müssen also auch alle nachfolgenden Seiten extrem schnell laden sonst ist der Besucher doch wieder woanders. Um noch einmal einen Beleg dazu zu liefern, zeige ich folgend den Trend der Besuchsdauer (Time On Site) sowie die Bounce Rate für das Kammerath Network und man sieht hier, dass sich nach der Optimierung nebst ein paar Randeffekten die Zahlen kontinuierlich verbessert haben.

Bounce-Rate und Geschwindigkeit im Vergleich

Des Weiteren verbaut man sich natürlich mit einer langsamen Website jegliche Vermarktungsmöglichkeiten. Niemand möchte eine langsame Website benutzen oder aufrufen. Gelangt dann doch einmal ein Nutzer auf eine Schnecken-Seite, so wird er diese umgehend wieder verlassen. Wer mit seiner Website ansatzweise irgendwie erfolgreich sein möchte, der muss auf Gedeih und Verderb seine Website schneller machen. Und hier gilt die Devise: Schnell ist niemals schnell genug - Eine Website schneller machen geht immer!

Das Argument, dass der Großteil der Nutzer doch heute über 10 Mbit/s oder mehr verfügt gilt schlicht und ergreifend auch nicht. Ich selbst verfüge über eine 120Mbit/s Leitung und ärgere mich des Öfteren über langsame Websites. Es geht hier schlicht und ergreifend um Dinge wie die Dauer von DNS Anfragen oder die Zeit, die der Server braucht um die Seite bereitzustellen. Dazu kommt dann noch, dass viele Nutzer nebenbei über das Internet telefonieren, chatten, herunterladen uvm. welches ebenfalls Bandbreite benötigt. Ebenfalls steigt die Zahl der Mobilfunknutzer und damit ist man dann bezüglich Bandbreiten auch wieder in sehr niedrigen Regionen, da nicht überall voller UMTS oder gar HSDPA Empfang vorhanden ist. Man muss also zusehen, dass die eigene Website auch bei 300 Kbit/s mit EDGE schnell lädt. Im nächsten Abschnitt werde ich dann erläutern, wie man seine Website denn nun schneller macht.

17,44 €
Jetzt bestellen »
High Performance Web Sites: Essential Knowledge for Front-End Engineers
Versandfertig in 1 - 2 Werktagen

Website schneller machen - so geht's

Nach der Analyse und Auswertung oben schreiten wir nun also direkt zur Tat. Lassen Sie uns die Website schneller machen. Hierzu benötigen wir lediglich ein paar Programmierkenntnisse und natürlich vollen Zugriff auf Server und Website. Es gibt ein paar gängige Regeln, die zu beachten sind. Ich werde dann nachfolgend nur noch ein paar Details und Praxisanleitungen liefern. Das Buch "High Performance Websites" sollte jedoch auf jeden Fall im Buchschrank vorhanden sein. Es ist nicht sehr dick und beinhaltet wirklich alle notwenidgen Punkte, die man erfüllen muss um seine Website schneller zu machen.

Zur Schritt für Schritt Erfolgskontrolle empfiehlt sich das oben genannte Page Speed Plug-In für Firefox und Chrome. Man sollte dieses anwerfen und Punkt für Punkt abarbeiten, bis man die 90 Punkte-Marke erreicht hat. Danach wird es etwas schwieriger mit den Ladezeit-Optimierung. Wer derzeit weniger als 60 Punkte hat, sollte sofort zur Tat schreiten und keine Sekunde mehr verlieren. Wer weniger als 60 Punkte hat und dessen Geschäft das Internet als Standbein hat, dem sei gesagt, dass er jetzt gerade in diesem Moment einen Haufen Geld verliert. Webseiten-Betreiber, die nicht über Programmierkenntnisse verfügen, den rate ich sich an Ihren Programmierer oder Website-Anbieter zu wenden, Ihm das Buch auf den Tisch zu legen und anzuflehen sofort alle nur erdenklichen Maßnahmen in Angriff zu nehmen, um die Website schneller zu machen. Die Punkte, die zuerst umgesetzt werden müssen, können je nach Website vollkommen unterschiedlich sein. Ich werde hier also lediglich Praxistipps zu einigen wichtigen Punkten geben. Den Rest priorisiert man sich am Besten nach der Page Speed Score Auswertung und dem Buch. Damit ist sichergestellt dass man schnellstmöglich seine Website schneller machen wird.

9.999,99 €
Jetzt bestellen »
High Performance MySQL / Optimierung, Backups, Replikation und Lastverteilung: 2. Auflage

Häufig unterschätzt: First Byte Time

In meinem Beitrag "PHP Performance Tuning"  erwähnte ich bereits die Methoden zur Beschleunigung von Webanwendungen. Es hilft wirklich nichts, wenn man alle Regeln befolgt und der Server oder die Anwendung so dermaßen langsam sind, dass man nur schwer seine Website schneller machen kann. Die meisten Bücher und Anleitungen befassen sich damit, wie man Websites schneller machen kann, indem man sie für das Ladeverhalten der Browser optimiert. Wenn der Server aber 2 Sekunden braucht, um ein Ergebnis an den Browser zu senden, dann hilft das reichlich wenig. Sofern Ihr Server es schafft innerhalb von 100 bis 300ms ein Ergebnis an den Browser zu übermitteln, dann ist das ausreichend. Alles, was darüber liegt, ist inakzeptabel und  man sollte sofort Backendoptimierung durchführen.

Wer hier optimieren muss und keine Kenntnisse in der Software-Entwicklung hat, der sollte einfach einen Software-Entwickler kontaktieren und diesen bitten, die Anwendung zu analysieren und zu optimieren. Wer selbst Software Entwickler ist und dennoch keinen blassen Schimmer hat, wie er hier vorgehen soll, dem kann ich auf jeden Fall das Buch "High Performance MySQL" empfehlen. Ansonsten lohnt sich zusätzlich der Einsatz von Profiler-Software.

Selbst das Kammerath Network mit seinem Page Speed Score von 94 hat in Sachen Backendoptimierung noch Einiges an Potential zu bieten. Profiling-Software bietet eine gute Möglichkeit, wie man mit Optimierung am Backend dazu beitragen kann die Website schneller machen zu können. Mein oben genannter Artikel bietet zusätzlich ein paar Ansätze.

Selten genutzt: Browser Caching und GZIP Komprimierung

Nachdem ich mir das Page Speed Plugin für Chrome und Firefox installiert hatte, prüfte ich ein paar Seiten - darunter auch namhafte Websites. Erstaunlich fand' ich, wie wenig Anbieter tatsächlich Caching und Komprimierung einsetzen, gleichwohl dies die besten Möglichkeiten sind die Website schneller machen zu können. Ich hatte mir eine Rewrite-Regel hinzugefügt, die alle Bilder über ein PHP Skript lädt, welches dann die Bilder auch entsprechend skaliert. In dieses Skript namens "image.php" habe ich nun mit folgender Zeile am Anfang die GZIP Komprimierung integriert, wenn diese beim Client verfügbar ist:

Dieses Verfahren wird auch in der PHP Dokumentation empfohlen und ich habe den Quelltext auf der entsprechenden Hilfeseite von GoDaddy - meinem Hoster - gefunden. Man sollte jetzt sicherstellen, dass entweder durch die Serverkonfiguration oder eben mittels PHP die GZIP Komprimierung für alle Dateien eingesetzt, wenn der Client bzw. Browser diese unterstützt. Letzteres wird durch das Skript im IF-Block bereits geprüft.

Weiter unten im besagten Skript befinden sich dann auch die HTTP Header für das Browser-Caching. Hier sollte man noch berückstichtigen, dass ich starr eine Woche lange die Daten in den Cache packen lasse, da z.B. mein JavaScript Paket und mein CSS Paket jeweils eine Versionsnummer führen, sodass die Datei sowieso neu geladen wird, wenn Sie sich ändern. Bei JavaScript und CSS habe ich sogar ein Jahr Caching angesetzt.

Man sollte hier genau beachten, dass der Browser dann die nächsten 7 Tage die Dateien nicht mehr abholen wird. Dies bedeutet auch, dass wenn diese sich ändern, die Seite nicht mehr korrekt dargestellt wird. Aus diesem Grunde sollte man zudem die Dateinamen mit Versionsnummern oder dem letzten Änderungsdatum versehen. Mehr dazu habe ich im nächsten Abschnitt auch noch zusammengefasst.

Mit wenigen Handgriff automatisiert: Minifizierung

Im Bezug auf den Speicher machen bei den meisten Websites die CSS und JavaScript Dateien einen sehr großen Teil aus. Hier hat es sich bewährt, sämtliche CSS und JavaScript Dateien in jeweils ein Paket zusammen zu fassen. Dies bedeutet, dass man dann zum Schluss nur noch eine Paket JavaScript Datei und eine Paket CSS Datei hat, womit man bedeutend seine Website schneller machen kann. Ein komplettes Beispiel dafür findet man in  meiner Datei "Minpack.php", welche sowohl JavaScript als auch CSS Dateien minifiziert, komprimiert und mit HTTP Caching Header versieht. Bei der Minifizierung werden im Prinzip nur unnötige Zeichen, Leerzeichen und Zeilenumbrüche entfernt, die der Besucher sowieso nicht wahrgenommen hätte, da sie sich ja im eigentlichen Code der Website befinden.

Kniffelig: Externe Inhalte anderer Anbieter optimieren

Als ich bei meinem Optimierungswahn schon die 90 Punkte Page Speed Score Marke überschritten hatte, sah ich mich einem kniffeligen Problem gegenüber gestellt. Die diversen Banner, Werbeanzeigen und vor allem das ShareThis Social Network Plugin hatten gravierende Performance Probleme. Nun hat man ja selbst schwer Einfluss auf die Server der Anbieter. Kurzfristig überlegte ich auch darüber, ob ich diese Plugins und Widgets ausbauen sollte. Entschied mich jedoch dann dagegen und entwickelte ein Proxy Skript, über welchen die Dateien nicht direkt vom jeweiligen Anbieter sondern immer über meinen Server geladen werden. Dies komprimiert dann und fügt die Caching Header ein. Das ganze sieht dann wie folgt aus.

Zu finden ist das Skript im Google Projekt "Kammerath Network Website System" als "proxy.php". Wer sich das Ladeverhalten meiner Website ansieht, wird feststellen, dass viele Inhalte für "http://speed.kammerath.net/z/" heruntergeladen werden. Daran kann man feststellen, dass dann eben dieses Proxy-Skript zum Einsatz kommt und die Daten optimiert. Zusätzlich wird auch der Cache auf der Festplatte verwendet, sodass meine Website nicht abhängig von den Hochs und Tiefs der Performance des jeweiligen Anbieters ist.

Fazit zum Thema Website schneller machen

Seine Website schneller machen gehört mittlerweile nicht mehr nur zum guten Ton. Es ist im heutigen Online Geschäft absolut unabdingbar, dass man enorm schnelle Ladezeiten garantieren kann und dazu muss man nunmal seine Website schneller machen. Ein guter Testrichtwert für die verfügbare Bandbreite beim Nutzer sind definitiv die eingangs genannten 300 Kbit/s. Das ist in etwa auch die Geschwindigkeit eines normalen UMTS (384 Kbit/s) Modems ohne HSDPA oder sonstige Beschleuniger. Früher gab' es auch das sog. DSL Lite, welches nur über 768 Kbit/s verfügte. Die Startseite des Kammerath Network ist etwa 262 Kbyte groß und dieser Artikel hier etwa 493 Kbyte. 300 Kbit/s entsprechen 37,5 Kbyte/s (8 Bit sind 1 Byte), wonach meine Startseite mit 300 Kbit/s 6,9 Sekunden Ladezeit in Anspruch nimmt und dieser Artikel hier etwa 13 Sekunden. Das klingt zwar grauenhaft langsam, wenn man jedoch berückstichtigt, dass das die Mindestbandbreite ist, die ich teste und noch dazu sich die Seite inkrementell aufbaut, dann ist das schon ok. Inkrementeller Seitenaufbau ist sehr wichtig, damit der Nutzer sieht, dass etwas geschieht und sich die Seite aufbaut. Das Page Speed Plugin wird Tipps geben, wie man dieses erreicht.

Ich habe mir lange überlegt, ob ich diesen Artikel schreiben soll, da die Website Ladezeit immer noch ein ziemlicher Geheimtipp zu sein scheint und nicht wirklich viele Leute interessiert - allenfalls Entwickler. Online Vertriebsprofis und Marketeers verstehen das Thema häufig aufgrund seiner Technik nicht - was schade ist, denn dahinter steckt viel Musik und vor allem extrem viel Geld. Ich wünsche abschließend ebenfalls viel Erfolg mit schnellen Websites und hoffe vor Allem einen Einblick in die wirtschaftliche Notwendigkeit einer schnellen Website gegeben zu haben. Viel Spaß nun beim Website schneller machen!

Bücher zum Thema „Website Performance“

Die nachfolgenden Bücher behandeln das Thema "Website Performance" und werden von Amazon empfohlen. Viele dieser Bücher habe ich selbst gelesen und teilweise auch zur Recherche für diesen Artikel genutzt.
19,99 €
Jetzt bestellen »
Pagespeed Optimierung: Schritt für Schritt zur schnelleren Website
Gregor Meier, Carl Hanser Verlag GmbH & Co. KG
0,11 €
Jetzt bestellen »
Website Performance
Daniel Koch, Entwickler.Press
4,78 €
Jetzt bestellen »
High Performance Websites
Steve Souders, O'Reilly Verlag GmbH & Co. KG
9,80 €
Jetzt bestellen »
High Performance LAMP: Lastsituationen großer PHP-Webseiten planen und meistern
Mirko Giese, entwickler press

Diese Artikel könnten Dich auch interessieren

Besucher, die diesen Beitrag gelesen haben, haben sich auch die unten aufgeführten Beiträge angesehen. Schau' doch einfach mal in die Artikel rein.
2 Besucher haben auch das gelesen
2 Besucher haben auch das gelesen
2 Besucher haben auch das gelesen
2 Besucher haben auch das gelesen
2 Besucher haben auch das gelesen
2 Besucher haben auch das gelesen

Kommentare zum Thema „Website schneller machen“

Wenn Du möchtest, kannst Du hier Kommentare zum Thema hinterlassen und Dich mit anderen Nutzern austauschen. Damit Du kommentieren kannst, musst Du Dich nur anmelden und schon kann es losgehen.
Jetzt zum Kommentieren anmelden