Die Webseite SEO-Tools-Online.de bietet eine umfangreiche Sammlung von mehr als 50 Tools für Webmaster. Darunter befinden sich SEO Tools, Keyword Tools, Domain Tools und viele nützliche, sowie kostenlos online nutzbare OnPage Tools.
So gut oder schlecht diese Tools auch sein mögen, ein Blick auf den aktuellen google PageSpeed Insights Punktewert zeigt 39/100 für Mobil und 49/100 für Desktop an. Hier besteht noch großer Handlungs- und Optimierungsbedarf. Das muss dringend geändert werden.
IST-Analyse
Bei der PageSpeed Insights Analyse werden u.a. die folgenden offenen Punkte aufgelistet:
- JavaScript- und CSS-Ressourcen, die das Rendering blockieren
- Browser-Caching nutzen
- Komprimierung aktivieren
- Bilder optimieren
- CSS reduzieren
- JavaScript reduzieren
- HTML reduzieren
Interessanterweise sind bereits 3 PageSpeed Insights Regeln als bestanden markiert (grüner Bereich).
Antwortzeit des Servers reduzieren, sichtbare Inhalte priorisieren und Zielseiten-Weiterleitungen vermeiden sind bereits gelöst.
Wichtig sind vor allem die offenen Punkte aus dem roten Bereich, Behebung erforderlich. Der gelbe Bereich, Behebung empfohlen kann durchaus auch vernachlässigt werden. 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.
OnPage- und PageSpeed-Optimierung
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 9%, oder 26,7 KB 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 24,1 KB (oder 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.
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.
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!
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.
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>
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!
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 sieht dann so aus:<script async src="my.js">
PageSpeed Optimierung abgeschlossen
Nach dem Abschluss der möglichen PageSpeed Optimierung habe sich der Punktewert erheblich verbessert.
Bei Mobile lag der Punktewert vor der Optimierung bei 39/100 und bei Desktop bei 49/100. Jetzt liegt der Punktewerkt Mobile bei 70/100 und Desktop bei 87/100.
Leider werden viele Punkte noch als Offen angezeigt die in einem direkten Zusammenhang mit google Adsense stehen. Diese müssen leider in der Optimierung komplett außer Acht gelassen werden.
