Site performance updates

[jonathanbobel]

Additional site performance improvements

• [ ] Add main gradient image to HTML to avoid LCP issue - use this
• [ ] defer or async certain Javascript
• [x] Clean up CSS Sitemap
• [x] Remove preconnect for search.gov
• [ ] Remove old google analytics code
• [ ] Make sure all images have height and width attribute to avoid CLS issues
• [ ] Utilize PurgeCSS to remove unneeded USWDS classes
• [ ] Self-host web fonts (another issue)
• [ ] webp images

[jonathanbobel]

Ethan Gardner's feedback/help:

Performance Changes

Remove Sourcemaps from production build

1. Change this line to the following: "assets:autoprefix": "postcss _site/assets/styles/*.css -r",
2. Change the entire contents of this file to be

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

   Reason: when you use the --use autoprefixer, it includes sourcemaps by default. It's not hitting the postcss.config.js file, and we also want to give it a way to remove the sourcemap from the production build.

   head.html

   In the head.html component

   Defer script?

   Is it possible to add defer to the search.usa.gov script so it isn't render blocking? It doesn't appear to be providing critical function for the initial render, but make sure you test it and check the console for errors.

   <script src="//search.usa.gov/javascripts/remote.loader.js" type="text/javascript" defer></script>

   Unneeded preconnect

   You can remove the following line. It's preconnecting to http and appears after the script is already loaded.

   <link href="http://search.usa.gov" rel="preconnect">

   Duplicate analytics

   There are 2 lines that load analytics.js. This appears to be for the old analytics, so it may be safe to remove both. The official deprecation date for it is July 2024, so you may need to check to see if it's still collecting data. I don't see a UA id, so it might have been removed in favor of gtag and this cleanup item was missed.

   <script async="" src="https://www.google-analytics.com/analytics.js"></script>
   <script src="https://www.google-analytics.com/analytics.js" async=""></script>

   Multiple template - LCP fix

   Templates that have the banner-bg-gradient as their LCP can use the CSS Wizardry hack here that appears under the heading of "Getting Around background-image Issues".

   Images

   Make sure all images have a height and width attribute to avoid CLS issues. I have a small diagnostic stylesheet that I use and paste into my devtools: https://gist.github.com/ethangardner/e41b96331b3ea5cd72a97721f90f8456

   Other

   • Remove unneeded classes from USWDS. I like PurgeCSS for this.
   • Self-host and subset web fonts. I can help with this part. Paul Calvano has an awesome article about it.
   • Add performance budgets to the build tooling - https://web.dev/articles/incorporate-performance-budgets-into-your-build-tools
   • Make webp versions of images. I have used 11ty image for this. For backwards compatibility, it also requires either server-side logic to respond with the correct image format if the browser supports webp OR you could use the <picture> element to do this. It would be beneficial for the "investments" page.
   • For fun. See the real user data from the Chrome UX Report (CrUX) to see how people experience the site - https://treo.sh/sitespeed/10x.gsa.gov