So erreicht Ihre WordPress Seite 100 Punkte beim Google PageSpeed

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.

Vorher und Nachher TOP ANGEBOT – Wir pimpen Ihr WordPress auf mehr als 90 Punkte bei Google PageSpeed. 7 Fazit

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

Font Awesome Das Problem bei den „Awesome“ Fonts ist: Wenn wir diese in unsere Überschriften setzen, blockieren sie unseren CSS-Render. Deshalb nehmen wir den folgenden Code und setzen ihn in unseren „footer“ – genau vor dem tag. <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 demtag. <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” 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 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: # 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 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.

Vorher und Nachher

Hilft uns der 100/100er Score schlussendlich, eine schnelle Homepage zu kreieren? Der Praxistest hat gezeigt: Alle Maßnahmen, die wir ergriffen haben, um unsere Google PageSpeed zu verbessern, haben die Ladezeit verringert! Zu Beginn dachten wir, dass wir eine sehr schnelle Seite hätten, aber alle Schritte einzeln durchzugehen, hat uns noch einmal mehr Zeit eingespart.

Stand vor den Google PageSpeed Insights Verbesserungsmaßnahmen

Um die Ergebnisse zu vergleichen, haben wir Pingdom sowie WebPageTest genutzt. Doch aufgepasst: Pingdom unterstützt noch keinen HTTP/2 , allerdings bevorzugen noch immer viele diese Plattform, da sie leichter zu verstehen ist. Wir haben die Ergebnisse fünf Mal überprüft und bestätigten jedes Mal unser Ergebnis.

TOP ANGEBOT – Wir pimpen Ihr WordPress auf mehr als 90 Punkte bei Google PageSpeed

Viele Webseitenbetreiber verwenden WordPress, da es so einfach ist, Kommt es aber zu Spezialwissen, werden wir als langjährige WordPress Agentur immer wieder einmal gefragt. Das freut uns natürlich. Seit Anfang des Jahres haben wir mehrere dutzend WordPress Seiten optimiert, verbessert und getuned. Die Aufwendungen unserer Fachinformatiker für Anwendungsentwicklung lagen zwischen zwei bis vier Stunden, wodurch die Honorare meistens zwischen 100 € bis 250 € je nach Theme, Plugins, Ausgangsituation, Webkomplexität, etc. lagen. Sehr gerne helfen wir auch Ihnen. Sprechen Sie uns gerne an unter 0511 62 66 85 00.

Fazit

Wie man nun unschwer erkennen kann, sind die Empfehlungen von Google PageSpeed Insights sehr wertvoll und können (wenn richtig umgesetzt), Ihre Webseite optimieren. Doch noch einmal: Wir empfehlen NICHT, sich zu sehr auf die reinen Zahlen zu versteifen. Wenn es für Sie nicht möglich ist, einen perfekten 100/100 zu scoren, ist dies nicht das Ende der Welt. Unser bester Tipp ist es deshalb, so viele Tipps wie möglich umzusetzen . Vergessen Sie nie, die Ergebnisse zu kontrollieren. Nur, weil ein Werkzeug verspricht, Ihre Seite zu beschleunigen, könnte für einen echten Seitenbesucher das genaue Gegenteil der Fall sein. Außerdem empfehlen wir Ihnen, unseren kompletten Ratgeber how to speed up WordPress zu lesen. Dort erhalten Sie weitere Tipps über das Optimieren der Seitengeschwindigkeit. Das PageSpeed Inside Team hat auch vor Kurzem einen neuen Website-Geschwindigkeits-Tester veröffentlicht, den „think with Google“. Dieses Tool sollten Sie sich unbedingt ansehen, speziell die Reports sind sehr hilfreich um diese z.B. bei Kunden zu präsentieren.