Understanding what happens on the client side is not easy. When you user visits your website you need to check his location, his device, connection speed, browser, and what page he is visiting. After gathering all this data, you also need to check what happened. How long it takes for him to see the page? How long it takes until the page is fully loaded and working? If there was a JS error what was it and why can’t you replicate it? Most of the users don’t have powerful machines, with fast-connections. In this talk we will analyze the tools you can use to profile the client, synthetic and RUM analysis and how you can improve the performance on the client side. Basic and more advanced tips with real examples.

1. Performance on the
client side
29 May 2015
Sérgio Laranjeira

2. Why Fast?
0-100ms 0-300ms 1 second 10 seconds
Bad Experience
Never coming back

3. Does it matter?ConversionRate
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

4. Conversion Rate
- 7%percent sales
1 Second Delay
30 milliona month
You are loosing
2.1 million a month
25 million a year

5. SecondstoLoad
7
2013 2014
6,5
5,3
Page Load Time
Top 100 e-commerce websites

6. Average page size
1995
14Kb
2.3 resources
2010
498Kb
75 resources
2014
1925Kb
100+ resources
2015
2099Kb
130+ resources

7. When you want to be fast, you have to
give up the things slowing you down
Addy Osmany

8. Tools to use

9. webpagetest.org
Desktop
Mobile

10. Rules of Performance
Rule 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

11. HTML
3%Scripts
16%
Stylesheeets
3%
Video
11%
Fonts
5%
Images
63%
Average bytes per Page

12. Images Optimization
grunt-contrib-imagemin
grunt-imageoptim
grunt-webp

13. Styles
Minified
110kb
UnCSS + Minification
11kb
Original Styles
120kb

14. Define your critical path

15. HTTP2

16. Fonts

17. 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 Font
Does it have support for Local
Storage?
Load font files
Fallback Method
Download Font
Async

18. JavaScript
http://youmightnotneedjquery.com/
http://jsperf.com/

20. Performance Budget
Budget Perfect target
Speed Index <2000 <1000
Server Response (TTFB)
ms
<450 <300
HTML Errors <20 0
DOM 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

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

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

23. Future
You 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.

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

25. Thank You
sergio.laranjeira@farfetch.com
@serlaranjeira
29 May 2015