How Speedcurve Help Vidio Achieve Start Render Under 2 sec

Fronteers Meetup 1.0 - December 4, 2017

2. HOW SPEEDCURVE HELP VIDIO.COM ACHIEVE START RENDER UNDER 2S fronteers meetup 1.0
3. TOPICS ➤ About ➤ Overview Start Render Speedcurve Vidio’s Start Render, before & after ➤ How To ➤ Tips
4. ABOUT KUNTO AJI. K Professional ➤ Software Engineer at BBM ➤ Previously at KMK: liputan6.com, karir.com, vidio.com Contact ➤ Blog: kaklabs.com ➤ Twitter & IG: @kaklabs ➤ kontak@kaklabs.com Free Time ➤ Develop and maintain catetin.com Fun Facts ➤ Learn HTML & CSS because blogger’s template is bad ➤ Used to be Slackware fan boy
5. OVERVIEW START RENDER, SPEEDCURVE, AND VIDIO’S OPTIMIZATION
6. START RENDER TIME The Start Render time is measured as the time from the start of the initial navigation until the first non-white content is painted to the browser display
7. SPEEDCURVE ➤ Browser rendering performance monitoring ➤ Based on webpagetest.org ➤ $0.01 per web page check ➤ No Additional Script required ➤ Historical Data ➤ Benchmark Sites ➤ Monitor: start-render, speedindex, and more
8. 5.5 - 8.5S Vidio’s Start Render Before Optimization (Desktop & Mobile)
9. AFTER START RENDER OPTIMIZATION - DESKTOP - 29 AUGUST 2017 Homepage Desktop Watch Page Desktop
10. AFTER START RENDER OPTIMIZATION - MOBILE - 29 AUGUST 2017 Homepage Mobile Watch Page Mobile
11. EXAMPLE DETAIL - DESKTOP HOMEPAGE filmstrip waterfall
12. EXAMPLE DETAIL - DESKTOP HOMEPAGE (2) CPU content breakdown
13. CONSTRAINTS / RULES ➤ Use same libraries until maximum performance first before change to new one. New library / technology is not always give better result Avoid more complexity to codebase and testing tools
14. HOW?
15. BROWSER RENDERING, NO JS NEEDED Back-end Performance + Network Performance + Front-end Performance Faster = Better Result
16. VIDIO’S CONDITION BEFORE START RENDER OPTIMIZATION ➤ Back-end performance Full Page Caching —> Optimum ➤ Front-end performance FontFaceObserver Thumbor image engine ➤ Network performance Minify JS, CSS, HTML Uglify JS Gzip compression CDN Domain Sharding Code Splitting: only JS on user dashboard Area of Focus: Network and Front-end.
17. VIDIO’S OPTIMIZATIONS 1. Remove render-blocking resources 2. Reduce file size Remove unused code HTML, JS, CSS Code splitting 3. Reduce file request 4. Use HTTP/2 5. Optimize Web Font 6. Use dns-prefetch and preconnect meta tag
18. REMOVE / REDUCE RENDER-BLOCKING RESOURCES ➤ Render-blocking resources: resources that makes HTML parser from browser has to stop and execute it before it can continue parsing HTML ➤ Before optimization Vidio has 8 blocking JS requests and 2 blocking css
19. THREE TYPES OF RENDER-BLOCKING RESOURCES ➤ A <script> tag that: Is in the <head> of the document Does not have a defer or an async attribute in <head> or <body> ➤ A <link rel="stylesheet"> tag that: Does not have a disabled attribute. When this attribute is present, the browser does not download the stylesheet. Does not have a media attribute that matches the user's device ➤ A <link rel="import"> tag that: Does not have an async attribute.
20. ASYNC AND DEFER SCRIPT TAG ➤ green: HTML parsing ➤ gray: HTML parsing paused ➤ yellow: script download ➤ red: script execution <script src="yourscript.js"></script> <script src=“yourscript.js" async></script> <script src=“yourscript.js" defer></script>
21. RESULT & TIPS ASYNC AND DEFER SCRIPT TAG ➤ If the script is modular and does not rely on any scripts then use async. Example: Google Analytics script ➤ If the script relies upon or is relied upon by another script then use defer. ➤ Remove all inline scripts that depend on other scripts
22. REDUCE FILE SIZE: REMOVE UNUSED CODE ➤ Remove unused JS library After Vidio has zero render-blocking JS, it only has effect to page load time, not start render time ➤ Remove unused HTML tag Faster download and DOM construction ➤ Remove Unused CSS Faster download and CSSOM construction
23. REDUCE FILE SIZE: CODE SPLITTING ➤ Vidio has different bundle JS and CSS for public user and signed-in user. ➤ Less code, faster download and CSSOM construction ➤ Public User JS filename: application-<hash>.js CSS filename: application-<hash>.css ➤ Signed User JS filename: application_authenticated-<hash>.js CSS filename: application_authenticated-<hash>.css
24. REDUCE FILE REQUEST ➤ HTTP/1.1: 1 request = DNS resolve + TCP connection + SSL negotiation + Download time ➤ Combine multi files CSS No need to wait other CSS for rendering ➤ Combine multi files JS After Vidio has zero render-blocking JS, it only has effect to page load time, not start render time
25. OPTIMIZE WEB FONT ➤ If the font is not available the browser may not render any text pixels until it’s downloaded ➤ FontFaceObserver: Use default font first, when web font available, font will be replaced with web font ➤ Make FontFaceObserver loaded without render-blocking Pros: Faster start render Cons: User experience flash of unstyled text. Bad for UX.
26. OPTIMIZE WEB FONT (2) ➤ Solution: Remove unused glyphs / characters from web font. Example character: ű Font Tools: https://github.com/fonttools/fonttools Font Forge: https://github.com/fontforge/fontforge This will reduce file size —> faster download But on bad internet connection user still experience flash of unstyled text ➤ Other Solution: Use System Font
27. SYSTEM FONT ➤ System fonts are the fonts already installed on your computer ➤ No need to download font, faster start render. ➤ No Flash of Unstyled text, good UX. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;
28. HTTP/2 ➤ HTTP/1.1: every request always create TCP connection and SSL negotiation ➤ HTTP/2: Only create one TCP Connection and SSL negotiation for every request ➤ No Need Domain Sharding anymore. Example: assets.example.com, assets2.example.com By default, web browsers limit the number between 4 - 8 of active connections for each domain. To work around this limitation developers use domain sharding.
29. HTTP/2 BEFORE AND AFTER before HTTP2 After HTTP2 No TCP Connection and SSL Negotiation
30. DNS PREFETCHING ➤ Perform DNS lookups on a page in the background ➤ Does not affect for first page ➤ Chrome & Firefox enables DNS prefetch by default ➤ Recently Akamai automatically create dns-prefetch, you don’t have to modify HTML Credit image: Ilya Grigorik
31. PRECONNECT ➤ Tell browser to start the socket setup in parallel ➤ Only support in Chrome ➤ Recently Akamai automatically create preconnect, you don’t have to modify HTML Credit image: Ilya Grigorik
32. NEXT VIDIO’S OPTIMIZATIONS(?) ➤ Start Render Time: Reduce more HTML & CSS file size Remove Blocking CSS Refactor CSS: Optimize layout and painting time ➤ Page Load Time: Reduce JS file size refactor JS —> use plain JS reduce image request ➤ Service Worker
33. TIPS
34. SPEEDCURVE ALTERNATIVE 1: LIGHTHOUSE ➤ Lighthouse is an open-source, automated tool for improving the quality of web pages You can run it against any web page, public or requiring authentication It has audits for performance, progressive web apps, and more.
35. SPEEDCURVE ALTERNATIVE 2: SONAR ➤ Sonar allows you to easily see performance attributes of websites as you browse the web.
36. ALWAYS REMEMBER JAVASCRIPT PARSER COST Credit image: Addy Osmani
37. ALWAYS REMEMBER JAVASCRIPT PARSER COST(2) Credit image: Addy Osmani
38. “ Solve with HTML. If you can’t, solve with CSS. If you can’t solve with CSS, make sure it needs solving. If yes, solve with JavaScript -Adrian Egger
39. THANKS!