Die meisten Webseiten-Betreiber wissen, dass zwischen der „Performance“ einer Webseite und der Suchmaschinen-Indexierung ein Zusammenhang besteht, der vielen aber noch nicht ganz klar ist. In diesem Tutorial möchte ich Ihnen erklären, was die Webseiten-Performance ist und Ihnen einen Einblick in die Optimierungsmöglichkeiten geben.

Was bedeutet Website-Performance?

Definition: Wenn man von der Performance einer Webseite spricht, meint man damit die Leistung, die der Browser benötigt, um die Unterseiten einer Webseite darzustellen. Das bedeutet, dass die Performance stagniert, sobald der Programmcode komplexer oder umfangreicher wird.
Mit zunehmend komplexeren und unstrukturierten Algorithmen wird das Endgerät des Webseiten-Besuchers länger benötigen, um die verschiedenen Funktionen auszuführen und die einzelnen Elemente auf dem Bildschirm auszugeben.
Durch Studien konnte man herausfinden, dass sich Webseiten-Besucher innerhalb von 3 Sekunden entscheiden, ob sie auf der Webseite bleiben oder ob sie die Webseite ohne eine Interaktion verlassen. Eine Webseite, die die Inhalte nicht schnell genug darstellt (Pagespeed), wird früher oder später im Suchmaschinen-Ranking absteigen, da Google & Co. einen schnellen Ausstieg einer Webseite ohne Interaktion als einen negativen Faktor der Webseite einstufen.
Sollten die Inhalte einer Webseite jedoch innerhalb der 3 Sekunden vollständig dargestellt werden, ist es wahrscheinlicher, dass der Besucher auf der Webseite bleibt und vom Inhalt überzeugt werden kann, eine Interaktion wie einen Kauf oder eine Newsletter-Anmeldung durchzuführen.

Welche Faktoren beeinflussen die Website-Performance bzw. Pagespeed?

Die Größe von Dateien verkleinern

Gesamte Größe einer Seite
Eine der wichtigsten Eigenschaften einer Webseite ist die gesamte Größe. Umso kleiner die geladene Seite insgesamt ist, desto schneller kann sie vom Client heruntergeladen werden. Viele Faktoren spielen bei der Gesamtgröße einer Webseite eine Rolle. Achten Sie darauf, dass Sie Skripte und CSS-Dateien nur auf Seiten laden, die sie auch benötigen. Denken Sie dabei auch immer daran, dass ein Benutzer mit einer langsamen Verbindung (Fast 3G) von Unterwegs auf Ihrer Webseite surft.
Größe von Schriftarten reduzieren
Verwenden Sie auf Ihrer Webseite nur Schriftarten, die relativ klein sind. Yellowlab.Tools hilft Ihnen bei der Analyse der Schriftart-Dateien und gibt Ihnen die Information, ob die Schriftart zu groß sein sollte. Alternativ können Sie Schriftarten verwenden, die auf allen Geräten existieren. Sogenannte Websafe-Fonts, die von Web-Entwicklern gerne als Fallback-Schriftart verwendet werden. Durch Websafe-Fonts müssen keine zusätzlichen Schrift-Ressourcen vom Server heruntergeladen werden.
Skripte und Stile minimieren und komprimieren
Weitere leistungsreduzierende Ressourcen sind Formatierungen und Funktionen, die über CSS- und JavaScript-Dateien geladen werden. Oft werden CSS-Formatierungen oder JavaScripts geladen, die nicht mehr verwendet werden, die der Web-Entwickler entfernen kann. Das kann aber sehr zeitintensiv werden, da der Code genauestens geprüft und in mehreren Durchläufen getestet werden muss. Zudem werden viele Dateien unminimiert und unkomprimiert vom Server bereitgestellt. Ein CSS-Minifier oder ein JavaScript-Minifier und die Serverseitige Verwendung von Gzip kann die Dateigröße der Ressourcen um einen Bruchteil verringern. Sollte Ihre Webseite oft bearbeitet werden, empfehle ich Ihre CSS-Dateien aufzuräumen und zu reduzieren.
Webseiten-Bilder Nachladen
Nicht nur Skripte und Formatierungen beeinflussen die initiale Ladezeit der Webseite, sondern auch jedes eingebundene Bild. Mit einem sogenannten Lazy Loading Skript für Bilder, können Sie die <img>-Tags erst dann mit den Ressourcen befüllen, wenn sie sich im sichtbaren Bereich des Desktops oder des Smartphones befinden. In meinem Blog habe ich den Beitrag Lazy Loading – Bilder nachladen lassen vorbereitet, in dem Sie ein kleines JavaScript mit Anleitung zur Implementierung auf Ihrer Webseite finden.

