Die Folge bei vielen Request's - die Webseite wird sehr langsam.
Ausgelöst durch einen Nebensatz in einem Vortrag von 1und1 Entwicklern die auch schon (wie andere) darüber nachgedacht haben das Thema über URI Data zu lösen, es aber mit der Bemerkung "läuft nicht unter Internet Explorer 7" zu den Akten gelegt haben.
Mein Einsatzbefehl kam genau mit diesem Nebensatz, musste man doch nur klären, welche Browser solche Imagelinks verarbeiten können und welche nicht.
Diejenigen die das können verpasst man die Normalform , den anderen eben eine URI Data und das ganz bitte sehr möglichst automatisch.
Nachdem ich in umfangreichen Test's über 50 Browser bzw. Versionvarianten diejenigen ermittelt hatte, die das schlucken, konnte man die Sache programmtechnisch vereinfachen - alles andere schluckt es halt nicht.
Heraus kam lediglich eine Variable die ich goodbrowser genannt habe und die true war wenn es funktionierte.
Der Rest - einfach - ein Plugin lieferte in Abhängigkeit von goodbrowser entweder einen normalen Link oder den URI Data Link.
Das hier gezeigte Image ist so ein Link, er wird nicht zu sehen sein, wenn ihr Browser das nicht kann.
Es geht darum ein Image base_64 zu encoden und somit sämtliche Informationen direkt in den Quelltext einer HTML Seite zu setzen.
Damit entfällt pro Image ein Request - die Seite wird rassig schnell.
Pagespeed von 100 ist damit sehr leicht erreichbar, wenn die anderen Massnahmen ebenfalls erfüllt wurden, insbesondere das Caching und die komprimierte Übertragung.
Tatsächlich entsteht durch das Einlesen des Imagefiles und des Encoding ein Zeitaufwand der aber sich aber erst in der dritten Kommastelle bemerkbar macht.
Geschwindigkeit ist das was der Besucher vorfindet wenn eine Seite komplett gerendert wurde und da sieht es enorm anders aus wegen der extremen Verringerung der Request's.
Um die Sache nun noch einen weiteren Höhepunkt zu verpassen wurde diese Technik bei PowerCMS auch noch in der CSS eingesetzt.
Tatsächlich kann man damit die Anzahl der Request's bis runter auf drei drücken - html, CSS und favicon - schneller geht es kaum noch.
Images die als Text und encoded geliefert werden sind größer, setzt man aber Kompression an hat man tatsächlich unterm Strich sogar weniger Bytes zu übertragen.
URI Data ist ja keine neue Sache, aber meines Wissens sind wir das erste Projekt das diese Technik erfolgreich und konsequent , da systematisch einsetzt.
Keine Kommentare:
Kommentar veröffentlichen