Pagespeed

PageSpeed Optimierung am Beispiel von Konzept-Welt.de

Das Projekt Konzept-Welt.de läuft aktuell auf einem Hosteurope-Server mit dem CMS WordPress. Nach der normalen Installation und keiner Verwendung von Plugins ergibt eine PageSpeed Insights Analyse bei https://developers.google.com/speed/pagespeed/insights/ eine sehr schlechte Ausgangslage. Das PageSpeed-Ergebnis Mobile(M) liegt bei 51/100 (Note: Poor) und bei Desktop(D) immerhin 61/100 (ebenfalls Note: Poor).

IST-Analyse
Bei der PageSpeed Insights Analyse werden u.a. die folgenden offenen Punkte aufgelistet:

  • Komprimierung aktivieren
  • Bilder optimieren
  • JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) beseitigen
  • Browser-Caching nutzen
  • Antwortzeit des Servers reduzieren
  • CSS reduzieren
  • JavaScript reduzieren

Wichtig sind vor allem die offenen Punkte aus dem roten Bereich „Behebung erforderlich“. Der gelbe Bereich „Behebung empfohlen“ kann durchaus auch vernachlässigt werden, sollte es jedoch nicht. Wir versuchen jedoch alle roten und gelben Punkte zu lösen.
Die offenen Punkte entsprechen somit den Ansätzen für eine OnPage- und PageSpeed-Optimierung.

Das Fazit der Startanalyse und des aktuellen IST-Zustandes: es besteht noch großer Handlungs- und Optimierungsbedarf! Das muss dringend geändert werden.

OnPage- und PageSpeed-Optimierung

Browser-Caching nutzen
Für den offenen Punkt Browser-Caching ziehen wir wieder die .htaccess-Datei heran. In diese fügen wir die folgenden Codezeilen am Ende hinzu.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType image/jpg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType text/css "access 604800 seconds"
ExpiresByType text/javascript "access 604800 seconds"
ExpiresByType application/x-font-ttf "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
</IfModule>
<ifmodule mod_headers.c>
<filesmatch "\\.(ico|jpg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesmatch>
</ifmodule>
<IfModule mod_headers.c>
Header append Vary Accept-Encoding
<FilesMatch "\\.(css|js|php)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

Anschließend unbedingt die Webseite neu laden und auf vollständige Funktionalität testen.

Die noch angezeigten cachefähigen Javascript-Dateien stammen wieder einmal von google Adsense, u.a. mit der folgenden URL: pagead2.googlesyndication.com/pagead/js/adsbygoogle.js. Da wir auf das Caching dieser Dateien keinen Einfluss haben, ist der Punkt Browser Caching nutzen abgearbeitet und wir erreichen 54(M) bzw. 63(D) von 100 Punkten.

Komprimierung mit GZIP aktivieren
Für den Punkt Komprimierung aktivieren benötigen wir die aktuelle .htaccess-Datei des Webprojektes. Denn mit dieser lassen sich sehr schnell, sehr viele Einstellungen treffen. Ein Blick in die aktuelle .htaccess-Datei zeigt nur Einstellungen für suchmaschinenfreundliche URLs (mod_rewrite.c). Diese belassen wir und fügen am Ende folgende Zeilen ein:

<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L] </ifmodule>

Zusätzlich müssen wir noch alle CSS- und JavaScript-Dateien, welche wir in den ersten Schritten bereits von unnötigen Leerzeilen, Zeilenumbrüchen und Kommentaren entfernt haben, auf GZIP komprimieren.
Dazu verwenden wir die kostenlose Software 7zip. Damit lassen sich die Dateien schnell komprimieren. Die so neu erstellten GZ-dateien laden wir anschließend parallel zu den Originaldateien auf den Webserver hoch.
Jetzt starten wir das Tool PageSpeed Insights erneut und sehen dass der Punkt Komprimierung aktivieren nicht mehr unter den offenen Punkten zu sehen ist. Der Punkt ist von Behebung erforderlich auf Behebung empfohlen verschoben. Ein Klick darauf und es ist zu sehen: „Behebung empfohlen“.

Um diesen Punkt in den Bereich bestandene Regel zu bekommen, fügen wir in die .htaccess-Datei am Ende noch folgende Zeilen ein:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain text/html text/xml
AddOutputFilterByType DEFLATE text/css text/javascript
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript application/x-javascript
<FilesMatch "\.(ttf|otf|eot|svg)$" >
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Nachdem Neustart des Tool PageSpeed Insights sehen wir, der Punkt „Komprimierung aktivieren“ ist aus dem gelben Bereich in den grünen Bereich verschoben. Perfekt.
Jetzt liegen wir bei der PageSpeed Insights Analyse bei 67(M) bzw. 81(D) von 100 Punkten.

Bilder optimieren
Um den offenen Punkt Bilder optimieren abzuarbeiten, müssen alle aufgezeigten Bilder optimiert, minimiert und reduziert werden. Dafür lassen sich auch online Komprimierungstools wie etwa tinypng.com nutzen.
In dem Fall von SEO-Tools-Online.de könnte die Größe aller auf der Startseite befindlichen Bilder um 166 KB (um 40% weniger) reduziert werden. Eine beachtliche Größe!
Mit dem Tools tinypng.com konnte die Größe der PNG-Dateien sogar um durchschnittliche 71% reduziert werden!