Zeitaufwand / Nutzen von Ressourcen-Minimierung

Zeitaufwand
Verbesserung

JavaScript Nachladen und Ausführen

Beseitigen von Ressourcen, die das Rendering blockieren
Sollten Sie bereits Google Pagespeed Insights verwendet haben, werden Sie wahrscheinlich den Satz „beseitigen von Ressourcen, die das Rendering blockieren“ gelesen haben. Damit sind JavaScripts gemeint, die verhindern, dass die Webseite schneller dargestellt wird, als sie eigentlich könnte. Das liegt daran, dass der Browser als erstes das heruntergeladene JavaScript ausführt, bevor es zu den nächsten Ressourcen kommt. Sollten Skripte also vor den CSS-Formatierungen heruntergeladen werden, dauert es länger, bis der Besucher die Seite im richtigen Format ansehen kann.
Aufschieben von Skripten
Bei einem Website-Aufruf werden JavaScripts ausgeführt, sobald sie vom Browser heruntergeladen werden. Durch die Verwendung der Attribute defer und async in den <script>-Tags, wird das Skript erst dann ausgeführt, wenn alle anderen Dateien vollständig vom Server heruntergeladen wurden. Man spricht dabei von einem Aufschieben von Skripten. Durch das Aufschieben wird sich der Browser als aller erstes um die Umsetzung der CSS-Formatierung kümmern, bevor er die Skripte ausführt. Sie sollten wichtige Skripte, wie jQuery jedoch immer ohne Defer oder Async laden, da sonst viele Plugins oder individuelle Skripte nicht mehr funktionieren könnten.
JavaScripts in WordPress aufschieben
Um Dateien in WordPress aufzuschieben, habe ich ein kleines Code-Snippet in meinem eigenen Blog vorbereitet. Hier kommen Sie zum Beitrag JavaScript in WordPress nachladen mit einer genaueren Erklärung zum Aufschieben von JavaScript-Dateien und die Implementierung des Codes in WordPress.

Zeitaufwand / Nutzen von Defer und Async in JavaScripts

Zeitaufwand
Verbesserung

CDN Web-Service verwenden

CDN in Deutschland
Die Verwendung eines CDN’s ist in Deutschland leider nicht ganz so einfach. Leider macht es die DSGVO den Website-Betreibern seit Mai vergangenen Jahres nicht ganz einfach ein Content Delivery Network zu verwenden, da man sehr schwer an einen ADV von ausländischen CDN-Providern kommt. Die Auftragsdatenverarbeitung regelt, was mit den erhaltenen Informationen des Benutzers geschieht. Denn jeder Besucher, der eine Datei von einem Server beziehen möchte, sendet automatisch die IP-Adresse und andere Informationen an die gegenüberliegende Stelle. Da ausländische Anbieter von CDN’s oft nur einen unzureichenden ADV liefern, muss man diesen genauer unter die Lupe nehmen. Im besten Fall konsultieren Sie dazu einen externen Datenschutz-Beauftragten, der Ihnen bei der Auswertung des ADV’s hilft.
Was ist ein CDN?
Ein Content Delivery Network ist ein Netzwerk aus vielen Servern, die auf der ganzen Welt verstreut sind und Ihre Dateien bereithalten. Dadurch bekommen Ihre Besucher in anderen Ländern oder Kontinenten die Dateien für Ihre Webseite wesentlich schneller, als wenn sie über mehrere 1.000 Kilometer Kabel transferiert werden müssten. Für lokale oder deutschlandweite Betriebe ist ein CDN nicht unbedingt notwendig. Möchten Sie jedoch den globalen Markt mit Ihrem Angebot erschließen, ist ein CDN ein sehr nützliches Werkzeug in Ihrem Performance-Werkzeugkoffer, da die Ladezeiten Ihrer Website-Ressourcen deutlich reduziert werden.

Zeitaufwand / Nutzen einer CDN

Zeitaufwand
Verbesserung
Eine Alternative zum CDN
Eine Alternative zur CDN für lokale Betriebe bietet eine Cookie-Free-Domain, die für alle Ressourcen verwendet werden kann, um die Dateien ohne lästige Header-Informationen für den Besucher bereitzustellen. Das ersetzt zwar keine CDN, aber man kann die Dateien zumindest ein wenig beschleunigen. Content Management Systeme (oder kurz „CMS“) und Ihr Server senden mit jeder Datei verschiedene Meta-Informationen mit den Bildern, den Schriften, sowie Formatierungen und Skripten. Durch die Cookie-Free-Domain wird eine Subdomain verwendet, die an kein CMS gebunden ist und somit keine zusätzlichen Header ausliefert. Zudem werden die Einstellungen der Subdomain so ausgelegt, dass nur noch die wichtigsten Informationen zur Ressource hinzugefügt werden.

