Optimise the Design System website to only include the CSS and JS for components we're using

[36degrees]

What

Optimise the Design System website to only include the CSS and JS for components that we are using (excluding the examples, which collectively use everything)

Why

The website is already fast relative to the industry, although that's not exactly a high bar. It'd be nice to see some improvement, but I think the main reasons for doing this are to help us understand:

• the impact of this change on web performance (we should be able to see the difference if any in SpeedCurve)
• where the pain points are when selectively importing components
• what things people might need to know, that should go in our docs

Further detail

The examples in the Design System are in iframes which include:

• the CSS from GOV.UK Frontend directly
• application-example.js, which includes all of GOV.UK Frontend plus some extra JS to stop forms submitting

This means that there is no need for application.css and application.js to include all of GOV.UK Frontend – only the things that are used by the website itself.

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• application.css no longer includes the CSS for components that aren't used in the website
• application.js no longer includes the JavaScript for components that aren't used in the website

[owenatgov]

Summary

Performance gains

Performance testing spreadsheet (only accessible to design system team members)

Summary of results is positive. The website was already fairly fast but our metrics have all improved. In several cases we gain almost a whole second.

Further findings

Our full page examples use main.css which means some sass is only imported for examples. We could explore separating these further. See #3757.

Our js tree shaking isn't working how we'd expect it to when importing component js directly from govuk-frontend. See alphagov/govuk-frontend#4957 and the write up in the description of #3766.