Reducing The Number Of Requests On Your Server
CSS Sprite (Cascading Style Sheet Sprite) is a way to create one file containing all the images you want to place on a page, on a single grid. Each individual image on a web page requires a separate request made on the server. These requests slow down the speed at which your web pages load. By placing the images on a single grid, you eliminate reduce the number of requests from the number of images you want to display to one single request. For example, if you have seven images, that would take seven separate requests for each; in fact each request is broken down into more sub requests (DNS, Connect, Pre, Start and Transfer). Placing all seven on a CSS Sprite, reduces the number of requests from seven to one.
Text and Images
The two common attributes of any web page are texts and images. Text is very simple and are retrieved easily and quickly by your servers. However, including several images on your web pages, can slow down your page speed. Images require more space and if a browser needs to continuously make requests for multiple images, it will take more time for the page to load completely.
When a browser makes a request for an HTML page, the server will respond with that page, but the browser will again need to make requests for the resources on that page, including images. The html information is the first to load. Now if the page has several images, the browser will need to make several requests.
Every time a browser needs to make a request it needs to wait for the server to respond. This request and response cycle builds up the time it needs to download a complete web page. The only logical solution to improve the loading speed of a web page is to decrease the amount of times a browser will need to make a request for resources.
When a browser makes a request for an HTML page, the server will respond with that page, but the browser will again need to make requests for the resources on that page, including images. Now if the page has several images, the browser will need to make several requests.
Why CSS Sprite
CSS Sprite has been used for quite some time by developers to improve performance.
Spriting for Web Pages
Spriting for web pages is actually quite simple. Well, the concept is simple but the application may be a bit more complex. In order to minimize the amounts of requests that a browser needs to make for the images, the server just sends one big image to the browser. That image will have all the images that the HTML page will use. CSS is then used to display only a certain parts of the image that is required. The other parts of the image are blocked or hidden from view. This way, the browser does not need to send multiple requests for images. Other requests can be dedicated for other types of resources that the page needs. Page performance is greatly improved as the browser will require less time to load a complete page.
Facebook is a good example of using CSS Sprites
A good example of a website that makes wide use of CSS sprite is Facebook. There are images that are common on every page of Facebook and the site is able to maximize page performance by incorporating all of the common images into one image.
The Faster The Better
Page speed is an important component in Search Engine Optimization. It is one of the criteria used by the search engines to rank your website. Visitors as well want to be able to navigate a website with minimal delay, so including CSS Sprites in your design can improve your ranking as well as your user enjoyment.
|Diana Rozenblum is a technology writer for abt internet|