How Do CSS Sprites Speed Up a Web Site

How do CSS sprites speed up a web site?

It's important to understand why the overhead of an HTTP request has such an impact.

In its simplest form, an HTTP request consists of opening a socket, sending the request on the open socket and reading the response.

To open a socket, the client's TCP/IP stack sends a TCP SYN packet to the server. The server responds with a SYN-ACK, and the client responds to that with an ACK.

So, before you send a single byte of application data, you have to wait for a whole one and a half round trips to the server, at least.

Then the client needs to send the request, wait for the server to parse the request, find the requested data, send it back - that's another round trip plus some server side overhead (hopefully a small overhead, although I've seen some slow servers) plus the time to transmit the actual data, and that's the best case, assuming no network congestion which would result in packets being dropped and retransmitted.

Every chance you have to avoid this, you should.

Modern browsers will issue multiple requests in parallel in an attempt to reduce some of the overhead involved. HTTP requests can theoretically be done on the same socket, making things a little better. But in general, network round trips are bad for performance, and should be avoided.

Performance report for myweb site

Let me try to answer this question.

Try to change your following code:

<img src="../abc.com/banner.jpg" class="img-responsive" alt="Responsive image" id="banner">

Into:

<img src="../abc.com/banner.jpg" width="512" height="33" class="img-responsive" alt="Responsive image">

You need to remove the id "id="banner"" to re-enable your banner responsiveness.

You can check up my blog http://qibug.com to see the real world example to resolve issue "Specify image dimensions"; I was specified my images dimensions without sacrificing their responsiveness. Try opening the post page to check the same thing on the feature image.

I hope you'll be okay with my answer.

When CSS sprites would be good to use and when not?

CSS sprites are best used for elements that have a fixed width and height. Otherwise, you need large empty spaces in your sprite image, which can (depending on file type) increase the size a bit.
Due to the way different file formats compress images, sometimes a CSS sprite image will have a noticeably smaller file size than the total file size of separate images. That’s a nice bonus.
As mentioned, sprites reduce the HTTP request overhead, which can help load time. I’ve never seen any numbers on the magnitude of this effect.
Sprites will add a bit of time for your CSS developers. It shouldn’t affect your designers. But bear in mind that your developers code the site up once; the benefits of sprites apply every time someone looks at the site.

Are image sprites actually more efficient than separate images?

Using an image more than once in a page doesn't mean that there is one copy of the image for each place where it is used.

If it did, a page like this demo fiddle would use around 7 GB of memory. It doesn't.

Loading one image is always faster than loading several images. Reducing the number of requests is important when optimising the performance of a site. The fact that the internet is designed to transmit small packages only makes the impact of loading several small images less than it could have been.

CSS Sprite loading speed - which is faster?

If there are any performance differences at all on the client side, it's in the computation of the styles, not the loading of the sprite images. And I can guarantee you that there are no performance differences at all.

Load times are an issue concerning the server or the Internet connection, not the browser's rendering engine.

Does using css sprite speed up performance in an html5 iphone app wrapped with phonegap?

In theory, no. However, at least on iOS, images aren't pre-loaded for each page load and you sometimes may see a 'flash' as the image is loaded into the page. So a sprite is one way to handle that. Another way is to use some JS to load all of your app's images in the background on the home page. It takes a bit longer for the app to load, but then everything is cached and ready to go.

Where sprites are a convenience, though, is maintenance. It's so much easier to only have to edit a handful of image sprites than it is to maintain dozens of individual image files.

How to make a website run faster?

Install YSlow and Pagespeed plugins for Firefox. Then start looking at all of the ways your site is unoptimized. This will be much like trying to take a sip of water from a fire hydrant.

Using minified ( and possibly aggregated ) Javascript and CSS along with a good, healthy far-future-expires is a really good way to start.

Don't forget to gzip.
And use Etags.
And put your CSS at the top of the document.
And put the javascript at the end.
And use separate domains for static resources.
And avoid URL redirects.
And remove duplicate javascript and CSS.

And... see what I mean about the fire hydrant!

How Do CSS Sprites Speed Up a Web Site