Optimization: Remove unused CSS

[rfultz]

Background

Looking to optimize the site's performance and that of the homepage specifically, the Lighthouse tool in Chromium browsers has made some suggestions. Some of these will have repercussions throughout the app so we're going to make them their own tickets.

Recommendation: Remove unused CSS

Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity. details

Overview

For the homepage in particular, we're including the elections-hash.css; Is this necessary?
Would like to prune the css so we're only including what is actually being used.

Benefit (the 80 of 80/20)

Little? Likely less than its effort

Effort (the 20 of 80/20)

Minimal to extensive
We could simply remove unused script tags and leave everything else alone
and/or
We could re-structure scss/css files and/or build so each page loads exactly the CSS it needs.

Complications

• With all the sass inheritance, we could quickly get tangled up in untangling variables, mixins, etc.
• While untangling, we could wind up making our lives harder by duplicating code
• With templates being shared and inherited, we should look out for removing css from one page when it's being used by another page that's using the same template—could require additional templates.
• Will need to account for additional modules and feature-flagged features: we should make sure to include necessary css for flag-activated features but not necessarily include it when the feature isn't 'on'.
• Could inadvertently abandon non-desktop styles

Related tickets

• Preload key requests
• Remove unused JavaScript
• Preconnect to required origins
• Eliminate render-blocking resources
• Ensure text remains visible during webfont load
• Reduce the impact of third-party code
• Does not use passive listeners to improve scrolling performance
• Image elements do not have explicit width and height
• Serve static assets with an efficient cache policy
• Minimize main-thread work
• Avoid an excessive DOM size
• Reduce JavaScript execution time
• Avoid enormous network payloads
• [aria-hidden="true"] elements contain focusable descendents
• Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children
• [aria-*] attributes do not have valid values
• ARIA IDs are not unique
• Lists do not contain only
• elements and script supporting elements (<script> and )
• [user-scalable="no"] is used in the element or the [maximum-scale] attribute is less than 5
• Links to cross-origin destinations are unsafe
• Serves images with low resolution