Kategorie: Ladezeiten Optimierung

Veröffentlicht am

Bilder Komprimierung – So wird’s gemacht

Warum genau sollte ich Bilder komprimieren?
Die Ladezeit kann durch Bilder auf deiner Webseite enorm beeinträchtigt werden.
Das wirkt sich wiederum negativ auf dein Google Ranking, aber auch auf die User Experience aus. Gerade auf Mobilgeräten können die Ladezeiten explodieren.

Bildformate
JPG (Joint Photographic Experts Group) kann am stärksten komprimiert werden und ist somit eines des besten Formate fürs Web.
GIF (Graphics Interchange Format) hat den Vorteil das diese animiert und verlustfrei komprimiert werden können.
PNG (Portable Network Graphic) hingegen wird nur auf die Menge der im Bild vorhandenen Farben reduziert. Das wirkt sich bei der Komprimierung negativ auf die Qualität aus.
Allerdings unterstützt PNG Transparenzen, so kann z.B. der Hintergrund eines Logos transparent sein.
SVG (Scalable Vector Grafic) die sogenannten Vektorgrafiken werden in Form von Vektoren dargestellt, dass hat den Vorteil, dass diese skalierbar sind und somit
beliebig groß dargestellt werden könnnen. Idealer Verwendungszweck für Logos oder Icons. Ebenso kann SVG mit JavaScript animiert werden.
Wie beim PNG sind auch bei SVG Alpha-Transparenzen möglich.

Bei detailsreichen Bildern bleibt JPG nach wie vor die erste Wahl. GIF wird meist nur bei Animationen genutzt, ansonsten durch PNG abgelöst.
SVG hingegen ist Zukunft, durch die stätig steigende Anzahl mobiler Endgeräte, benötigt man skalierbare Bilder.

Komprimierung
Photoshop
Gegebenfalls muss die Bildgröße angepasst werden, dies ist unter „Bild – Bildgröße“ (ALT+Strg+I) oder „Bild – Arbeitsfläche“ (ALT+Strg+C) möglich. Anschließend kann man sein Bild unter
„Datei – für Web speichern“ (ALT+Umschalt+Strg+S) exportieren.
Online Tools
Eine kostenlose Alternative wären endlos viele Online Tools. Wie z.B. tinypng.com, imagecompressor.com oder compressimage.toolur.com.

Prüfung
Der einfachste und beste Weg wäre Google PageSpeed Insights.
Die Bewertung der Seitengeschwindigkeit beträgt zwischen 0 Punkte und 100 Punkte. Ab einer Punktzahl von 85 gilt deine Webseite als leistungsstark.
Als zweite Methode empfehle ich GTmetrix.com. Dort wird alles noch etwas ausführlicher erklärt.

Ein extrem häufiger Grund für langsame Ladezeiten deiner Webseite ist und bleibt die nicht richtige oder keine Komprimierung der Bilder.
Gerade auf mobilen Endgräten ist die Komprimierung enorm wichtig.

Veröffentlicht am

Langsame Ladezeiten? – Leverage Browser Caching

Umso schneller deine Webseite geladen ist – umso besser, sowohl für das Ranking in Google, als auch für den Benutzer.
Für eine Maximierung der Webseite Geschwindigkeit ist das Leverage Browser Caching eine ausgezeichnete Wahl.
Also speichern Sie statische oder nur selten geänderte Ressourcen für einen Zeitraum im lokalen Speicher zwischen.
Dies reduziert die Serveranfragen und lässt unsere Webseite deutlich performanter werden.

Hierzu haben Sie die Möglichtkeit das Browser-Caching in unserer .htaccess zu aktivieren.
Vorab sollten Sie die .htaccess sicherheitshalber abspeichern.
Die .htaccess Datei befindet sich in der Regel im Basisverzeichnis der Website (Zielpfad der Domain).
Sie wird bei jedem Aufruf des Apache Webservers und für jede einzelne Komponente der Webseite ausgewertet.

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault „access plus 1 month“

