Question

I’m trying to improve page’s performance by reducing additional requests done for various image sprites and embedding all image sprites into main stylesheet. Now my stylesheet size grows fast and now reached almost 500KBs and it started to worry me – will it be cached properly both in desktop and mobile browsers?

I read about mobile caching and found out that modern(don’t really care about old ones) mobile browsers caches files up to 1MB size. So if I understand right everything should be ok regarding caching, right?

Then I’m also interested is there any big difference in performance while serving icon sprites separately(about 10-20 files) or including all into one stylesheet(reducing requests count from 11-21 to only 1)?

Am I right thinking that one bigger request is much better then 10-20 small ones?

Thank you

Answer 1

will it be cached properly both in desktop and mobile browsers?

Sure. No reason to think it will not, though mobile browsers do have smaller caches.

Am I right thinking that one bigger request is much better then 10-20 small ones?

Yes, it normally is. Most browsers will be configured to have up to 4 parallel downloads happening in a page, so 10-20 requests will required that many more connections and latency for the response.

But two big requests can be done in parallel, so consider to have a big sprite sheet instead of data URIs (base64 is about 30% bigger than the encoded binary, too).