Website-Performance & Pagespeed
analysieren und optimieren

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.

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.

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

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

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

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

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

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.

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.