# Data
ExpiresByType text/xml „access plus 0 seconds“
ExpiresByType text/html „access plus 0 seconds“
ExpiresByType text/plain „access plus 0 seconds“
ExpiresByType application/xml „access plus 0 seconds“
ExpiresByType application/json „access plus 0 seconds“
ExpiresByType application/rss+xml „access plus 1 hour“
ExpiresByType application/atom+xml „access plus 1 hour“
ExpiresByType text/x-component „access plus 1 hour“

# Web-App-Manifeste
ExpiresByType application/x-web-app-manifest+json „access plus 0 seconds“
ExpiresByType text/cache-manifest „access plus 0 seconds“

# Scripts
ExpiresByType text/css „access plus 1 month“
ExpiresByType text/javascript „access plus 1 month“
ExpiresByType application/javascript „access plus 1 month“
ExpiresByType application/x-javascript „access plus 1 month“

# Bilder
ExpiresByType image/gif „access plus 1 month“
ExpiresByType image/png „access plus 1 month“
ExpiresByType image/jpe „access plus 1 month“
ExpiresByType image/jpg „access plus 1 month“
ExpiresByType image/jpeg „access plus 1 month“
ExpiresByType image/jp2 „access plus 1 month“
ExpiresByType image/pipeg „access plus 1 month“
ExpiresByType image/bmp „access plus 1 month“
ExpiresByType image/tiff „access plus 1 month“
ExpiresByType image/svg+xml „access plus 1 month“
ExpiresByType image/vnd.microsoft.icon „access plus 1 month“

# Icons
ExpiresByType image/ico „access plus 1 month“
ExpiresByType image/icon „access plus 1 month“
ExpiresByType text/ico „access plus 1 month“
ExpiresByType image/x-ico „access plus 1 month“
ExpiresByType image/x-icon „access plus 1 month“
ExpiresByType application/ico „access plus 1 month“

# Schriftarten
ExpiresByType font/truetype „access plus 1 month“
ExpiresByType font/opentype „access plus 1 month“
ExpiresByType application/x-font-ttf „access plus 1 month“
ExpiresByType application/x-font-woff „access plus 1 month“
ExpiresByType application/font-woff „access plus 1 month“
ExpiresByType application/vnd.ms-fontobject „access plus 1 month“

# Sonstiges
ExpiresByType application/pdf „access plus 1 month“
ExpiresByType image/vnd.wap.wbmp „access plus 1 month“
ExpiresByType application/vnd.wap.wbxml „access plus 1 month“
ExpiresByType application/smil „access plus 1 month“
</IfModule>

„IfModule“ prüft ob das benötigte Modul „mod_expires“ aktiviert ist. Der Befehl „ExpiresByType“ spricht dann einzelne Medientyp an.
„Access plus 1 month“ legt die Dauer fest, wie lang die Ressource zwischengespeichert werden soll.
ExpiresDefault „access plus 1 month“ legt den Standard fest.

Zu diesen Ressourcen zählen .gif, .jpg und .png, .css, .js, .pdf, SWF-Datein und einige weitere.
Für die verschiedenen Dateitypen legen Sie individuelle Ablaufdaten fest.
Laut Google sollten die meisten Caching Ressourcen eine Mindestdauer von einer Woche betragen.
Letztendlich muss jeder für sich selbst wissen, was er wie lange zwischenspeichern möchte.

Bei der Aktivierung werden folgende Header an den Browsergesendet
– Cache-Control-Header & Expires-Header – Gültigkeitsdauer
– Last-Modified-Header & E-Tag-Header – Ressourcen Validierung

Ob die Aktivierung tatsächlich funktioniert hat, kann man ganz einfach mithilfe folgender Tools prüfen
– Google Insights
– GTmetrix
– Pingdom