PageSpeed, oder auch Seitenladegeschwindigkeit bezeichnet die Ladezeit, die eine Webseite vom Aufruf über den Browser des Users bis zum vollständigen Laden benötigt. Die Seitenladegeschwindigkeit ist ein wichtiger Rankingfaktor für Google und deren Optimierung somit ein wesentlicher Bestandteil der Suchmaschinenoptimierung.

In diesem Beitrag möchte ich Ihnen zeigen, wie Sie mithilfe der Google PageSpeed Insights, ein Tool der Google Search-Console, die Ladezeit Ihrer Firmenwebseite drastisch reduzieren können.

Inhaltsübersicht

Vorteile einer schnell ladenden Webseite

Welche Vorteile hat eine schnell ladende Webseite?

Die Optimierung der Ladegeschwindigkeit einer Webseite hat zwei große Vorteile:

  • Verbesserung des Google Rankings. Die Seitenladegeschwindigkeit ist ein wichtiger Faktor in der Suchmaschinenoptimierung. Schnellere und natürlich auch relevante Webseiten werden von Google bevorzugt in der Suche dargestellt.
  • Verbesserung der Nutzererfahrung. Sofern Sie keine Monopolstellung in Ihrer Branche haben, wird wohl keiner Ihrer Kunden gerne auf das Laden Ihrer Seite warten. Im schlimmsten Fall ist der Kunde verloren, da die Website der Konkurrenz schneller ist. Besonders Nutzer mit einer langsamen Internetverbindung werden Ihnen danken.

Sie sehen, dass die Zeit, die Sie zur Optimierung der Ladezeit Ihrer Website benötigen, sinnvoll investiert ist.

Ladezeit einer Webseite ermitteln

So schnell ist Ihre Website

Weiter oben im Text habe ich bereits das Tool Google PageSpeed erwähnt. PageSpeed sollte die erste Anlaufstelle sein, wenn Sie die Ladegeschwindigkeit Ihrer Website analysieren möchten.

Die Oberfläche von PageSpeed ist schnell erklärt: In dem Eingebefeld geben Sie Ihre vollständige Website-URL ein und klicken auf „analysieren“.

Mit Google PageSpeed die Ladegeschwindigkeit der Website ermitteln

Nach einigen Sekunden zeigt das Tool die Seitenladegeschwindigkeit aus der Sicht von Google an. Als ersten Punkt sehen Sie die Bewertung für die „Mobile“ und „Desktop“ Ansicht Ihrer Webseite. Die Bewertungsskala geht von 0 – 100, wobei „0“ für eine sehr langsame Website und „100“ für sehr schnelle Website steht.

Ein gutes Ergebnis über 80% sollte für Mobile und Desktop in jedem Fall erreichbar sein.

12 Optimierungsvorschläge, wie Sie Ihre Website beschleunigen können

So beschleunigen Sie die Ladegeschwindigkeit Ihrer Website

Kommen wir zum eigentlich interessanten Part: Die Optimierungsvorschläge, die Google uns nach Abschluss der PageSpeed-Analyse vorschlägt. Hier werden konkrete Verbesserungsvorschläge aufgezeigt, welche Maßnahmen zur Verbesserung der Ladegeschwindigkeit notwendig sind und welche Maßnahmen dafür bereits umgesetzt wurden.

Hier eine Übersicht häufigster Optimierungsvorschläge, und wie sie umgesetzt werden.

 

Antwortzeit des Servers reduzieren

Hiermit ist gemeint, wie gut Ihr Webserver – also dort, wo Sie Ihre Webseite hosten – angebunden ist. Als Webseiten-Betreiber haben Sie selbst leider kaum Einfluss darauf, die Antwortzeit des Servers zu verringern. Am schnellsten schafft hier ein Wechsel zu einem schnellen, etablierten Hoster Abhilfe. Auch ein CDN („Content Delivery Network“) kann helfen, die Antwortzeit entsprechend zu beschleunigen. Dem Thema CDN werden wir einen extra Beitrag widmen.

JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen

