Improving Site Performace Using Css Sprite

© 2008 MindTree© 2008 MindTree

Improving performance with CSS Sprite

Shyamala Prayaga

20 November 2008

© 2008 MindTree Slide 2

Agenda

Performance – why and what?

14 Rules to improve performance

What is CSS Sprite?

How do CSS Sprites work?

CSS Sprite Demo

Benefits of CSS sprite

© 2008 MindTree

Why Performance ?

Slide 3

Increase Speed

Faster web site increases traffic, repeat visits, clicks, and conversions

Encourage repeated usage

80-90% of the end-user response time is spent on the frontend.

© 2008 MindTree

Performance

Slide 4

Back-end = 5% Front-end = 95%

Importance of frontend Performance.

© 2008 MindTree

Performance Type

Performance have 2 flavors

Response Time

System Efficiency

© 2008 MindTree

14 Rules

Slide 6

1. Make fewer HTTP requests

2. Use a CDN

3. Add an Expires header

4. Gzip components

5. Put Style sheets at the top

6. Move scripts to the bottom

7. Avoid CSS expressions

8. Make JS and CSS external

9. Reduce DNS lookups

10. Minify JS

11. Avoid redirects

12. Remove duplicate scripts

13. Configure ETags

14. Make AJAX cacheable

© 2008 MindTree© 2008 MindTree

Rule 1: Make fewer HTTP request

© 2008 MindTree

© 2008 MindTree

Reducing HTTP Request

80-90% of load time is from the frontend

Most of this time is spent on downloading all the components in the page: images, Style sheets, scripts, Flash, etc.

Reducing the number of components in turn reduces the number of HTTP requests required to render the page.

The less the HTTP Request is the faster is the Page.

Slide 8

© 2008 MindTree

Techniques for reducing the number of HTTP requests

CSS sprites

Image Maps

Inline Images

Combined scripts & combined Stylesheets

Slide 9

© 2008 MindTree Slide 10

© 2008 MindTree

What is CSS Sprite?

CSS Sprites are the preferred method for reducing the number of image requests.

CSS sprites allow you to create a single file that contains all the images laid out in a grid, requiring only a single image and only a single server call.

Slide 11

© 2008 MindTree

CSS Sprite

Slide 12

multiple CSS background images => one image

<div style="background-image:

url('a_lot_of_sprites.gif');

background-position:

-260px -90px;

width: 26px;

height: 24px;">

</div>

overall size reduced

generator: http://spritegen.website-performance.org/

http://stevesouders.com/examples/sprites.php

© 2008 MindTree

Before

Slide 13

Number of HTTP Request

8

Total Image size20.5 kb

Number of HTTP Request

8

Total Image size20.5 kb

© 2008 MindTree

After

Slide 14

Number of HTTP Request

1

Total Image size13 kb

Number of HTTP Request

1

Total Image size13 kb

© 2008 MindTree

How CSS Sprite works?

The idea behind CSS sprites is to consolidate multiple images into one sprite and then selectively display portions of this sprite with background positioning.

The Steps are as follows

Group multiple images together (usually icons or decorative images) into one sprite

Evenly space these images, aligned into one or more lines

Set this sprite to the background image of an element (usually a list)

Position the sprite to display the appropriate image by shifting the X or Y position by a multiple of the spacing

Slide 15

© 2008 MindTree

Benefits

Increases Page Load Speed

Improves accessibility

Saves time

saves bandwidth

Slide 16

© 2008 MindTree

Demo

Slide 17

© 2008 MindTree

Questions

Slide 18

© 2008 MindTree© 2008 MindTree© 2008 MindTree

Imagination Action JoyImagination Action Joy

Shyamala Prayaga

shyamala_prayaga@mindtree.com

www.mindtree.com