GTMetrix und PageSpeed

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.