Google PageSpeed Optimierung: Schritt-für-Schritt Guide
In dem heutigen Blogartikel geht es um ein sehr interessantes Thema, das dich als Technical Seo Freak höchstwahrscheinlich…
Eine langsame WordPress Seite schreckt Deine Besucher ab.
Mit jeder Sekunde zusätzlicher Ladezeit verringert sich Dein Umsatz um 7 %!
Du musst also Deine WordPress Ladezeit optimieren, wenn Du kein Geld verlieren willst.
Wir zeigen Dir heute, wie Du Deine Website rasend schnell machst!
Wenn Du noch ein wenig Motivation brauchst, um Dein WordPress Optimierung endlich in Angriff zu nehmen, bekommst Du hier ein paar gute Argumente:
Hast Du jetzt verstanden, warum Du das Thema nicht mehr länger auf die lange Bank schieben solltest?
Na dann los!
Wir zeigen Dir in diesem Artikel die wichtigsten Stellschrauben, um Deine WordPress Seite zu optimieren. Nach dem 80 / 20-Prinzip fokussieren wir uns auf die Maßnahmen, die mit überschaubarem Aufwand in überschaubarer Zeit die besten Ergebnisse erzielen. Ein Technik-Fuchs wird wahrscheinlich noch mehr Stellschrauben finden, aber eine 100%-Perfektion ist bei der Ladezeitoptimierung nicht wirtschaftlich.
Es gibt kostenlose Tools, mit denen Du Deine Ladezeit messen kannst. Werfen wir einen Blick auf die drei Wichtigsten:
Das wohl Bekannteste ist ein kostenloses Tool von Google. Du erreichst es mit der folgenden URL aufrufen:
https://developers.google.com/speed/pagespeed/insights/?hl=de
Gib einfach die URL der Webseite ein, die Du untersuchen möchtest und Du bekommst einige hilfreiche Einblicke.
Unserer Meinung nach sollte ein Score von für Desktop-Seiten ein annehmbarer Wert sein. Wie Du sehen kannst, können wir bei Trustfactory.bz noch etwas tun.
Allerdings stammt der Screenshot aus der Zeit kurz nach unserem Relaunch und wir haben hier noch nicht perfektioniert.
Das Tool zeigt Dir anhand verschiedener Metriken, wie Deine Webseite geladen wird und welche Verbesserungen Du vornehmen kannst.
FCP zeigt Dir zum Beispiel, wie viel Zeit vergeht, bis die ersten Inhalte Deiner Website geladen werden.
FID sagt aus, wie schnell Deine Seite reagiert, wenn ein Nutzer mit ihr interagiert (z.B. mit einem Mausklick).
Weiter unten siehst Du einige konkrete Optimierungsvorschläge.
Insgesamt ist Google Pagespeed Insights ein gutes Tool, dass für die meisten Optimierungsmaßnahmen ausreicht.
Das erweiterte Tool von Web.Dev, basiert auf dem Google Tool. Es bereitet die Ergebnisse von Google jedoch etwas detaillierter auf.
(Hier geht es zum Tool: https://web.dev/measure/)
Wenn Du beide Tools kombinierst, verpasst Du keine Stellschraube zur Ladezeitoptimierung.
Dieses Tool ist ebenfalls kostenlos und hat gegenüber dem Google Tool einen kleinen Vorteil.
Du kannst die Ladezeit einzelner Unterseiten aus verschiedenen Regionen testen:
Das ist besonders vorteilhaft, wenn Deine WordPress Website internationale Besucher anspricht und auf der ganzen Welt gut gefunden werden soll.
Zudem erhältst Du eine ganze Reihe an konkreten Vorschlägen.
Wenn Du alles noch ein bisschen genauer wissen möchtest, dann wirf mal einen Blick auf GTMetrix .
Der Nachteil hier ist, dass Du in der kostenlosen Version immer von Vancouver, Kanada aus Deine Webseite testest.
Der Report ist allerdings ziemlich detailliert:
Allerdings musst Du bedenken, dass die Ladezeit hierbei immer etwas langsamer dargestellt wird, als sie für deutsche Besucher in Wirklichkeit ist.
Die konkreten Handlungstipps sind aber hilfreich!
Wir unterteilen die möglichen Stellschrauben in drei übergeordnete Kategorien
Die Optimierungsfelder sind mal mehr, mal weniger technisch. Du musst allerdings kein Programmierer sein, um sie in den Griff zu bekommen.
Wir zeigen Dir, mit welchen Handgriffen oder Plugins Du sie optimieren kannst und wie groß das Aufwand-/Nutzenverhältnis ist (Skala von 1 bis 10)
Grafiken, Fotos und andere Medien gehören auf jede vernünftige Webseite. Alles andere wäre wohl etwas langweilig.
Die richtigen Bilder können Deine User begeistern, aber auch Deine Seite verlangsamen und Deinen Umsatz schmälern.
Mit den folgenden Ratschlägen kannst Du es verhindern.
Oftmals werden Grafiken oder Fotos im Originalzustand auf eine Webseite geladen.
Manchmal sogar mit einer Auflösung, wie 2.100 x1.500 Pixel und mehr! Die Grafiken sind dann gerne mal 5 MB groß.
Das ist Unsinn.
Für die meisten Webseiten reicht eine Bildgröße von maximal 1080 x 720 Pixel. Soll sich das Bild in der Breite nicht mal über die ganze Webseite erstrecken, kann es sogar noch kleiner sein.
Schneide Deine Bilder also auf die richtige Größe zu, bevor Du sie in Dein WordPress Backend reinlädst.
Das kannst Du mit diversen kostenlosen Tools machen, wie z.B.
Bereits hochgeladene Bilder kannst Du auch nachträglich mit einem Plugin zuschneiden.
Rating: 10/10
Fazit: Diese Maßnahme ist unerlässlich!
Bei Logos oder anderen künstlichen Grafiken entstehen oft überflüssige Ränder.
Sie können transparent oder weiß sein. In jedem Fall solltest Du sie entfernen und die Abstände von Logos und Grafiken zu anderen Elementen über WordPress und CSS steuern.
Die zusätzliche Größe verlangsamt Deine Ladezeit, auch wenn nicht ausschlaggebend.
Dafür eignet sich das kostenlose Grafikprogramm GIMP ganz gut.
Rating: 3 / 10
Fazit: Diese Maßnahme macht Sinn, aber ist kein Muss.
Du wirst nicht glauben, um wie viel Bytes Du die Größe Deiner Bilder verkleinern kannst, ohne an Qualität zu verlieren.
In Kombination mit den ersten beiden Maßnahmen haben wir ein Bild von 1,5 MB auf 250 KB verkleinert.
Komplexe Grafiken sollten nie größer als 300 KB sein. Am besten ist es, wenn Du 100 KB als Annäherungswert nimmst.
Wenn Du erst mal die Größe der hochzuladenden Bilder angepasst hast, kannst Du sie mit verschiedenen Tools verkleinern:
Doch selbst bereits hochgeladene und veröffentlichte Bilder kannst Du nachträglich mit den richtigen Plugins komprimieren.
Rating: 10 / 10
Fazit: Die Bildkomprimierung ist keine Option, sondern ein Muss.
Die meisten Webmaster setzen die beiden Dateiformate PNG und JPG vollkommen willkürlich ein.
Dazu ist jedes Format für einen bestimmten Zweck vorgesehen.
Welches Format solltest Du also wofür verwenden?
JPEG
PNG
JPEG
PNG
Du kannst Grafikdateien mit jedem gängigen Grafikprogramm, wie Paint oder GIMP umwandeln, indem Du sie einfach neu speicherst. Bereits hochgeladene Dateien kannst Du nicht mehr ändern (Das musst Du aber nicht, wenn Du die nächste Maßnahme umsetzt).
Nutzen: 7/10
Fazit: Diese Maßnahme ist schon wichtig, aber die nächste Maßnahme macht sie fast überflüssig.
Es gibt mittlerweile ein Bildformat, dass die besten Eigenschaften aus PNG und JPG vereint. Google hat es extra für das Web entwickelt:
WebP.
Es ist klein, kann transparent und animiert sein und glänzt mit hoher Qualität bei kleiner Dateigröße.
Der Nachteil ist, dass noch nicht alle Browser dieses Format wiedergeben können.
Du musst Dich deshalb eines kleinen Tricks bedienen:
Die Grafiken werden klassisch als PNG oder JPG hochgeladen und nur bei den Browsern als WebP ausgespielt, die dieses Format unterstützen. Deine Webseite speichert beide Dateiformate ab.
Für diesen Prozess gibt es einige Plugins, die Dir die Arbeit dafür abnehmen.
Du kannst auch bereits hochgeladene Grafiken nachträglich in WebP konvertieren.
Damit kannst Du es umsetzen:
Nutzen: 10/10
Fazit: Wer Seine WordPress Ladezeit optimieren möchte, kommt um WebP nicht herum!
Begeben wir uns nun in das WordPress Backend. Eine frisch installierte WordPress Website muss weitläufig optimiert werden, um annehmbare Ladezeiten zu ermöglichen.
Jedes Mal, wenn Deine WordPress Webseite aufgerufen wird, muss die HTML-Datei erstellt und von Deinem Server geladen werden. Sie durchläuft dabei etliche Instanzen, wie Dein Theme, die Plugins und die Content-Datenbank.
Das kostet Zeit.
Du kannst den Prozess aber verkürzen, indem Du WordPress Caching aktivierst. Dabei wird eine statische HTML-Datei gespeichert und bei einem Aufruf geladen. Sie muss nicht erst erstellt werden.
Nimmst Du eine Änderung an der Seite vor, musst Du den WordPress Cache einmal leeren.
Damit kannst Du es umsetzen:
Nutzen: 10/10
Fazit: Diese Maßnahme geht schnell und ist Pflicht!
Mit Browser Caching kannst Du Deine Webseite bei Deinen Besuchern im Browser speichern. Kehren sie zurück, wird die Seite von Ihrem Rechner und nicht von Deinem Server geladen.
Das verkürzt die Ladezeit extrem!
Damit kannst Du es umsetzen:
Nutzen: 9/10
Fazit: So machst Du Deine Community happy!
Programmierer schreiben Code in einer anschaulichen Form, damit sie für andere Programmierer nachvollziehbar sind. Genau so, wie wir diesen Text formatiert haben.
Computer brauchen diese Formatierung nicht. Sie kosten Speicherplatz und verlangsamt dementsprechend die Webseite.
Mit der Minifikation hebst Du die Formatierung auf und komprimierst den Code so weit wie möglich.
Damit kannst Du es umsetzen:
Nutzen: 8/10
Fazit: Mit den richtigen Plugins ist dieser Schritt kein Problem. Google freut sich!
Analog zum vorherigen Schritt werden hierbei die unzähligen einzelnen Dokumente für die grafische Gestaltung (CSS) und die dynamische Interaktion (Javascript) in einem Dokument zusammengeführt.
Da der Browser den Code nun schneller lesen kann, weil er nur ein Dokument scannen muss, entsteht die Website schneller.
Damit kannst Du es umsetzen:
Nutzen: 7/10
Fazit: Gerade bei komplexen und großen Webseiten ist diese Maßnahme empfehlenswert.
An der Beseitigung dieser Meldung bei Google Pagespeed Insights haben viele Webmaster zu knacken.
Dabei ist das in der Praxis schwer bis unmöglich.
Bestimmte Code-Typen werden immer das Rendern blockieren, wie HTML oder CSS. Solltest Du sie entfernen, wird Deine Website nicht richtig dargestellt.
Javascript hingegen kannst Du in den Footer verfrachten, um Deine Ladezeit zu optimieren.
Lass das aber ein Plugin übernehmen.
Damit kannst Du es umsetzen:
Nutzen: 6/10
Fazit: Wenn es schnell und einfach geht, dann mach es.
Plugins sind das Schöne an WordPress.
Es gibt für fast jede vorstellbare Funktion ein professionelles Plugin. Allerdings solltest Du es nicht übertreiben, wenn Du an schnellen Ladezeiten interessiert bist.
Lösche alle unnötigen Plugins und prüfe immer, ob es nicht eine Möglichkeit gibt, die gewünschte Funktion manuell umzusetzen.
Teilweise tun die nämlich nichts anderes, als ein Stück Code in die HT-Access-Datei einzufügen.
Das kannst Du über Deinen FTP-Server auch einfach selber machen.
Nutzen: 7/10
Fazit: Prüfe jedes Plugin auf seine Notwendigkeit und suche manuelle Alternativlösungen.
LazyLoad ist eine der intelligentesten Lösungen zur Verkürzung der Ladezeit.
Anstatt alle Inhalte direkt beim Aufrufen zu laden, werden sie erst geladen, wenn der User sie zu Gesicht bekommt.
Es wird also nur der Above The Fold-Inhalt geladen. Das ist der Inhalt, den der User ohne zu scrollen sieht.
Bei uns sieht das beispielsweise so aus:
Wenn Du auf der Trustfactory-Startseite nach unten scrollst, wirst Du merken, wie die Inhalte erst nach und nach erscheinen.
Das ist LazyLoad.
Damit kannst Du es umsetzen:
Nutzen: 10/10
Fazit: Weil die Installation so einfach und der Nutzen so groß ist, solltest Du nicht darauf verzichten.
Du hast jetzt eine Menge über die WordPress-Optimierung gelernt.
Vielleicht erscheint es Dir nach viel Arbeit.
Es gibt glücklicherweise einige hervorragende Lösungen, mit denen Du Deine Ladezeiten mit minimalem Aufwand verkürzen kannst.
Sie decken die oben genannten Maßnahmen ab.
Autoptimize ist ein hervorragendes Plugin, dass es in einer kostenlosen und Premium-Version gibt. Wenn Du es mit dem nächsten Plugin kombinierst, kannst Du fast alle wichtigen Maßnahmen umsetzen.
W3 Total Cache ist ebenfalls kostenlos. Wie der Name erahnen lässt, hat es effiziente Caching-Funktionen. Doch auch die Minifizierung von Code oder LazyLoad lassen sich hiermit umsetzen.
CrazyLazy ist ein einfaches, kostenloses Plugin, das per Klick die LazyLoad-Funktion aktiviert.
WebPExpress ist eine effektive und zeitsparende Lösung, um bestehende Bilder in WebP umzuwandeln und bei Kompatibilität des Browsers ausspielen zu lassen. Es ist kostenlos.
Optimus ist eines der besten Bildoptimierungs-Plugins für WordPress. Allerdings ist es nicht kostenfrei. Du zahlst hier 29 $ pro Webseite. Ist Dein Projekt allerdings bilderlastig, kann es sich lohnen.
Wenn Du eine zeitsparende Komplett-Lösung suchst, um WordPress Website zu optimieren und bereit bist 49 $ pro Jahr auszugeben, dann nimm WP Rocket.
Das Plugin kann alle WordPress-relevanten Maßnahmen, die wir oben aufgeführt haben, und mehr per Klick effizient umsetzen.
Wenn Du das Budget hast, dann suche nicht weiter.
Diese Maßnahmen musst Du bei Deinem Host anfragen oder im FTP-Server umsetzen.
gZIP und Deflate umschreibt den Prozess, die Daten Deiner Webseite für Übertragung vom Server zum Browser in einer Datei zu verpacken und anschließend wieder zu entpacken.
Dafür musst Du einen Code in Deine HT-Access-Datei einfügen.
Bei einem Apache-Server:
# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml
Sei aber vorsichtig und mach vorher eine Sicherung. Ob es geklappt hat, kannst Du mit einem der oben genannten Tools überprüfen.
Nutzen: 8/10
Fazit: Etwas komplizierter, aber dafür umso effektiver!
Stell sicher, dass Dein Host die neuste PHP-Version für Dich installiert und OpCache aktiviert hat.
PHP ist die Programmiersprache der WordPress-Datenbank.
OpCache ist eine Funktion, die den Arbeitsspeicher Deines Servers verbessert.
Die PHP-Code-Abschnitte werden in einem Zug und nicht einzeln geladen.
Frag dafür am besten Deinen Hosting-Provider!
Nutzen: 8/10
Fazit: Der Aufwand ist minimal und es lohnt sich!
HTTP/2 ist das aktuelle Übertragungsprotokoll für Webseiten. Ähnlich wie gZIP werden die Daten in einem Datenstrom und nicht in zahlreichen übertragen.
Für die Aktivierung musst Du Deinen Webhost fragen. Allerdings solltest Du darauf bestehen und ansonsten den Host wechseln.
Nutzen: 9/10
Fazit: Ein absoluter Muss. Du willst doch auch nicht mit einem veralteten Betriebssystem arbeiten oder?
Mit günstigen Shared Hosting-Angeboten wird Deine WordPress Seite nur schwerfällig schnell werden.
Prüfe lieber mal, ob Du Dir ein WordPress Hosting leisten kannst. Der Unterschied ist kaum zu verkennen.
Dank der perfekten Einstellung und Ausrichtung auf WordPress, wird Dein Projekt rasend schnell.
Die besten Anbieter dafür sind:
Denk daran, dass dir jede Sekunde Ladezeit 7% mehr Umsatz bringt. So macht sich die Investition schnell bezahlt.
Nutzen: 10/10
Fazit: Das lohnt sich auf jeden Fall!
Frontity ist ein React-Framework, das die Art WordPress Webseiten zu bauen vollkommen revolutioniert .
Dank der Trennung von Content und Layout ist es möglich, eine statische Website im Browser zu laden. Nur die Inhalte sind dynamisch.
Bei klassischen WordPress Websites wird jede Unterseite einzeln geladen. Mit Frontitiy ist das Layout quasi statisch und wird nur durch neue Inhalte ersetzt, wenn ein User eine neue Unterseite betritt.
Das Prinzip ist phänomenal und wird die WordPress-Enwicklung nachhaltig verändern.
Schau Dir doch mal unsere Präsentation dazu an:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Wenn Du profitorientiert Webseiten baust, musst Du Deine Ladezeit in den Griff bekommen. Mit dem was Du heute gelernt hast, steht dem aber nichts mehr im Wege.
Brauchst Du Unterstützung mit Deiner SEO? Wir sind auch Full Service Dienstleister mit Erfolgsgarantie!
Ähnliche Artikel
Google PageSpeed Optimierung: Schritt-für-Schritt Guide
In dem heutigen Blogartikel geht es um ein sehr interessantes Thema, das dich als Technical Seo Freak höchstwahrscheinlich…
Google Analytics Conversion Tracking: Wie Du kostengünstig Deinen Umsatz erhöhst
Wieso wollen alle eigentlich immer mehr Traffic? Wie wäre es, wenn Du mit ein paar Handgriffen Deinen Umsatz innerhalb…
Shopify SEO – Mache SEO zum Umsatztreiber Deines Shops!
Shopify hat schätzungsweise bereits 170 Mrd. € Umsatz gemacht. Aktuell leben 2 Millionen Menschen von Unternehmen, die auf…
Suchintention bei Google erkennen und nutzen
Ein Fehler kann ausreichen, um das Potenzial Deiner SEO-Kampagne nachhaltig oder sogar dauerhaft zu schädigen…
Die richtige Seitenstruktur: Mehr Power durch Siloing!
Eine tragende Rolle nimmt bei der Suchmaschinenoptimierung (SEO) die Seitenarchitektur ein. Eine einfache…
FAQ Snippet – Mehr Sichtbarkeit in den SERP’s
FAQ Snippets sind kleine zusätzliche Boxen, die unter den SERPs bei Google erscheinen. Da sie eine Menge Platz einnehmen, fallen…
Mit Trustfactory erfolgreich auf Google werden.
Erprobte Maßnahmen, datengetriebene Strategien und ROI-starke Prozesse. Trustfactory ist Deine skalierbare Komplettlösung für nachhaltigen Erfolg auf Google. Mehr Besucher, bessere Reputation und ein positiver News Flow – jetzt SEO-Analyse-Gespräch anfordern:
Finde heraus, welches Potenzial in Deinem SEO steckt.
