profilling client performance

Performance on the client side

29 May 2015

Sérgio Laranjeira

Why Fast?

0-100ms 0-300ms 1 second 10 seconds

Bad Experience Never coming back

Does it matter?Co

nver

sion

Rat

e

0

0,1

0,2

0,3

0,4

Load Time (seconds)

0-1 1-2 2-3 3-4 4-5 5-6 6-7 7-8 8-9 9-10

Conversion Rate

- 7% percent sales

1 Second Delay

30 million a monthYou are loosing

2.1 million a month 25 million a year

Seco

nds

to L

oad

7

2013 2014

6,5

5,3

Page Load Time Top 100 e-commerce websites

Average page size

1995

14Kb 2.3 resources

2010

498Kb 75 resources

2014

1925Kb 100+ resources

2015

2099Kb 130+ resources

When you want to be fast, you have to give up the things slowing you down

Addy Osmany

Tools to use

webpagetest.org

Desktop

Mobile

Rules of PerformanceRule 1 - Make Fewer HTTP Requests Rule 2 - Use a Content Delivery Network Rule 3 - Add an Expires Header Rule 4 - Gzip Components Rule 5 - Put Stylesheets at the Top Rule 6 - Put Scripts at the Bottom Rule 7 - Avoid CSS Expressions Rule 8 - Make JavaScript and CSS External Rule 9 - Reduce DNS Lookups Rule 10 - Minify JavaScript Rule 11 - Avoid Redirects Rule 12 - Remove Duplicate Scripts Rule 13 - Configure ETags Rule 14 - Make AJAX Cacheable

HTML 3%Scripts

16%Stylesheeets

3%Video 11%

Fonts 5%

Images 63%

Average bytes per Page

Images Optimization

grunt-contrib-imagemin grunt-imageoptim

grunt-webp

Styles

Minified

110kbUnCSS + Minification

11kbOriginal Styles

120kb

Define your critical path

HTTP2

Fonts

Load font from local Storage

Add the CSS to the page

Add the Font to the local storage

Is the font in the Local Storage already?

Local Storage FontDoes it have support for Local

Storage?

Load font files Fallback Method

Download Font Async

JavaScript

http://youmightnotneedjquery.com/

http://jsperf.com/

Performance BudgetBudget Perfect target

Speed Index <2000 <1000Server Response (TTFB)

ms <450 <300

HTML Errors <20 0DOM Elements <1200 700

Fully Loaded Time <5s 1s

Fully Loaded Bytes <2000kb <1.500Kb

Document Complete Time <3s <1.5s

Performance Grade Desktop / Mobile 80/75 95/90

Performance is everyones job Optimize, repeat and keep testing Visualize and share results with everyone

Performance Culture

Perception of fast and performant website is sometimes more important than being actually fast.

FutureYou will eventually have to rebuild all your system

Everyone at your company will be focused on performance.

Web Technologies will make you have extremely instant experiences.

It’s a race… you always need to be the fastest

Thank You sergio.laranjeira@farfetch.com @serlaranjeira

29 May 2015