Bei Kinsta arbeiten wir mit vielen Agenturen und Freelancern zusammen, die täglich mit Kunden zu tun haben. Es ist nicht ungewöhnlich, dass Kunden oder sogar ein CEO eines Unternehmens ihre Agentur oder WordPress-Entwickler bitten, ihre Google PageSpeed Insights-Punkte zu erhöhen. Google leistet gute Arbeit bei der Vermarktung dieses Tools an die Verbraucher, und oft verstehen sie nicht immer, dass eine nicht perfekte Bewertung nicht das Ende der Welt ist. Für die Verantwortlichen der Website kann dies manchmal definitiv frustrierend sein.

Heute möchten wir mit dir einige Tipps und Strategien teilen, die dir helfen können, ein 100/100 in Google PageSpeed Insights mit deiner WordPress-Seite zu erreichen. Oder bringen dich zumindest näher als vorher. 😉

Wie wichtig ist Google PageSpeed Insights?

Google PageSpeed Insights ist ein von Google entwickeltes Web-Performance-Tool, das dir hilft, Wege zu finden, deine Website schneller und mobiler zu machen, indem es Empfehlungen zu bewährten Webpraktiken befolgt.

Ab 2018 werden die Geschwindigkeitswerte nun aus Lighthouse berechnet, ihrem Open-Source-Tool zur Verbesserung der Qualität von Webseiten. Lighthouse kann tatsächlich alle möglichen Dinge überprüfen, wie Leistung, Zugänglichkeit, progressive Webanwendungen und mehr.

Google PageSpeed Insights tool

Google PageSpeed Insights tool

Eine sehr wichtige Sache, an die man sich jedoch erinnern sollte, ist, dass man nicht immer davon besessen sein sollte, 100/100 zu erreichen. Dies ist möglicherweise nicht in allen Szenarien möglich, je nachdem, wie deine WordPress-Seite eingerichtet ist. Mit einer Menge von Mehrzweckthemes, E-Commerce und Mitgliedschaften Websites, wirst du einfach eine fast unmögliche Zeit haben, um eine perfekte Punktzahl zu erreichen. Was völlig in Ordnung ist.

Wir empfehlen, die wahre Geschwindigkeit deiner Website zu betrachten, mehr als die Ergebnisse. Ergebnisse mit Tools wie Pingdom, GTMetrix und Google PageSpeed Insights können dich manchmal in die Irre führen. Was wirklich zählt, ist, dass deine Website schnell geladen wird und dass die wahrgenommene Leistung auch den Anforderungen entspricht. Die wahrgenommene Leistung ist die Geschwindigkeit, mit der sich deine Website anfühlt, während sie für die Benutzer geladen wird.

Wenn du wirklich tief in die Leistungsoptimierung eintauchen möchtest, schau dir unseren ausführlichen 25.000+ Leitfaden an, wie du deine WordPress-Seite beschleunigen kannst.

Nutzt Google PageSpeed Insights?

Nutzt Google PageSpeed Insights, wenn es um SEO und den Page Speed Ranking Faktor oder reine Antwortgeschwindigkeit geht? Dies war eine interessante Frage, die von einer SEO bei der FDP-Fraktion Leeds aufgeworfen und am Search Engine Roundtable diskutiert wurde. Gary Illyes, Webmaster Trends Analyst bei Google, antwortete mit den Worten: „I’ll go with both“

Dies ist zum Teil auf die Tatsache zurückzuführen, dass in den meisten Fällen, wenn du eine langsame Website hast, du höchstwahrscheinlich eine Menge Warnungen in Google PageSpeed Insights haben wirst. Viele der Empfehlungen gehen Hand in Hand mit dem Verhältnis zu deinen reinen Reaktionszeiten. Sie korrelieren nicht immer zu 100%, aber was Gary am ehesten sagt, ist, dass, wenn du eine langsame Website hast, es deine Platzierungen beeinflussen wird.

Auch Google ging 2018 einen Schritt weiter. Bisher wurden die Rankings der Seitengeschwindigkeit daran gemessen, wie schnell deine Website auf einen Desktop geladen wurde. Seit dem 09. Juli 2018 ist die Seitengeschwindigkeit jedoch ein Rankingfaktor für die mobile Suche. Das bedeutet, dass die Optimierung deiner WordPress für das Handy wichtiger denn je ist!

Die Bewertung 100/100 auf beiden, Shared Hosting und Kinsta.

