title: HTML5 ServiceWorker slows down page loading dramatically
body: <p>I am using Google Lighthouse to figure out ways to speed up my page loading time.</p>
  
  <p>One of the red points was that I was missing a Service Worker.
  So I get one working.</p>
  
  <p>Before I used the Service Worker my page was fully loaded and ready in 7 seconds.
  After I added the Service Worker my page fully loads in 29 seconds!</p>
  
  <p>When I check on Fiddler was is going on, it looks like the Service Worker is loading all the files before letting the page render.</p>
  
  <p>I am using the SWPrecacheWebpackPlugin plugin in my webpack.config to automatically generate the service-worker.js file because my libraries name are hashed automatically to optimize the caching.</p>
  
  <p>This is my webpack.config:</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
  const WebpackChunkHash = require('webpack-chunk-hash');
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
  
  // To handle the regeneratorRuntime exception
  require('babel-polyfill');
  
  require('file-loader');
  require('css-loader');
  require('style-loader');
  require('html-webpack-template');
  
  /* Shared Dev &amp; Production */
  
  const config = {
    context: path.resolve(__dirname, 'src'),
  
    entry: {
      index: [
          // To handle the regeneratorRuntime exception
          'babel-polyfill',
          './index.js'
      ],
      vendor: ['react', 'react-dom', 'react-router', 'react-redux', 'history', 'react-router-dom', 'redux', 'react-router-redux', 'redux-form', 'lodash'],
    },
  
    module: {
      rules: [
        {
          test: /\.js$/,
          use: 'babel-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
          exclude: /\/favicon.ico$/,
          use: [
            {
              loader: 'file-loader',
              query: {
                name: '[path][name][hash].[ext]',
                publicPath: '/'
              }
            }
          ]
        },
        {
          test: /\.css$/,
          include: path.join(__dirname, 'src/style'),
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(ico)(\?.*)?$/,
          exclude: /node_modules/,
          use: {
            loader: 'file-loader',
            options: { name: '[name].[ext]' },
          },
        },
        {
          test: /\.xml/,
          use: {
            loader: 'file-loader',
            options: { name: '[name].[ext]' },
          },
        },
      ],
    },
  
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].bundle.js',
      publicPath: '/',
    },
  
    resolve: {
      extensions: ['.js'],
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
  
    plugins: [
      // New moment.js optimization
      new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
  
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: Infinity
      }),
  
      new webpack.optimize.ModuleConcatenationPlugin(),
  
      new HtmlWebpackPlugin({
        appMountId: 'app-root',
        inlineManifestWebpackName: 'webpackManifest',
        template: 'templateIndex.html',
        title: 'Our Site',
      }),
  
      new SWPrecacheWebpackPlugin()
    ],
  
    devServer: {
      historyApiFallback: true,
    },
  };
  
  //if (process.env.NODE_ENV !== 'production' &amp;&amp; process.env.NODE_ENV !== 'test') {
  config.plugins = [
    ...config.plugins,
    new BundleAnalyzerPlugin({analyzerMode: 'static'}),
  ];
  //}
  
  //if (process.env.NODE_ENV === 'production') {
  config.output.filename = '[name].[chunkhash].js';
  config.plugins = [
    ...config.plugins,
    new webpack.HashedModuleIdsPlugin(),
    new WebpackChunkHash(),
    /*new ChunkManifestPlugin({
      filename: 'chunk-manifest.json',
      manifestVariable: 'webpackManifest',
      inlineManifest: true,
    }),*/
  ];
  //}
  
  module.exports = config;
  </code></pre>
  
  <p>And my templateIndex.html (I am using HtmlWebpackPlugin for the same reason, hashed files name)
  The service loader is loaded at the end of the body.
  If I remove it, things are fast again. But then Lighthouse complains...</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="manifest" href="/manifest.json"&gt;
    &lt;meta name="theme-color" content="#242424" /&gt;
  
    &lt;title itemprop="name"&gt;My Site&lt;/title&gt;
  
    &lt;base href="/"&gt;
  
    &lt;link rel="apple-touch-icon" sizes="57x57" href="/images/favicon-57x57.png"&gt;
    &lt;link rel="apple-touch-icon" sizes="60x60" href="/images/favicon-60x60.png"&gt;
    &lt;link rel="apple-touch-icon" sizes="72x72" href="/images/favicon-72x72.png"&gt;
    &lt;link rel="apple-touch-icon" sizes="76x76" href="/images/favicon-76x76.png"&gt;
    &lt;link rel="apple-touch-icon" sizes="114x114" href="/images/favicon-114x114.png"&gt;
    &lt;link rel="apple-touch-icon" sizes="120x120" href="/images/favicon-120x120.png"&gt;
    &lt;link rel="apple-touch-icon" sizes="144x144" href="/images/favicon-144x144.png"&gt;
    &lt;link rel="apple-touch-icon" sizes="152x152" href="/images/favicon-152x152.png"&gt;
    &lt;link rel="apple-touch-icon" sizes="180x180" href="/images/favicon-180x180.png"&gt;
    &lt;link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32"&gt;
    &lt;link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192"&gt;
    &lt;link rel="icon" type="image/png" href="/images/favicon-160x160.png" sizes="160x160"&gt;
    &lt;link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96"&gt;
    &lt;link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16"&gt;
  
    &lt;link type="image/png" href="/images/favicon.png" rel="icon"&gt;
    &lt;link rel="icon" href="/images/favicon.ico" /&gt;
    &lt;link rel="shortcut icon" href="/images/favicon.png" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
    &lt;script type="text/javascript"&gt;
      // ServiceWorker is a progressive technology. Ignore unsupported browsers
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
          // Registration was successful
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
          // registration failed :(
          console.log('ServiceWorker registration failed: ', err);
        });
      } else {
        console.log('CLIENT: service worker is not supported.');
      }
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have searched on Google and I could not find anything related to the issue I am experiencing.
  Is that the expected behavior? Because if that is so, then I will not use a Service Loader.
  Otherwise, does anyone have a clue about how to get my page to load in parallel to the Service Worker?</p>