Website-Performance verbessern (Bildoptimierung)
Nachdem ich einige Designänderungen an diesem Blog vorgenommen hatte, habe ich mich entschieden, ihn bei PageSpeed Insight zu überprüfen (für einen Entwickler eine ziemlich naheliegende Entscheidung). Zu meiner Überraschung waren die Ergebnisse weit von dem entfernt, was ich erwartet hatte.
Wenn ich Dinge repariere, gehe ich nach dem Prinzip des „ersten Kontakts“ vor. Was bedeutet das? Zuerst den ersten Besuch optimieren. Es hat keinen Sinn, zuerst für wiederkehrende Besucher zu optimieren, denn wenn die Seite für Erstbesucher schrecklich ist, wird sie auch für wiederkehrende Besucher schrecklich sein. Also, gehen wir es durch.
Das Problem eingrenzen
Wie man an den Ergebnissen sieht, sagt PageSpeed Insight, dass ich die Gesamtgröße der Bilder um 1171 KiB reduzieren könnte. Dem stimme ich an dieser Stelle nicht zu, da davon ausgegangen wird, dass ich JPEGs mit 100 % Qualität verwende (tatsächlich sind es 70 %, aber ich werde den Vergleich anhand von optimierten und unoptimierten JPEGs durchführen), aber ich gehe trotzdem davon aus, dass ich eine Reduzierung um 500 KiB erreichen kann (ich bin optimistisch und hoffe auf 700 KiB).
Zunächst muss ich also verstehen, worin meine Probleme hier bestehen, und da es um Bilder geht, sind es höchstwahrscheinlich:
- Format
- Auflösung
- Lazy Loading
Bildformat
Das Erste, was ich hier tue, ist, das Format zu ändern. PageSpeed empfiehlt WebP und AVIF. Ich wäre nicht ich, wenn ich an dieser Stelle keinen Vergleich anstellen würde.
Unterstützung prüfen
Prüfen wir an dieser Stelle die Unterstützung für beide Formate, und dafür verwende ich Can I Use, und hier sehe ich, dass die meisten der von mir gewünschten Plattformen unterstützt werden. IE11 unterstützt keines von beiden, aber das bedeutet mir nichts, da ich nicht die geringste Absicht habe, etwas zu unterstützen, das bereits ausgemustert ist. Die tatsächlichen Unterschiede sind also: KaiOS-Browser, Opera Mini und QQ Browser. Es gibt an dieser Stelle also keinen offensichtlichen Grund, sich für das eine oder das andere zu entscheiden (ja – mehr Unterstützung bedeutet für mich an dieser Stelle nicht automatisch besser).
Formatwechsel
Jetzt möchte ich den Unterschied in der Dateigröße der 5 Bilder auf der Website prüfen, ausschließlich abhängig vom Format.
Um Bilder in WebP zu konvertieren, führe ich 3 Befehle aus (einer ändert das Format und behält die Qualität bei, die anderen beiden ändern das Format und reduzieren die Qualität (Komprimierung))
mogrify -format webp -quality 100 *.jpg
mogrify -format webp -quality 90 *.jpg
mogrify -format webp -quality 70 *.jpg
Die Dateigröße wurde nach jedem Befehl separat erfasst. Danach wurden die nächsten drei Befehle ausgeführt:
mogrify -format avif -quality 100 *.jpg
mogrify -format avif -quality 900 *.jpg
mogrify -format avif -quality 70 *.jpg
Und nach Erhalt der Ausgabe wurden die Ergebnisse erneut notiert.
Ergebnisvergleich
Hier ist also die Tabelle mit den Ergebnissen, die ich erhalten habe (alle Dateigrößen sind in KiB angegeben).
| Ausgangsbild | Ausgangsgröße | WebP-Größe | WebP 90 % | WebP 70 % | AVIF-Größe | AVIF 90 % | AVIF 70 % |
|---|---|---|---|---|---|---|---|
| Bild 1 (100 % Qualität) | 297 | 385 | 44 | 28 | 291 | 50 | 26 |
| Bild 2 (100 % Qualität) | 894 | 1331 | 232 | 82 | 770 | 335 | 114 |
| Bild 3 (100 % Qualität) | 740 | 1228 | 127 | 59 | 546 | 187 | 69 |
| Bild 4 (100 % Qualität) | 1228 | 1740 | 420 | 208 | 991 | 513 | 280 |
| Bild 5 (100 % Qualität) | 2457 | 4270 | 547 | 125 | 2048 | 807 | 204 |
| Bild 1 (70 % Qualität) | 82 | 227 | 47 | 28 | 197 | 54 | 27 |
| Bild 2 (70 % Qualität) | 228 | 833 | 190 | 81 | 619 | 205 | 110 |
| Bild 3 (70 % Qualität) | 159 | 513 | 113 | 58 | 343 | 123 | 70 |
| Bild 4 (70 % Qualität) | 411 | 1433 | 395 | 205 | 925 | 383 | 259 |
| Bild 5 (70 % Qualität) | 390 | 2836 | 377 | 132 | 1433 | 358 | 183 |
Und die Ergebnisse sind ziemlich interessant:
- Ich war überrascht, dass sich die Dateigröße durch die Konvertierung der Bilder in WebP vergrößerte – an einem Punkt sogar um 627 % (Bild 2 bei 70 % Qualität), oder grob gerechnet – zusätzliche 2,3 MiB!
- Eine reine Konvertierung nach WebP bringt keinerlei Vorteile (tatsächlich schadet sie eher)
- Eine reine Konvertierung nach AVIF bringt nur gegenüber unkomprimierten JPEG- und WebP-Dateien einen Vorteil (bei automatisierten Aufgaben würde ich das daher unbedingt vermeiden, da viele Bilder im Internet bereits optimiert sind, sodass es nur schaden würde)
- Eine Qualitätsreduzierung um 10 % bringt bei WebP und AVIF im Vergleich zu JPEG einen enormen Vorteil
- WebP zeigt, obwohl es das ältere Format ist, eine bessere Leistung im Vergleich zu AVIF
- PageSpeed Insight lag „falsch“ – die Größe wurde um 768 KiB reduziert (ja, diese Zahl lässt sich auf 850 KiB oder sogar 950 KiB steigern, aber ist es das wirklich wert?)