Make Web Faster

MD Khan / @mdkhan005

Top 10


$2.5 million

1 second Delay

Load >3 secs

40% users leave

How fast is fast

How slow is Slow

Response Time: Important Limits (Nielsen Norman Group)

How fast websites

How Fast Are Websites Around The World?

Best Practices

Killing us

Are we Improving?

Life of a Request over wire
Navigation Timing

Internet (network) slow?

Bandwidth vs Latency

Network Performance
Ilya Grigorik: Performance Bottleneck
Why does Latency matters

What makes a website?

Image (61.01%)!!!



Choose right image format
When to use JPEG or PNG


Right format of image

Can't live w/o images

1. Compress

Addy Osmani: Image Optimization
Yotta: Impact of image compression

Compression (Tools)

Compress JPG
JPEG Optimum
Opti PNG 
PNG Out 
Tiny png 
Smush it


2. Combine


Source: Sprite mastery How sprite works:
Sprite recommendation
Sprite improvement:

Sprite (Tools)

Sprite pad
Sprite gen
Sprite me
CSS sprite


3. Cache

Cache static contents

Browser caching

Proxy caching (CDN)

Caching tutorial
Apache Caching Guide
Optimize Caching

Cache test (2010)

W3 Total Cache


W3 Total Cache

Cache setting IIS

Windows Server

Content Delivery Network (CDN)

How CDN Work
Apache Traffic Server

CDN Test

Achieve 2s Page Load

Distributed DNS Provider

Cache DNS lookup
List of Free DNS Service Provider



Jquery Asynchronous Image Loader

Jquery Lazy load
Universal Lazy loader

Lazy load benefits

Slide share: Lazy loading benefit

5. Font Icon

Click: Font Awesome
CSS Trics: Icon Font
We Love Icon Font
5 Use case for Icon Font
Font Awesome
Ico Moon

6. Css icon

Shapes of CSS
pure css logo
Pure CSS Icon
Twitter logo in codepen

7. WebP


Google compare: webp
Faster and more beautiful website with WebP

Anything Else?

8. Parallel Download

Parallel Download

Google: Parallel download google map

9. Prefetch

HTML5 Prefetching Picasa: Prefetch resources
Prefetching Images

Images on Mobile

Load Images through Css

fast loading mobile website

Use CSS 3 instead of Image

10. Data URI

Nicholas Zackas: Data URI Explained
Be Better & Faster

11. Inline Scalable Vector Graphics


Data URI vs Inline

That's all about Image.

Scripts + Styles (19.2%)

1. Minify

yottaa: JS optimization

Minify (Tools)

ggl closure (demo)
JS Compress
JS Min

CSS Tidy
Minify CSS
CSS Minifier


Combine JS

Google Best Practice

CommonJS, Require JS

Automated Workflow

Give the load to Grunt!



Order matters

Style on Top

Script on bottom

Cuzillion demo (youtube)

Properly include style and scripts

4. Asynchronous Resources

Google Best Practice

Async Vs Defer

<script src="file-a.js"></script>
<script src="file-b.js" defer></script>
<script src="file-c.js" async></script>

Async Vs Defer

Minimize Round Trip (Bonus)

Google: Make web faster

5. Smart Code (#easy :p)


Reduce DOM Elements Traversing DOM
Ways to reduce DOM element

Don't Touch DOM DocumentFragment
JS DocumentFragment In order DOM Access
YDN: developer best practice

Optional html tags

<p>Some text
<p>Some more text
 <li>A list item
 <li>Another list item
<p>Some text</p>
<p>Some more text</p>
 <li>A list item</li>
 <li>Another list item</li>

One Last Thing !


gbugs (tool)
Apache Settings

Optimizing for Mobile Networks

Ilya Grigorik: Mobile Networks

I am lost(?)

Google: Developer Best Practice

Web Page Test

Developer Tool

Page Speed

Page Speed Automation

Need More (!!)

Chrome Predictor and PreRender
Mozilla PreFetch
Web Performance Crash Course
Book: High Performance Browser Network
Automate Web Performance
Mod PageSpeed
Web font Performance
SPDY protocol Draft

Free Tip

Thank you

MD Khan / @mdkhan005