Closed jonathanbobel closed 4 months ago
Ethan Gardner's feedback/help:
"assets:autoprefix": "postcss _site/assets/styles/*.css -r",
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.
In the head.html component
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>
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">
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>
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".
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
<picture>
element to do this. It would be beneficial for the "investments" page.
Additional site performance improvements
defer
orasync
certain Javascript