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.
