1. Improving performance with CSS Sprite
Shyamala Prayaga
20 November 2008
© 2008 MindTree

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 Slide 2

3. Why Performance ?
80-90% of the end-user response time is
spent on the frontend.
 Increase Speed
 Faster web site increases traffic, repeat visits, clicks, and
conversions
 Encourage repeated usage
© 2008 MindTree Slide 3

4. Performance
Importance of frontend Performance.
Back-end = 5% Front-end = 95%
© 2008 MindTree Slide 4

5. Performance Type
Performance have 2 flavors
 Response Time
 System Efficiency
© 2008 MindTree

6. 14 Rules
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 Slide 6

7. Rule 1: Make fewer HTTP request
©© 2008 MindTree
2008 MindTree

8. 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.
© 2008 MindTree Slide 8

9. Techniques for reducing the number of HTTP requests
 CSS sprites
 Image Maps
 Inline Images
 Combined scripts & combined Stylesheets
© 2008 MindTree Slide 9

10. © 2008 MindTree Slide 10

11. 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.
© 2008 MindTree Slide 11

12. CSS Sprite
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 Slide 12

13. Before
Number of HTTP
Request
8
Total Image size
20.5 kb
© 2008 MindTree Slide 13

14. After
Number of HTTP
Request
1
Total Image size
13 kb
© 2008 MindTree Slide 14

15. 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
© 2008 MindTree Slide 15

16. Benefits
 Increases Page Load Speed
 Improves accessibility
 Saves time
 saves bandwidth
© 2008 MindTree Slide 16

17. Demo
© 2008 MindTree Slide 17

18. Questions
© 2008 MindTree Slide 18

19. Imagination Action Joy
Shyamala Prayaga
shyamala_prayaga@mindtree.com
www.mindtree.com
©© 2008 MindTree
2008 MindTree