Oder nutzen Sie einfach unseren WordPress Service um Ihre Webseite auf garantiert mehr als 90 Punkte beim Google PageSpeed zu katapultieren.
Die Geschwindigkeit Ihrer Webseite mit verschiedenen Werkzeugen, wie den Google PageSpeed Tester, Webpage Test oder zukünftig auf ONMA Online Marketing GmbH zu testen, ist immer ein gutes Mittel, um die Performance Ihrer Webseite einschätzen zu können. Und obwohl diese Metriken sehr hilfreich sein können, ist es wichtig, die Dateien in Relation zu betrachten. Diese können zwar dazu führen, dass Sie Ihre Webseite nominell optimieren, aber verlieren Sie dabei dennoch nie die subjektiven Vorlieben Ihrer Kunden aus den Augen! Im folgenden Artikel erklären wir von der ONMA Online Marketing GmbH, wie Sie 100 von 100 Punkten bei der Geschwindigkeit Ihrer WordPress-Homepage erreichen können. Bei weiteren Fragen oder Unklarheiten steht Ihnen unsere Agentur gerne beratend zur Seite.Inhaltsverzeichnis
Hier testen Sie Ihren Google PageSpeed. Verrennen Sie sich nicht in den perfekten Score! Anleitung für WordPress und Google PageSpeed Insights. 2- Bilder optimieren.
- Übergeordnete Render-Blocking Ressourcen.
- Der Einfluss des Browser Cachings.
- Google Analytics.
- 5. Komprimierung erlauben und verwenden.
- Reduzieren Sie die Antwortzeit Ihres Servers.
- Query Strings entfernen – zusätzlicher Tipp.
Hier testen Sie Ihren Google PageSpeed
Unabhängig welches CMS Sie für Ihre Webseite verwenden, hier können Sie den Google PageSpeed für Mobile und PC Endgeräte testen. Tragen Sie einfach Ihre Domain ein, drücken Enter und warten ein Auegenblick.Verrennen Sie sich nicht in den perfekten Score!
Viele Menschen bemühen sich, einen perfekten Score im Google PageSpeed Test zu erreichen. Einige tun dies, um ihre Internetseite zu verbessern – andere machen es um die Kundenvorgaben zu erfüllen. Es ist wichtig sich zu fragen, was der Beweggrund für diese Optimierungsmaßnahmen ist. Der ursprüngliche Grund, weshalb Google „PageSpeed Insights“ entwickelt hat, war einen Leitfaden zu kreieren, der Ratschläge erteilt, um die Leistung und somit auch die Webseite an sich zu optimieren. Man sollte sich des Weiteren vor Augen führen, dass es nicht immer und für jeden möglich ist, die perfekten 100 von 100 Punkten zu erreichen.Anleitung für WordPress und Google PageSpeed Insights
Wenn es darum geht, eine WordPress-Seite schneller zu machen, kann es manchmal sehr verzwickt werden. Wir alle wissen, dass WordPress nicht die schnellste Plattform auf dem Markt ist. Die vielen Scripts in den Warteschlangen oder die etlichen Plugins machen das Ganze zu einem wahren Albtraum – vor allem im Vergleich zu alleinstehenden Grundstrukturen. Deshalb haben wir von der ONMA Online Marketing GmbH mit unserer Testdomain einige Experimente gestartet. Wir nutzten dafür einen Standard WordPress Theme: Twenty Fifteen. Nach einigen langen Optimierungsschleifen haben wir einen 100er Score bei PageSpeedInsights erreicht! Der Test beinhaltet einen 100/100 Geschwindigkeitsscore, einen 100/100 Score auf mobilen Geräten und eine 100/100 Desktop-Gesamtwertung.1. Bilder optimieren
Google PageSpeed Insights zeigt uns an, dass wir unsere Bilder optimieren müssen. Um dieses Problem zu beheben, müssen die Bilder gestaucht und komprimiert werden – dürfen dabei aber nicht ihre Bildqualität verlieren. Dies nennt man „lossless compression“ und kann durch geeignete Plugins für die gesamte Webseite auf einmal durchgeführt werden.2. Übergeordnete Render-Blocking Ressourcen
Viele Menschen rennen in die folgenden drei Fehler und blocken damit ihre Render- Ressourcen. Hauptsächlich geht es dabei um den JavaScript/CSS File, Google Fonts und Font Awesome. Fonts sind typische Render-Blocker! Daten Verringern Sie die JavaScript- und CSS-Codes! Zuerst müssen die JavaScript- und CSS-Codes minimiert werden. Dies kann am besten mit einem geeigneten Plugin geschehen. Im Detail wird hier optimiert:- HTML Codes
- JavaScript Codes
- CSS Codes
<link href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" rel="stylesheet">Google Fonts Das dritte Problem, das es zu lösen gilt, sind unsere Google Fonts. Im WorPress Theme Twenty Fifteen ist die Schriftart Noto Serif inkludiert. Als Vorgabe nutzt WP einen Aufhänger, der sich wp_enqueue_scripts nennt und die Schriftart in Ihre Überschriften lädt. Dies führt automatisch dazu, dass die Ergebnisse Ihren Render blocken. Um dem entgegenzuwirken, installieren wie ein gratis Plugin, welches Disable Google Fonts genannt wird. Wenn Sie ein anderes Theme nutzen, kann es leichte Abweichungen geben. Alternativ können Sie auch Ihren Theme- Entwickler um Unterstützung beim Unterbinden der Google Fonts bitten. Jetzt setzen wir unseren Google Font mit dem folgenden Code in unseren footer, genau vor dem</body>tag.
<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>Alternativ könnten Sie Ihren Google Font asynchron hochladen, indem Sie den Google Web Font Loader nutzen. Auch hier muss nur der folgende Code in den footer gesetzt werden:
<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] } }; (function() { var wf = document.createElement('script'); wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script>
3. Der Einfluss des Browser Cachings
Daten Als Nächstes gilt es, unseren Browser caching zu optimieren. Wir nutzen hier das gratis WordPress ONMA Enabler Plugin. Dieses Werkzeug ist bereits mit einer cache-control Funktion ausgestattet. Allerdings gab es bei dem Twenty Fifteen Theme einige Daten, die damit nicht automatisch überliefert werden konnten. Um dies manuell in Ordnung zu bringen, muss lediglich der cache-control header in unseren ursprünglichen Server hinzugefügt werden, indem man den folgenden Code in die .htaccess Datei einsetzt:<filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch>Und hier ist der Code, wenn Sie einen Nginx Server nutzen:
location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ { expires 2d; add_header Cache-Control "public, no-transform";}
4. Google Analytics
Nun beschäftigen wir uns mit Google Analytics. Das Lustige daran ist, dass die Warnung vom eigenen Google Script kommt: http://www.google-analytics.com/analytics.js. Das Problem erscheint deshalb, weil deren Script nur eine Cache-Dauer von 2 Stunden hat. Google hat hierzu bereits Stellung bezogen und angekündigt dies NICHT zu ändern. Dies führt dazu, dass nahezu jeder eine Analytics Warnung erhält, welche nicht zu reparieren ist. Besonders ärgerlich wird es, wenn es Kunden gibt, die nach einer Optimierung der Google PageSpeed fragen. Einem Kunden zu vermitteln, dass man etwas nicht in Ordnung bringen kann, weil Google dies nicht zu lässt, hört sich unglaubwürdig und ein wenig verrückt an. Die einzige Lösung, die wir von der ONMA Online Marketing GmbH bisher gefunden haben, ist das ga-lite script von Jesse Luoto. Dies ist eine kleine Untereinstellung von Google Analytics, das Google Analytics Measurement Protocol REST API nutzt. Dies setzt automatisch die angebrachten Header im Skript, sodass die ausbleibenden GA-Probleme gelöst werden. Kopieren Sie den folgenden Code in den footer vor dem </body>tag. Denken Sie daran, den Code mit Ihrer UA tracking ID zu versehen.<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async></script> <script> var galite = galite || {}; galite.UA = 'UA-XXXXXX'; // Insert your tracking code here </script>Eine weitere Möglichkeit wäre, eine lokale Version von analytics.js zu hosten. Google rät zwar davon ab, aber wenn Sie Ihr Skript mit der neuesten Version aufbauen, sollte es normalerweise zu keinen Problemen kommen. Es gibt ein gratis WordPress Plugin auf dem Markt mit dem Namen Host Analytics.js Locally, welches einen cron job installiert, um die letzte Version von analytics.js periodisch zu synchronisieren. Egal ob Sie das ga-lite script verwenden oder eine lokale Host-Kopie – beides wird Ihre „leverage browser-caching“ Warnung aus Google Analytics entfernen.
5. Komprimierung erlauben und verwenden
Auf unserem ursprünglichen Server hatten wir bereits Gzip erlaubt und auf einigen ist dies als Standard oder Voraussetzung eingestellt. Folgend finden Sie eine Anleitung, wie Sie Gzip manuell auf Ihrem ursprünglichen Server erlauben: Apache Die Komprimierung können Sie zulassen, indem Sie den folgenden Code in Ihre .htaccess Datei kopieren:<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>Nginx Die Komprimierung können Sie zulassen, indem Sie den folgenden Code in Ihre nginx.conf Datei kopieren:
gzip on;gzip_comp_level 2;gzip_http_version 1.0;gzip_proxied any;gzip_min_length 1100;gzip_buffers 16 8k;gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;gzip_disable "MSIE [1-6].(?!.*SV1)";gzip_vary on;
6. Reduzieren Sie die Antwortzeit Ihres Servers
Und schließlich muss noch die Antwortzeit des Servers optimiert werden. Die beste Möglichkeit dafür ist, sich einen schnellen Webhost anzuschaffen und sich ein entsprechendes WP-Plugin zuzulegen. Und das war’s! Wenn Sie alle Ratschlägen und Anweisungen befolgt haben, sollten Sie jetzt 100/100 Punkte im Google PageSpeed erreichen – oder zumindest diesem perfekten Wert sehr nahe sein. Hier können Sie die Ergebnisse unserer ONMA Online Marketing GmbH Testdomain einsehen.7. Query Strings entfernen – zusätzlicher Tipp
Ein weiterer Tipp ist, die sogenannten “Query strings” aus den statistischen Ressourcen zu entfernen. Ressourcen mit einem „?“ in der URL werden von keinen Proxy-Servern oder CDNS gecached. So könnte man eine große Möglichkeit verpassen, die Geschwindigkeit der Webseite zu verbessern. Eine Möglichkeit diese zu entfernen, ist es, den folgenden Code in die functions.php Datei zu schreiben:function _remove_script_version( $src ){$parts = explode( '?ver', $src );return $parts[0];}add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );Eine andere Option wäre, ein gratis Plugin wie Query strings remover zu installieren. Dieses Plugin entfernt alle “query strings” aus Ihren statistischen Ressourcen, wie z.B. CSS und JavaScript Daten. Die Cache-Leistung sowie der Gesamtscore Ihres Google PageSpeeds, Yslow, Pingdom und Gt metrix werden so verbessert. Es ist sehr simpel – einfach installieren und loslegen! Es sind keine Einstellungen vorzunehmen. Lediglich der Cache-Speicher muss nach erfolgreicher Installation gereinigt werden.