Test Google Guetzli vs Lightroom

Guetzli, Googles neuer JPG Encoder, ist momentan in aller Munde. Veröffentlicht wurde Guetzli als Open Source und verspricht bis zu 35% kleinere JPG Files bei gleicher oder besserer Qualität als sie bisherige JPG Encoder liefern.

35% kleinere Bilder bei gleichbleibender oder besserer Qualität klingt natürlich verlockend. Im Internet zählt jedes Byte und gerade Bilder sind meist hauptverantwortlich für lange Ladezeiten, sollten sich die Bilder wirklich um 30% verkleinern lassen sollte sich auch die Ladezeit um mindestens 20% verbessern. Der Nachteil von Guetzli ist, dass er sehr langsam arbeitet was aber relativ egal ist, da die Bilder ja nur einmal komprimiert werden müssen.

Lange Rede kurzer Sinn, nachdem ich prinzipiell skeptisch bin wollte ich mich selbst von dem Ergebnis überzeugen und habe einige Bilder einmal mit Lightroom erzeugt und einmal mit Guetzli.

Ressourcen

Hier kann der Sourcecode heruntergeladen werden. Auch eine Beschreibung wie Guetzli zu verwenden ist ist hier abgelegt.

Github Respository

Binärfiles zum Download gibts hier.

Testszenario

Ich habe aus einem RAW File ein JPG mit 1200Pixel und 100% Qualität erzeugt.

Dieses File habe ich dann mit Guetzli mit dem Parameter -quality 85 erstellt.

Anschließend habe ich das ursprüngliche JPG mit Lightroom erstellt, wobei ich als Qualitätsangabe die Filegröße des Guetzli Files verwendete.

Bildqualität Guetzli vs Lightroom

Hier die 3 Fotos die ich miteinander verglichen habe.

Vergleich Guetzli vs Lightroom
Guetzli vs Lightroom. Blüte mit Monochrom Hintergrund.
Vergleich Guetzli vs Lightroom
Fluss mit vielen Details
Vergleich Guetzli vs Lightroom
Kirche mit blauem Hintergrund

Fazit

Beide Encoder haben ihre Stärken und Schwächen. Lightroom stellt mehr Details dar, was man sehr gut am Flussbild sehen kann. Wenn es um große Flächen oder Farbverläufe geht, schneidet Guetzli besser ab. Die Bearbeitungszeit bei Gutzli ist wirklich erheblich länger, um die Bilder zu erzeugen benötigte Lightroom je ca. 2-3 Sekunden, der Konkurrent benötigte hingegen zwischen 40 und 80 Sekunden.

Die 35% kleineren Files bei besserer Qualität kann ich nicht sehen, weshalb ich meine Fotos auch weiterhin mit Lightroom für das Web vorbereiten werde.

Hier die Vergleichfotos zum Download

Wie seht ihr das? Würdet ihr eure Bilder mit mit Googles Alternative nachbearbeiten oder verwendet ihr doch lieber Lightroom?

Wordpress Geschindigkeit messen

WordPress Ladezeit messen

Nachdem WordPress nach dem installieren ja eher gemächlich daher kommt, kommt bald bei jedem der Wunsch auf WordPress etwas zu optimieren damit die Ladezeiten etwas erträglicher werden. Um die Ladezeit von WordPress zu verbessern, gibt es jede Menge Plugins und andere Möglichkeiten, aber das ist eine andere Geschichte die ein anderes mal erzählt wird 😉

Heute geht es hier um die Möglichkeit die Ladezeit der eigenen Website zu messen um sie objektiv beurteilen zu können, dafür gibt es mehrere Möglichkeiten.

Website Geschwindigkeit mit dem Browser messen

Die Browser Chrome von Google und Firefox von Mozilla bringen beide die Möglichkeit mit die Geschwindigkeit zu messen und in einem schönen Wasserfall Diagramm darzustellen. Die Messung mit dem eigenen Browser ist zwar nicht ganz zuverlässig, da die Geschwindigkeit auch vom eigenen Rechner und der eigenen Internetleitung abhängig ist. Außerdem wird der jeweilige Browser mit aktiver Messung natürlich auch etwas ausgebremst. Was die Messung aber zeigt, ist wo die grössten Zeitfresser zu suchen sind und welche Elemente die Website am meisten ausbremst.

Bei Crome könnt ihr die Messung im Menü unter Tools–> Entwicklungstools aktivieren. Am unteren Ende des Bildschirm erscheinen dann die debugging Tools, im Reiter Netzwerk wird die Ladezeit der einzelnen Komponenten, nach dem aktualisieren der Seite angezeigt.

Chrome Website Ladezeit anzeigen
Wibsite Ladezeit mit Chrome ermitteln

 

Auch Firefox von Mozilla bietet die Möglichkeit die Ladezeit einer Website zu ermitteln, allerdings wird hier das Firebug Plugin benötigt. Nachdem das Plugin installiert ist kann es rechts oben über den Firebug Button gestartet werden. Auch hier wird die Ladezeit als Wasserfalldiagramm im Reiter Netzwerk angezeigt.

Website Ladezeit mit Firefox messen
Ladezeit von WordPress mit Firefox ermitteln

 

Ladezeit von Websites mit Pingdom ermitteln

Die Messung mit dem eigenen Browser ergibt, wie bereits erwähnt, nur einen groben Richtwert, um genauere Werte zu erhalten kann man einen externen Dienst verwenden. Die Firma Pingdom bietet dafür einen gratis Dienst an der unter http://tools.pingdom.com/ erreichbar ist.

Geschwindigkeit WordPress ermitteln
Website Geschwindigkeit mit Pingdom ermitteln

