How Speedcurve Help Vidio Achieve Start Render Under 2 sec

HOW SPEEDCURVE HELP VIDIO.COM ACHIEVE START RENDER UNDER 2S fronteers
meetup 1.0

TOPICS ➤ About ➤ Overview Start Render Speedcurve Vidio’s Start
Render, before & after ➤ How To ➤ Tips

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 ➤ [email protected] Free Time ➤ Develop and maintain catetin.com Fun Facts ➤ Learn HTML & CSS because blogger’s template is bad ➤ Used to be Slackware fan boy

OVERVIEW START RENDER, SPEEDCURVE, AND VIDIO’S OPTIMIZATION

START RENDER TIME The Start Render time is measured as
the time from the start of the initial navigation until the ﬁrst non-white content is painted to the browser display

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

5.5 - 8.5S Vidio’s Start Render Before Optimization (Desktop &
Mobile)

AFTER START RENDER OPTIMIZATION - DESKTOP - 29 AUGUST 2017
Homepage Desktop Watch Page Desktop

AFTER START RENDER OPTIMIZATION - MOBILE - 29 AUGUST 2017
Homepage Mobile Watch Page Mobile

EXAMPLE DETAIL - DESKTOP HOMEPAGE filmstrip waterfall

EXAMPLE DETAIL - DESKTOP HOMEPAGE (2) CPU content breakdown

CONSTRAINTS / RULES ➤ Use same libraries until maximum performance
ﬁrst before change to new one. New library / technology is not always give better result Avoid more complexity to codebase and testing tools

BROWSER RENDERING, NO JS NEEDED Back-end Performance + Network Performance
+ Front-end Performance Faster = Better Result

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.

VIDIO’S OPTIMIZATIONS 1. Remove render-blocking resources 2. Reduce ﬁle size
Remove unused code HTML, JS, CSS Code splitting 3. Reduce ﬁle request 4. Use HTTP/2 5. Optimize Web Font 6. Use dns-prefetch and preconnect meta tag

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

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.

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>

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

REDUCE FILE SIZE: REMOVE UNUSED CODE ➤ Remove unused JS
library After Vidio has zero render-blocking JS, it only has eﬀect 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

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

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

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 ﬁrst, when web font available, font will be replaced with web font ➤ Make FontFaceObserver loaded without render-blocking Pros: Faster start render Cons: User experience ﬂash of unstyled text. Bad for UX.

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 ﬁle size —> faster download But on bad internet connection user still experience ﬂash of unstyled text ➤ Other Solution: Use System Font

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;

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.

HTTP/2 BEFORE AND AFTER before HTTP2 After HTTP2 No TCP
Connection and SSL Negotiation

DNS PREFETCHING ➤ Perform DNS lookups on a page in
the background ➤ Does not aﬀect for ﬁrst 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

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

NEXT VIDIO’S OPTIMIZATIONS(?) ➤ Start Render Time: Reduce more HTML
& CSS ﬁle size Remove Blocking CSS Refactor CSS: Optimize layout and painting time ➤ Page Load Time: Reduce JS ﬁle size refactor JS —> use plain JS reduce image request ➤ Service Worker

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.

SPEEDCURVE ALTERNATIVE 2: SONAR ➤ Sonar allows you to easily
see performance attributes of websites as you browse the web.

ALWAYS REMEMBER JAVASCRIPT PARSER COST Credit image: Addy Osmani

ALWAYS REMEMBER JAVASCRIPT PARSER COST(2) Credit image: Addy Osmani

“ 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

THANKS!

How Speedcurve Help Vidio Achieve Start Render Under 2 sec

How Speedcurve Help Vidio Achieve Start Render Under 2 sec

More Decks by Kunto Aji. K

Other Decks in Technology

Featured

Transcript