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.

Summary
GTMetrix und PageSpeed
Article Name
GTMetrix und PageSpeed
Description
Kurzeinblick in die Dienste Google Page Speed Insights und GTmetrix zur Optimierung der eigenen Website
Matthias Stukenberg
Matthias Stukenberg
Matthias Stukenberg
Publisher Logo

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.