profilling client performance
TRANSCRIPT
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
