May 5, 2012

faster load time: background image or browser property?

Question by Doug Firr

I have a messy background on my site and, to make it a little easier to read I use this background property:

p : background-color {rgba(250, 250, 250, 0.7)}

With the goal of site load time in mind, would it be better to use a background image with opacity?

You can see the issue here: http://tinyurl.com/7ywoqpf

Note I am already working on reducing the background PNG size, this question is about the paragraph background only

Should I keep current settings or use a background image?

Answer by Andy Davies

Ok this is what the page load waterfall looks like – http://www.webpagetest.org/result/120505_MG_47R9V/1/details/

You already know you need to reduce the images but there’s a few other things you can do..

Remove duplicate ga.js
Use jquery.min.js instead of jquery.js
Turn on gzip for html, css and js

If you’re looking for an image compressor jpegmini.com does a fine job with jpegs, and there are plent of options for PNGs

Answer by Starx

Images have to be downloaded from the server then loaded to browser, Where as using CSS properties like rgba to create the effect, It relies on the browser alone. So without a doubt, rgba is better than images.

...

Please fill the form - I will response as fast as I can!