Site Performance & Lighthouse - Google IO Report

Google I/O 2019 Recap at LINE
YiXin Xu

Transcript

1. Google I/O Report Yixin Xu @xingoxu LINE Corporation Google I/O 2019 Recap at LINE
2. Topic • Site Performance and Lighthouse
3. 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
4. Site Performance - How Twitter thinks • Responsive • Mobile first • One codebase
5. 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
   
6. 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
7. Site Performance - How Twitter did on other things • Brotli • <link rel=preload> • <link rel=dns-prefetch> • Image compress with Pixel density • Data Saver Mode (Dynamic Load Images) • Compress Image in browser when uploading
8. Site Performance - Advices Google gives
9. 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”
10. 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.
11. Site Performance - About Time
12. Lighthouse - Overview
14. Lighthouse - Metric in development • Layout stability • Largest Contentful Paint
15. 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
16. Lightwallet - Performance Budgets
17. Lightwallet - How Performance Budgets shows in Report
18. Lightwallet - How to use
20. 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)
21. Thank you! That‘s all.