Nachdem man die Seite aufgerufen kann, sollte man erst den Server einstellen von dem aus geprüft werden soll. In der gratis Version gibt es nur einen Server in Europa der in Amsterdam steht. Den Server kann man in den erweiterten Einstellungen öffnen die man mit dem Button „Settings“ öffnen kann.

Anschließend kann man im Eingabefeld die URL eingeben die zu testen ist und den Test mit dem Button „Test now“ starten.

Website Ladezeit mit Pingdom
Website Ladezeit mit Pingdom

Nachdem die Prüfung angeschlossen ist wird oben eine kurze Übersicht angezeigt und unten wird ein Wasserfalldiagramm mit den Ladezeit der unterschiedlichen Komponenten angezeigt.

Neben dem Wasserfalldiagramm kann auch noch der Performancegrad, eine Seitenanalyse und eine Histroy angezeigt werden.

 

Website Performance Grad
WordPress Performance Grad

Im Reiter Performancegrad wird der Performancegrad der einzelnen Themen als Schieberegler angezeigt. Klickt man auf den Button auf der rechten Seite, werden die Details  zu diesem Thema angezeigt.

Google Pagespeed

Eine weitere Seite um die Ladezeit der eigenen WordPress Installation zu ermitteln ist Google Pagespeed. Bei Google Pagespeed wird nicht angezeigt wie lange die Seite benötigt um zu laden, jedoch wird die Seite mit Punkten von 0-100 bewertet.

Der großer Vorteil bei Google Pagespeed ist, dass die Problemstellen aufgezeigt werden und auch Lösungen dafür vorgeschlagen werden.

Ich hoffe hier ist auch etwas für euch dabei, falls ihr weiter Tipps habt wo, oder wie man die eigene Seite noch ausmessen kann dann immer her damit.

 

 

Website Ladezeit verpessern

Website Ladezeit verbessern

Die Ladezeit einer Website verbessern ist einfacher als viele denken. Schon mit einigen Handgriffen kann Geschwindigkeit der eigenen Website um bis zu 60% verbessert werden und das ganze in 10 Minuten und völlig gratis.

Nichts nervt mehr als eine langsame Website, aber nicht nur Besucher werden dadurch abgeschreckt, sondern auch bei Suchmaschinen fließt die Website Ladezeit schon seit längerem in die Seitenbewertung ein. Hier zwei einfache Tricks die die Ladezeit einer Website drastisch verkürzen kann und auch noch Traffic auf dem Server spart.

  • Browsercache des Benutzers nutzen
  • Files vor dem ausliefern komprimieren

Browsercache des Benutzers nutzen

Damit nicht jedes Bild bei jedem Seitenwechsel erneut geladen werden muss, kann dem Browser des Besuchers mitgeteilt werden, dass er die Bilder, oder sonstige Daten, zwischenspeichern soll. Wie lange die Daten gespeichert werden sollen kann dabei angegeben werden. Meist wird hier ein Wert von 30Tagen angesetzt. Beim ersten Besuch werden noch alle Bilder von der Website geladen, doch schon beim 1. Seitenwechsel oder beim nächsten Besuch auf der Seite werden die Bilder aus dem lokalen Cache verwendet. Dadurch muss weniger runtergeladen werden was die Ladezeit drastisch verkürzt und auch noch Traffic spart.

Damit der Browsercache genutzt werden kann, muss beim Apache Webserver das Modul „mod_expires“ geladen sein. Sollte es nicht bereits aktiv sein, kann es normalerweise aus der Homepage deines Providers „Einstellungen Webserver“ aktiviert werden, oder wenn du einen eigenen Server betreibst auf der Console mittels dem Befehl

a2enmod expires

Anschliessend muss noch die .htaccess Datei auf deiner Webseite angepasst werden. Diese Datei kann per FTP heruntergeladen, geändert und wieder hochgeladen werden oder mittels eines Tools bearbeitet werden. Wenn du WordPress benutzt kannst du z.B das „Yoast WordPress SEO“ Plugin verwenden.

In der .htaccess Datei muss folgender Eintrag ergänzt werden.

# Expire-Datum auf 30 Tage setzen
ExpiresActive On
ExpiresDefault A0
<FilesMatch „.(ico|jpg|png|gif|css|js|gz)$“>
ExpiresDefault A2592000
Header append Cache-Control „private“
</FilesMatch>

Damit werden alle Files mit den unter FilesMatch angegebenen Endungen auf dem Rechner des Besuchers zwischengespeichert.

Files vor dem ausliefern komprimieren

Die zweite Optimierung für den Webserver ist das ausliefern von komprimierten Files. Da die Files dadurch kleiner werden, können sie schneller übertragen werden, was wiederum der Performance zugute kommt und zusätzlich auch noch Traffic einspart.

Damit Dateien vom Webserver komprimiert ausgeliefert werden können, muss im Apache das Modul „mod_deflate“ aktiviert werden. Dabei ist die Vorgehensweise die selbe, wie auch bei dem „mod_expired“ Modul. Anschließend muss auch hier wieder die .htaccess Datei angepasst werden.

<FilesMatch “\.(js|css|html|htm|php|xml)$”>
SetOutputFilter DEFLATE
</FilesMatch>

Mit diesem Eintrag werden alle Files die bei Filesmatch angegeben werden erst komprimiert und erst dann an den Besucher geschickt. Hier sollten keine Bilddateien angegeben werden, da diese meist nicht weiter komprimiert werden können, aber auf dem Server viel Last erzeugen. Da dieses Modul zusätzlich Last auf dem Server verursacht, ist es bei Standard Webservern meist auch nicht aktiviert.