Pagespeed Optimieren

Die Welt wird in der heutigen Zeit immer schnelllebiger, während die Aufmerksamkeitsspanne gleichzeitig immer kürzer wird. Zeit spielt in unser aller Alltag eine immer wichtiger werdende Rolle. Und genau das spiegelt sich auch in unserem Online Nutzungsverhalten wieder.

Egal ob man nach etwas googelt, ein Video schauen möchte oder sich durch die Online Shopping Welt forstet; niemand möchte nicht lange auf die gewünschten Informationen warten. Entweder die Seite lädt schnell, oder der User verlässt die Seite direkt wieder. Und somit geht ein Besucher, Interessent oder sogar potentieller Kunde verloren. Und warum? Wegen einer zu langsamen Seitenladegeschwindigkeit.

Was ist Pagespeed?

Unter dem Begriff Pagespeed (zu Deutsch Seitenladegeschwindigkeit) versteht man die Zeitspanne zwischen dem Linkklick des Users, der zu deiner Seite führt, und dem vollständigen laden deiner Webseite. Kurz: Die Ladezeit deiner Webseite.

Aber was ist nun eine gute und was ist eine schlechte Ladezeit? Diese Frage wird im Netz seither wild diskutiert und hierüber herrscht bis heute keine Einigkeit. Die optimale Ladezeit liegt laut Google in dem Bereich bis zu maximal 1,5 Sekunden. Andere Quellen bezeichnen eine Webseite mit einer Ladezeit von 2-3 Sekunden auch noch als schnell. So macht es Sinn sich die 1,5 bis 3 Sekundengrenze als groben Richtwert vorzunehmen. Doch ein steht fest: Je schneller, desto besser.

Warum ist ein optimierter PageSpeed wichtig?

Es gibt zwei wesentliche Gründe, warum auch Sie den Pagespeed ihrer Webseite optimieren und im Auge behalten sollten. Der erste und wichtigste Grund ist, dass eine kurze Seitenladezeit die UX („User Experience“) erhöht. Deshalb hat Google 2010  die Seitenladegeschwindigkeit offiziell als einer der vielen Rankingfaktoren implementiert. Denn wie eingangs erwähnt, haben Nutzer nur eine kurze Geduldsspanne, lädt die Seite zu langsam, ist der Besucher schon auf dem Weg zu der nächsten Seite.

Hier entscheiden wenige Sekunden über Sieg oder Niederlage. Insbesondere auf Smartphones. Als weitere negative Konsequenz erhöht sich die Absprungrate, welche einen weiteren Rankingfaktor darstellt. Also, steuern Sie mit einer schnellen Seitenladezeit zu einer exzellenten Nutzererfahrung bei und sorgen Sie so für zufriedene, wiederkehrende Besucher.

Während der erste Grund für eine optimierte Seitenladegeschwindigkeit nur einen indirekten Bezug zur Suchmaschinenoptimierung darstellt, steht der zweite Grund im direkten Zusammenhang mit Ihrer SEO-Strategie. Hier geht es um den Einfluss der Seitenladegeschwindigkeit auf das Crawling der Google-Bots. Wenn eine durch den Crawler aufgerufene Seite nur langsam lädt, stellt das für Google vermeidbare höhere Kosten da. Als Konsequenz werden langsame Seiten seltener und weniger tiefgehend gecrawlt. Schnelle Webseiten mit ohne Fehler und Zeitüberschreitungen hingegen sind für die Crawler ein Zeichen für gut funktionierende Server.

Folglich stellt eine schnelle Seitenladezeit sicher, dass die eigene Webseite in einer hohen Frequenz regelmäßig und gründlich gecrawlt wird und somit neue Inhalte zügig erkannt und Indexiert werden.

Es gibt viele Faktoren, welche die Seitenladegeschwindigkeit beeinflussen. Nachfolgend haben wir Ihnen eine Liste mit den relevantesten Faktoren und Erklärungen zu derer Optimierung haben wir Ihnen nachfolgend zusammengestellt. Sie können die Liste einfach Schritt für Schritt durchgehen und überprüfen, ob Sie welche Optimierung Sie auf Ihrer Seite noch vornehmen können.

Javascript und CSS auslagern

