Performance lagging due to large css sourcemap

[tdlowden]

Lighthouse shows data.gov with a performance score of 62. The 10X team also uses 11ty for their site, and found that adjusting the CSS made for an improved performance.

How to reproduce

1. Load data.gov
2. Open Chrome dev tools
3. Click Lighthouse tab
4. Run Lighthouse report

Expected behavior

Faster load time of the page

Actual behavior

A slow load time of the page

Sketch

From the 10X person who messaged me:

Ok here are the changes for your group to try out:

1. package.json change the assets:autoprefix line to: "assets:autoprefix": "postcss _site/assets/styles/*.css -r",

2. and postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')({
    map: process.env.ELEVENTY_ENV !== 'production'
  })],
};

3. in the config/buildAssets.js this seemed to help our build too, adding this line to the esbuild.build array

minifyWhitespace: true, 

[btylerburton]

Note: this work has been partially completed in https://github.com/GSA/datagov-11ty/pull/276