"We need Webpack presets" and "Webpack and its plugins are too hard to configure correctly" have been the number one cause of developer pain shared with me from large sites adopting Progressive Web Apps and optimising their load performance.

If I was building a Webpack preset pack for performance, I might use the following:

  • Ensure you're using a production build of your framework: new webpack.DefinePlugin({ 'process.env': env })
  • Minify your JS: webpack.optimize.UglifyJsPlugin
  • Compress your resources (GZip): compression-webpack-plugin
  • Split your vendor chunks: CommonsChunkPlugin
  1. Type chrome://flags into your browser
  2. Scroll down to “Enable Developer Tools experiments” and click enable
  3. Restart Chrome
  4. Open up DevTools
  5. Click on the gear icon — it’s typically on the top right or bottom right
  6. Select experiments from the menu on the left
  7. Hit shift 6 times to show hidden experiments
  8. Enable 'V8 Runtime Call Stats on Timeline'

We are hoping to turn this feature on by default soon so the above steps are not needed.

View top10k.txt

Problem: How can we preprocess JavaScript (at build-time or on the server-side) so engines like V8 don't have to spend as much time in Parse? This is a topic that involves generating either bytecode or a bytecode-like-abstraction that an engine would need to accept. For folks that don't know, modern web apps typically spend a lot longer in Parsing & Compiling JS than you may think.

  • Yoav: This can particularly be an issue on mobile. Same files getting parsed all the time for users. Theoretically if we moved the parsing work to the server-side, we would have to worry about it less.
  • One angle to this problem is we all ship too much JavaScript. That's one perspective. We could also look at preprocessing.
  • We've been talking about this topic over the last few weeks a bit with V8. There were three main options proposed.
    1. Similar to what optimize-js does. Identify IIFEs and mark them as such so the browser and VMs heuristics will catch them and do a better job than today. optimize-js only tackles IIFE bu

Frameworks and tooling

ES2015 Modules.

How do you deploy them? What does this look like for Blink + Babel, frameworks? We've got nomodule coming. This looks like:

<script type="module" src="app.js"></script>
<script nomodule defer src="bundle.js"></script>
View flexbox-layout.css
Flexbox CSS helpers from the Polymer team. Extracted from for use as just CSS.
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at

RAIL encouraged loading a site in under 1000ms on cable and (not well documented) between 3000ms and 5000ms on 3G. Loading is a pretty broad term and we don'the think it's enough for the page to "look" done. It should be engagable.

There are many different "key moments" in loading a page however that offer us more nuance.

  • “is it happening?” (i.e. time to first paint)
  • “is it useful?” (i.e. time to first meaningful paint)
  • “is it usable?” (i.e. time to stable layout / time to interactive)

Route-based chunking

Many of us building single-page apps today use JavaScript module bundling tools that trend towards a monolithic "bundle.js" file including the full app and vendor code for multiple routes. This means if a user lands on any arbitrary route they need to wait for a large bundle of JS to be fetched, parsed and executed before the application is fully rendered and interactive.

screen shot 2016-09-28 at 4 45 52 pm

This is a little backwards, especially when apps are used under real-world network (3G) and device


Problem: "Is there a nice pattern for using Critical via Gulp for CSS across a site with many pages which might be subtly different?"

The way I've tackled this in the past is breaking down the pages that might be slightly different into groups which each have their own Gulp task. For the sake of simplicity, we could have a set of pages that fall under red-theme, blue-theme etc. For each group, run critical.generate() against the set of URLs for the group (so, red-theme URLs) and allow it to inline the CSS for just that group. The benefit of thinking about this problem in a group for each task is if you need to apply additional customisations, config or build-time fixes per variation of page/theme, it's pretty trivial to do so. You then just run all of the critical group tasks near the end of your build and this should work.