Site Performance & Lighthouse - Google IO Report

Site Performance & Lighthouse - Google IO Report

Google I/O 2019 Recap at LINE
YiXin Xu

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers

May 22, 2019
Tweet

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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”
  6. 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.
  7. 13.
  8. 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
  9. 19.
  10. 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)