Improving performance with CSS Sprite

                            Shyamala Prayaga
                           20 November...
Agenda


 Performance – why and what?
 14 Rules to improve performance
 What is CSS Sprite?
 How do CSS Sprites work?
...
Why Performance ?


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


    Increase Speed
   ...
Performance


     Importance of frontend Performance.




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




     ...
Performance Type


           Performance have 2 flavors



    Response Time
    System Efficiency




                ...
14 Rules

1.    Make fewer HTTP requests
2.    Use a CDN
3.    Add an Expires header
4.    Gzip components
5.    Put Style...
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 com...
Techniques for reducing the number of HTTP requests


  CSS sprites
  Image Maps
  Inline Images
  Combined scripts & ...
© 2008 MindTree   Slide 10
What is CSS Sprite?

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


 CSS sprites a...
CSS Sprite

 multiple CSS background images => one image

 <div style="background-image:
 url('a_lot_of_sprites.gif');
 ba...
Before




         Number of HTTP
            Request
               8

         Total Image size
             20.5 kb


...
After




        Number of HTTP
           Request
              1

        Total Image size
             13 kb




     ...
How CSS Sprite works?


  The idea behind CSS sprites is to consolidate multiple images into
  one sprite and then select...
Benefits


  Increases Page Load Speed
  Improves accessibility
  Saves time
  saves bandwidth




                   ...
Demo




       © 2008 MindTree   Slide 17
Questions




            © 2008 MindTree   Slide 18
Imagination Action Joy




                                       Shyamala Prayaga
                         shyamala_praya...
Upcoming SlideShare
Loading in...5
×

Improving Site Performace Using Css Sprite

2,046

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,046
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Improving Site Performace Using Css Sprite

  1. 1. Improving performance with CSS Sprite Shyamala Prayaga 20 November 2008 © 2008 MindTree
  2. 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. 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. 4. Performance Importance of frontend Performance. Back-end = 5% Front-end = 95% © 2008 MindTree Slide 4
  5. 5. Performance Type Performance have 2 flavors  Response Time  System Efficiency © 2008 MindTree
  6. 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. 7. Rule 1: Make fewer HTTP request ©© 2008 MindTree 2008 MindTree
  8. 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. 9. Techniques for reducing the number of HTTP requests  CSS sprites  Image Maps  Inline Images  Combined scripts & combined Stylesheets © 2008 MindTree Slide 9
  10. 10. © 2008 MindTree Slide 10
  11. 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. 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. 13. Before Number of HTTP Request 8 Total Image size 20.5 kb © 2008 MindTree Slide 13
  14. 14. After Number of HTTP Request 1 Total Image size 13 kb © 2008 MindTree Slide 14
  15. 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. 16. Benefits  Increases Page Load Speed  Improves accessibility  Saves time  saves bandwidth © 2008 MindTree Slide 16
  17. 17. Demo © 2008 MindTree Slide 17
  18. 18. Questions © 2008 MindTree Slide 18
  19. 19. Imagination Action Joy Shyamala Prayaga shyamala_prayaga@mindtree.com www.mindtree.com ©© 2008 MindTree 2008 MindTree
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×