Skip to main content

Remove unused CSS definitions

Description

Cascading Style Sheets (CSS) allow HTML content to be styled in a very exact way. In order to have this flexibility, the CSS files are very complex and need energy intensive parsing and processing. The browser needs to download all specified CSS files, process all definitions inside these files, apply it to the DOM and calculate the layout for rendering. Each added CSS definition increases the amount of time and processing power needed in this process.

Solution

Remove all unused CSS definitions if they aren't used on the website at all. Also consider combining multiple CSS files into one file to reduce the amount of requests, and therefore time, the browser needs to retrieve all CSS definitions at once.

SCI Impact

SCI = (E * I) + M per R
Software Carbon Intensity Spec

Removing unused CSS definitions will impact SCI as follows:

  • E: Reduces the processing, memory and bandwidth requirements to display the page and therefore the energy requirements.

Assumptions

None

Considerations

  • Depending on the web page, consider crafting specialized CSS files for landing pages or highly frequented web pages. This also makes sense if a landing page has a completely different layout as the rest of the web page.

References