Wir dachten, es wäre lustig, das neue Twenty Seventeen-Theme in WordPress 4.7 zu erkunden. Dies ist das erste Standard-WordPress-Theme, das sich an Unternehmen richtet, anstatt an einen typischen Blog, was spannend ist! Deshalb werden wir dir heute zeigen, wie du das perfekte 100/100 auf Desktop und Mobile erreichen kannst. Wir haben gemeinsame Tools und Dienste installiert, die viele WordPress-Sites nutzen, wie Google Analytics, Akismet, Yoast SEO, etc. Wir haben Tests sowohl auf einem kostengünstigen Shared Host als auch auf Kinsta durchgeführt, um dir zu zeigen, wie viel Unterschied es geben kann, wenn es um ein fein abgestimmtes Google Cloud Hosting im Vergleich zu einer Shared Hosting Umgebung geht.

Dies ist zwar eine kleine Website, aber es ist eine gute Grundlage, um zumindest ein wenig darüber zu verstehen, wie Google PageSpeed Insights funktioniert. Wenn du daran interessiert bist, einige Optimierungen für ein größeres Mehrzwecktheme zu sehen, schau dir unseren Beitrag zur Optimierung des Themes Total WordPress an.

Ein 100er Score in Google PageSpeed Insights

Ein 100er Score in Google PageSpeed Insights

100/100 in Google PageSpeed Insights mit Shared Hosts

Unsere erste Testseite, wir haben WordPress 4.7 mit dem Twenty Seventeen Theme, das auf einem beliebten Low-Budget Shared Host (Apache) läuft. SSL ist konfiguriert und die folgenden Plugins sind installiert.

  • Yoast SEO
  • Akismet

Wir haben auch Google Analytics, das innerhalb des <body> unserer header.php Datei läuft. Die einzige Änderung, die wir vorgenommen haben, ist, dass wir dem Standard-Dummy-Blogbeitrag „Hello world!“ ein Featured Image hinzugefügt haben. Wir betreiben unsere Testseite über Google PageSpeed Insights und sofort nach dem Auspacken erhalten wir einen 69/100 Desktop Score und einen 58/100 Mobile Score. Wir haben also definitiv einige Verbesserungen, die hier vorgenommen werden sollten. Lasst uns durch jeden einzelnen von ihnen graben, um zu sehen, wie wir sie reparieren können.

shared hosting google pagespeed insights

Shared hosting score on Google PageSpeed Insights

Komprimierung aktivieren

Wir werden zuerst mit dem Desktop beginnen, da viele der Korrekturen auch für das Handy gelten. Die allererste Empfehlung von Google PageSpeed Insights, die wir korrigieren müssen, ist die Warnung Komprimierung aktivieren.

Komprimierung aktivieren Warnung

Komprimierung aktivieren Warnung

Laut Google müssen wir, um dies zu beheben, die Gzip-Kompression aktivieren. Leider hat der Shared Host dies nicht automatisch bereits auf seinen Servern aktiviert, also müssen wir es manuell tun.

Alle modernen Browser unterstützen und verarbeiten automatisch die Gzip-Komprimierung für alle HTTP-Anfragen. Die Aktivierung der Gzip-Komprimierung kann die Größe der übertragenen Antwort um bis zu 90% reduzieren, was die Zeit zum Herunterladen der Ressource erheblich verkürzen, den Datennutzen für den Client reduzieren und die Zeit bis zur ersten Darstellung deiner Seiten verkürzen kann.

Es gibt ein paar Möglichkeiten, wie du das machen kannst. Die erste und eine der einfachsten ist die Verwendung eines Caching-Plugins, das die Aktivierung von Gzip unterstützt. WP Rocket fügt zum Beispiel Gzip-Komprimierungsregeln in deine .htaccess-Datei automatisch mit dem Modul mod_deflate ein. W3 Total Cache hat auch eine Möglichkeit, dies für dich unter dem Abschnitt Performance zu aktivieren.

Der zweite Weg, die Gzip-Komprimierung zu aktivieren, besteht darin, deine .htaccess-Datei zu bearbeiten. Die meisten Shared Hosts verwenden Apache, in dem du einfach den folgenden Code zu deiner .htaccess-Datei hinzufügen kannst. Du kannst deine .htaccess-Datei im Stammverzeichnis deiner WordPress-Seite per FTP finden.

<IfModule mod_deflate.c>
  # 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

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Vergewissere dich, dass du es unterhalb des aktuellen Inhalts deiner .htaccess-Datei hinzufügst. Beispiel unten:

GZIP Komprimierung hinzufügen – Code

GZIP Komprimierung hinzufügen – Code

Wenn du zufällig auf NGINX läufst, füge dies einfach zu deiner nginx.conf-Datei hinzu.

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Ein Tool wie Check Gzip Compression kann dir tatsächlich zeigen, wie meine Bytes gespeichert wurden, indem du die Gzip-Kompression aktivierst. Hier ist ein Beispiel dafür, was wir auf unserem Testgelände gespeichert haben.

