Profilling client performance

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.

Transcript

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? Conversion Rate 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 million a month You are loosing
 2.1 million a month 
 25 million a year
5. Seconds to Load 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