Komm zur dunklen Seite der Macht, wir verwenden Cookies! Alles zum Datenschutz findest du hier: Datenschutz.

Geschwindigkeitsoptimierungen für deine Webseite

Die Ladegeschwindigkeit einer Webseite kann ausschlaggebend dafür sein, ob deine Besucher auf deine Inhalte warten oder nicht. Ausserdem wird die Ladegeschwindigkeit auch von den Suchmaschinen stark bewertet. Wo es sich besonders bemerkbar macht, sind bei Internetseiten die mit einem mobilen Endgerät aufgerufen werden.

Optimierungen

  1. Bilder
  2. JavaScript & CSS Ressourcen (BrowserEngine Optimierungen)
  3. Scriptdateien komprimierungen
  4. HTML Komprimierungen
  5. Webserver Einstellungen
  6. Browser Caching

1. Bilder

Echte Geschwindigkeitsblockierer sind wohl die Bilder auf deiner Webseite. Sie können am ehesten dazu führen, dass eine Seite lange brauch um geladen zu werden. Das beste Beispiel dafür sind Bilder, die direkt von der Digitalkamera in die Medienverwaltung bei WordPress hochgeladen und in einem Beitrag verlinkt werden.

Warum? Nun, eine normale Fotodatei von einer Digitalkamera, mit sagen wir 12 Megapixel, bei einer Auflösung von 4048 × 3040 Pixeln und normaler Komprimierungsstufe im JPEG Format, hat eine Dateigröße von ca. 3,5 Megabyte. Jetzt haben wir in unserer Urlaubsgalerie ja nicht nur 1 Foto vom letzten Strandurlaub sondern 10. Einfache Rechnung 10 x 3,5 MB = 35 MB. Dein Besucher muss jetzt also 35 MB von deinem Webserver auf seinen PC oder Smartphone herunterladen, BEVOR er sich die Internetseite vollständig ansehen kann. Das will keiner!

Lösung: Die Bilder müssen verkleinert und komprimiert werden. Schritt 1 ist also die Auflösung drastisch zu verkleinern. Von 4048x3040 proportional runter auf 1024x768 Pixel. Anschließend komprimierst du die PNG und JPEG Dateien noch bei https://tinypng.com/ und lädst sie dann erst auf deinen Webserver. Ziel sollte sein pro Bilddatei unter 100 Kb zu verwenden. Weniger ist in diesem Fall mehr.

2. JavaScript & CSS Ressourcen

Wenn eine Internetseite aufgerufen wird, wird die HTML Ausgabe von oben nach unten in den Speicher der Browser Engine geladen und dort dann interpretiert. Wenn externe Ressourcen wie JavaScript und CSS Dateien angegeben werden, dann werden diese Links während des Durchlaufs verfolgt und geladen. Dies kann ebenfalls zu Engpässen führen wenn die externen Ressourcen nicht oder nur langsam geliefert werden können. Daher ist es ratsam die CSS Links innerhalb von <head></head> und die JavaScript Ressourcen vor dem schließenden Tag </body> im Footer anzugeben.

Das führt dann dazu dass die Styles auf die HTML Ausgabe direkt angewendet werden, der Benutzer “sieht” direkt die Seite im richtigen Layout und die zusätzliche Funktionalität wird quasi nachgereicht.

Eine weitere Herangehensweise ist es die Anzahl der Ressourcen Aufrufe zu reduzieren. Nachfolgend ein Beispiel aus einer WordPress Webseite:

<script type='text/javascript' src='http://domain.de/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://domain.de/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://domain.de/wp-content/plugins/carousel-anything-for-vc/carousel-anything/js/min/owl.carousel-min.js?ver=1.3.3'></script>
<script type='text/javascript' src='http://domain.de/wp-content/plugins/carousel-anything-for-vc/carousel-anything/js/min/script-min.js?ver=1.10'></script>
<script type='text/javascript' src='http://domain.de/wp-content/plugins/add-to-any/addtoany.min.js?ver=1.0'></script>

Hier werden “nur” 5 externe Ressourcen geladen. Besser wäre aber alle diese Scripte zu einem Bundle zu vereinen und dadurch nur 1 Script Aufruf zu verursachen.

<script type='text/javascript' src='http://domain.de/wp-content/cache/bundle.js?ver=1.0'></script>

Das ergibt natürlich eine größere Datei, da ja alle Inhalte aus den einzelnen Scriptdateien zusammengefasst werden. Das führt uns zum nächsten Kapitel.

3. Scriptdateien komprimieren