Ersparnis nach der GZIP Komprimierung

Ersparnis nach der GZIP Komprimierung

Wenn wir unsere Website wieder durch Google PageSpeed Insights laufen lassen, können wir sehen, dass die Gzip-Kompressionswarnung jetzt weg ist und es hat unseren Desktop-Score von 69/100 auf 80/100 und unseren mobilen Score von 58/100 auf 67/100 erhöht.

PageSpeed Insights Score nach der GZIP Komprimierung

PageSpeed Insights Score nach der GZIP Komprimierung

Bilder optimieren

Die nächste Empfehlung von Google PageSpeed Insights, die wir korrigieren müssen, ist die Warnung Bilder optimieren. Unser Standard-Blogbeitrag „Hello world!“ hat ein Bild, das diesen Fehler verursacht.

Bilder optimieren Warnung

Bilder optimieren Warnung

Dies ist eine sehr wichtige und nützliche Warnung. Laut HTTP-Archiv machten die Bilder ab November 2016 durchschnittlich 65% des Gesamtgewichts einer Webseite aus. Die Optimierung deiner Bilder kann eine der einfachsten Möglichkeiten sein, um Leistungssteigerungen mit deiner WordPress Website zu erzielen.

Es gibt ein paar Möglichkeiten, wie du das in Ordnung bringen kannst. Das erste ist die Verwendung eines Plugins zur Bildoptimierung. Ein Plugin kann tatsächlich durchlaufen und deine gesamte WordPress-Medienbibliothek auf einmal optimieren und auch automatisch optimieren, wenn du sie hochlädst. Wir haben derzeit eine komplette Anleitung, wie du deine WordPress-Bilder optimieren kannst. Nachfolgend findest du ein paar beliebte Plugins zur Bildoptimierung:

Diese Plugins beheben das Problem, oder du kannst sie auch komprimieren, bevor du sie in ein Tool wie Adobe Photoshop, Gimp oder Affinity Photo hochlädst. Unten ist das vorgestellte Bild, das diese Warnung auslöst. Wir können es vorab komprimieren, indem wir es sowohl verkleinern als auch die Qualität verringern. Es ist am besten, deine Bilder so klein wie möglich zu halten. Dieses Image war ursprünglich 2,32 MB groß, nach Down-Scaling und Komprimierung beträgt es nun 99,38 kB. Denke daran, dass es am besten ist, Bilder im Maßstab hochzuladen und sich nicht auf CSS zu verlassen, um die Größe zu ändern. Dies verlangsamt deine Website.

Komprimieren von Bildern mit Affinity Photo

Komprimieren von Bildern mit Affinity Photo

Wenn wir unsere Website wieder durch Google PageSpeed Insights laufen lassen, können wir sehen, dass die Warnung Bilder optimieren jetzt weg ist und es hat unsere Desktop-Score von 80/100 auf 88/100 und unsere mobile Score von 67/100 auf 73/100 erhöht. Wir machen Fortschritte!

PageSpeed Insights nach der Bildkompression

PageSpeed Insights nach der Bildkompression

Eliminiere Render-blocking JavaScript und CSS in Above-the-fold Content

Die nächste Empfehlung von Google PageSpeed Insights, die wir korrigieren müssen, ist die Eliminate render-blocking JavaScript and CSS in above-the-fold content Warnung. Wir haben tatsächlich einen ganzen ausführlichen Beitrag zum Thema Render-Blocking von JavaScript und CSS.

Eliminate render-blocking JavaScript and CSS Warnung

Eliminate render-blocking JavaScript and CSS Warnung

Wenn ein Browser eine Webseite lädt, verhindern JavaScript- und CSS-Ressourcen in der Regel die Anzeige der Webseite, bis sie vom Browser heruntergeladen und verarbeitet werden. Einige Ressourcen müssen heruntergeladen und verarbeitet werden, bevor etwas angezeigt wird. Viele CSS- und JavaScript-Ressourcen sind jedoch bedingt, d.h. sie werden nur in Einzelfällen eingesetzt oder werden einfach nicht benötigt. Um deinen Benutzern ein möglichst schnelles Erlebnis zu bieten, solltest du versuchen, alle Render-Blocking-Ressourcen zu eliminieren, die nicht erforderlich sind, um Inhalte above the fold anzuzeigen.

