search

GSA / data.gov

Main repository for the data.gov service
https://data.gov
Other
546 stars 87 forks source link

Performance lagging due to large css sourcemap #4722

Open tdlowden opened 2 months ago

tdlowden commented 2 months ago

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 commented 1 month ago

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