Removing unused CSS

How to use it?

Video instruction: VK video, [Youtube](https://youtu .be/l2CkL7hSnCQ), Zen, [Rutube](https://rutube.ru/video/3d67492a327f6db27b1364dd8228f82b /).

We divide all the work into 4 simple stages:

• Scanning site pages. Disable the file grouping function, if any, and start scanning pages of different types: product category, product card, information page, home. Adding 2 different product cards or 2 different product category pages is pointless, since the styles they use will be the same.
• Uploading cleaned files to the test site for development. Copy the files to the root folder of your site and replace the current files. If you have your own CSS file management system or you use an atypical solution, then files need to be replaced manually.
• Testing and editing. Open pages, test them and check if the necessary styles have been deleted. It will take up to 15 minutes per sample page.
• File cleanup. After testing, delete the remaining commented sections of the code. They are the unused styles.

Tips:

• Start with the main files of your template, and then move on to plugins and system files.
• Carry out all manipulations on a test copy of the site.
• Use a version control system like git or SVN. So, you will control the change of each line, and in case of which you will be able to return everything back.

How to work with the tool correctly and not remove anything superfluous?

Some actual styles can be removed in 2 cases:

• These styles are applied to elements on pages that are not crawled.
• Elements that appear during user actions — for example, after clicking, submitting a form, or scrolling. The scanner does not know about their existence, as it does not perform any active actions on the page, so it considers them unused.   To make it easy to return deleted styles in vain, the scanner does not delete the code, but comments on it so that during testing it is possible to return the styles used by simply commenting out the code.

Are there any analogues of our tool?

[Purgecss](https://purgecss.com /) — is a simple code analyzer. It does not open the page in the browser and examines the statically loaded HTML code, without executing JavaScript. Also instead of commenting out unused code, it deletes it. The tool is of little use, since it does not analyze only the downloaded HTML and permanently deletes pieces of code.

[Purifycss](https://purifycss.online /) — can scan an HTML page, but analyzes the source code returned by the server, and not the page generated in the browser. It also simply removes an unused section of code instead of commenting. Because of this, to recover falsely deleted code, it takes 20-50 times more time than a simple uncomment like ours.

Highlighting end-to-end styles

End-to-end styles are intended for frequently used elements, such as: header, menu, basement, form elements, h1-h6 headers, etc. It is recommended to separate them into a separate file and use them on each page. Due to caching, they will be downloaded only once and will be used when visiting the second and subsequent pages of the site. This will speed up page loading. It also streamlines the code, which makes it easier to maintain.

To highlight end-to-end styles, you must:

• Create a separate page with all the end-to-end elements.
• Use a CSS code cleaner.
• Copy all the received code into one file. It’s usually called common.css.
• Done. The common.css file contains all end-to-end styles.