The Browser Hacker's Guide To Instant Loading

The Browser Hacker's Guide To Instant Loading

The web has lacked a predictable story for loading content efficiently in a way that gets you interactive in just a few seconds. Developers have a number of primitives to get there: preload, preconnect, prefetch, HTTP/2 server push, module loading, service workers. . .the list goes on. Yet the interaction between these different pieces of the web is still not well understood or explained.

So how do you preload content that is still going to be there when a user closes the tab and comes back to visit another time? How do you avoid keeping the main thread pegged with too much JavaScript? How much is too much to ship down the wire? Venture deep into the belly of the browser to uncover the secret to instantly loading anything—backed by data.

Addy Osmani shares data-driven techniques and performance patterns for efficiently loading content instantly and explains how to ship JavaScript bundles on mobile that don’t break the bank.

Presented twice at Fluent/Velocity 2017

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

June 24, 2017
Tweet

Transcript

  1. None
  2. loading is a user journey with many disparate expectations you’ve

    probably heard to REDUCE DNS LOOKUPS, REDUCE ROUND-TRIP TIMES, MINIMIZE REDIRECTS, ELIMINATE UNN
  3. None
  4. USERS LOOK FOR VISUAL FEEDBACK TO reassure them everything is

    working as expected.
  5. first Interactive consistently Interactive

  6. Time to Interactive <5s on an average mobile device over

    3G *2s on repeat-load a:er Service Worker registered GOAL
  7. 19s 16s 420KB JavaScript Startup Performance, Double-Click Mobile Speed Matters

    report & the HTTP Archive The average web page on mobile in 2017 UNTIL INTERACTIVE FULLY LOADED JAVASCRIPT
  8. None
  9. None
  10. None
  11. PERFORMANCE JavaScript Start-up Start-up o o V8 Runtime Call Stats

  12. 1MB script (250KB minified) JS Parse Time On Mobile

  13. None
  14. about:inspect in Chrome DevTools

  15. None
  16. webpagetest.org/easy Moto G4 + 3G

  17. None
  18. Code-splitting // Defines a “split-point” for a separate bundle require.ensure([],

    () => { const profile = require('./UserProfile', cb); }); import('./UserProfile') .then(loadRoute(cb)) .catch(errorLoading) Webpack 2+ Webpack 1 Also see Splittable, Closure Compiler or Browserify
  19. Do I need to split? Try Code Coverage in Chrome

    DevTools
  20. Tree-shaking // app.js import { a } from ‘./module.js’; //

    module.js export function a () {} export function b () {} ❌
  21. Use babel-preset-env to only transpile code for browsers that need

    it { "presets": [ ["env", { "targets": { "browsers": ["last 2 versions"] } }] ] } Only transpile what you need with
  22. workflow

  23. Minify _everything_ Babelified ES5 w/Uglify ES2015+ with Babili css-loader +

    minimize:true Code-splitting Dynamic import() Route-based chunking Tree-shaking Webpack 2+ with Uglify RollUp DCE w/ Closure Compiler Optimize “Vendor” libs NODE_ENV=production CommonsChunk + HashedModuleIdsPlugin() Transpile less code babel-preset-env + modules:false Browserlist useBuiltIns: true Scope Hoisting: Webpack 3 RollUp Strip unused Lodash modules lodash-webpack-plugin babel-plugin-lodash Fewer Moment.js locales ContextReplacementPlugin()
  24. None
  25. Plenty of lightweight options for mobile Lower total cost on

    size + parse times from the get-go
  26. None
  27. None
  28. Byte savings @

  29. Brotli Display Ads from Google now served using Brotli compression!

    40% Data-savings up to 15% in aggregate over gzip https://developers.googleblog.com/
  30. Brotli Improved load time by 7% in India & 4%

    U.S bit.ly/linkedin-brotli Decreased the size of static assets by 20% bit.ly/dropbox-brotli 17% improvement for largest JS bundles bit.ly/certsimple-brotli 1.5 petabytes (million gigs) saved a day bit.ly/playstore-brotli
  31. WebP 30% smaller than JPEG 25% smaller than PNG

  32. WebP bit.ly/webp-format Serving over 43B image requests a day 25-30%

    savings for WebP on average (26% lossless) Data Saver + Web Store
  33. WebP Conversion XNConvert Windows/Mac/Linux Can convert in batch Supports most

    formats Alternatively: imagemin Pixelmator ImageMagick GIMP Leptonica
  34. WebP Serving <picture> <!-- Chrome: WebP --> <source srcset="photo.webp" type="image/webp">

    <!-- Edge: JPEG-XR --> <source srcset="photo.jxr" type="image/vnd.ms-photo"> <!-- Safari: JPEG 2000 --> <source srcset="photo.jp2" type="image/jp2"> <!-- Firefox: Fallback --> <img srcset="photo.jpg"> </picture> Or use the Accept header + .htaccess to serve WebP if a browser supports it and it exists on disk.
  35. Service Workers Inbox by Gmail 10% improvement in Time-to-Interactive

  36. None
  37. HTTP Caching Checklist Use consistent URLs and minimize resource churn

    Provide a validation token (ETag) to avoid transferring unchanged bytes Identify resources that can be cached by intermediaries (like CDNs) Determine the optimal cache lifetime of resources (max-age) Consider a Service Worker for more control over your repeat visit caching 1. 2. 3. 4. 5. bit.ly/caching-checklist
  38. None
  39. Let’s hack

  40. ResourceLoadPriorityVeryHigh

  41. None
  42. None
  43. ResourceLoadPriorityVeryHigh

  44. FLUENTinium

  45. Original Everything is high priority Preloaded JS Preloaded CSS +

    fonts
  46. Original Everything is high priority JS + CSS is high

    priority CSS + fonts are high prio
  47. None
  48. None
  49. None
  50. None
  51. None
  52. <head> <link rel="preload" as="script" href="1.js"> <link rel="preload" as="script" href="2.js"> <link

    rel="preload" as="script" href="3.js"> .. Link: 1.js; rel="preload"; as="script" <link rel=“preload”>
  53. None
  54. None
  55. None
  56. None
  57. bit.ly/prpl-paFern PRPL bit.ly/prpl-paFern

  58. HTTP/2 with 3G

  59. HTTP/2 + preload with 3G

  60. None
  61. None
  62. Express + HTTP/2 Push Headers const express = require('express'), let

    app = express(); app .use('/js', express.static('js')) .get('/', function (req, res) { res.set('Link', ` </style.css>; rel=preload; as='style', </js/vendor.bundle.js>; rel=preload; as='script', </js/app.bundle.js>; rel=preload; as='script'`)
  63. None
  64. None
  65. None
  66. Alternatively: Track cache content using cookies if (supports_http2() && !http_cached('/app.js'))

    { header('link:</app.js>; rel=preload; as=script’); setcookie('/app.js', 'is-cached', 0, '/'); }
  67. Alternatively: Track cache content using cookies function http_cached($filename) { if

    ('is-cached' === $_COOKIE[$filename]) { return true; } else { return false; } } Try CASPer
  68. None
  69. Repeat visit with Service Worker

  70. Next: Differential Serving based on browser compatibility? HTTP/1 works better

    when resources are concatenated (bundled) HTTP/2 works better when resources are more granular (unbundled) Serve an unbundled build for server/browser combinations supporting HTTP/2. Trigger delivery with <link rel="preload"> or HTTP/2 Push Serve a bundled build to minimize round-trips to get the app running on server/browser combinations that don't support HTTP/2 Push
  71. Debugging: HTTP/2 Server Push in DevTools

  72. Debugging: HTTP/2 Server Push in DevTools

  73. HTTP/2 Server Push Rules Of Thumb Push just enough resources

    to fill idle network time, and no more. Push resources in evaluation-dependence order. Consider using strategies to track the client-side cache. Use the right cookies when pushing resources. Use server push to fill the initial cwnd. Consider preload links to reveal remaining critical resources. 1. 2. 3. 4. 5. bit.ly/h2push PUSH
  74. None
  75. PRPL In-A-Box Polymer App Toolbox PREACT CLI

  76. None
  77. None
  78. None
  79. With Service Workers

  80. With HTTP/2 Server Push

  81. babel-preset-env + per-browser bundles

  82. babel-preset-env + per-browser bundles

  83. Twitter Lite

  84. None
  85. Interactive in <5s on 3G

  86. Can we get fast 3G numbers across the board or

    regular 3G?
  87. PRPL Push / Preload

  88. 18% improvement <link rel=dns-prefetch>

  89. 36% improvement <link rel=preload>

  90. Render

  91. HTML Streaming reduced TTFB by 30% (200ms), increasing time user’s

    spent in the app. Nicolas Gallagher, Technical lead for Twitter Lite
  92. None
  93. 4x improvement to render perf by using requestIdleCallback() to defer

    JS loading of images. Nicolas Gallagher, Technical lead for Twitter Lite
  94. Heavy image decode Lower image decode

  95. Adapt intelligently H E I G H T Size appropriately

    WIDTH IMAGE DECODE Compress carefully Take care with tools Prioritize critical images HIGH LOW Lazy-load the rest Choose the right format High-perf Images
  96. Data Saver Mode introduced up to 70% savings Next up:

    Save-Data client hint
  97. Precache

  98. This is a headline Followed by a subhead This is

    body copy and it goes a little like this and Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is body copy and it goes a little like this and Lorem ipsum dolor sit amet, consectetur adipiscing elit. Application Shell A skeleton representing the user interface that can be offline cached & instantly rendered on repeat visits.
  99. Before Service Worker After Service Worker

  100. Lazy-load

  101. None
  102. Before code-splitting

  103. webpack-web.config.js const plugins = [ // extract vendor and webpack's

    module manifest new webpack.optimize.CommonsChunkPlugin({ names: [ 'vendor', 'manifest' ], minChunks: Infinity }), // extract common modules from all the chunks (requires no 'name' property) new webpack.optimize.CommonsChunkPlugin({ async: true, children: true, minChunks: 4 }) ];
  104. After code-splitting bit.ly/twitterlite-perf bit.ly/twitter-casestudy

  105. None
  106. None
  107. https://meowni.ca/font-style-matcher/

  108. https://www.zachleat.com/web/comprehensive-webfonts/ “Comprehensive Web Fonts”

  109. None
  110. None
  111. <link rel="preload" as="font" href="font.woff" type="font/woff"> Link: <font.woff>; rel=preload; as=font; type='font/woff'

  112. Heaviest use of rel=preload is for Web Fonts HTTPArchive

  113. Preloading Web Fonts = 50% (1.2s) improvement in time-to-text-paint

  114. Control font performance with font-display auto: uses whatever font display

    strategy the user-agent uses block: draws "invisible" text at first if the font is not loaded, but swaps the font face in as soon as it loads swap: draws text immediately with a fallback if the font face isn’t loaded, but swaps the font face in as soon as it loads fallback: font face is rendered with a fallback at first if it’s not loaded, but the font is swapped as soon as it loads optional: if the font face can’t be loaded quickly, just use the fallback Chrome 60
  115. None
  116. None
  117. bit.ly/font-subsetting

  118. https://fonts.googleapis.com/css?family=Inconsolata https://fonts.googleapis.com/css?family=Inconsolata&text=Hello Web Font Subsetting ~3KB ~880 bytes Supported by

    Google Fonts
  119. /* Small subset, normal weight */ @font-face { font-family: whatever;

    src: url('reg-subset.woff') format('woff'); unicode-range: U+0-A0; font-weight: normal; } The browser can also handle subsetting! https://jakearchibald.com/2014/minimising-font-downloads/ /* Large subset, normal weight */ @font-face { font-family: whatever; src: url('reg-extended.woff') format('woff'); unicode-range: U+A0-FFFF; font-weight: normal; } Chrome 36 Firefox 44
  120. CSS Font Loading API https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization const font = new FontFace("Awesome

    Font", "url(/fonts/awesome.woff2)", { style: 'normal', unicodeRange: 'U+000-5FF', weight: '400' }); // don't wait for the render tree, initiate an immediate fetch! font.load().then(function() { // apply the font (which may re-render text and cause a page reflow) // after the font has finished downloading document.fonts.add(font); document.body.style.fontFamily = "Awesome Font, serif"; // OR... apply your own render strategy here... }); Chrome 35 Firefox 41
  121. Web Font Loading Tips Understand the anatomy of a web

    font and how browsers load font-display: optional (i.e if you can’t do it fast, load a fallback) Minimize font downloads by limiting range of characters you’re loading Minimize FOIT by using <link rel=“preload”> If you need more control try out the Font Loading API 1. 2. 3. 4. 5. https://meowni.ca/posts/web-fonts/
  122. None
  123. Streams API bit.ly/streams-ftw Progressive Loading: HTML

  124. <link> in body bit.ly/progressive-css Progressive Loading: CSS

  125. <link> in body bit.ly/progressive-css Progressive Loading: CSS <body> <!-- HTTP/2

    push this resource, or inline it, whichever's faster --> <link rel="stylesheet" href="/site-header.css"> <header>…</header> <link rel="stylesheet" href="/article.css"> <main>…</main> <link rel="stylesheet" href="/comment.css"> <section class="comments">…</section> <link rel="stylesheet" href="/about-me.css"> <section class="about-me">…</section> </body>
  126. None
  127. medium.com/reloading

  128. None