Let’s Speed up the WEB
Ways to Speed up the Web
Data Compression
gZip
Reduce the number of HTTP transfers
CSS Sprites
Data URI
Minify
Refer...
Server without gZip Configuration
• Browser:
– Connects to server and requests page.
• Server:
– No gZip support. Ignores ...
Server with gzip
Browser:
Connects to server.
Notifies server that browser supports gzip "Accept-Encoding: gzip".
Server:
...
How gzip compression works
<h1>One</h1>
<h2>Two</h2>
<h3>Three</h3>
<h4>Four</h4>
<h5>Five</h5>
<div>One</div>
<div>Two</d...
How to Configure gZip in Xampp
tomcat
edit file /conf/server.xml and add to the HTTP Connector configuration
<Connector po...
Dell Mobile Statistics – gZip(Chrome)
Without gZip
• 28 web requests
• 885 kb of data transfer
• 1.5 sec
With gZip
• 28 we...
Time spent in loading popular
websites
Time Retrieving HTML Time Elsewhere
Yahoo! 10% 90%
Google 25% 75%
MySpace 9% 91%
MS...
Reduce the number of requests and the
amount of data transferred
• Images
– CSS Image Sprites
– Data URI
• Js
– minify
• C...
CSS sprites
• The name might be a little misleading, because sprites
aren't little images like we might be picturing, a sp...
Example :Before making a sprite
#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('....
Example after making sprite
#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:...
Google-CSS Sprite
• http://google.com
Example Data URI
• <img src="slide-
img4.jpg/>
• data:image/jpeg;base
64,/9j/4SrCRX…..
• <img src="
data:image/jpeg;base
6...
Lance mobile – Statistics
http://expression.inkriti.com
• Audit
• Page Analyzer
• Sprite Me
Thank you
Upcoming SlideShare
Loading in …5
×

Using gzip to speed up performance

381
-1

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
381
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Using gzip to speed up performance

  1. 1. Let’s Speed up the WEB
  2. 2. Ways to Speed up the Web Data Compression gZip Reduce the number of HTTP transfers CSS Sprites Data URI Minify References –Google developer forum(These are only some of them)
  3. 3. Server without gZip Configuration • Browser: – Connects to server and requests page. • Server: – No gZip support. Ignores gZip request. Sends uncompressed page. • Browser: – Receive page. – Display page.
  4. 4. Server with gzip Browser: Connects to server. Notifies server that browser supports gzip "Accept-Encoding: gzip". Server: Acknowledges gzip support. Sends gzip encoded page with header "Content-Encoding: gzip". Browser: Receive page. Decode gzip encoded page based on header "Content-Encoding: gzip". Display page.
  5. 5. How gzip compression works <h1>One</h1> <h2>Two</h2> <h3>Three</h3> <h4>Four</h4> <h5>Five</h5> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> Nevertheless, there are optimizations that can be made using this method, and it'll be up to you, the developer, to decide where those are appropriate.
  6. 6. How to Configure gZip in Xampp tomcat edit file /conf/server.xml and add to the HTTP Connector configuration <Connector port="8080" maxHttpHeaderSize="8192" maxThreads="150" minSpareThreads="25" maxSpareThreads="75" enableLookups="false" redirectPort="8443" acceptCount="100" connectionTimeout="20000" disableUploadTimeout="true" compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml"/>
  7. 7. Dell Mobile Statistics – gZip(Chrome) Without gZip • 28 web requests • 885 kb of data transfer • 1.5 sec With gZip • 28 web requests • 310 kb of data transfer • 774 ms Reduction of 575kb of data transfer and saved 726ms
  8. 8. Time spent in loading popular websites Time Retrieving HTML Time Elsewhere Yahoo! 10% 90% Google 25% 75% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% CNN 15% 85% Time spent loading popular web sites 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and stylesheets).
  9. 9. Reduce the number of requests and the amount of data transferred • Images – CSS Image Sprites – Data URI • Js – minify • Css – minify
  10. 10. CSS sprites • The name might be a little misleading, because sprites aren't little images like we might be picturing, a sprite is actually one big image. • The origin of the term "sprites" comes from old school computer graphics and the video game industry. • The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. • CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.
  11. 11. Example :Before making a sprite #nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.gif')} #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')} #nav li a.item2 {background-image:url('../img/image2.gif')} #nav li a:hover.item2 {background-image:url('../img/image2_over.gif'
  12. 12. Example after making sprite #nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;} ...
  13. 13. Google-CSS Sprite • http://google.com
  14. 14. Example Data URI • <img src="slide- img4.jpg/> • data:image/jpeg;base 64,/9j/4SrCRX….. • <img src=" data:image/jpeg;base 64,/9j/4SrCRX "/> Image data URI without gZip 160ms 16ms with gzip 146ms 13ms
  15. 15. Lance mobile – Statistics http://expression.inkriti.com • Audit • Page Analyzer • Sprite Me
  16. 16. Thank you

×