Clean Up Unused CSS

Removing unused CSS or lazy loading CSS down page can speed up page speed by avoiding time-consuming needless downloads.

Why this is important

When a user visits your webpage or multiple pages on your site, they must download and parse all CSS files before rendering those pages. The more CSS your site contains, the longer it takes for the page to load and be viewable for the user. For example, if you used a template or a framework like bootstrap to build your CSS, there is likely unnecessary stylesheets left over.

Minifying your CSS can go a long way to help, but eliminating the unused code altogether is always the best solution.

Try to avoid cross-contamination of unused CSS from a web page not in view. If you are using javascript file to call on the CSS, you may need to adjust the CSS from unviewed pages in the file to avoid downloading that portion of the file until it is needed. Here are some tips on how to eliminate or reduce these instances.

Lazy load rocks

There will be times when you can't avoid using a large amount of CSS. In these cases, lazy-loading the elements until they are viewable can also aid in improve performance.

When a user opens a page, only the CSS being used above the fold (ATF) is viewable. However, any CSS below the fold is still being downloaded by the user's browser unless you direct that particular code display only when viewed or within range of being viewed.