Make Web Faster

http://bit.ly/1atRHzH


MD Khan / @mdkhan005

Top 10

www.stevesouders.com

Medium

www.stevesouders.com

$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?

httparchive.org

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?

httparchive.org

Image (61.01%)!!!

PNG vs JPEG

PNG

Choose right image format
When to use JPEG or PNG

JPEG

Right format of image

Can't live w/o images

1. Compress



Addy Osmani: Image Optimization
Yotta: Impact of image compression

Compression (Tools)

jpeg-optimizer
Compress JPG
JPEG Optimum
Opti PNG 
PNG Out 
Tiny png 
Smush it

Then?

2. Combine

Sprite


Source: Sprite mastery How sprite works: blueboldsolutions.com
Sprite recommendation
aliasapart.com.
Sprite improvement: writegoodcode.com

Sprite (Tools)



Sprite pad
Sprite gen
Sprite me
CSS sprite

Next?

3. Cache

Cache static contents

Browser caching

Proxy caching (CDN)



Caching tutorial
Apache Caching Guide
Optimize Caching

Cache test (2010)

W3 Total Cache

Cached

W3 Total Cache

Cache setting IIS

Windows Server

Content Delivery Network (CDN)

How CDN Work
Apache Traffic Server
dyn.com

CDN Test

Achieve 2s Page Load

Distributed DNS Provider

Cache DNS lookup
List of Free DNS Service Provider

dyn.com

OK?

4.JAIL

Jquery Asynchronous Image Loader


Jail
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
FonTello.comn

6. Css icon

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

7. WebP

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

SVG

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
Uglify
JS Min

CSS Tidy
Minify CSS
CSS Minifier

2.Combine

Combine JS

Google Best Practice

CommonJS, Require JS

Automated Workflow

Give the load to Grunt!

Yo

http://yeoman.io

3.Position

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)

HTML

Reduce DOM Elements

W3.org Traversing DOM
Ways to reduce DOM element

Don't Touch DOM

W3.org DocumentFragment
JS DocumentFragment In order DOM Access
YDN: developer best practice

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>
w3.org

One Last Thing !

gZip

gbugs (tool)
Apache Settings

Optimizing for Mobile Networks

Ilya Grigorik: Mobile Networks

I am lost(?)

Google: Developer Best Practice

Web Page Test

www.webpagetest.org

Developer Tool

Page Speed

Page Speed Automation

modPageSpeed.com

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

http://bit.ly/1atRHzH

MD Khan / @mdkhan005
#