Um Scriptdateien in der Dateigröße zu verringern verwendet man sogenannte Minifier als Plugin oder als Standalone Tool.

Das ist der Quellcode der vom Programmierer geschrieben wird. Hier nur ein Beispiel.

# test.js
$(function(){
    var weekday = new Array();
    weekday[0] = "Sonntag";
    weekday[1] = "Montag";
    weekday[2] = "Dienstag";
    weekday[3] = "Mittwoch";
    weekday[4] = "Donnerstag";
    weekday[5] = "Freitag";
    weekday[6] = "Samstag";

    var date = new Date();
    $('tr').not($('.' + weekday[date.getDay()])).hide();
});

Jetzt wird der Minifier über das Script laufen gelassen und heraus kommt:

# test.min.js
$(function(){var b=new Array();b[0]="Sonntag";b[1]="Montag";b[2]="Dienstag";b[3]="Mittwoch";b[4]="Donnerstag";b[5]="Freitag";b[6]="Samstag";var a=new Date();$("tr").not($("."+b[a.getDay()])).hide()});

Du siehst also: Alle Leerzeichen wurden entfernt, alle Variablennamen wurden verkürzt und der gesamte Quellcode steht jetzt in einer Zeile. Aus 333byte sind jetzt 200byte geworden. Zugegeben kein großer Unterschied in diesem Beispiel.

Der Unterschied ist bei Bootstrap schon deutlicher:

  • Original bootstrap.js: 66kb
  • Minifier bootstrap.min.js: 35kb

Also wurde die Dateigröße fast halbiert. Bei sehr großen Scriptdateien kann sich dies also durchaus positiv auswirken.

Wichtig ist zu sagen, dass wir das nicht nur mit JavaScript Dateien machen können, sondern mit allen Scriptdateien. Also auch mit HTML und CSS Dateien.

4. HTML Komprimierungen

Genau wie in Punkt 3 kann die eigentliche Ausgabe von HTML ebenfalls komprimiert bzw. minifiziert werden. Allerdings gibt es hier den Unterschied, dass sich HTML Dateien viel öfter ändern können als eine Ressource wie JavaScript oder CSS Dateien.

Bei WordPress wird die HTML Ausgabe beim Aufruf permanent neu generiert, bei Jekyll wird die HTML Datei nur bei der Veröffentlichung generiert. Sowohl für WordPress als auch für Jekyll stehen Plugins bereit die die Komprimierung der HTML Ausgabe zur Laufzeit übernehmen.

Plugins

5. Webserver Einstellungen

Viele Webserver bieten zusätzlich die Möglichkeit die Inhalte und Dateien per gzip zu komprimieren, bevor sie an den Browser gesendet werden.

Im Apache kann man die Module mod_deflate und mod_gzip auch per .htaccess aktivieren, sofern dies im Apache erlaubt ist. (Im Zweifel den Webhoster fragen).

# .htaccess
# gzip Compression if availiable
<IfModule mod_gzip.c>
 mod_gzip_on       Yes
 mod_gzip_dechunk  Yes
 mod_gzip_item_include file      \.(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler   ^cgi-script$
 mod_gzip_item_include mime      ^text/.*
 mod_gzip_item_include mime      ^application/x-javascript.*
 mod_gzip_item_exclude mime      ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

# Deflate Compression by MimeType
<IfModule mod_deflate.c>
 <FilesMatch "\.(js|jpg|jpeg|gif|png|css|html)$">
  ExpiresActive on
  ExpiresDefault "access plus 1 week"
  SetOutputFilter DEFLATE
 </FilesMatch>
</IfModule>

6. Browser Caching

Browser Caching ist eine weitere Methode um die Ladegeschwindigkeit der Webseite zu erhöhen. Die Module für Apache und nginx beeinflussen den HTTP HEADER der an den Browser gesendet wird, und teilt ihm mit wie lange die Ressourcen clientseitig gespeichert werden können bevor sie erneut vom Server angefragt werden sollen.

Im Apache kann man das Modul mod_expires per .htaccess ansprechen.

# .htaccess
# BEGIN EXPIRES
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 10 days"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/plain "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 week"
    ExpiresByType application/x-icon "access plus 1 year"
</IfModule>
# END EXPIRES

Für nginx gibt es das Modul ngx_http_headers.

Fazit

Es gibt noch einige Möglichkeiten mehr die Geschwindigkeit einer Webseite zu optimieren. Oben habe ich die gängigsten und weniger aufwendigen Methoden beschrieben. Weitere deutlich aufwendigere Strategien sind Pre-Rendering, Content Delivery Networks (CDN), Cloud Hosting, Load Balancing usw. :)