Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
PRO

May 22, 2019
Tweet

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

  13. None
  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

  19. None
  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.