Reduce render-blocking stylesheets

[addyosmani]

Perhaps we..

• Inline critical CSS for the initial page skeleton
• lazy-load our fonts (or consider another strategy with font-display that addresses this)

https://developers.google.com/web/tools/lighthouse/audits/blocking-resources

[addyosmani]

Some notes

One of the difficult things with our current app is that we require JavaScript to render even the initial view. If we run Puppeteer on this (via Critical or the Prerender plugin), we can extract some critical styles, but there's no inline content there to take advantage of it (e.f App.vue doesn't render any text). We'd need to inline some of this in the initial view in order to move more of our work to be lazy-loaded.

I experimented with a few concepts to try helping here.

Prerendering

    new PrerenderSpaPlugin({
      // Path to compiled app
      staticDir: path.join(__dirname, '../dist'),
      // List of endpoints you wish to prerender
      routes: ['/'],
      renderer: new Renderer({
        renderAfterElementExists: '.doodle-header'
      })
    }),

Before:

After:

(mainly improvements in FMP, but pushed out interactivity)

Prerender + Critical-path CSS (inline critical CSS, preload/lazyload rest)

const critical = require('critical')
const path = require('path')

critical.generate({
  
  /* The path of the Webpack bundle */
  base: path.join(path.resolve(__dirname), 'dist/'),
  src: 'index.html',
  dest: 'index.html',
  inline: true,
  extract: true,

  /* iPhone 6 dimensions, use whatever you like*/
  width: 375,
  height: 565,
  
  /* Ensure that bundled JS file is called */
  penthouse: {
    blockJSRequests: false,
  }
})

Addressed the render-blocking stylesheet issues and improved FMP again, but still have issues with interactivity. It'll be easier to look at the impact of these changes once #11 and #8 have landed.