Was Render-blocking Javascript betrifft, so hat Google drei Empfehlungen:

  • Wenn du nicht viel JavaScript hast, kannst du es inline einbinden, um diese Warnung loszuwerden. Du kannst JavaScript mit einem Plugin wie Autoptimize inline integrieren. Dies gilt jedoch nur für sehr kleine Seiten. Die meisten WordPress-Seiten haben genug JavaScript, wo dies die Seite tatsächlich verlangsamen könnte.
  • Die zweite ist, dein JavaScript asynchron zu laden. Async Javascript lädt die Datei im Wesentlichen während des HTML-Parsings herunter und pausiert den HTML-Parser, um sie auszuführen, wenn er den Download beendet hat.
  • Der dritte ist, dein JavaScript zu verschieben. Das defer-Attribut lädt die Datei auch während des HTML-Parsings herunter, führt sie aber erst aus, wenn das Parsen abgeschlossen ist. Auch Skripte mit diesem Attribut werden in der Reihenfolge ihres Auftretens auf der Seite ausgeführt. Lies mehr über die Unterschiede zwischen Async und Defer.

In unserem Beispiel werden wir unser JavaScript-Laden asynchron durchführen. Um dies zu tun, werden wir ein kostenloses Plugin namens Async JavaScript verwenden. Du kannst es aus dem WordPress-Repository herunterladen oder in deinem WordPress-Dashboard unter „Plugins > Add New“ nach ihm suchen. Zum Zeitpunkt des verfassens dieses Artikels hat es derzeit mehr als 9.000 aktive Installationen mit einer Bewertung von 4,2 von 5 Sternen. Im Wesentlichen fügt das Plugin das Attribut ‚async‘ oder ‚defer‘ zu allen JavaScript hinzu, die von der WordPress-Funktion wp_enqueue_script geladen werden. Der Entwickler hat auch eine Premium-Version zur Verfügung, mit der Sie die Skripte auswählen können, die Sie asynchronisieren oder verschieben möchten.

Async Beispiel

<script src="file1.js" async></script>

Defer Beispiel

<script src="file1.js" defer></script>

Nach der Installation geht man einfach in die Einstellungen und aktiviert Async JavaScript.

async javascript

Async JavaScript

Und für größere Websites kann sich der Skript-Ausschluss als nützlich erweisen. Oder du bekommst die Premium-Version des Plugins. Wir werden es in diesem Beispiel nicht brauchen, aber wenn du eine Website mit viel JavaScript hast, wirst du höchstwahrscheinlich zu Problemen kommen, wenn du einfach alles auf Async oder Defer stellst. In diesem Fall musst du herausfinden, mit welchen du Probleme haben kannst.

async exclusions

Async exclusions

Wenn du dafür kein Plugin verwenden möchtest, gibt es ein paar andere Alternativen. Zum Beispiel das Hinzufügen des folgenden Codes zu deiner functions.php-Datei.

