Make Web Faster

http://bit.ly/1atRHzH

MD Khan / @mdkhan005

Top 10

Medium

$2.5 million

Load >3 secs

40% users leave

How fast websites

Best Practices

Killing us

Are we Improving?

Internet (network) slow?

Bandwidth vs Latency

What makes a website?

Image (61.01%)!!!

PNG vs JPEG

PNG

• Alpha-channel

• Less noise for texts

• Lossless compression

• Not good compression for large digital photo

JPEG

• Digital photo

• Full color

• Lossy format

Can't live w/o images

1. Compress

Compression (Tools)

Then?

2. Combine

Sprite

Sprite (Tools)

Next?

3. Cache

Cache static contents

Browser caching

Proxy caching (CDN)

Cache test (2010)

Cached

Cache setting IIS

Content Delivery Network (CDN)

CDN Test

Distributed DNS Provider

OK?

4.JAIL

Jquery Asynchronous Image Loader

Lazy load benefits

5. Font Icon

6. Css icon

7. WebP

WebP

• Image format by Google

• 25-34% more compression than JPEG

• 28% smaller in size than to PNG

Anything Else?

8. Parallel Download

Parallel Download

9. Prefetch

Images on Mobile

Load Images through Css

Use CSS 3 instead of Image

• Drop shadow

• gradient fill

• Add more to this list

10. Data URI

11. Inline Scalable Vector Graphics

SVG

That's all about Image.

Scripts + Styles (19.2%)

1. Minify

Minify (Tools)

2.Combine

Combine JS

CommonJS, Require JS

Automated Workflow

Give the load to Grunt!

Yo

3.Position

Order matters

Style on Top

Script on bottom

4. Asynchronous Resources

Async Vs Defer

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

Minimize Round Trip (Bonus)

• Minimize redirects

• Avoid bad request

5. Smart Code (#easy :p)

HTML

Reduce DOM Elements

Don't Touch DOM

Optional html tags

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

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

One Last Thing !

gZip

Optimizing for Mobile Networks

• Eliminate Periodic and Inefficient Data Transfer

• Brust your Data and Return to Idle

• Anticipate Network Latency Overhead

• Design for Variable Network Interface Availability

I am lost(?)

Web Page Test

Developer Tool

Page Speed

Page Speed Automation

modPageSpeed.com

Need More (!!)

Free Tip

Thank you

http://bit.ly/1atRHzH