improving site performace using css sprite
TRANSCRIPT
© 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
www.mindtree.com