diff --git a/docs/images/individual-stylesheets.png b/docs/images/individual-stylesheets.png new file mode 100644 index 0000000000..8288582610 Binary files /dev/null and b/docs/images/individual-stylesheets.png differ diff --git a/docs/set-up-individual-component-css-loading.md b/docs/set-up-individual-component-css-loading.md index 2beb618c8b..3e5525427a 100644 --- a/docs/set-up-individual-component-css-loading.md +++ b/docs/set-up-individual-component-css-loading.md @@ -166,6 +166,12 @@ Use `yield` to add body content between `` and ``: ``` +### Check stylesheets are loading individually + +When the setup is complete, only the component stylesheets required to render the page are requested. For example, the screenshot below displays network activity for a [browse page e.g. benefits](https://www.gov.uk/browse/benefits) and shows separate network requests for the `browse`, `lead-paragraph` and `cards` stylesheets: + +![Network requests for individual stylesheets](./images/individual-stylesheets.png) + ## Why See [RFC #149](https://github.com/alphagov/govuk-rfcs/pull/152) for more details about this approach.