Umfangreiche Skripte und CSS Codes sollten aus dem HTML-Code in separate Dateien ausgelagert werden. Dadurch wird der HTML-Code schlanker und es wird redundanter Code (doppelt und dreifache Codes) werden vermieden. Darüber hinaus sind die ausgelagerten Dateien cachebar und müssen bei einem erneuten Seitenaufruf nicht wieder neu geladen werden.

How To:

Nachfolgend lagern wir beispielhaft den CSS-Code in eine externe Datei aus. Die Vorgehensweise für das Auslagern des JavaScripts erfolgt analog und wird deshalb nicht weiter erläutert. Zum Auslagern des CSS-Codes benötigen wir zwei Dinge. Zuerst benötigen wir eine neue Datei, die wir exemplarisch als „design.css“ bezeichnen. Zweitens müssen wir einen Verweis auf diese Datei in der HTML-Datei erstellen.

Neue Datei namens „design.css“ erstellen, Code einfügen und im selben Verzeichnis ablegen, wo sich auch die HTML-Datei befindet.Beispielhafter Code:

Verweis im Head-Bereich der HTML-Datei einfügen:Jetzt sollte die H1-Überschrift in weißer Schrift auf einem schwarzen Hintergrund erscheinen

Javascript und CSS komprimieren

Das komprimieren der CSS- und JavaScript-Dateien sorgt dafür, dass die jeweilige Dateigröße kleiner wird und diese dann schneller geladen werden können. Komprimiert wird die Datei beispielsweise durch das Entfernen von Kommentaren, nicht benötigte Leerzeichen oder dem nicht benötigten Semikolon hinter nach dem letzten Wert einer CSS-Anweisung. So wird…

zu…

Damit man die ganze Arbeit nicht mühselig händisch selbst erledigen muss, kann man auf sehr praktische Online-Tools zurückgreifen, die den eingefügten Code in Sekundenschnelle komprimieren. Dieser Javascript compressor und dieser CSS compressor ermöglichen jeweils das Komprimieren der JavaScript bzw. CSS-Datei.

Java Script nicht im Head-Bereich

Häufig sind JavaScript-Dateien im Header eingetragen. Das bedeutet, dass die häufig großen JavaScript Dateien gleichzeitig mit dem eigentlichen sich im Body befindenden Inhalt geladen werden. Das kann den Seitenaufbau verzögern, da der Browser erst auf die fertig geladenen JavaScript warten muss und somit zu einer geringeren Seitenladegeschwindigkeit führen. Dieses Problem kann man ganz einfach lösen in dem man die Skripte nicht im Head, sondern am Ende des Body-Bereichs platziert, wie nachfolgend dargestellt:

Besser:

Browser Caching Nutzen

Das Nutzen von Browser Caching ist eine Methode mit der sich die Seitenladezeit einer Webseite mit sehr geringem Aufwand sofort verbessern lässt. Bei aktiviertem Browser Caching weist der Server den Browser an, statische oder nur selten modifizierte Ressourcen wie Bilder, CSS-Dateien, JavaScript-Dateien oder Mediendateien für einen bestimmten Zeitraum im Cache (lokalen Speicher) zwischen zu speichern.

Kommt ein Besucher nun ein erstes Mal auf eine Webseite mit aktiviertem Caching, werden die genannten statischen Ressourcen vom Browser zwischengespeichert. Besucht derselbe Nutzer die Webseite später noch einmal, wird ein Großteil der Website-Daten direkt aus dem Cache geladen. Das reduziert die Anzahl der notwendigen Serveranfragen, spart Netzwerktraffic und resultiert in einer deutlich schnelleren Seitenladezeit.

Für WordPress stehen eine ganze Reihe Plugins zur Verfügung, die das Browser Caching ermöglichen. Zu den beliebtesten gehören die beiden kostenfreien Plugins WP Super Cache und W3 Total Cache und das kostenpflichtige Plugin WP Rocket.

Bilder richtig skalieren

