Weitere ähnliche Inhalte
Ähnlich wie Improving Site Performace Using Css Sprite (20)
Mehr von Shyamala Prayaga (20)
Improving Site Performace Using Css Sprite
- 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
- 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
- 19. Imagination Action Joy
Shyamala Prayaga
shyamala_prayaga@mindtree.com
www.mindtree.com
©© 2008 MindTree
2008 MindTree