Google PageSpeed Insights ist hervorragend geeignet, um dir schnell einen Überblick über das Optimierungspotenzial deiner Website zu verschaffen. Ich zeige dir heute, wie du dieses Potenzial auch nutzt und deinen PageSpeed Score erhöhst. Du solltest dich aber nicht sklavisch nach den Google Ergebnissen richten. Denn die PageSpeed Fehlermeldungen sind nicht immer sinnvoll.
Der Kollege Caspar Hübinger hat vor einiger Zeit in einem seiner Blogposts sehr deutliche Worte für sein Google PageSpeed Insights Ergebnis gefunden. Und er kritisiert nicht nur das Tool, sondern auch die Nutzung des Tools selbst. Denn wenn man nicht weiß, wie man die einzelnen Optimierungsvorschläge zu interpretieren und beheben hat, kann man sich schnell in der unsinnigen Jagd nach einer 100er Wertung verlieren. Das allerdings wäre unklug. Denn utopisch hohe Google PageSpeed Wertungen sind meist Zeitverschwendung. Wichtiger ist die Optimierung der Ladezeit.
Fully responsive, loads in 500 ms, and Google’s shiny shittool tells me my mobile performance is “fair”, bc of render-fucking-blockhead CSS.
Caspar Hübinger (Glueckpress)
Ich zeige dir heute, wie du die wichtigsten Fehlermeldungen von Google PageSpeed Insights interpretierst und deine Website entsprechend optimierst.
Bevor ich dir aber zeige, wie du die einzelnen Fehlermeldungen interpretierst und die Fehler behebst, möchte ich erst noch einmal darauf eingehen, wie du Google PageSpeed Insights richtig nutzt. Denn wir haben schon erlebt, dass manche stark auf ihren PageSpeed Score fixiert waren, ohne dabei die Ladezeit ihrer Website im Auge zu haben.
Wenn dich dieser Abschnitt nicht interessiert, überspringe ihn einfach und lerne direkt, wie du die Fehlermeldung „CSS komprimieren“ behebst.
Google PageSpeed Fehlermeldungen sind nicht immer richtig und wichtig
Du solltest dich niemals ausschließlich auf die Ergebnisse beziehungsweise Fehlermeldungen von Google PageSpeed Insights verlassen. Denn das Google Tool misst den wichtigsten Kennwert deiner Website eben genau nicht: die Seitenladezeit. Um diese richtig zu messen, empfehle ich Webpagetest.org.
Nur, wenn du bei der Optimierung deiner Website von Anfang an die Seitenladezeit im Auge hast, kannst du sinnvolle Aussagen über den Erfolg der Optimierung treffen. Denn das Ziel einer jeden Optimierung sollte immer ein verbessertes Nutzererlebnis sein. Im Fall der Performanceoptimierung ist das natürlich die Seitenladezeit und die gefühlte Seitenladezeit.
MERKE!
Miss immer zuerst die Seitenladezeit, bevor du die Performance deiner Website optimierst. Nur so kannst du einschätzen, wie erfolgreich die Optimierung war.
Für das Nutzererlebnis sind eine schnellere Seitenladezeit und geringere Seitengröße immer von Vorteil. Die Geduld und Aufmerksamkeitsspanne der Menschen nimmt immer weiter ab (wie diese Studie von Microsoft zeigt) – das ist vor allem für den E-Commerce entscheidend – und immer mehr Traffic kommt über Mobilgeräte. Schon 2016 haben 56 Prozent der Deutschen das Internet regelmäßig über Smartphones oder Tablets aufgerufen. Hier sind Verbindungsgeschwindigkeiten und Datenvolumina nicht immer unbegrenzt. Schlanke, schnelle Websites sind daher angebracht.
Google PageSpeed gibt aber lediglich Hinweise auf Optimierungspotenziale deiner Website und erlaubt nur wenige Rückschlüsse auf das Nutzererlebnis. Die geringe Aussagekraft der Google PageSpeed Fehlermeldungen wird dadurch verstärkt, dass sich das Tool in bestimmten Bereichen nicht oder nur unter erheblichem Mehraufwand ruhigstellen lässt.
So wird beispielsweise der Hinweis auf Browser Caching immer dann auftauchen, wenn externe Ressourcen – auch Google-eigene Dienste – eingebunden werden. Doch können diese Ressourcen gar nicht vom Browser Caching deiner Website abgedeckt werden. Die Fehlermeldung hat also keinerlei Relevanz für das Nutzererlebnis deiner Website, sondern wird durch die Logik des Tools selbst produziert. Im schlimmsten Fall wird die Meldung aber so interpretiert, als sei gar kein Browser Caching aktiv.
Richte dich also nicht primär nach der Google Benotung, sondern nach der Ladezeit. Diese ist die einzige wirklich wichtige Größe.
Aber was ist mit meinem Google Ranking?
Am Beispiel der Meldung mit dem fehlenden Browser Caching wird deutlich, warum du dich nicht von einem vermeintlich schlechten PageSpeed Ergebnis verunsichern lassen solltest.
Hast du auf deiner Website beispielsweise Google Maps oder Google Analytics eingebunden, dann werden diese die folgende Fehlermeldung hervorrufen:
Gleiches bei anderen Diensten von Drittanbietern. Beispielsweise unserem Support Chat.
Jedes Mal, wenn wir daher unsere Website bei PageSpeed Insights testen, wird dieser Punkt angekreidet. Das heißt wir wissen, dass dieser Faktor unsere Ergebnisse immer negativ verzerrt und ignorieren ihn daher einfach.
Für die SEO deiner Website bedeutet das: Auch für das Ranking bei Google sind die Ladezeit und das Nutzererlebnis wesentlich wichtiger, als die konkrete PageSpeed Wertung.
Denn wenn du die Ladezeit deiner Website optimierst, wirst du automatisch viele der für Google wichtigen Bereiche bearbeiten. Eine Verbesserung der Ladezeit und des Google PageSpeed Scores hängen also in gewisser Weise zusammen.
Meiner Meinung nach solltest du dich aber nicht in der Jagd nach einer 100er Wertung verlieren.
Jetzt aber zu den Optimierungsschritten!
Fehlermeldung 1: CSS komprimieren
Unserer Erfahrung nach ist dies eine der abschreckensten Fehlermeldung von Google PageSpeed Insights.
Bedeutung: Diese Fehlermeldung zeigt an, dass die CSS Dateien deiner Website noch komprimiert werden können (oder im Fall oben, dass dies bereits erfolgreich getan wurde). Bei einer solchen Verkleinerung wird die Zeichenanzahl in den Dokumenten verringert. So schrumpft die Dateigröße. Kommentare, Leerzeichen und Formatierung werden beispielsweise gelöscht.
Umsetzung: Auch wenn dieser Hinweis abschreckend wirkt, die Umsetzung ist denkbar einfach. Für diesen Fall gibt es prinzipiell zwei Lösungsmöglichkeiten: Wenn du selbst fit in CSS bist, kannst du händisch die Zahl der CSS Dateien reduzieren und bei deren Erstellung eine Kurzschreibweise verwenden. Zudem kannst du die CSS Dateien über Onlinetools, wie den CSS Minifier, eigenhändig verkleinern.
Natürlich gibt es aber auch die komfortable Lösung mittels CSS Minifizierungsplugins in WordPress. Einige Plugins machen direkt einen Rundumschlag und können nicht nur CSS, sondern auch JavaScript und HTML komprimieren und optimieren.
Weiterführende Infos
Eine ausführliche Erklärung, auf welche Arten du in WordPress HTML, CSS und JavaScript reduzieren kannst, findest du in diesem Artikel.
Mit HTTP/2 macht ein Zusammenfassen von CSS nicht zwingend Sinn
Die eben genannten Minify Plugins sind weit verbreitet. Denn sie sind komfortabel und übernehmen die Komprimierung und die Zusammenfassung von CSS (und noch viel mehr) vollautomatisch. Das Zusammenfassen von CSS Dateien hat bis vor Kurzem auch noch sehr viel Sinn gemacht. Mittlerweile ist das anders: Denn seit es den HTTP/2 Standard gibt, sind Browser in der Lage, mehrere Dateien gleichzeitig vom Webserver zu laden.
Das heißt, dass die Daten nicht mehr zwingend zusammengefasst werden müssen, da mit HTTP/2 mehrere Datenpakete gleichzeitig ausgetauscht werden können. HTTP/2 muss z.B. vom Hoster eingerichtet worden sein und kann nur mit SSL Zertifikat genutzt werden.
Bevor du dich also für ein Plugin mit mehreren Dutzend Funktionen und Konfigurationsmöglichkeiten entscheidest, überlege gut, ob du dieses überhaupt brauchst. Vor allem dann, wenn du dir zutraust, CSS eigenhändig zu optimieren.
Denn ein zusätzliches Plugin kann deine Website unter Umständen langsamer machen. Vor allem, wenn die übrigen Funktionen der Alleskönner-Plugins nicht ihr volles Potenzial entfalten können.
Fehlermeldung 2: Ressourcen beseitigen, die das Rendering blockieren
Auch diese Meldung treibt vielen die Schweißperlen auf die Stirn, denn sie ist nicht ganz so leicht umzusetzen und zudem einer von Google PageSpeeds ewigen Kritikpunkten.
Bedeutung: Eine Website wird in einer bestimmten Reihenfolge aufgebaut. Diese Ladereihenfolge kann optimiert werden. PageSpeed bemängelt fast immer, dass CSS Dateien diese optimale Ladereihenfolge blockieren. Und zwar auch bei bereits sehr gut optimierten Websites (wie der Fall Caspar Hübinger zeigt). Dennoch kann der Hinweis sehr wertvoll für die Ladezeitoptimierung sein. Im Prinzip sagt dir dieser Hinweis, dass JavaScript oder CSS Code, der wichtig für ein zu ladendes Element ist – beispielsweise eine Hintergrundfarbe – zum Zeitpunkt des Ladens des Elements noch nicht verfügbar ist. Dadurch wird es solange nicht angezeigt, bis der entsprechende CSS Befehl geladen wurde. Das erhöht zwar nicht die Ladezeit deiner Website, beeinflusst aber vor allem das Nutzererlebnis, da die Website gefühlt länger lädt.
Umsetzung: Eine gängige Lösung ist die Umsetzung einer Daumenregel: CSS in den Header. Das bedeutet, dass du CSS Code vom Hauptteil des HTML Dokuments, dem „body“, an den Anfang des Dokuments, den „head“, verschiebst und dort als „style“ einbindest.
An diesem Beispiel wird deutlich, was ich meine. Der Codeschnipsel unten definiert eine Hintergrundfarbe für einen Blog. Das „style“ Element wird im „head“ des HTML Dokuments geladen. So lädt der Seitenhintergrund nicht erst am Ende des Dokuments und erzeugt einen unschönen Farbsprung oder blockiert gar das Rendering.
<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>
Diese Optimierungsmaßnahme kannst du wiederum auf zwei Weisen umsetzen: Du kannst selbst den Code anfassen und die CSS Codes in den Header verschieben, oder du kannst ein Plugin die Arbeit machen lassen.
Das Plugin Autoptimize etwa setzt zum Rundumschlag an: Du wählst hier die Optionen für alle nicht von dem Vorgang ausgeschlossenen CSS Dateien.
Der Auszug aus den Optionen des Plugins zeigt: Auch die Pluginvariante ist nicht ohne ein grundlegendes Verständnis des Vorgangs umsetzbar. Auch in die Plugins musst du dich also einarbeiten.
„*“ zeigt erforderliche Felder an
Fehlermeldung 3: Bilder effizient codieren
Auch an diesem Punkt meckert PageSpeed Insights häufig herum. Allerdings ist dieser Fall fast immer schnell und einfach umsetzbar und bringt meist auch handfeste Ladezeitvorteile.
Bedeutung: Viele unterschätzen die Rolle der Bildgröße für die Ladezeit ihrer Website. Dabei sind Bilder sehr häufig eine der größten Ladezeitbremsen. Auch wenn bei einzelnen Bildern nur geringe Datenmengen eingespart werden, kann sich das eingesparte Gesamtvolumen auf eine stattliche Datenmenge addieren.
Denn ein Bild ist selten nur ein Bild. WordPress generiert beim Upload automatisch mehrere Thumbnails des Bildes. Wenn du also auf deiner Startseite nicht die Originale verwendest, sondern kleinere Versionen davon, also Thumbnails bzw. Featured Images, dann sollten diese natürlich auch optimiert werden. Aus einem Bild werden so schnell mehrere Dateien, die auch eine multiple Datenlast mit sich bringen.
Umsetzung: Prinzipiell hast du zwei Möglichkeiten, um deine Bilder zu optimieren. Entweder optimierst du die Bilder vor dem Upload oder aber nach bzw. während des Uploads. Ersteres kannst du über Online- oder Offlinetools machen, letzteres machst du über entsprechende WordPress Bildoptimierungsplugins.
Wenn du die Komprimierung sinnvoll in deinen Arbeitsablauf integrieren kannst, macht es durchaus Sinn, die Bilder vor dem Upload zu optimieren. Hierfür gibt es Onlinetools, wie Kraken.io. Oder du reduzierst die Qualität und damit die Dateigröße deiner Bilder offline, zum Beispiel direkt in Photoshop. So sparst du dir das extra Plugin und hältst deine Website schlank.
Die komfortablere Lösung ist natürlich auch hier ein Plugin. Plugins wie Optimus oder Smush optimieren nämlich nicht nur das Hauptbild, sondern auch alle Abwandlungen davon. Zudem ist Smush auch in der Lage, alle deine bestehenden Bilder nachträglich zu optimieren.
Die Plugins arbeiten dabei unter anderem mit einer sogenannten “lossless compression”. Das heißt, dass die Dateigröße der Bilder zwar verkleinert wird, deren sichtbare Qualität aber nicht abnimmt.
Fehlermeldung 4: Textkomprimierung aktivieren
Diese Fehlermeldung von Google PageSpeed ist sehr schnell zu beheben und kann die Ladezeit deiner Website deutlich verringern.
Bedeutung: Bilder und CSS deiner Website hast du jetzt schon so weit wie möglich verkleinert. Gut so! Doch damit ist es noch nicht getan. Denn jetzt kannst du noch einen weiteren Kompressionsmechanismus nutzen. Du kennst den Vorgang wahrscheinlich vom Download großer Datenpakete: Diese hast du meist in gezippter, also komprimierter Form vorliegen. Das macht die Daten beim Download kleiner und den Download damit schneller. Allerdings müssen die Datenpakete nach dem Download noch entpackt werden. Genau dasselbe passiert beim Seitenaufbau: Der Webserver liefert die Datenpakete komprimiert aus, der Webserver entpackt sie. Das macht die Datenübertragung schneller und verringert die Seitenladezeit.
Umsetzung: Entweder ist die Datenkomprimierung schon serverseitig eingestellt, oder du musst sie selbst aktivieren. Bei Raidboxes musst du dich um nichts mehr kümmern. Denn wir haben standardmäßig die besonders starke Brotli Komprimierung aktiv.
Mit dem folgenden Eintrag in deiner .htaccess kannst du die sogenannte GZIP Komprimierung aber auch händisch aktivieren. Vorausgesetzt, du hast einen Apache Webserver.
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
Fehlermeldung 5: Statische Inhalte mit einer effizienten Cache Richtlinie bereitstellen
Meiner Meinung nach ist der Hinweis auf Browser Caching der mit Abstand nervigste bei Google PageSpeed Insights. Denn das Browser Caching kannst du nur für eigene Ressourcen einrichten. Für externe Ressourcen ist Browser Caching nicht möglich.
Bedeutung: Browser Caching bedeutet, dass sich der Browser eine statische Version deiner Website speichert und bei einem wiederholten Besuch nicht mehr beim Webserver anfragen muss, sondern die Website schon fertig geladen ist.
Umsetzung: Entweder hat dein Hoster Browser Caching schon serverseitig aktiviert, oder aber du kannst es durch eine Manipulation der .htaccess Datei einstellen (nicht vergessen: Diese Einstellung klappt nur auf Apache Webservern). Der Beispielcode unten setzt den Browsercache zum Beispiel auf einen Monat, d.h. die statische Version deiner Website wird einen Monat lang im Browser des Besuchers gespeichert.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>
Auch hier gilt: Bist du Raidboxes Kunde, dann ist Browser Caching bereits standardmäßig aktiv.
My 2 Cents: Ohne Cache ist alles nichts
Gut, jetzt hast du die Bilder deiner Website optimiert, CSS reduziert, komprimiert und in die richtige Reihenfolge gebracht und den Browser deiner Besucher dazu gebracht, die Website zu cachen. All diese Maßnahmen verkürzen die Ladezeit deiner Website.
Bedeutung: Ohne einen ordentlichen Cache vergibst du allerdings sehr viel von diesem Potenzial. Caching ist und bleibt der mit Abstand wichtigste Performancefaktor. Ein Cache speichert die Inhalte deiner WordPress Website zwischen und sorgt dafür, dass nicht jedes Mal die gesamte Website neu geladen werden muss. Stattdessen wird eine statische, also bereits fertig gerenderte Variante deiner Website aus einem Zwischenspeicher ausgeliefert. So werden insbesondere das langsame PHP und die Datenbank umgangen.
Umsetzung: Auch hier gilt wieder: Entweder hat dein Hoster schon einen serverseitigen Cache eingerichtet, oder du nutzt ein Caching Plugin. Hier gibt es einige sehr mächtige Plugins, die große Teile deiner Website zwischenspeichern und zu einer deutlichen Ladezeitverkürzung bei wiederkehrenden Websitebesuchen führen.
Die hohe Potenz der Caching Plugins ist gleichzeitig ihre größte Schwäche. Es kann durchaus sein, dass ein Caching Plugin deine Website für Erstbesucher zunächst langsamer macht. Denn je komplizierter dein Blog oder deine Website ist, desto komplizierter und umfangreicher muss auch die Cache Engine sein, die deinen Blog zwischenspeichert. Das ist insbesondere für Shops relevant.
Wenn du eine vergleichsweise einfache Website betreibst, dann können minimalistische Lösungen durchaus besser sein als Caching Alleskönner. Eines dieser schlanken Plugins ist beispielsweise Cache Enabler.
Du solltest beachten, dass Caching Plugins meist auch das Reduzieren und Zusammenfassen von CSS oder JavaScript übernehmen. Daher solltest du einmal überprüfen, ob dein Caching Plugin nicht schon die Plugins zur CSS Optimierung überflüssig macht.
Nutzt du serverseitiges Caching, empfiehlt es sich, die Caching Funktionen von Plugins wie Autoptimize zu deaktivieren, bzw. einmal zu testen, ob diese überhaupt einen weiteren Performancevorteil bringen.
Fazit: Mit wenigen Plugins viel bewegen
Du hast es während des Lesens schon bemerkt: Für die Optimierung von CSS, Bildern und der Optimierung der Ladereihenfolge gibt es Plugins, die dir viel Arbeit abnehmen. Aber eben nicht die gesamte Arbeit. Auch Caching Plugins liefern schnell einen merklichen Effekt, sind aber teils sehr umfangreich und bieten viele Konfigurationsmöglichkeiten und teils redundante Funktionen.
Befasse dich auf jeden Fall näher mit den Plugins, die du nutzt. Nur wenn du weißt, was geschieht wenn du bestimmte Funktionen nutzt, kannst du auch sinnvoll optimieren. Ein Überladen der Website mit Optimierungsplugins bringt tendenziell wenig.
Und du solltest bei der Optimierung darauf achten, deine Erfolge richtig zu messen. Egal, ob du von Hand oder via Plugin optimierst. Nutze PageSpeed Insights als ersten Orientierungspunkt, um die Schwachstellen deiner Website zu identifizieren. Miss dann einmal die Ladezeit deiner Website vor der Optimierung. Erst nach dieser Erfassung der Ausgangslage macht es wirklich Sinn, deine Website Schritt für Schritt zu optimieren. Denn nur dann, wenn du die Ladezeit vor der Optimierung und nach jedem Optimierungsschritt kennst, kannst du auch bestimmen, was die einzelnen Optimierungsmaßnahmen gebracht haben.
Super Artikel. Bei Pagespeed kommt die Seite auf 19 Punkte. Da kann man vllt. mal die eigenen Tipps beherzigen. Auf SEO hatte es scheinbar keinen Einfluss, denn es war ja eins der ersten Ergebnisse in meiner Suche 😉
Hi Martin,
du hast total Recht, dass es auf unserer Website noch einiges an Optimierungsbedarf gibt. Durch unseren Website Relaunch und unser Mehrsprachigkeitsplugin haben wir leider einige 404er und andere Errors, die Google zurecht schlecht bewertet. Wir sind aber dran 😁
VG aus Münster
Leefke
Es sollte erwähnt werden, dass der 100er Wert überhauptkeinen Einfluss auf Rankings hat, sondern die „echten Nutzerdaten“, welche wiederum nur für URLs angezeigt werden, die +/- 1000 Besucher pro Monate haben (vager Erfahrungswert, der vom Anteil der Chrome Nutzer abhängt, denen Goolge ihre Daten stiebitzt). Der Zahlenwert ist lediglich eine Momentaufnahme von Lighthouse und auch die Empfehlungen basieren darauf. Verbesserungsvorschläge werden auch bei Seiten angezeigt, die 100 Punkte haben. Entscheidend ob man diese ignoriert sollte sein, ob einer der Core Web Vitals Werte dadurch gefährdet ist, denn sobald bei den echten Nutzerdaten ein Wert verfehlt wird, kommt es zu negativen Rankingeffekten (lt. einer Messung von Sistrix 4% schlechter wenn NUR EIN Wert verfehlt wird. Ich finde die von Google festgelegten Core Web Vitals Kriterien schon nachvollziehbar, wobei sie natürlich eine ganz grobe und lückenhafte Beurteilung der UX ermöglichen. Diese einfach zu ignorieren und sich nur auf den Pageload Event zu konzentrieren kann schlimmstenfalls zu negativen Rankingeffekten führen. Das eigentliche wichtigste Messtool für Webmaster ist die Search-Console. Das wird schwarz auf weiß angezeigt, wo es bei echten Nutzern Probleme gibt, welche Google dann bestraft.
Dankeschön, zu vielen Dank, ich suche die Cache Richtlinie für conact facebook net, Dieser Beitrag wurde mir von G. zu oberst angeboten. So wirklich schlau bin ich jetzt nicht aus dem Bruch worden.Wundere mich, wie schlecht Autoptimize abschneidet. Ich nutze es seit über 5 Jahren u. bin keinesfalls unzufrieden damit. Die Einstellung ist etwas zeitaufwendig. Jede einzelne Einstellung muss auf ihre Tauglichkeit überprüft werden, das habe ich mit PageSpeed gemacht. Meine Website erreicht Mobil 98 % Leistung, ohne zusätzliches Cache Plugin.
Frohe Weihnachten
Vielen Dank für den tollen Artikel. Ich muss sagen, ein Artikel, der die Augen öffnet. Ich habe seit einiger Zeit Probleme mit dem Problem beim Laden von Seiten. Aber nachdem ich das gelesen habe, bin ich mir ziemlich sicher, dass ich dieses Problem lösen kann. Danke für das Teilen.
Netter Artikel. Bestätigt mal wieder meine Einstellung, dass man auf Tante Gugl gern mal verzichten kann, wenn da nur nicht immer wieder hartnäckige Kunden wären die da ganz wild drauf sind … :/
Btw: Pingdom bspw. ‚übersieht‘ regelmässig euere Brotli-Komprimierung und moniert dass man doch bitte komprimieren möge.
Vielen Dank für den Artikel! Seit langer Zeit „kämpfe“ ich mit dem Problem. Die Desktop-Version der Startseite ist bei 100% – was ganz gut ist, mobile Version war Mal bei 95-96%, jetzt wieder auf 76% abgerutscht! „Und täglich grüßt das Murmeltier!“ 😉
Danke, der Beitrag hat mir wirklich geholfen!
Das freut uns, Tabea 🙂
LG aus Münster
Hallo Jan,
toller Beitrag erstmal. Ich würd aber gerne mal wissen , ob man beim komprimieren der CSS nicht irgendwelche Strukuren vom CMS zerstören kann, vor allem wenn fast alle CSS-Dateien von einem CMS erstellt wurden.
Hallo AVS,
zerstören = nein,
die Seitenansicht kurzzeitig zerschießen = kann vorkommen.
Denn kann immer mal passieren, dass die Komprimierung von Dateien temporär dazu führt, dass Seiten nicht korrekt dargestellt werden, jedoch wird dies dann mit der Deaktivierung des jeweiligen Komprimierungsplugins wieder rückgängig gemacht und die Seite läuft wie vorher (Browser/Servercache löschen nicht vergessen ;))
Die minifizierten .css/.js Dateien ersetzen nicht die Originaldateien des Themes/Plugins, sondern generieren neue und ersetzen die aufzurufenden Pfade dieser Dateien.
Zur Sicherheit würde ich immer ein Backup anlegen oder im Staging Modus arbeiten.
LG aus Münster
Hallo Jan, vielen Dank für die Tipps. Die beiden Tools kannte ich noch nicht. Habe meine Webseite jetzt mal bei gtmertrix.com durchlaufen lassen und bekomme da als Ergebnis TOp werte für emien Webseite. Zudem habe ich noch ein paar Verbesserungsmöglichkeiten aufgezeigt bekommen. Alos das GTMetrix Tool gefällt mir gerade ausserordentlich gut 😉
Beste Gruesse
Markus
PS: Kann man über euch auch eine Domain+Hostingpaket bestellen? Ich hätte da nämlich ein neues Projekt im Kopf, dass ich nicht unbedingt beim selben Hoster meiner jetzigen Web-WordPress-Projekte laufen lassen möchte.
Hallo, nach langem Suchen auf diesen Beitrag hier gestossen, nachdem ich festgestellt habe, dass mein PageSpeed nicht berauschend war. Habe jetzt die ersten Tipps aus dem Artikel hier umgesetzt und siehe da: Massive Steigerung beim PageSpeed. Muss jetzt noch ein paar Feinheiten erledigen und dann bin ich im „Grünen“ Bereich. Super Artikel und extrem hilfreich – auch für technische Rookies wie mich. Vielen Dank und beste Gruesse, Markus
Hi Markus,
das freut auf jeden Fall sehr zu hören 🙂 Sehr gut auch, dass die Tipps direkt bei der Verbesserung des PageSpeed Scores geholfen haben. Für den nächsten Optimierungsschritt kann ich dann nur empfehlen auch eine echte Ladezeitmessung zu nutzen, wie Pingdom oder Webpagetest. Pingdom wäre die einfachere Variante, also leichter zu bedienen, die sich allerdings auf einige basale Werte bei der Analyse beschränkt. Mit Webpagetest hast du ein sehr mächtiges Tool an der Hand, das zwar etwas hakelig zu bedienen ist, dir aber sehr viele nützliche Kennwerte zu deiner Seite liefert.
Mehr über Pingdom kannst du z.B. hier lesen: https://raidboxes.de/blog/gefuehlte-webseiten-geschwindigkeit/
Und auch zu Webpagetest haben wir ein paar Artikel parat: https://raidboxes.de/blog/webpagetest-das-testmonster-zaehmen/
Viele Grüße aus Münster und viel Erfolg noch bei der Optimierung!