Optimieren der Website-Geschwindigkeit

Performance, also die Geschwindigkeit, in der sich Websites und Webanwendungen nutzen lassen, ist ein wichtiges Qualitätsmerkmal und auch in vielerlei Hinsicht ein Erfolgsfaktor. Eine schnelle Webanwendung fühlt sich besser an und lässt sich produktiver nutzen, weil nicht die Wartezeit nach jedem Klick zu Ablenkungen einlädt. Schnelle Websites werden von Suchmaschinen prominenter gelistet und geben den Besuchern weniger Grund zum Absprung.

Wir überprüfen bei allen von uns betreuten Websites regelmäßig die Performance und suchen nach Verbesserungsmöglichkeiten. Überzeugende Performance entsteht dabei durch ein Zusammenspiel von verschiedenen Ebenen.

Datenbank und serverseitigen Code optimieren

Wenn der Besucher einer Website auf einen Link oder einen Button klickt, entsteht daraus eine Anfrage an den Server. Die Zeit, die der Server damit beschäftigt ist, auf diese Anfrage zu antworten, ist ein wesentlicher Aspekt der Performance einer Website. Diese Zeit hängt zum einen davon ab, wie effizient die Datenbank strukturiert und abgefragt wird, zum anderen davon, wie effizient der Programmcode ist, der die Daten aufbereitet. Beides können wir analysieren und optimieren.

Die serverseitige Performance hängt zudem von der Leistungsfähigkeit der Programmiersprache und der verwendeten Frameworks ab. Hier setzen wir mit PHP 8 und Symfony auf sehr schnelle Basistechnologien.

Auslieferung und Caching planen

Nicht jede Seite muss bei jedem Aufruf neu erzeugt werden. Wenn Inhalte sich nicht geändert haben, kann die letzte Version der Seite unverändert aus einem Zwischenspeicher (Cache) ausgeliefert werden, was die Performance deutlich erhöht. Hierfür kommt bei uns standardmäßig der HTTP-Cache von Symfony zum Einsatz.

Eine weitere Verbesserung kann erreicht werden, indem die Inhalte durch ein Content Delivery Network ausgeliefert werden. Hierbei erfolgt die Zwischenspeicherung in einem Netzwerk von darauf spezialisierten Servern, die weltweit auf unterschiedliche Rechenzentren verteilt sind. Jeder Besucher erhält die Inhalte von demjenigen Server, der ihm geographisch am nächsten liegt. Auf diese Weise müssen die Daten weniger Strecke und Zwischenstopps zurücklegen, was die Geschwindigkeit der Auslieferung weiter erhöht.

Zusätzlich kann der Browser selbst Inhalte zwischenspeichern und bei einem erneuten Aufruf der gleichen Seite aus seinem eigenen Cache anzeigen. Im Hintergrund erfolgt dann je nach Konfiguration eine Kontrollanfrage beim Server, ob die Inhalte noch aktuell sind.

Für die optimale Funktion dieser Mechanismen optimieren wir individuell die Caching-Regeln für jeden Teil der Website bzw. Anwendung.

Datenumfang reduzieren

Damit der Browser eine Seite anzeigen kann, müssen die wesentlichen Informationen zu Inhalt und Gestaltung vom Server übertragen worden sein. Hierfür spielt die Menge der Daten, aus denen die Seite besteht, eine wesentliche Rolle. Wir achten daher darauf, keine unnötigen Daten zu übertragen und nur die erforderlichen Gestaltungsanweisungen (Stylesheets) und JavaScript-Bibliotheken einzubinden. Stylesheets und JavaScript werden dabei zusätzlich gebündelt, verkleinert und komprimiert.

Einen wesentlichen Anteil am Datenumfang haben auch die auf einer Seite eingebundenen Bilder. Diese werden daher von uns immer responsive in verschiedenen Auflösungen bzw. Bildgrößen bereitgestellt, sodass jeder Besucher genau die für sein Anzeigegerät passende Bildgröße erhält. Zu kleine Bilder würden eine schlechtere visuelle Darstellung bedeuten, zu große Bilder den Datenumfang unnötig erhöhen.

Komplexität für den Browser im Blick behalten