Je geringe die zu ladende Datenmenge beim Seitenaufbau ist, desto schneller baut sich die Seite auf. Besonders Bilder machen häufig einen großen Anteil der kompletten Dateigröße der Webseite aus. Das ist vor allem der Fall, wenn auf einer Webseite viele hochauflösende Bilder eingebettet wurden. Deshalb ist es für Bilder besonders wichtig, dass sie sich immer in dem Format auf dem Server befinden, in dem sie auch auf der Webseite wiedergegeben werden. Das bedeutet, dass wenn Sie Bild mit den Maßen 300×300 Pixel auf Ihren Server hochladen und dies dann tatsächlich nur mit einer Abmessung von 150×150 Pixel auf Ihrer Webseite dem Besucher ausgeben, weil Sie es nur für ein kleines Thumbnail benötigen, vergeben Sie eine Menge Potential. Denn für Ihr kleines 150×150 Pixel Thumbnail muss nun ein 300×300 Pixel großes Bild geladen werden. Das benötigt zum einen mehr Zeit und zum anderen mehr Netzwerktraffic.

Aus diesem Grund sollten Sie die Bilder immer aufs richtige Format skalieren. In unserem Beispiel sollten Sie also das 300×300 Pixel große Bild mit auf ein 150×150 Pixel großes Thumbnail skalieren und erst dann auf Ihren Server hochladen. Zum Skalieren der Bilder eigenen sich viele klassische Fotobearbeitungsprogramme (z.B.

Adobe Photoshop
). Sollten Sie WordPress als CMS benutzen, können Sie die Bilder auch noch nach dem hochladen mit Hilfe der Bildbearbeitungsfunktion skalieren und zuschneiden.

Bilder Komprimieren

Beim Abspeichern von Bildern verwendet jedes Grafikprogramm verschiedene Parameter. Diese Grafikdateien sind dann oft viel größer, als sie es für die Verwendung fürs Web sein müssten. Deshalb sollte man die abgespeicherten Bilddateien immer noch nachträglich mit einem Tool komprimieren, um sich einige Kilobytes bis hin zu sogar mehreren Megabytes Dateigröße einzusparen. Wichtig ist natürlich, dass die Bildqualität auch noch nach der Kompression erhalten bleibt.

Es gibt verschiedene Wege die gewünschten Bilder zu komprimieren du für die Verwendung fürs Web zu optimieren. Zum einen bieten einige Bildbearbeitungsprogramme (z.B. Adobe Photoshop) bereits die Möglichkeit die Bilder direkt fürs Web optimiert abzuspeichern. Zum anderen gibt es Online-Tools wie jpegmini.com oder tinypng.org, die bereits vorhandene Bilder fast verlustfrei komprimieren können. Darüber hinaus gibt es die Möglichkeit mit Plug-Ins wie Imagify Bilder direkt beim Hochladen auf den Server automatisch zu komprimieren oder sogar Bilder, die sich bereits auf dem Server befinden, noch nachträglich zu optimieren.

Hoster wechseln

ALL-INKL.COM - Webhosting Server Hosting Domain ProviderAuch die Wahl des Hosters kann einen signifikanten Unterschied in Sachen Seitenladegeschwindigkeit ausmachen. Denn Server mit einer langsamen Antwortzeit und einer geringen Prozessorleistung schlagen in der Seitenladegeschwindigkeit einer Webseite mächtig zu Buche. Einer der beliebtesten deutschen Web Hoster ist All-Inkl, der mit leistungsfähigen Servern und darüber hinaus mit einem ausgezeichneten Kundensupport überzeugt.

Für das Messen das Pagespeed einer Webseite stehen einige Online Tools zur Verfügung. Eins davon ist PageSpeed Insights von Google. Dieses kostenlose Tool wertet die Geschwindigkeit eurer Webseite für die mobilen als auch in der Desktop-Version aus. Darüber hinaus werden Schwachstellen hinsichtlich der Page Speed angezeigt und direkte Optimierungsvorschläge gegeben.

Ein weiteres kostenloses Tool zur Messung der PageSpeed ist Pingdom. Auch dieses Tool wertet die Geschwindigkeit einer Webseite aus und liefert direkte Optimierungsvorschläge. Zusätzlich zeigt es aber noch einige weitere Statistiken an, wie z.B. die Ladezeit, Dateigröße, Anzahl der Requests und vieles mehr aufgeschlüsselt nach den einzelnen Elementen.