CSS-JS-Booster: Image Inlining?!

[Cheatah]

Hi,

Ich bin eben über CSS-JS-Boster gestolpert. Was spricht denn für den Einsatz dieses Verfahrens?

es nimmt einige Optimierungen vor, die durchaus sinnvoll sein können.

Soll das ganze komplementär oder ersetzend zu CSS-Sprites sein?

Nein, es ist offenbar unabhängig davon.

Ich hänge mich am "Image Inlining" auf…

Wenn "es sich lohnt", werden Grafiken innerhalb des CSS-Codes abgelegt. Das ergibt mehr CSS, aber weniger HTTP. Abwägungssache.

Durch das Spriting reduziere ich den HTTP Overhead bereits enorm.

Ja, bleib dabei.

Diese Datei würde vom Booster nicht berücksichtigt werden. Demnach müsste auf Sprites verzichtet, oder eine Vielzahl davon eingesetzt werden.

Nein, die Grafiken landen einfach nicht im CSS-Code. Andere Optimierungen des Verfahrens sind davon vermutlich nicht betroffen und arbeiten ganz normal.

Der Booster versucht nun CSS und Bild in Einem zu übertragen. Das schafft er nur, wenn er die Binärsuppe des Bildes in Text überführt. Das wiederum bedeutet base64, das bedeutet wiederum künstliches Aufblasen des Volumens.

Und eine Reduktion der Requests, die insbesondere nur begrenzt parallelisierbar sind. Wenn Du bereits die Anzahl der Image-Requests auf 1 reduziert hast, ist hier ein Optimum erreicht. Das Verfahren scheint dies zu honorieren, indem es keine Änderung vornimmt.

Damit der Browser, der multiple HTTP-Requests an den selben Host durchführen kann, von dieser Parallelität auch profitieren kann, teilt der Booster die zusammengeschobene CSS-base64kodierteBilder-Suppe wieder in zwei oder mehr Dateien auf. Also zuerst nativ unvereinbare Dateiformate auf Kosten des Volumens zusammenführen, dann wieder auftrennen. Hört sich irgendwie "komisch" an.

Ist aber gar nicht mal so verkehrt. Download-Beschleuniger verfahren ähnlich.

Sprites:

Sind in Deinem Fall offensichtlich das ideale Verfahren, was Grafiken betrifft. Die Dinge, die nichts (direkt) mit Grafiken zu tun haben, könnten vom Booster beschleunigt werden.

Ist das beim Booster auch so, oder blockiert er das Rendern bis auch die Inlined Images angekommen sind?

Der Booster kann gar nichts blockieren. Die Frage ist, wie hier eine Rendering Engine vorgeht, also insbesondere ob die große CSS-Datenmenge abgearbeitet werden muss, bevor etwas dargestellt wird, oder ob es den Flash of Unstyled Content gibt. In Deinem Fall ist die Fragestellung irrelevant, weil Deine Sprite-Grafik ohnehin nicht im CSS-Code landet.

Warum muss ein PHP-Prozess bemüht werden, um quasi-statische Daten auszuliefern, wenn kein Reversed-Proxy (squid, nginx, ...) zur Verfügung steht?

Ich kenne das Produkt nicht und habe auch nicht vor, es zu analysieren. Möglicherweise besteht im Regelfall die Arbeit des PHP-Prozesses darin festzustellen, dass eine gecachte Ressource ausgeliefert werden kann.

Hab ich hier irgendwas nicht kapiert?

Der Booster verlagert einen hohen Performance-Aufwand auf der Clientseite zu einem (vergleichsweise) geringen Performance-Aufwand auf der Serverseite.

Cheatah