/*function to add async to all scripts*/
function js_async_attr($tag){
 # Add async to all remaining scripts
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Hier sind zwei zusätzliche Beiträge, die das Hinzufügen von Async oder das Verschieben ohne Plugin diskutieren:

Wir lassen unsere Website wieder durch Google PageSpeed Insights laufen und wie du sehen kannst, ist das Render-blocking JavaScript nun behoben und wir haben nur noch die Warnung Optimiere CSS Delivery.

Optimize CSS delivery Warnung

Optimize CSS delivery Warnung

Du kannst sehen, dass das erste CSS, das wir optimieren müssen, unsere Google-Fonts (fonts.googleapis.com) sind. CSS ist standardmäßig render-blocking, was CSS aus Webfonts beinhaltet. Um dies zu beheben, werden wir das kostenlose Disable Google Fonts Plugin installieren. Der Plugin-Autor Milan Dinić hat dies erst kürzlich mit der neuen Twenty Seventeen Libre Franklin Schriftart aktualisiert. Nach der Installation des Plugins werden deine Google-Schriften offensichtlich beschädigt. Du solltest also zu Google Fonts gehen und den Einbettungscode manuell übernehmen. Wir wählen die gleichen Schriftarten aus, die standardmäßig im Design von Twenty Seventeen enthalten sind.

<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">
Google Fonts Embed

Google Fonts Embed

Dann musst du das zu deiner footer.php Datei hinzufügen, direkt vor dem </body> Tag. Hinweis: Wenn du es auf diese Weise machst, erhältst du FOUT, was sie als Flash von ungestyltem Text bezeichnen. Aber es wird auch das Problem des Render-Blocking beseitigen. Du solltest auf deiner eigenen Website entscheiden, ob FOUT für deine Besucher ein akzeptables Benutzererlebnis ist. Du kannst auch den Web Font Loader von Google verwenden.

wordpress footer google font

Google font in WordPress footer

Wir lassen unsere Testseite wieder über Google PageSpeed Insights laufen und jetzt sind wir nach der Warnung CSS Delivery optimieren nur noch mit einer Sache beschäftigt, und das ist die Datei style.css.

optimize css delivery query strings

Optimize CSS Delivery query strings warning

Eine der einfachsten Möglichkeiten, dies zu beheben, ist die Verwendung eines kostenlosen WordPress-Plugins namens Autoptimize, entwickelt von Frank Goossens.

autoptimize plugin

Autoptimize WordPress plugin

Dieses Plugin ist ziemlich kompakt, nur 176 KB, um genau zu sein. Zum jetzigen Zeitpunkt verfügt es über mehr als 400.000 aktive Installationen mit einer Bewertung von 4,5 von 5 Sternen. Das Plugin hilft dir bei der Verkettung deiner Skripte, der Verkleinerung, expires headers und der Möglichkeit, Styles in deine Kopfzeile und Skripte in deine Fußzeile zu verschieben. Dieses Plugin ist voll kompatibel mit dem Async JavaScript Plugin, das bereits früher verwendet wurde.

Nach der Installation des Plugins klickst du in die Einstellungen und wählst „CSS-Code optimieren“. Klicke dann auf die Registerkarte Erweitert und aktiviere zusätzlich „Aggregate inline CSS“ und „Inline All CSS“. Beachte, dass es je nach Theme, in dem du dies tust, möglicherweise nicht empfohlen wird, diese Methode zu verwenden. Für große Websites kann Inliner schlecht sein, in diesem Fall wäre es eigentlich besser, diese spezielle Warnung von Google PageSpeed Insights einfach zu ignorieren. Und denke daran, dass mit HTTP/2 die Verkettung deine Website manchmal sogar verlangsamen kann.

Optimiere den CSS Code

Optimiere den CSS Code

Wir empfehlen auch, die Option HTML-Code optimieren zu aktivieren.

Optimiere den HTML Code

Optimiere den HTML Code

Wenn wir unsere Website wieder durch Google PageSpeed Insights laufen lassen, können wir sehen, dass das Eliminieren von Render-blocking JavaScript und CSS in Above-the-fold Content Warnung jetzt komplett weg ist! Es behebt auch die Minify CSS-Warnung, die weiter unten war und die wir uns noch nicht einmal angekommen war. Wir haben unsere Desktop-Punktzahl von 88/100 auf 92/100 und unsere mobile Punktzahl von 73/100 auf 89/100 erhöht. Wir sind fast da.

PageSpeed Insights nach JS- und CSS-Optimierung

PageSpeed Insights nach JS- und CSS-Optimierung

Leverage Browser Caching

Die nächste Empfehlung von Google PageSpeed Insights, die wir korrigieren müssen, ist die Warnung Leverage Browser Caching. Wir haben tatsächlich einen ganzen ausführlichen Beitrag über das Problem des Leverage Browser-Caching, da es sich um WordPress handelt.

Leverage browser caching Warnung

Leverage browser caching Warnung

Der häufigste Grund, warum die Browser-Caching-Warnung ausgelöst wird, ist, dass dein Webserver nicht über die entsprechenden Header verfügt. Im obigen Screenshot sieht man, dass alle unsere internen Skripte einen Verfallsdatum haben, wenn die Warnung nicht angegeben ist. Wenn es um das Caching geht, gibt es zwei primäre Methoden, die verwendet werden, Cache-Control-Header und Expires-Header. Während der Cache-Control-Header das clientseitige Caching aktiviert und das maximale Alter einer Ressource festlegt, wird der Expires-Header verwendet, um einen bestimmten Zeitpunkt festzulegen, zu dem die Ressource nicht mehr gültig ist.

Du musst nicht unbedingt beide Header hinzufügen, da dies etwas redundant ist. Cache-Control ist neuer und in der Regel die empfohlene Methode, aber einige Web-Performance-Tools wie GTmetrix prüfen immer noch auf Expires-Header. Dies sind alles Beispiele, Du kannst Dateitypen, Ablaufzeiten, etc. nach Deinen Bedürfnissen ändern. Hier sind einige Optionen unten. Wir werden für dieses Tutorial einfach Expires-Header in Apache auf unserem Shared Host hinzufügen.

Hinzufügen von Cache-Control-Headern in Nginx

Du kannst Cache-Control-Header in Nginx hinzufügen, indem du Folgendes zum Serverstandort oder Block deiner Serverkonfiguration hinzufügst.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}

Hinzufügen von Expires Headers in Nginx

Du kannst Expires-Header in Nginx hinzufügen, indem du Folgendes zu deinem Serverblock hinzufügst. In diesem Beispiel siehst du, wie du verschiedene Ablaufzeiten basierend auf Dateitypen festlegen kannst.

