Google I/O Report Yixin Xu @xingoxu LINE Corporation Google I/O 2019 Recap at LINE 

Topic • Site Performance and Lighthouse 

Site Performance • Many companies shared their dev choices and architecture and improvement. (including japanese companies) • Google improved Lighthouse with new design and new Lightwallet and introduced web.dev 

Site Performance - How Twitter thinks • Responsive • Mobile first • One codebase 

Site Performance - What Twitter got (Compared with 2017) • 30% Faster in launch time • 3x increase in Tweets sent from Twitter PWA since launch • 5 million Installs of Twitter Lite


Site Performance - How Twitter did on JavaScript • Route-based Code-Splitting • Component Based Design • Lazy-load • Translations • Emoji picker • All Resources < 3MB • Build tracker comments on PRs with a detailed breakdown of changes help engineers to review PRs by using this info and logs the size of all production builds 

Site Performance - How Twitter did on other things • Brotli • • • Image compress with Pixel density • Data Saver Mode (Dynamic Load Images) • Compress Image in browser when uploading 

Site Performance - Advices Google gives 

Site Performance - What did Twitter say • Unify • Progressive Enhancement isn’t just APIs • Start with a solid foundation • Tackle the core experience first, get feedback at each step. • Identify your customers • How do they vary, be specific (Adaptive serving) • Provide progressive enhancements to reach all customers • Customize the experience to each device and each “param” 

Lighthouse • A tool measure performance. • Google is going to use it everywhere to measure your website and use it to rank your site on Google Search. • And Google is using it when you submit a web application to Google Play store. • Updated to 5.0 from Google I/O. 

Site Performance - About Time 

Lighthouse - Overview 

No content

Lighthouse - Metric in development • Layout stability • Largest Contentful Paint 

Lighthouse - Lightwallet • When we know the meaning of time, but we don’t have a tool to know how much data we can loaded in that time. -> Performance Budget – A Indication of resources can be loaded in that time. • We have a standard or indication about how much data, we considered to add that standard into lighthouse when we are testing our site. -> Lightwallet 

Lightwallet - Performance Budgets 

Lightwallet - How Performance Budgets shows in Report 

Lightwallet - How to use 

No content

References - Check these links for more info and origin videos • Site Performance • Building Successful Websites: Case Studies for Mature and Emerging Markets (Google I/O ’19) • Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ’19) • Lighthouse and Lightwallet • Demystifying Speed Tooling (Google I/O ’19) 

Thank you! That‘s all.