Eine Alternative zu einem Löschen und neuen Hochladen der Bilder ist die Verwendung eines Komprimierungs-Plugins für Bilder wie etwa WP SMUSH IT (https://de.wordpress.org/plugins/wp-smushit/). Einfach das Plugin hochladen, aktivieren und den BULK SMUSH starten. Je nach Anzahl vorhandener Bilder kann die Komprimierung etwas dauern.

In unserem Fall wurden 844 Bilder komprimiert. Dabei konnten insgesamt 15,1MB Speicherplatz oder 16,3% eingespart werden. Anschließend könnt Ihr das Plugin auch gern wieder deaktivieren und löschen.

Nach einem Neustart des PageSpeed Insights Tools sehen wir noch ein offenes Bild in der Liste. Die URL zeigt jedoch auf tpc.googlesyndication.com/simgad/ und kann somit von uns leider nicht optimiert werden. Dieses Bild wird über Adsense eingebunden.

Eine aktuelle PageSpeed Insights Analyse ergab 76(M) bzw. 90(D) von 100 Punkten. Damit liegt der Desktop bereits im grünen Bereich (Note: good).

Rendering blockieren “above the fold”
Dieser noch offene und wichtige PageSpeed-Punkt kann leider nicht gelöst werden, da eine Änderung der Positionierung der JavaScript-Ressourcen die Funktionalität der Webseite beeinträchtigen würde.
Die einzige Möglichkeit wäre ein Einfügen der Ressourcen inline, d.h. direkt in den Quellcode ohne Verwendung von einzelnen JavaScript-Dateien.
Eine Möglichkeit für JavaScript-Dateien ist das Hinzufügen des HTML-Attributes „async“. Somit wird diese Datei später geladen.
Der im Quellcode eingetragene JavaScript-Code sähe dann so aus:
<script async src="my.js">

Eine interessante und von uns angewandte Alternative um das “above the fold” Problem zu lösen ist die Aktivierung und Nutzung des AMP-Plugins (https://de.wordpress.org/plugins/amp/).” Dieses Plugin fügt eine Unterstützung des Accelerated Mobile Pages (AMP) Projekts hinzu, das eine Open Source-Initiative mit dem Ziel ist, für Mobilgeräte optimierten Inhalt anzubieten, der überall sofort geladen werden kann.”

Damit wäre der Punkt Rendering blockieren “above the fold” gelöst.
Die PageSpeed Insights Analyse zeigt 87(M) bzw. 90(D) von 100 Punkten an.

CSS reduzieren
Einer der einfachsten und schnell zu erledigenden PageSpeed Insights Punkte ist das reduzieren der CSS-Dateien. Dazu klickt Ihr den entsprechenden PageSpeed Insights Punkt an, dann werden alle zu optimierenden CSS-Dateien aufgelistet. Dort findet Ihr folgende Informationen: “Durch die Komprimierung des CSS-Codes können viele Datenbytes gespart und das Herunterladen und Parsen beschleunigt werden.”
In unserem Fall lässt sich eine Ersparnis von etwa 10% durch eine Reduzierung der CSS-Dateien erzielen.
Bei kleinen CSS-Dateien kann die Reduzierung durchaus manuell erfolgen. Bei größeren empfehlen wir den Einsatz von online CSS-Komprimierungs-Tools, wie etwa csscompressor.com.
Nachdem die CSS-Dateien nun minimiert/reduziert sind, werden diese wieder hochgeladen und das Tool PageSpeed Insights wird erneut gestartet.
Damit ist der vorher offene PageSpeed Insights Punkt CSS reduzieren abgearbeitet!

JavaScript reduzieren
Analog zu dem Punkt CSS reduzieren arbeitet wir jetzt den offenen Punkt JavaScript reduzieren ab. Als online Komprimierungs-Tools verwenden wir dafür jscompress.com.
Das potentielle Komprimierungspotential liegt bei knapp 11 %.
Nach einem detaillierten Blick in die zu minimierenden JavaScript-Dateien mussten wir leider feststellen dass einige nicht optimiert werden konnten. Es handelt sich in diesem Fall um Dateien von pagead2.googlesyndication.com, also von google Adsense. Eine Optimierung dieser Dateien ist leider nur dann möglich wenn Adsense aus diesem Projekt entfernt wird.
Empfehlenswert ist eine Herausnahme des Adsense-Codes aus der Startseite, da diese die wichtigste Seite eines jeden Projektes ist.
Somit ist auch der Punkt JavaScript reduzieren abgearbeitet.

HTML minimieren
Ähnlich den Punkte CSS und JavaScript minimieren lässt sich dieser Punkt angehen. Empfehlenswerte OnlineTools sind u.a. htmlcompressor.com/compressor/ und hightools.net/minimizer.php die Euch die Arbeit der Quellcode-Minimierung abnehmen können.

PageSpeed Optimierung abgeschlossen
Nach dem Abschluss der möglichen PageSpeed Optimierung habe sich der Punktewert erheblich verbessert.

Leider werden einige Punkte noch als Offen angezeigt die in einem direkten Zusammenhang mit google Adsense stehen. Diese müssen leider in der aktuellen Optimierung komplett außer Acht gelassen werden.

Auch verschiedene Punkte im Zusammenhang mit dem verwendeten Theme und zwingend notwendigen Funktionalitäten können nicht komplett gelöst werden. Wer gern ein Theme verwendet, ähnlich der google-Startseite, der kann viele Punkte schneller und einfacher optimieren das keine Slider oder ähnlich komplexe Features vorhanden sind. In diesen Fällen steht der Mehrwert für den Besucher über dem letzten Punkte innerhalb der PageSpeed-Optimierung.

1 Star2 Stars3 Stars4 Stars5 Stars (2 Bewertungen, Durchschnitt: 5,00 von 5)
Loading...

Kommentar verfassen