Hi Christian,
I actually like this idea a lot, especially as we have a lot of
smaller images that we are using to support the design.
During a previous performance sprint, we actually created CSS sprites
for the entire application, but as you say, they are hard to maintain
and the number of individual small images outside of sprites has
increased significantly since. So in terms of maintainability, this is
potentially a great solution.
Currently, 55.9% of our requests and 42.8% of all data traffic are
images. This means that for an unprimed cache, this solution should
actually make a huge difference. For a primed cache, it will matter a
lot less though (as they should be cached from that point on), but for
the sake of maintenance it's probably still quite valuable.
Once we get into the architectural work and have our measurement
environment set up, we can properly evaluate it and hopefully use it
as well ...
Thanks!
Nicolaas
On 23 Apr 2012, at 03:41, Christian Vuerings wrote:
Hey,
Over the last couple of days / weeks, I've been thinking a lot on
how we might improve our performance on the UI side.
One of my previous suggestions was to use CSS sprites.
While it would be a good thing to have, it can be tedious to make
and it's hard to maintain/update.
An alternative solution would be to convert the images that we use
in CSS to data URIs [1].
There is currently a library which would do this for us, called
CSSEmbed [2].
Benefits:
- Doesn't need any extra request, the images are embedded in the
CSS (A sprite would still require a request)
- Since the CSS is cached, the images are cached as well
- Way easier to maintain
- We would find images that are referenced in the CSS but not exist
anymore (found this while testing)
I made a proof of concept (for the CSS files in /dev/sakai/css) on
github [3] which we could hook into our release build.
Try it out by doing:
mvn clean install # will create the necessary folders
ant cssembed # replace the images in the CSS with data URIs
Some extra features/comments:
- Browser support is ie8+
- We can/should limit the size for which we allow generation of
data URIs
-- Christian
[1] http://en.wikipedia.org/wiki/Data_URI_scheme
[2]
Repo: https://github.com/nzakas/cssembed
Usage: https://github.com/nzakas/cssembed/wiki
Article:
http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/
[3] https://github.com/christianv/3akai-ux/tree/cssembed
_______________________________________________
oae-dev mailing list
[email protected]
http://collab.sakaiproject.org/mailman/listinfo/oae-dev
_______________________________________________
oae-dev mailing list
[email protected]
http://collab.sakaiproject.org/mailman/listinfo/oae-dev
