Enhancement/issue 546 optimization overrides

[thescientist13]

Related Issue

resolves #546

Summary of Changes

1. Add static and inline optimization overrides for <script> tags
2. Add inline optimization overrides for <link> tags
3. Add tests
4. Updated documentation, none override will have to come later
5. Add examples to website to demonstrate explore strict mode compatibility for Greenwood website #410

TODOs

1. Document considerations for ShadowDOM based styles - done
2. clean up / remove override attributes from final HTML none of the options we support keep the original tag, hence the attributes are not present, so nothing to do here really
3. clean up inlined assets from public output
4. Clean up TODOs
5. Before / after benchmarks for website -
   • keep / remove overrides from www/? (see explore strict mode compatibility for Greenwood website #410 for additional context)

[thescientist13]

As far as this commit where !important was added for the footer, the footer looked like this for the production build.

It should look like this.

---

Using dev tools, what I could see is that global styles where inheriting into this element. which is what was causing the undesired padding.

Which makes sense, since the footer.css uses / assumes ShadowDOM and usage of :host, in this case where the JavaScript is not shipped to the user due to using data-gwd-opt="static", all CSS was now global and inlined by puppeteer.

app-footer .footer.app-footer {
  background-color: #192a27;     min-height: 30px;     padding-top: 10px;
}

app-footer .footer.app-footer h4.app-footer {
  width: 90%;       margin: 0 auto;       padding: 0;       text-align: center;
}

app-footer .footer.app-footer a.app-footer {
  color: white;       text-decoration: none;
}

This means that no encapsulation can be guaranteed, so in some cases, so additional consideration / tweaks may be needed, like using !important or using some other technique for managing specificity / the cascade when not relying on JavaScript at runtime.

[thescientist13]

Just a heads up here re: #652

[thescientist13]

Did a before / after comparison. Lighthouse scores are about the same, but we can definitely shave off a few network requests and bring down our payload size by 12KB and 5 requests, so it's something at least. That said, putting this branch on production Netlify could potentially bump this into a 100 though, I think that tends to happen so... 🤞

Production

Deploy Preview (permalink)