Using gzip to speed up performance

  • 298 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
298
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
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. Let’s Speed up the WEB
  • 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. 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. 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. 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. 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. 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. 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. Reduce the number of requests and the amount of data transferred • Images – CSS Image Sprites – Data URI • Js – minify • Css – minify
  • 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. 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. 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. Google-CSS Sprite • http://google.com
  • 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. Lance mobile – Statistics http://expression.inkriti.com • Audit • Page Analyzer • Sprite Me
  • 16. Thank you