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
