Improving Site Performace Using Css Sprite

  • 1,968 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,968
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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