Improving Site Performace Using Css Sprite
Download as PPT, PDF1 like1,735 views
The document discusses how to improve website performance through the use of CSS sprites. CSS sprites allow multiple images to be combined into a single image file, reducing the number of HTTP requests needed to load images on a page. By positioning portions of the sprite as backgrounds, only one image file needs to be downloaded. This technique benefits performance by increasing page load speeds and saving bandwidth. The document provides an example of how CSS sprites work and the performance gains that can be achieved.
Improving Site Performace Using Css Sprite
- 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