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