Zeitaufwand / Nutzen einer Cookie-Free-Domain

Zeitaufwand
Verbesserung

CSS Dateien Reduzieren

Warum sollte man keine Inline-Styles verwenden?
Inline-Styles werden auf vielen Webseiten verwendet, da man sich zum Zeitpunkt der Bearbeitung des Stils keine größere Mühe gegeben hat, oder man es einfach nicht besser wusste. Diese Art der Formatierung ist nicht nur sehr aufwändig zu bearbeiten, da gleiche Stile auf verschiedenen Unterseiten getrennt voneinander ersetzt werden müssen, sondern wird auch ungern von Suchmaschinen gesehen. Auch wenn das ein wenig Arbeit bedeutet: Entfernen Sie Ihre Inline-Styles und erstellen Sie entsprechende CSS-Klassen in den dafür vorgesehenen Dateien.
Überschreiben von bestehenden CSS-Klassen
Viele Web-Entwickler oder Webseiten-Betreiber tendieren dazu, die CSS-Blöcke für anzupassende Stile nicht zu bearbeiten, sondern neue zu erstellen, die den alten Stil überschreiben. Das führt dazu, dass die CSS-Dateien um ein Vielfaches Größer und Undurchsichtiger werden, als benötigt. Zudem werden Browser immer ein klein wenig länger benötigen, die Regeln auf die einzelnen Elemente der Webseite anzuwenden. Suchen Sie lieber ein klein wenig länger nach einer bestehenden CSS-Klasse für Ihre Anpassungen, bevor Sie eine Neue erstellen.
Aufräumen und Testen der CSS-Dateien
In Ihren CSS-Dateien sammeln sich nach reger Bearbeitung im Laufe der Zeit so Einiges an. Suchen Sie nach Regeln, die auf keiner Unterseite Ihrer Webseite verwendet, oder von anderen Überschrieben werden. Dazu können Sie das Google Chrome Coverage-Tool verwenden. Prüfen Sie dazu aber nach jeder Änderung, ob sich die gelöschte Regel auf Ihre Webseite auswirkt. Verwenden Sie dazu ein Staging- oder Test-Projekt, auf dem Sie Fehler machen können, ohne dass der Besucher das mitbekommt. Da man bei dieser Optimierung alle verschiedenen Seiten-Typen kontrollieren muss, ist das ein recht aufwändiger Prozess, der aber eine große Wirkung erzielen kann, wenn die Webseite schon etwas älter ist.

Zeitaufwand / Nutzen von CSS-Minimierung

Zeitaufwand
Verbesserung

Performance Testing-Tools im Überblick

Das Internet ist gespickt mit unterschiedlichen Testing-Tools, mit der Sie eine Analyse Ihrer Webseite vornehmen können. Ich habe Ihnen eine Liste mit meinen Favoriten der Performance-Tools vorbereitet.

Google Pagespeed Insights


Pagespeed-Insights ist der Klassiker der Analyse-Tools. Der Algorithmus basiert wie viele andere Performance-Tools auf Lighthouse, die eine Seite komplett analysiert und Bemerkungen zu den einzelnen Eigenschaften ausgeben kann.
Unter der Gesamt-Bewertung Ihrer Webseite finden Sie Tipps zu möglichen Verbesserungen. Allen voran finden Sie wahrscheinlich das beseitigen von Ressourcen, die das Rendering blockieren. Google möchte Ihnen damit mitteilen, dass Sie CSS- und JavaScript-Dateien entweder komplett entfernen oder Aufschieben sollen. Durch die Verwendung von den Attributen defer und async können Sie zum Beispiel JavaScript-Dateien erst nach der vollständigen Ausgabe des HTML-DOM’s herunterladen und ausführen. Dadurch kann der Benutzer zuerst die Inhalte sehen, bevor erweiterte JavaScript-Funktionen zur Webseite hinzugefügt werden. Das mag die Dynamik der Seite zwar ein wenig beeinträchtigen, jedoch ist eine schnelle Webseite für Google immer besser als eine „hübsche“.

Yellowlab.Tools


