Let’s Speed up the WEB

Ways to Speed up the Web

Data CompressiongZip

Reduce the number of HTTP transfersCSS SpritesData URI

Minify

References –Google developer forum(These are only some of them)

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.

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.

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.

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"/>

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

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).

Reduce the number of requests and the amount of data transferred

• Images– CSS Image Sprites– Data URI

• Js– minify

• Css– minify

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.

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'

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;} ...

Google-CSS Sprite

• http://google.com

Example Data URI

• <img src="slide-img4.jpg/>

• data:image/jpeg;base64,/9j/4SrCRX…..

• <img src=" data:image/jpeg;base64,/9j/4SrCRX "/>

Image data URI

without gZip 160ms 16ms

with gzip 146ms 13ms

Lance mobile – Statistics

http://expression.inkriti.com

• Audit• Page Analyzer• Sprite Me

Thank you