location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

Hinzufügen von Cache-Control-Headern in Apache

Du kannst Cache-Control-Header in Apache hinzufügen, indem du Folgendes zu deiner .htaccess-Datei hinzufügst.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>

Hinzufügen von Expires Headers im Apache

Du kannst Expires-Header in Apache hinzufügen, indem du Folgendes zu deiner .htaccess-Datei hinzufügst.

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Erinnerst du dich, dass wir die Gzip-Kompression früher aktiviert haben? Unten siehst du, wie unsere .htaccess-Datei unten nun aussieht, nachdem du auch die Expires-Header hinzugefügt hast. Wir legen es einfach unter den Kompressionsblock.

Expire headers code

Expire headers code

Wir testen unsere Website erneut über Google PageSpeed Insights und jetzt ist nach der Warnung Leverage Browser Caching nur noch eine Sache übrig, und das ist das Skript unseres Google Analytics. Das ist irgendwie ironisch zu sehen, da es sich um Googles eigenes Skript handelt. Das Problem ist, dass sie eine niedrige 2-stündige Cache-Zeit für ihre Assets festlegen, wie im Screenshot unten zu sehen ist. Sie tun dies höchstwahrscheinlich, weil sie, wenn sie aus irgendeinem Grund etwas an ihrem Ende ändern sollten, wollen, dass alle Benutzer die Änderungen so schnell wie möglich erhalten. Es gibt jedoch eine Möglichkeit, dies zu umgehen, und zwar durch das Hosting des Google Analytics-Skripts lokal. Bitte beachten jedoch, dass dies von Google nicht unterstützt wird.

Leverage Browser Caching mit Google Analytics

Leverage Browser Caching mit Google Analytics

Es gibt ein großartiges kostenloses kleines Plugin namens Complete Analytics Optimization Suite, erstellt und entwickelt von Daan van den Bergh, mit dem du Google Analytics lokal auf deiner WordPress Website hosten kannst.

CAOS WordPress Plugin

CAOS WordPress Plugin

Du kannst die Complete Analytics Optimization Suite aus dem WordPress Repository herunterladen oder indem du nach ihr unter „Add New“ Plugins in deinem WordPress Dashboard suchst. Zum Zeitpunkt des Schreibens dieses Plugins hat das Plugin derzeit mehr als 10.000 aktive Installationen mit einer 5 von 5 Sternen Bewertung. Das Plugin ermöglicht es dir, deine Google Analytics JavaScript-Datei (analytics.js) lokal zu hosten und mit wp_cron() zu aktualisieren. Weitere Funktionen sind die Möglichkeit, die IP-Adresse deiner Besucher einfach zu anonymisieren, eine angepasste Bounce-Rate einzustellen und das Skript (Kopf- oder Fußzeile) zu platzieren.

Installiere einfach das Plugin, gib deine Google Analytics Tracking ID ein, und das Plugin fügt den notwendigen Tracking-Code für Google Analytics auf deiner WordPress-Website hinzu, lädt die Datei analytics.js herunter, speichert sie auf deinem Server und aktualisiert sie mit einem geplanten Skript in wp_cron(). Wir empfehlen, es auch so einzustellen, dass es in die Fußzeile geladen wird. Hinweis: Dieses Plugin funktioniert nicht mit anderen Google Analytics WordPress-Plugins.

local google analytics

Local Google Analytics

Wenn wir unsere Website wieder durch Google PageSpeed Insights laufen lassen, können wir sehen, dass die Warnung Leverage Browser Caching jetzt komplett verschwunden ist! Und wir haben unsere Desktop-Punktzahl von 92/100 auf 97/100 und unsere mobile Punktzahl von 89/100 auf 96/100 erhöht. So nah, dass wir es fast schon fühlen können.

PageSpeed Insights nach der Behebung von Leverage Browser-Caching

PageSpeed Insights nach der Behebung von Leverage Browser-Caching

Verkürzung der Server-Antwortzeit

Die nächste Empfehlung von Google PageSpeed Insights, die wir korrigieren müssen, ist die Warnung Serverreaktionszeit reduzieren. Viele Male passiert dies, wenn jemand auf einem langsamen Budget Shared Hosting-Plan ist. Der Server ist nicht schnell und Google weiß es. Um dies zu beheben, müssen wir also eine Art Caching implementieren, um die Dinge zu beschleunigen. Es gibt eine Menge toller Caching-Plugins da draußen. In unserem Beispiel verwenden wir das kostenlose Cache Enabler Plugin des Teams bei KeyCDN.