Der Inhalt „above the fold“ beschreibt die Elemente, die Ihr Website-Besucher als erstes sieht, wenn die Website geladen wird. Das kann z. B. ein Menü, eine horizontale Navigation, das Firmenlogo, und eine Banner-Grafik sein. Diese Elemente sollten vom Browser zu allererst geladen werden und im Quelltext vor den Ressourcen stehen, die noch nicht benötigt werden.
CSS-, Javascript-, Google-Scripte und andere Ressourcen, die sekundär benötigt werden, sollten im HTML-Code Ihrer Seite erst kurz vor dem </body>-Tag, also dem letzten Element der Webseite stehen.

Browser-Caching nutzen

Browser-Caching bezeichnet das Zwischenspeichern der Dateien (z. B. Grafiken, HTML-Code, CSS- oder Javascript-Dateien) im Browser des Nutzers. Browser-Caching bewirkt, dass Dateien nur beim ersten Website-Besuch geladen werden müssen und dann im Browser zwischengespeichert werden. Sobald ein Nutzer mit dem selben Browser ein weiteres Mal auf die Webseite kommt, werden die gecachte Inhalte vom Speicher des PCs / Smartphones geladen. Dies ist um ein vielfaches schneller, als wenn die Dateien über das Internet übertragen werden. Eine detaillierte Anleitung zum aktivieren und Einstellen des Browser-Cachings finden Sie hier: So aktivieren Sie Browser-Caching und Beschleunigen Ihre Website.

Bilder optimieren

Grafiken und Fotos machen bei vielen Webseiten einen Großteil der Ladezeit aus, da die Dateien vom Webserver zum Kunden übertragen werden. Die Reduzierung der Dateigrößen von Bildern gehört zu den Basics jeder schnellen Website. Hier sind zwei Wege, die Dateigrößen zu reduzieren:

Bildkomprimierung

Die Komprimierung der auf der Website verwendeten Grafiken kann über Bildbearbeitungs-Software wie z. B. Adobe Photoshop passieren. Es gibt auch kostenlosee Online-Tools, mit denen Bildern komprimiert werden können. Ich selbst arbeite gerne mit dem Tool von compressjpeg.com. Hier können mehrere Grafiken auf einmal möglichst Verlustfrei komprimiert werden. Beim Komprimieren sollte darauf geachtet werden, dass die Bildqualität nicht allzu sehr darunter leidet.

Bildgrößen verringern

Nicht nur der Grad der Bildkomprimierung ist entscheidend für eine geringe Dateigröße. Achten Sie auch darauf, dass Grafiken auf Ihrer Webseite in der selben Größe hochgeladen werden sollten, in der sie letztendlich auch angezeigt werden. Mir sind schon bei einigen Kundenprojekten Grafiken untergekommen, die mittels CSS- oder HTML-Code herunter skaliert wurden. Die Ursprungsdatei muss in diesem Fall trotzdem geladen werden, was wiederum Ressourcen verschwendet und kostbare Ladezeit benötigt. Zur Verringerung von Bildgrößen können Sie z. B. die kostenlose Bildbearbeitungssoftware „Gimp“ verwenden.

CSS reduzieren

CSS sind die Stylesheet-Dateien einer Webseite. In diesen Dateien werden alle für die Website notwendigen Informationen zur optischen Gestaltung übergeben, also z. B. Schriftgröße, Farbe, Anordnung von Elementen und viele mehr. Das Reduzieren dieser CSS Dateien sollte nach Möglichkeit von einem Tool, bestenfalls automatisch von einem Plugin vorgenommen werden. CSS Drive bietet ein solches kostenloses Tool zur CSS-Komprimierung in mehrere Konvertierungsgrade an.
Eine weitere Methode zur Reduzierung von CSS-Dateien ist es, diese auf den relevanten Code zu reduzieren. Im Klartext bedeutet das: Laden Sie nur Stylesheet-Dateien, die zur Darstellung dera ktuellen aktuellen Seite benötigt werden.

HTML reduzieren

Zum sauberen Entwickeln von Webseiten gehört ein guter Script-Stil. Zur Strukturierung des Quellcodes der Website werden vom Entwickler Absätze, Leerzeichen oder Kommentare eingefügt. Diese Formatierungen können bei längeren Quelltexten die Dateigröße unnötig aufblähen. Weder der Browser Ihres Website-Besuchers, noch Google brauchen solche Formatierungselemente im Quellcode. Durch ein HTML-Minifying Tool können Sie die nicht benötigten Inhalte im Quelltext entfernen lassen. Ein solches kostenloses Tool ist z. B. das Compress HTML Tool von textfixer.com.
Achtung: Ihre Entwickler werden Sie hassen, wenn Sie keine Sicherung der alten HTML-Datei erstellen.

