Improving Site Performace Using Css Sprite
-
Upload
shyamala-prayaga -
Category
Documents
-
view
2.045 -
download
2
Transcript of Improving Site Performace Using Css Sprite
![Page 1: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/1.jpg)
© 2008 MindTree© 2008 MindTree
Improving performance with CSS Sprite
Shyamala Prayaga
20 November 2008
![Page 2: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/2.jpg)
© 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
![Page 3: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/3.jpg)
© 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.
![Page 4: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/4.jpg)
© 2008 MindTree
Performance
Slide 4
Back-end = 5% Front-end = 95%
Importance of frontend Performance.
![Page 5: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/5.jpg)
© 2008 MindTree
Performance Type
Performance have 2 flavors
Response Time
System Efficiency
![Page 6: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/6.jpg)
© 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
![Page 7: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/7.jpg)
© 2008 MindTree© 2008 MindTree
Rule 1: Make fewer HTTP request
© 2008 MindTree
![Page 8: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/8.jpg)
© 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
![Page 9: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/9.jpg)
© 2008 MindTree
Techniques for reducing the number of HTTP requests
CSS sprites
Image Maps
Inline Images
Combined scripts & combined Stylesheets
Slide 9
![Page 10: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/10.jpg)
© 2008 MindTree Slide 10
![Page 11: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/11.jpg)
© 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
![Page 12: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/12.jpg)
© 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
![Page 13: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/13.jpg)
© 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
![Page 14: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/14.jpg)
© 2008 MindTree
After
Slide 14
Number of HTTP Request
1
Total Image size13 kb
Number of HTTP Request
1
Total Image size13 kb
![Page 15: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/15.jpg)
© 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
![Page 16: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/16.jpg)
© 2008 MindTree
Benefits
Increases Page Load Speed
Improves accessibility
Saves time
saves bandwidth
Slide 16
![Page 17: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/17.jpg)
© 2008 MindTree
Demo
Slide 17
![Page 18: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/18.jpg)
© 2008 MindTree
Questions
Slide 18
![Page 19: Improving Site Performace Using Css Sprite](https://reader033.fdocuments.us/reader033/viewer/2022061604/554a314fb4c9051b578b5234/html5/thumbnails/19.jpg)
© 2008 MindTree© 2008 MindTree© 2008 MindTree
Imagination Action JoyImagination Action Joy
Shyamala Prayaga
www.mindtree.com