Cache Enabler WordPress Plugin für den Cache

Cache Enabler WordPress Plugin für den Cache

Zum Zeitpunkt des Schreibens Cache Enabler hat 30.000+ aktive Installationen mit einer Bewertung von 4,6 von 5 Sternen. Es ist ein kompaktes Caching-Plugin für WordPress, das deine Website schneller macht, indem es statische HTML-Dateien und WebP-Unterstützung erzeugt. Es gibt keine Einstellungen zu aktivieren, einfach installieren und schon kann es losgehen. Dieses Plugin ist vollständig kompatibel mit den früher verwendeten Plugins Async JavaScript und Autoptimize. Wenn du noch mehr Geschwindigkeit willst, empfehlen wir dir jedoch, auch das erweiterte Snippet hinzuzufügen, um PHP zu umgehen.

Wenn wir unsere Website wieder durch Google PageSpeed Insights laufen lassen, können wir sehen, dass die Reaktionszeit des Servers reduziert ist! Und wir haben unsere Desktop-Punktzahl von 97/100 auf 99/100 und unsere mobile Punktzahl von 96/100 auf 99/100 erhöht. Wir sind dabei, die Ziellinie zu überqueren.

PageSpeed Insights nach dem Response Time Fix

PageSpeed Insights nach dem Response Time Fix

Normalerweise wird die Empfehlung „Server-Antwortzeit verkürzen“ hier bei Kinsta nicht angezeigt. Aber es ist wichtig zu beachten, dass es Dutzende von potenziellen Faktoren gibt, die die Reaktion deines Servers verlangsamen können: einschließlich langsamer Datenbankabfragen von Plugins, Frameworks, Bibliotheken, Ressourcen-CPU-Hunger oder Speicherausfall. Wir verwenden New Relic, um unseren Kunden zu helfen, besser zu bestimmen, woher dies kommen könnte.

JavaScript minimieren

Die letzte Empfehlung von Google PageSpeed Insights, die wir korrigieren müssen, ist die Minify JavaScript-Warnung.

Minify JavaScript Warnung

Minify JavaScript Warnung

Um dies zu beheben, werden wir eigentlich wieder in die Autoptimize Plugin-Einstellungen zurückkehren und einfach die Option JavaScript-Code optimieren aktivieren. Da du jetzt ein Caching-Plugin laufen hast, musst du möglicherweise auch deinen Cache löschen, um die Ergebnisse zu sehen.

JavaScript Code optimieren

JavaScript Code optimieren

Und das ist es! Wir haben nun erfolgreich das WordPress Twenty Seventeen-Theme von 69/100 bis 100/100 auf dem Handy und Desktop auf einem kostengünstigen Shared Host umgesetzt.

100/100 Google PageSpeed Insights Score

100/100 Google PageSpeed Insights Score

Hier sind die Handy-Scores. Wir mussten nichts zusätzliches für das Handy tun. Die Desktop-Version auf 100/100 zu bringen, hat automatisch unsere mobile Version und die Bewertung der Benutzerfreundlichkeit auf 100/100 erhöht.

100/100 Google PageSpeed Einblicke in die mobile Auswertung

100/100 Google PageSpeed Einblicke in die mobile Auswertung

Wir haben auch ein Vorher und Nachher mit Geschwindigkeitstests von Pingdom.

Vor PageSpeed Insights Optimierungen Geschwindigkeitstest

Hier ist ein Geschwindigkeitstest von Pingdom, bevor Optimierungen auf dem Shared Host durchgeführt wurden.

Geschwindigkeitstest vor PageSpeed-Optimierungen

Geschwindigkeitstest vor PageSpeed-Optimierungen

Nach PageSpeed Insights Optimierungen Geschwindigkeitstest

Hier ist ein Geschwindigkeitstest von Pingdom, nachdem Optimierungen auf dem Shared Host durchgeführt wurden.

Geschwindigkeitstest nach PageSpeed-Optimierungen

Geschwindigkeitstest nach PageSpeed-Optimierungen

100/100 in Google PageSpeed Einblicke mit Kinsta

Unsere zweite Test Seite ist genau so konfiguriert wie das erste. Es befindet sich einfach auf einer anderen Domain. Wir haben WordPress 4.7 mit dem Twenty Seventeen Theme auf unseren Kinsta-Servern (NGINX). SSL ist konfiguriert und die folgenden Plugins sind installiert.

  • Yoast SEO
  • Akismet

