Timo and I were discussing the problem of our icon styles. Currently for each icon we ship the following to all users (debug version):
**…/w/load.php?modules=ext.echo.badgeicons&only=styles&skin=vector**
``` lang=css
.oo-ui-icon-bell {
background-image: url(/w/load.php?modules=ext.echo.badgeicons&image=bell&format=rasterized&lang=en-gb&skin=vector);
background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E %3Cpath d=%22M17.5 14V9c0-3-2.3-5-5.5-5S6.5 6 6.5 9v5c0 2 0 3-2 3v1h15v-1c-2 0-2-1-2-3zM12 20H9c0 1 1.6 2 3 2s3-1 3-2h-3z%22/%3E %3C/svg%3E");
}
```
This has an equivalent problem for each of our two groups of users:
1) SVG-supporting users (the vast majority) have to download a bunch of CSS for the PNG alternative, which is maybe 25% extra bytes, for no purpose.
2) Non-SVG users (who are using an older device, and likely care about speed and bandwidth meterage) have to download a bunch of CSS for the embedded SVG, which is maybe 75% extra bytes, for no purpose.
We can't vary the request URL because that would mean changing the HTML stored in Varnish, which would violate the entire point of caching. The "normal" thing to do would be having `load.php` URLs resolve differently based on user agent capability, but that would shatter the Varnish caches (varying on 100s or more of UA strings).
My suggestion was to try to fix only the first problem, by splitting the styles requests into two – one which has the embedded vector images, the other wrapped in `<noscript>` which has the (? embedded) raster images, and which would over-write the former.
**…/w/load.php?modules=ext.echo.badgeicons&only=styles&skin=vector&images=__vector__**
``` lang=css
.oo-ui-icon-bell {
background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E %3Cpath d=%22M17.5 14V9c0-3-2.3-5-5.5-5S6.5 6 6.5 9v5c0 2 0 3-2 3v1h15v-1c-2 0-2-1-2-3zM12 20H9c0 1 1.6 2 3 2s3-1 3-2h-3z%22/%3E %3C/svg%3E");
}
…
```
**…/w/load.php?modules=ext.echo.badgeicons&only=styles&skin=vector&images=__raster__**
``` lang=css
.oo-ui-icon-bell {
background-image: url(/w/load.php?modules=ext.echo.badgeicons&image=bell&format=rasterized&lang=en-gb&skin=vector);
…
```
Advantages:
* Significantly drops bandwidth/client side processing demand for most users.
* Simple to implement.
Disadvantages:
* Doesn't fix things for PNG users, but instead makes things worse (extra HTTP request, duplication of non-icon styles into second module).
** Extra HTTP handshake cost is pretty minimal given HTTP2.
** Could make this less costly by having a new kind of RL module, icon-only, which this applies to.
Offered as an idea.