Reicht eine einfache WordPress-Website ohne jegliche Optimierungen oder setze ich besser auf eine Individualentwicklung? Wie viele Zugriffe erfolgen paralell / pro Tag? Sind Drittsysteme oder Schnittstellen involviert? Welchen Stellenwert hat die Suchmaschinen-Optimierung?
Fragen wie diese prägen den Prozess zu einer neuen Website massgeblich und geben auch die Leitplanken für die Perfomance vor. Google priorisiert seit Juli 2018 die Geschwindigkeit einer Website in Bezug auf deren Ranking stark. In diesem Artikel möchten wir Ihnen die technischen Hintergründe zu unserer neuen Website schildern und Ihnen zeigen, wie Sie Ihre eigene Seite analysieren können.
Kapitelübersicht
1.Anatomie einer Website
Wenn Sie eine Website öffnen, dann erhält Ihr Browser im Wesentlichen die folgenden Inhalte und Ressourcen:
| Inhalte / Struktur | Ressourcen |
|---|---|
|
|
Sie erhalten als Antwort zuerst die HTML-Struktur. Diese wiederum verweist auf die restlichen Ressourcen, für welche einzeln erneut Anfragen gesendet werden. Pro Klick wird also nicht nur eine sondern mehrere Anfragen einzeln gesendet.
Die Art und Weise, wie diese Teile auf Ihrem Rechner landen, könnte unterschiedlicher nicht sein. Als Website-Besucher merken Sie dies anhand der gefühlten Geschwindigkeit einer Website. Die Zeit, welche zwischen dem Klicken auf einen Link und dem vollständigen Laden der oben genannten Komponenten verstreicht, nennt man die Load-Zeit. Diese Zeit gilt es möglichst kurz zu halten.
Die Load-Zeit hat also einen wesentlichen Einfluss auf das subjektive Surf-Erlebnis der Besucher. Doch nicht nur das: Dieser Wert ist massgeblich relevant für das Suchmaschinen-Ranking Ihrer Website. Als Richtwert ist ein Wert unter einer halben Sekunde anzustreben. Unter diesem Wert empfinden die meisten Besucher eine Website als schnell und ein gutes Ranking ist gewährleistet. Die Load-Zeit Ihrer Website können Sie ganz einfach mit den Entwickler-Tools Ihres Browsers anzeigen lassen.
Neben der Datenmenge haben die Geschwindigkeit Ihrer Internetanbindung, die Wahl des Browsers und die Leistung Ihres Rechners einen Einfluss auf diesen Wert. Die letzten drei Faktoren können nicht durch eine Website beeinflusst werden, der Erste dafür umso mehr.
Es gilt die Anzahl an Ressourcen-Anfragen und deren Dateigrösse möglichst klein zu halten. Zudem gibt es Verfahren, welche den Prozess zusätzlich beschleunigen können. Es kommt ein weiterer Faktor ins Spiel: Wie lange braucht Ihre Website auf dem Server, um die Inhalte zusammenzustellen? All diese Aspekte liegen unter der Kontrolle eines Web-Entwicklers und hängen direkt mit der Wahl des CMS oder einer Individualentwicklung zusammen. Und hier trennt sich die Spreu vom Weizen!
2.Analyse einer Website
Die wesentlichen Aspekte der Beurteilung einer Website wurden bereits im ersten Kapitel erläutert. Diese können demnach in drei Kategorien eingeteilt werden, welche nun im Detail beschrieben werden.
Anzahl der Anfragen
Der Aufwand, um eine Verbindung zu einem Server herzustellen, ist beträchtlich. Diesen Vorgang für jede noch so kleine Ressource erneut zu betreiben, ist aufwändig. Es gibt heute Möglichkeiten, die Verbindung aufrecht zu erhalten, jedoch werden diese noch nicht flächendeckend genutzt. Es gilt also, die Anzahl der Anfragen tief zu halten. Diese sehen Sie ebenfalls im Netzwork-Tab der Entwicklertools. Jede Zeile entspricht einer Anfrage:
In jeder Zeile wird der Type der zu ladenden Ressource genannt. Die erste Zeile ist das document,
also die eigentliche Seite, die Sie angefordert haben. Die weiteren Ressourcen wurden durch diese direkt oder durch andere Ressourcen
angefordert. Anhand der geladenen Ressource-Typen können wir einen ersten Rückschluss ziehen. Die nachfolgende Tabelle
beschreibt Richtwerte für die optimale Anzahl an Ressourcen eines Typs. Der Einfachheit halber werden nur die gängigsten Typen
beschrieben.
| Typ | optimal | vertretbar | schlecht | Massnahmen |
|---|---|---|---|---|
| Style-Definitionen (stylesheet) |
<=2 | 3-4 | >4 | Die Stylesheet-Dateien können mit einem Bundler zusammengeführt und in der Grösse reduziert werden. |
| Script-Dateien (script) |
<=2 | 3-4 | >4 | Die Script-Dateien können mit einem Bundler zusammengeführt und in der Grösse reduziert werden. |
| Schriftarten (font) |
<=2 | 3-4 | >4 | Pro Font nur die jeweils verwendeten Schriftgewichte laden oder auf Standartfonts ausweichen. |
| Bilder (png, jpg, gif, ...) |
möglichst klein / wenige | Die Anzahl richtet sich nach dem Inhalt. Es ist ein grosses Augenmerk auf die Komprimierung der Bilder zu legen. Weiter sollten wo immer möglich Vektorgrafiken eingesetzt werden (z.B. SVG). | ||
| Videos (mp4, webm, ...) |
möglichst klein / wenige | Videos sind meist sehr gross und sollten entsprechend nur wo nötig eingesetzt werden. Die Kompression sollte so hoch wie möglich sein. | ||
Hier haben die gängigen CMS-Systeme meist sehr (!) schlechte Werte, da sie von Haus aus nicht optimiert sind. Insbesondere der Einsatz von zusätzlichen Plugins führt zu unglaublichen Werten. Wir haben schon Websites mit mehr als 50 Script-Dateien und Style-Definitionen gesehen. Dass dies suboptimal ist, lässt sich leicht erahnen und wird mit Ladezeiten von bis zu mehreren Sekunden bestraft.
Grösse der zu herunterladenden Daten
Dieser Punkt ist einfach nachvollziehbar. Je mehr Daten es herunterzuladen gibt, desto länger dauert das Laden einer Website. Der Impact hängt jedoch stark von der Internetanbindung des Besuchers ab. Bei vielen Dateiformaten lässt sich jedoch viel mit einer optimalen Vorbereitung verbessern.
Bei Bildern und Videos kann die Dateigrösse über die Auflösung und die Kompressionsstufe beeinflusst werden. Im Web-Kontext gibt es einen Kniff: Bilder und Videos werden in einer höheren Auflösung exportiert, als sie tatsächlich benötigt werden. Im Gegenzug wird die Kompression höher gewählt. Das Bild / Video wird so durch den Browser verkleinert. Dies führt meist zu besseren Ergebnissen und gleichzeitig kleineren Dateien, da das Skalieren des Browsers die durch die höhere Kompression entstandenen Fragmente kaschiert.
Bei Style-Definitionen, Script-Dateien und textbasierten Dateitypen im Allgemeinen kann deutlich an Dateigrösse gespart werden, wenn diese durch einen Builder optimiert werden. Dieser streicht unnötige Leerzeichen, Zeilenumbrüche und Kommentare aus den Dateien und ersetzt Variablennamen durch wesentlich kürzere. Dadurch wird die Grösse der Files markant reduziert.
Verarbeitungszeit auf dem Server
Hierbei handelt es sich um die Zeit, die ein Server braucht, bis er die zu einer Anfrage passende Antwort liefern kann. Es geht also um das Zusammenstellen der passenden Daten zu einer URL. Je nachdem variieren diese zusätzlich anhand mitgelieferter Parameter oder Formulardaten.
Die gängigsten CMS- und Shop-Systeme basieren auf der Sprache PHP (WordPress, Joomla, Typo3, Magento, uvm.). Auch wenn Sie nur eine WordPress-Seite betreiben, haben Sie in Wirklichkeit eine Software, welche sich um einen spezifischen Anwendungsfall kümmert: das zur Verfügung stellen von Inhalten anhand von unterschiedlichen Anfragen. Bei CMS-Systemen können diese Inhalte zusätzlich direkt in dieser Software verwaltet werden. Die Systeme unterscheiden sich aufgrund unterschiedlicher Architekturen stark in punkto Performance. Nebst PHP gibt es diverse weitere Sprachen, welche zur Umsetzung von Websites und Web-Applikationen eingesetzt werden.
Die Verarbeitungszeit kann bei der Betrachtung des Network-Tabs (siehe Screenshot oben) der Developer-Tools grob nachvollzogen werden. Der grüne Teil der Balken (Chrome) stellt die TTFB (time to first byte) dar, also die Zeit, welche der Server braucht, um die Antwort auf eine Anfrage zu senden. Das funktioniert wie beim Lösen von Mathe-Aufgaben: Je intelligenter das System ist, desto schneller wird die Antwort geliefert. Der Wert lässt also direkt einen Rückschluss auf die Qualität der Website / -applikation zu. Gute Werte sind klar unter 100 Millisekunden.
Zur Lösung von schlechter Performance können Sie zwei Ansätze verfolgen:
| Optimierung des Codes | Mittels Analysewerkzeugen kann genau nachvollzogen werden, welche Operationen im Code wie viel Zeit benötigen. |
| Caching-Verfahren | Caching bedeutet das Zwischenspeichern von Daten zu bereits bekannten Anfragen, welche direkt ausgeliefert werden können. Dadurch kann eine lange Verarbeitungszeit umgangen werden, solange sich die zu grunde liegenden Daten nicht ändern. Caching sauber und zuverlässig einzusetzen, erfordert ein hohes Mass an Know-how und sorgfältiges Testen. |
Durch den Einsatz beider Varianten in Kombination erhält man selbstverständlich die besten Ergebnisse.
3.CMS oder Individualentwicklung?
Die Antwort auf diese Frage hängt alleine von den Anforderungen an Ihre Applikation ab. Die meisten CMS-Systeme haben einen klar definierten Einsatzzweck mit zugehöriger Zielgruppe. Zudem lassen sie sich in unterschiedlichem Umfang durch Programmierung erweitern. Da die meisten Systeme Open Source sind, könnte man mit jedem System, jede Anforderung abdecken, jedoch ist der damit verbundene Aufwand als Konsequenz höher oder tiefer. Bei Menschen würde man von der Komfortzone sprechen.
Im Bezug auf Performance schneiden CMS-Systeme, insbesondere ohne Optmierungen, deutlich schlechter ab. Welche weiteren Unterschiede für Sie relevant sein können, möchten wir Ihnen anhand des folgenden Vergleichs schildern.
CMS-Systeme: Beispiel WordPress
WordPress entstand als einfache Blog-Software, deren Kernaufgabe die Verwaltung von Inhaltsartikeln und Kategorien war. Mittlerweile hat es sich zu einem beachtlichen Web-CMS gemausert und glänzt durch Benutzerfreundlichkeit. Die Erweiterbarkeit ist jedoch vergleichsweise schlecht, denn im Kern ist es immer noch das alte WordPress.
Eine unglaubliche Anzahl an Plugins täuscht über die Tatsache hinweg, dass die Architektur der Software immer noch auf den ursprünglichen Zweck ausgelegt ist. Ist WordPress deshalb schlecht? Im Gegenteil! Es gibt keine bessere Software für Websites, welche - zumindest hauptsächlich - eine Website bleiben sollen. Wenn Sie jedoch individuelle Anforderungen an eine Website haben, es sich also mehr um eine Web-Applikation handelt, ist WordPress wahrscheinlich die falsche Wahl. Dies ist oft der Fall, wenn Sie eigene Entitäten (Kunden, Projekte, Termine, Zeiterfassung, ...) verwalten, Schnittstellen einbinden oder Geschäftsprozesse abbilden möchten. Auch solche Fälle lassen sich in WordPress abbilden, jedoch nicht mit verhältnissmässigem Aufwand.
Ein erheblicher Nachteil ist die Sicherheit: Hacker erkennen blitzschnell, wenn Sie ein Standardprodukt wie WordPress im Einsatz haben. Bereits bekannte Lücken können so angegriffen werden. Stetige Updates sind deshalb unabdingbar. Weiter sind Realease-Zyklen teilweise problematisch. Dies weil die Daten, je nach Umfang des Updates, nicht automatisch portiert werden können.
Individualentwicklung
Eine individuell auf Sie zugeschnittene Software deckt genau die Anwendungsfälle ab, die Sie benötigen. Als Resultat profitieren Sie von sehr einfacher und übersichtlicher Bedienung und - sofern richtig umgesetzt - einer sehr hohen Performance. Schnittstellen lassen sich genau nach Vorgaben einbinden und komplexe Geschäftsprozesse 1:1 abbilden. Auch hier beginnt man nicht bei Null: Durch den Einsatz von Frameworks werden einem die grundlegenden Arbeiten wie Sicherheit, Routing, etc. abgenommen. Die Entwicklung beginnt also direkt bei Ihrem Prozess. Beispiele für solche Frameworks sind Yii, Laravel, Symfony und viele andere.
Typische Fälle für Individualentwicklungen sind Intra- / Extranet oder webbasierte Geschäftsapplikationen. Lassen Sie sich nicht täuschen: Eine auf den ersten Blick einfache Website mit Anbindung von ERP-Sytemen, spezifischer Benutzerverwaltung, Datensynchronisation, etc. kann durchaus auch in diese Kategorie fallen!
Der Nachteil liegt im Vergleich zu CMS-Systemen in deren Kernfunktion: der Inhaltsverwaltung und Aufbereitung. Um denselben Umfang und dieselbe Funktionalität in diesem Bereich zu erhalten, müsste man ein CMS nachbauen. Durch den Einsatz derselben Editoren und Werkzeuge kann der Unterschied jedoch auf ein Minimum reduziert werden.
4.Hinter der Kulisse unserer Website
Bei unserer Website handelt es sich um eine Individualentwicklung, welche von der Architektur her für sehr hohe Zugriffslasten konzipiert ist. Natürlich hat die Seite bei Weitem nicht so viele Zugriffe, wie sie verkraften könnte, jedoch können wir so die Konzepte validieren, welche wir auch bei Grossapplikationen einsetzen. Folgende Komponenten haben wir dabei berücksichtigt:
| Komponente | Massnahme |
|---|---|
| Code-Optimierung | Mittels serverseitiger Analyse haben wir den Ressourcenverbrauch des Codes ausgewertet und konnten diverse Engpässe lokalisieren. Diese Engpässe haben wir dann soweit möglich neu geschrieben. Wo dies nicht möglich war, haben wir an genau diesen Stellen auf Caching-Verfahren zurückgegriffen. |
| OPcache | Die PHP-Code-Dateien werden beim ersten Ladevorgang kompiliert. Danach werden diese im Cache gehalten und müssen erst wieder analysiert werden, wenn sie verändert wurden. |
| Ressource-Cache | Aufwendige DB-Zugriffe werden in einem Daten-Cache zwischengespeichert. Vor jedem Zugriff wird überprüft, ob sich die Daten verändert haben oder ob die maximale Lebensdauer des Cache-Eintrags erreicht wurde. |
| Page-Cache | Die einzelnen Seiten sind an diverse Ressourcen gebunden. Hat seit dem letzten Zugriff auf eine Seite nichts geändert, so wird der Server-Code gar nicht ausgeführt, sondern die Seite vollumfänglich aus dem Cache geladen. Diese Massnahme bringt den grössten Effekt, ist jedoch sehr komplex in der Implementierung der Abhängigkeiten. |
| Datenübertragung | Sämtliche Verbindungen werden auf eine verschlüsselte Verbindung abgewickelt (SSL/TLS). Dies garantiert einerseits Sicherheit, erlaubt andererseits aber auch den neuen HTTP/2-Standard. Bei diesem bleibt die Verbindung zwischen einzelnen Anfragen an den Server offen und beschleunigt so den gesamten Ladeprozess. |
| Server-Konfiguration | Wo möglich werden die Dateien komprimiert übertragen. Insbesondere bei textbasierten Dateien führt dies zu einer deutlichen Reduktion der Datenmenge. |
| Optimierung der Ressourcen-Dateien | Sowohl Style-Definitionen, als auch Script-Dateien werden mit einem Builder zusammengefasst und verkleinert. |
| HTML-Code (SEO) | Der gesamte HTML-Code ist Suchmaschinen-optimiert und setzt die semantischen Empfehlungen der relevanten Suchmaschinen um. Diese Massnahme hat einen wesentlichen Einfluss auf die Indexierung einer Suchmaschine, da das Ranking heutzutage nicht nur über die Meta-Daten, sondern in hohem Masse von den eigentlichen Seiteninhalten abhängt. |
| SEO | Ergänzend zum vorangehenden Punkt nutzen wir Structured-Data. Ein Verfahren, mit welchem man Teile des Seiteninhalts explizit kennzeichnen kann. So können wir einem Crawler direkt mitteilen, dass es sich bei einem Text-Block beispielsweise um eine Person oder einen Blog-Post handelt. |
| Sitemap | Die Sitemap wird laufend neu generiert und berücksichtigt bei der Link-Priorisierung die Publikationsdaten und die interne Priorisierung der einzelnen Seiten. |
| Bilder und Videos | Sämtliche Bilder und Videos sind entsprechend für den Web-Kontext vorbereitet. JPG-Bilder werden beispielsweise für einen optimierten Ladevorgang progressiv encodiert. Hier haben wir die Bildqualität höher gewichtet, als die reine Ladegeschwindigkeit. Schliesslich ist die Bildwelt ein wesentlicher Bestandteil unseres Auftritts. |
| Lazy-Loading | Sämtliche Ressourcen werden erst geladen, wenn sie wirklich gebraucht werden. Dies hält die Load-Zeit tief, ohne dass Sie als Besucher etwas davon merken. Bei den Header-Bildern wird beispielsweise immer nur das erste Bild geladen. Die Restlichen folgen anschliessend im Hintergrund. |
5.Fazit
Zugegeben: für eine einfache Website mit wenigen Besuchern ist dieser Aufwand nicht verhältnismässig. Viele der genannten Punkte lassen sich jedoch, entsprechendes Know-how vorausgesetzt, mit erstaunlich wenig Zusatzaufwand umsetzen. Wichtig ist dabei, dass dies ab Projektstart berücksichtigt wird.
Da wir neben regulären Websites vor allem komplexe Web-Applikationen umsetzen, war unsere neue Website ein ideales Projekt, die Massnahmen im kleinen und isolierten Kontext zu validieren. Mit der genutzten Architektur und Projektstruktur kann problemlos ein Web-Portal mit tausenden Anfragen und einer komplexen Datenbank- und Schnittstellen-Integration umgesetzt werden. Diese Erfahrung durften wir in diversen Kundenportalen, individuell entwickelten Business-Software-Produkten und Intranet einfliessen lassen.
Wie optimiert ist Ihre Website, bzw. Web-Applikation? Gerne analysieren wir Ihr Web-Auftritt und helfen Ihnen, die Performance zu steigern. Wir freuen uns auf Ihre Kontaktaufnahme.
Pascal Müller
Geschäftsführer
Mit mehr als 15 Jahren Web-Erfahrung durfte ich bereits den einen oder anderen Technologiesprung mitverfolgen. Die Anforderungen in Bezug auf Performance blieben dabei konstant. Eine Website oder Web-Applikation soll sich schnell anfühlen. Die Web-Entwicklung ist heute komplexer als je zuvor und parallel dazu steigen auch die Know-how Anforderungen. Ein CMS-System zu installieren, Inhalte zu erfassen und die Seite aufzuschalten reicht heute in den meisten Fällen nicht mehr. Und genau hier kommen wir ins Spiel.