Wir haben Google Analytics, das innerhalb des <body> unserer header.php Datei läuft. Die einzige Änderung, die wir vorgenommen haben, ist, dass wir dem Standard-Dummy-Blogbeitrag „Hello world!“ ein Featured Image hinzugefügt haben. Wir testen unsere Testseite über Google PageSpeed Insights und sofort nach dem Start erhalten wir einen 73/100 Desktop Score und einen 63/100 Mobile Score. Es ist wichtig zu beachten, dass es im Vergleich zum oben genannten Shared Host Test Site bereits viele Warnungen gibt, die standardmäßig behoben sind, wie z.B.:

  • Komprimierung aktivieren (Kinsta hat Gzip bereits auf allen Servern aktiviert, keine Notwendigkeit der Aktivierung)
  • Verkürzung der Server-Antwortzeit (Kinsta ist bereits sehr schnell, bereits weit innerhalb der akzeptablen Parameter von Google ohne jegliche Optimierungen).
  • Expires Headers (Keine Aktivierung erforderlich, da Kinsta Caching Headers auf Serverebene aktiviert hat)
PageSpeed Insights mit verwaltetem WordPress Host

PageSpeed Insights mit verwaltetem WordPress Host

Bei Kinsta wirst du nur einige der gleichen Empfehlungen befolgen wollen wie bisher:

Es hat weniger als die Hälfte der Zeit gedauert, bis unsere Website bei Kinsta auf 100/100 Punkte kam, weil es einfach weniger Schritte gab.

100/100 PageSpeed Insights mit Kinsta

100/100 PageSpeed Insights mit Kinsta

Hier ist der mobile Score

100/100 PageSpeed Insights mobil mit Kinsta

100/100 PageSpeed Insights mobil mit Kinsta

Wir haben auch ein Vorher und Nachher mit Geschwindigkeitstests von Pingdom.

Vor PageSpeed Insights Optimierungen Geschwindigkeitstest

Hier ist ein Geschwindigkeitstest von Pingdom, bevor irgendwelche Optimierungen an Kinsta vorgenommen wurden. Beachten, dass die nicht optimierte Seite auf Kinsta über 200ms schneller war als der optimierte Shared Host!

Geschwindigkeitstest vor PageSpeed-Optimierungen

Geschwindigkeitstest vor PageSpeed-Optimierungen

Nach PageSpeed Insights Optimierungen Geschwindigkeitstest

Hier ist ein Geschwindigkeitstest von Pingdom, nachdem Optimierungen bei Kinsta durchgeführt wurden.

Geschwindigkeitstest nach PageSpeed-Optimierungen

Geschwindigkeitstest nach PageSpeed-Optimierungen

Weitere Verbesserungen der Seitengeschwindigkeit

Wir optimieren in diesem Tutorial lediglich für Google PageSpeed Insights. Tatsächlich hätten wir mehr von unseren Ladezeiten abziehen können, wenn wir auch folgendes getan hätten:

Und natürlich haben wir viele tolle zusätzliche Tipps in unserem Einsteigerhandbuch zur Geschwindigkeitsoptimierung von Websites.

Zusammenfassung

Der Sinn dieses Tutorials war es, besser zu erklären und zu verstehen, was die Google PageSpeed Insights-Warnungen bedeuten und was du tun kannst, um sie zu beheben. Sobald du diese besser verstehst, kannst du einige dieser Strategien auf deine größeren Webseiten anwenden. Natürlich wirst du bei großen Websites wahrscheinlich nie so perfekt 100/100 Punkte erzielen, was völlig in Ordnung ist! Oder wenn du es tust, wird es etwas Arbeit erfordern. Wir empfehlen einfach, das zu implementieren, was du kannst, und du wirst höchstwahrscheinlich Geschwindigkeitsverbesserungen sehen. Denke daran, dass die Geschwindigkeit deiner Website zusammen mit der wahrgenommenen Leistung das ist, was wirklich zählt. Sei nicht zu sehr besessen von den Ergebnissen.

Es ist auch wichtig, die oben genannten Unterschiede zu beachten, wenn es um Shared Hosting und Kinstas fein abgestimmte WordPress-Umgebung geht. Wir sind nach der Optimierung schneller einsatzbereit als die meisten Shared Hosts. Du solltest dich fragen, wie viel ist deine Zeit wirklich wert? Wenn du einfach nur schnell einsatzbereit sein willst, kann die Managed Hosting-Umgebung von Kinsta das für dich tun.

Wenn ein Kunde dich das nächste Mal bittet, seine Ergebnisse zu verbessern, hast du jetzt einige aktuelle Tipps, wie du das machen kannst. Und wenn wir etwas Wichtiges verpasst haben, lasst es uns einfach unten in den Kommentaren wissen. Bleib dran für größere Fallstudien mit Google PageSpeed Insights, die wir in Zukunft durchführen werden.

1.2K
Mal geteilt