Die Optimierungsmöglichkeiten für die eigene Webseite oder den eigenen Blog werden in diesem Beitrag noch weitergeführt und dazu werden zwei nützliche Tools vorgestellt.
GTmetrix
Die Webseite nimmt eine URL der eigenen Webseite entgegen und untersucht diese dann auf verschiedene Performance Werte hin und gibt dann gleich entsprechende Ratschläge um die Webseite zu verbessern. Diese reichen von Vorschlägen zur Codeoptimierung über Anpassungen an Ressourcen wie Bildern hin zu Einstellungen des Webservers.
Einige Möglichkeiten die einem GTMetrix aufzeigt:
- Bilder verkleinern, sowohl in der Filesize als auch bei den Abmessungen falls über CSS verkleinert wird
- Beste JPG Kompression (Juni 2017): Guetzli Algorithmus von Google
- Bei Logos mit wenigen Farben eventuell GIF Format benutzen!
- Kompression für die Übermittlung aktivieren! Per .htaccess Datei kann eingestellt werden welche Dateitypen gezippt übermittelt werden können
<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>
- HTML, CSS, JavaScript Files verkleinern (es gibt hier Hilfsprogramme die alle Whitespaces und Tabstopps entfernen). Die Dateien werden dadurch im Code schlechter lesbar, daher immer auch eine unbearbeitete Version behalten falls man später im Code was ändern möchte
Google Pagespeed
Google Pagespeed ist ganz ähnlich zu GTmetrix jedoch zeigt es Daten direkt aus der Google Brille und ist somit gut geeignet wenn man seine Website für die Google Suchmaschine optimieren möchte.
Außerdem bietet Google ein Pagespeed Modul an, welches direkt in Apache oder NGINX integriert werden kann und auf der Basis eigene Optimierungen vornimmt (Angaben ohne Gewähr).
Es wird bei diesen Optimierungen um jedes KB gefeilscht: Das Internet spielt sich heutzutage meist auf mobilen Endgeräten wieder, nur noch ein Bruchteil des World Wide Web Traffics geht über stationäre Technik. Bei den mobilen Endgeräten muss heute noch beachtet werden, dass die Verbindungen eben noch immer nicht LTE sind und auch in Gebäuden die Abdeckung nicht immer optimal ist. Daher macht diese Reduzierung durchaus sinn.
Vorgeschlagen werden auch Einstellungen die das Browser Caching betreffen und Möglichkeiten Webseiten beienbar zu halten, auch wenn gerade keine Verbindung zum Internet besteht.
