Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Transparent Gradients and Multiple Backgrounds

Sandeep Krishnan
Sandeep Krishnan
9,730 Points
Posted by Sandeep Krishnan
Sandeep Krishnan
9,730 Points

Hello, Is there an impact on the sites (loading) performance when we add gradient to background-image ?

i saw that the site was loading much slower when gradients were added

4 Answers

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Sandeep,

If you have to choose between using only a gradient background or an image background, there are two impacts to consider.

Consider whether you want the user's computer to do more work and use less bandwidth, or if you'd rather use more bandwidth and lighten the load on the user's computer.

Using gradients causes the user's computer to work a little harder, but they take very little bandwidth compared to background images which take up a chunk of bandwidth while causing less of a load on the user's computer.

Most of the time, gradients should be the better option if you're truly concerned about page load times, but in smaller cases the effects are barely noticeable, if they're noticed at all.

Good luck!

Sandeep Krishnan
Sandeep Krishnan
9,730 Points
Sandeep Krishnan
Sandeep Krishnan
9,730 Points

Thanks Daniel. I do have a high speed internet. Thanks for your inputs. I want to use both gradient and image as the effect is pretty cool. I am however worried only incase of places where the connection might bad/slow, not sure how the site would render.

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey again Sandeep,

Just to clarify, using gradients will be the better option if you're worried about people with slow connections.

Keep in mind that a connection has to be pretty poor for a few images to make a significant impact though, and use gradients if you're really concerned.

Good luck!

Sandeep Krishnan
Sandeep Krishnan
9,730 Points
Sandeep Krishnan
Sandeep Krishnan
9,730 Points

Many Thanks Daniel. Treehouse has been a very useful tool in my learning kit. I love your courses, its delivery methodology and much more.

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Sandeep,

Happy to help, but I'm a student here as well :D

These forums are mainly used by students, with the occasional teacher post.

This is definitely a great place to start learning about web development. A strong base of information for many different languages, and the content is updated regularly.

Also, on the topic of bandwidth concerns, once you're a little more advanced, look into CDNs (content delivery networks). They cache your site on their servers to eliminate natural bandwidth lag by having users download your site files from their nodes which are placed all around the globe.

Once you're ready, check out Cloudflare. They're just one option when you're looking for a CDN.

Good luck!

Sandeep Krishnan
Sandeep Krishnan
9,730 Points
Sandeep Krishnan
Sandeep Krishnan
9,730 Points

Thanks Daniel. Yes indeed. I have read about CDN's. i think i am far from that stage. I guess CDN's are used be FB / Google, kind of websites with thousands of page load accross the globe per sec :) Amazon also has a great CDN i hear - Amazon CloudFront

I think I would first be looking at learn some SEO aspect of CDN ( in the sense that loading is impact my rankings). Google analytic and PageSpeed Tools are good places for that. Have you tried it ?

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Sandeep,

CDNs can be used on smaller sites too, which should improve the numbers you get using those analytics and PageSpeed tools.

Once a site gets to a point where development is pretty much complete I go into optimization mode, even with smaller sites. With people being so finicky about waiting an extra second or two, every little bit counts. Which can really come full circle to the original issue of wanting as much performance as possible using images or gradients.

Using analytics is a good habit to get into, it's promising that you've discovered them already :D

Good luck!