Mein absoluter Favorit der Performance-Tools ist Yellowlab.Tools. Die analysierten Daten Ihrer Webseite können sehr kleinteilig betrachtet werden, um eine sehr genaue Vorstellung zu bekommen, welche Stellschrauben an einer Webseite betätigt werden können, um eine Hoch-Performante Seite zu erhalten. Wie bei Pagespeed-Insights sind die verschiedenen Eigenschaften in mehreren Kategorien unterteilt. Die Pageweight analysiert zum Beispiel die einzelnen Nutzlasten, die vom Server zum Client übertragen werden müssen. Yellowlab.Tools erklärt in den meisten Fällen auch sehr gut, wie die Probleme behoben werden können, um eine maximale Website-Performance zu erhalten und die Größe von Dateien zu verkleinern. Leider ist das Tool nur auf Englisch verfügbar. Sie sollten fortgeschrittene Kennnisse der englischen Sprache beherrschen, wenn Sie dieses Tool verwenden möchten.

GTmetrix


Falls Sie regelmäßige Performance-Checks an Ihrer Webseite durchführen möchten, empfehle ich Ihnen die Verwendung von GTmetrix.
Mit einem kostenfreien Account kann GTmetrix wöchentlich einen Performance-Test an Ihrer Webseite durchführen. Sie werden nach der Analyse per E-Mail benachrichtigt und auf Schwachstellen aufmerksam gemacht.
Die einzelnen Webseiten-Eigenschaften sind ähnlich der Pagespeed-Insights-Auswertung aufgeschlüsselt, in der Übersicht aber umfangreicher und detaillierter dargestellt.
Deutsche Benutzer von GTmetrix kann ich nur empfehlen die „CDN“ im Reiter „YSlow“ nicht zu berücksichtigen. Dank der DSGVO ist es sehr schwer geworden ein CDN zu finden, die ihr entspricht. Mein Tipp: Sie können den YSlow-Wert zur Verwendung von einem CDN beeinflussen, indem Sie eine Cookie-Free-Domain (Zur Ausstreuung von Ressourcen ohne unnötiger Nutzlasten wie vereinfachten Header-Angaben) für Ihre Ressourcen erstellen und diese in Ihrem GTmetrix-Account als CDN angeben. Diese Einstellung finden Sie unter „User Settings > YSlow CDN Hostnames“.

Codepalm Performance-Vergleich


Wenn Sie mehrere Webseiten gleichzeitig testen möchten, ist der Performance-Vergleich von Codepalm, den ich selbst entwickelt habe, genau das richtige Programm für Sie.
Ich wollte mit diesem Programm analysieren, was andere Webseiten und Blogs besser machen, um ein Ergebnis von annähernd 100-Punkte zu erreichen. Durch dieses und den oben genannten Tools konnte ich meine Performance um ein Vielfaches verbessern (siehe Screenshot).
Mit dem Performance-Vergleich können Sie mehrere URL’s Ihrer Webseiten eingeben und die Ergebnisse direkt in Ihrem Browser sichern, damit Sie beim nächsten Aufruf des Performance-Tools auf Ihre Daten zugreifen können, ohne eine erneute Analyse zu starten. Eine Registrierung auf der Webseite ist durch die Sicherung der Daten im Browser nicht notwendig.
Aktuell ist das Tool noch in der Open Beta (Version 0.1 – Stand 21.05.2019) und wird stetig weiterentwickelt, um Ihnen ein besseres Nutzererlebnis und mehr Funktionen zu liefern. Im Blog finden Sie eine Anleitung für den Performance-Vergleich.

Website-Performance analysieren und Maßnahmen umsetzen

Bei den oben genannten Tools finden Sie zu jedem Optimierungs-Vorschlag auch eine kleine Anleitung, wie Sie jede Maßnahme umsetzen können. Die meisten dieser Optimierungen werden direkt auf Ihrer Webseite programmiert. Andere können nur durch Server-Einstellungen vorgenommen werden. Bei vielen Hostern wie Domainfactory, One.com oder Baukasten-Anbieter wie Wix.com oder Jimdo.com können diese Einstellungen leider nur bedingt angepasst werden.
Ein 100/100 Score ist so gut wie nicht umsetzbar, vor allem wenn Sie individuelle Funktionen auf Ihrer Webseite verwenden. Ein Score von 80 ist sowohl für die Suchmaschine und für Ihre Besucher erstrebenswert.
Sollten Sie einen flexiblen Server und Techniker mit dem notwendigen Know-How in der Performance-Optimierung suchen, können Sie sich gerne an uns wenden. Wir beraten Sie bei der Optimierung Ihrer Webseiten-Performance und können Ihr Webspace auf das nächste Level bringen.

Sie möchten mehr zur Performance Optimierung erfahren?

Kontaktieren Sie die Experten der MXP