excessiv-css-classes-size

CSS classes are used to apply styles to HTML elements. When a browser renders a web page, it has to parse the HTML and CSS files to determine how to display the content. The more CSS classes you use in your HTML, the more work the browser has to do to render the page. This can lead to slower page load times and reduced website performance.

The SiteLint rule excessiv-css-classes-size determines the size of the HTML before and after removing all CSS classes. If the ratio is more than 30%, then the issue is raised.

Excessive Use of CSS Classes in HTML: A Potential Threat to Website Speed and Performance

• Parsing and Rendering: When the browser encounters HTML elements with multiple CSS classes, it needs to parse and apply the associated styles to those elements. If there are numerous CSS classes, the browser has to process and apply more styles, which can slow down the rendering process.
• DOM Size: The DOM (Document Object Model) represents the HTML structure of a webpage. Excessive HTML CSS classes can increase the size of the DOM, which can negatively impact the rendering and performance of the page.
• HTML size: Larger HTML means more data to download and parse. It is specifically important for mobile devices.

It’s important to note that the impact of excessive HTML CSS classes on website speed can vary depending on the specific use case and the overall complexity of the website.

How to fix it

• Reduce the CSS classes in HTML: You can group CSS classes. Specifically, it can be done through Less or Sass.
• Test the ratio live: You can use following code to test the ratio between HTML without and with CSS classes directly in the browser developer console.

  const currentHtmlSize = new Blob([document.documentElement.outerHTML]).size;
  const clonedPage = document.documentElement.cloneNode(true);
  for (const element of Array.from(clonedPage.querySelectorAll('[class]'))) {
    element.setAttribute('class', '');
  }
  const htmlSizeWithouCssClasses = new Blob([clonedPage.outerHTML]).size;
  console.log( Math.round(100 * Math.abs( (currentHtmlSize - htmlSizeWithouCssClasses) / ( (currentHtmlSize + htmlSizeWithouCssClasses)/2 ))) + '%' )
  

Standard

Best Practice, Performance, SiteLint