Why do I need to remove unused CSS?
Sites are constantly updated, new features are added, and old ones are removed. Often, the code of already deleted elements remains in CSS files. It clogs them. The larger your CSS files are and the more extra code there is in them, the more difficult it is for programmers to read and modify them. This affects the speed of work.
Unused styles slow down the browser. This problem is especially relevant for mobile device users. By cleaning CSS files, you speed up the programmer’s work. This way you will save him from having to read unused code. Clean code is easier to understand. The probability of making a mistake is reduced.
How effective is removing unused CSS?
The older the site, the more garbage it contains.
The average acceleration is 0.1-0.2 seconds. Considering that the page should load faster than 2 seconds, this is a 5-10% increase in speed.
How does the tool understand which styles should be left?
We open the page in a real browser. Thus, the JavaScript code is fully executed, and dynamic elements are created. We analyze the HTML generated by the browser after the final page load. Our tool also works with sites that use JavaScript frameworks such as AngularJS, React, and Vue.js, etc.
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. Takes about 15 minutes. Do not forget to disable the file grouping feature, if any.
- Uploading cleaned files to the test site for development. Just copy the files to the root folder of your site with the replacement of the current files. It will take 5 minutes. If you have your own CSS file management system or you use an atypical solution, then the files will have to be replaced manually.
- Testing and editing. The simplest, but voluminous stage. You will need to open the pages and check if the necessary styles have been deleted. Lead time is 1-2 hours per sample page. For example, if you have an online store, it is enough to test one product card so that the changes are applied immediately to all the others.
- At the end of testing, simply delete the remaining commented sections. Takes 20-30 minutes per file. As a result, a few days of work will speed up your site by tens of percent.
Tips:
- Carry out all manipulations in a test copy of the site.
- Start with the main files of your template, and then move on to plugins and system files.
- Use a version control system like git or SVN. So you control the change of each line and in which case you can return everything back.
How to work with the tool correctly and not remove anything superfluous?
Some actual styles can be removed in 2 cases:
- Elements using these styles are on pages that are not involved in scanning.
- Elements that are generated or loaded in response to user actions. For example, clicking on a button, submitting a form, or scrolling through a page. That is why we do not delete the code, but comment on it. To return a specific change, just comment 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 does not explore the dynamically generated page. Instead of commenting out unused code, he deletes it. In fact, the tool is unusable because it does not analyze the actually generated page and irrevocably 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. Also just deletes the code instead of commenting out unused sections. Thus, in order to recover falsely deleted code, it takes 20-50 times more time to search and recover than to simply uncomment like ours.
How else can I use the tool?
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. Thanks to caching, they will be downloaded only once and will be used throughout 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.