Die Daten der Website müssen nicht nur übertragen werden, sondern vom Browser des Besuchers auch übersetzt und interpretiert werden. Jede JavaScript-Bibliothek, die von einer Website oder Anwendung eingebunden wird, kostet daher Rechenzeit beim Anzeigen der Seite. Abhängig vom Gerät, auf dem der Besucher die Seite aufruft, kann das empfindlich lange dauern. Aus diesem Grunde achten wir darauf, nur den nötigsten und zugleich möglichst effizienten JavaScript-Code zu nutzen.

Aufbau der Seite optimieren

Last but not least: Der Browser zeigt eine Website nicht erst an, wenn alle Daten geladen sind – sondern bereits dann, wenn er genug Informationen hat, um die erste Bildschirmseite zu füllen. Daher ist auch der Aufbau des HTML-Quelltextes und die Einbindung externer Quellen in der richtigen Reihenfolge und auf die richtige Art und Weise von großer Bedeutung für die wahrgenommene Performance.

Regelmäßige Kontrolle im Produktivbetrieb

Schon während der Entwicklung nutzen wir Tools wie den Google Lighthouse Report zur Analyse und Optimierung der Performance. Basis des Reports sind sogenannte synthetische Tests, die – vergleichbar mit Laborbedingungen – virtuell eine bestimmte Hard- und Softwarekonfiguration erzeugen, die Webseite aufrufen und ein Testergebnis generieren.

Für produktive Webseiten gibt es daneben ein noch mächtigeres Tool: den Chrome User Experience Report (CrUX). Hier werden anonymisiert Daten von Chrome Browsern auf echten Endgeräten gesammelt und ausgewertet. Prinzipiell tragen so alle Nutzerinnen und Nutzer von Chrome auf Windows-, MacOS-, ChromeOS- oder Linux-PCs sowie Android-Handys dazu bei, einen gigantischen Datensatz zu generieren – sofern sie nicht widersprochen haben, dass Chrome automatisch erstellte Berichte an Google sendet. Im Gegensatz zu den synthetischen Tests zeichnet eine Auswertung des CrUX Reports ein deutlich umfassenderes und realistischeres Bild davon, wie eine Webseite wirklich performt. Andererseits fehlen natürlich die Daten von Firefox-, Safari- und anderen Browsern, also ist auch dieser Datensatz am Ende nur ein Zerrbild der Realität.

Auswirkungen auf Suchmaschinen (SEO)

Trotzdem ist es wichtig, die Reports im Auge zu behalten, denn Google zieht die CrUX Daten auch für die Auswertung der schon 2020 eingeführten Core Web Vitals heran. Die Core Web Vitals sind ein Set von drei Metriken, die es ermöglichen sollen, die Nutzerfreundlichkeit einer Webseite einzuschätzen. Nur Webseiten, die in allen drei Werten ein "Gut" (möglich sind "Gut", "Verbesserung nötig" oder "Schlecht") erreichen, Googles Anforderungen an "gute mobile Nutzererfahrung" genügen sowie über HTTPS ausgeliefert werden, bekommen bei der Platzierung in Suchergebnissen einen Boost durch das Ranking-Signal "Performance". Google hält sich sehr bedeckt bei der Frage, wie stark so ein Boost sich am Ende auswirkt; gesichert zu sein scheint einerseits, dass zur Suchanfrage bestmöglich passender Inhalt immer das stärkere Signal bleiben wird, und dass es keine Abwertung für schlechte Performance durch Google gibt. Das heißt aber natürlich auch, dass der Performance-Boost durchaus zum tie breaker zwischen zwei konkurrierenden Angeboten werden kann, die bei den anderen Signalen gleichauf liegen.

CrUX Reports und Core Web Vitals Metriken werden URL-genau erzeugt und von Google auch URL-genau ausgewertet, und zwar ein Mal für "Desktop" und ein Mal für "Mobile". Wir überprüfen in regelmäßigen Abständen stichprobenartig wichtige Landing Pages unserer Kunden, um sicherzustellen, dass wir weiterhin in allen Metriken ein "Gut" erreichen.

Hilfreiche Tools sind dafür

• PageSpeed Insights
• Google Search Console
• Chrome UX Report Compare Tool – auch nutzbar für eine schnelle Konkurrenzanalyse