Unused CSS

What is Unused CSS?

Unused CSS is the CSS style within a website's stylesheet that does not contribute to the visual appearance of any elements on the actual web pages. It occurs when there are defined styles or rules that are not applied to any HTML elements, either due to changes in development, the use of third-party libraries with excessive styles, or unused classes and IDs.

How can unused CSS affect a site?

  • The parsing and application of all stylesheets, including unused ones, by the browser can cause noticeable rendering delays.
  • Unused CSS increases the overall file size, leading to slower page load times and adversely affecting user experience and search engine rankings.
  • Unused CSS complicates the development process, requiring additional time for troubleshooting and modifying styles, often resulting in design and layout inconsistencies.

Regularly auditing and removing unused CSS is a common practice to optimize webpage rendering and improve overall site speed.

RapidLoad Unused CSS

unused CSS

Basic Requirements

  1. The website needs to be publicly accessible. If there are restrictions such as login requirements, htaccess authentication, or maintenance mode enabled, RapidLoad will not remove unused CSS
  2. Some services, like Cloudflare and Wordfence, block all bot user agents. The RapidLoad user agent UnusedCSS_bot/1.0 RapidLoad/1.0 must be whitelisted to remove Unused CSS
  3. If CloudFlare Bot Fight Mode is enabled make sure to disable it.
  4. Having a working WP-Cron or a real server-side cron is a must.

How RapidLoad unused CSS works.

  • RapidLoad optimizes URLs in the order they are visited, with URLs added to the "Job Optimization Table" on a first-come, first-served basis when users access the corresponding URL or page.
  • Once a URL is added to the "Job Optimization Table," RapidLoad scans your website's Document Object Model (DOM) to locate files with the .css extension.
  • After identifying these files, RapidLoad analyzes the styles within them to automatically identify and highlight those not used or applied during the initial site load.
  • Once Unused styles are identified, RapidLoad proceeds to remove them.
  • There are three outputs you could get after the process is over.
    • Success: The URL/Page is successfully optimized.
    • Warning: The URL/Page is optimized, but changes in content or styles may have occurred.
    • Failed: The process of removing Unused CSS for the URL/Page has been halted due to unavoidable reasons.
Note: Follow this documentation to learn more about Unused CSS process outputs.
  • Once the Unused CSS files are removed RapidLoad will store the optimized files in wp-content/cache/rapidload/uucss
    • The original CSS files will remain all the while RapidLoad replaces them with the RapidLoad optimized files.
    • To identify the files optimized by RapidLoad you can filter CSS in the Network tab of the Inspect Element.
      • The CSS files starting with UUCSS are the RapidLoad-optimized files.
      • RapidLoad will rename the files with a unique hash code to identify each CSS file.
Table of Contents