JavaScript reduzieren

Im Prinzip ist die Javascript-Reduzierung ähnlich zur CSS-Reduzierung. Auch hier werden nicht benötigte Leerzeichen, Absätze und Kommentare aus den Skripten entfernt. Und auch hier sollten Sie unbedingt ein Backup erstellen, damit Ihr Entwickler nicht am Rad dreht.
JavaScript Dateien sollten nur dann geladen werden, wenn sie auf der aktuellen Seite benötigt werden.

Komprimierung aktivieren

Mittels GZIP-Komprimierung kann die Dateigröße von HTML-, JavaScript, XML und CSS-Dateien um bis zu 70 % reduziert werden. Die Aktivierung der GZIP-Komprimierung kann im Idealfall über die .htaccess Datei auf Ihrem Webserver erfolgen. Folgender Eintrag aktiviert die Komprimierung:

<IfModule mod_deflate.c>
<FilesMatch „\\.(js|css|html|xml)$“>
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Sichtbare Inhalte priorisieren

Jede Datei, die zur Darstellung der Seite geladen werden muss (HTML, CSS, Javascript, Bilder, Videos …) benötigt einen Browser-Aufruf (Call). Das Ziel dieser Optimierung ist es, die Anzahl der Calls zu reduzieren, sodass die wichtigen, also sichtbaren, Elemente Ihrer Webseite schnellstmöglich laden. So können Sie beispielsweise das Logo anstelle einer Grafik per CSS einbinden.

Zielseiten-Weiterleitungen vermeiden

Leitet Ihre Webseite noch auf eine andere Domain weiter, wenn mobile User Ihre Webseite aufrufen? Weiterleitungen wie http://m.dixmind.com aus Designgründen sollten möglichst vermieden werden, da sie zu mehrfachen Browser-Requests und so eine längeren Ladezeit führen. Hier macht es Sinn sich Gedanken über ein responsive Webdesign zu machen.

Noch Fragen?

Sie haben Fragen zum Thema Pagespeed-Optimierung? Nutzen Sie einfach die Komentar-Funktion oder schreiben Sie uns an info@dixmind.com

Ähnliche Beiträge

5. APRIL 2018

DSGVO: Das ändert sich für Ihre Firmenwebsite

Die Datenschutz Grundverordnung (DSGVO) bzw. General Data Protection Regulation (GDPR) ist derzeit in aller Munde. Ab dem 25.05.2018 gilt die neue EU Datenschutzgrundverordnung auch in Deutschland. Wir geben Ihnen einen Überblick, wobei es sich bei der DSGVO handelt und welche...

0

28. MäRZ 2018

HowTo: So ändern Sie den WordPress E-Mail Absender

Standardmäßig wird „WordPress“ als Abender-Name und „wordpress@domainname.de“ als Absende-E-Mail verwendet. Wenn WordPress als CMS für eine Firmenwebsite eingesetzt wird, kann die Standard-Absender E-Mail und -Name als störend empfunden werden. Wir haben die Änderung...

0

16. FEBRUAR 2018

So aktivieren Sie Browser-Caching und beschleunigen Ihre Website

In unserem letzten Ratgeber-Artikel haben wir erklärt, mit welchen Maßnahmen sich die Ladegeschwindigkeit der Webseite beschleunigen lässt um von Suchmaschinen besser gerankt zu werden. Ein Punkt, auf den ich heute näher eingehen möchte ist das Aktivieren von Browser-Caching.

0

25. JANUAR 2018

SSL-Verschlüsselung von Firmenwebseiten

Vor einigen Monaten habe ich einen Bericht über Abmahnungen für nicht SSL-Verschlüsselte Webseiten gelesen. In unserer Agentur betreuen wir einige Kundenprojekte, darunter Onlineshops, Firmenwebsites, aber auch private Websites und Blogs, bei denen wir SSL-Zertifikate eingerichtet haben. Das...

0

Hinterlassen Sie einen Kommentar