How to identify unused CSS definitions from multiple CSS files in a project ?
In this article, we will learn how to identify unused CSS definitions from multiple CSS files in a project.
What are unused CSS definitions?
Unused CSS definitions are the stylesheets that are completely useless for rendering and loading the page. If you remove these unused CSS definitions then nothing will happen to your webpage.
Why you should remove the Unused CSS definitions?
When you remove all the unused CSS definitions from the website then it will enhance the loading speed of your website. It will also increase the efficiency of your website and after removing the unused CSS definitions, the most important content will be displayed fast, and users can start interacting with the page quickly. It will reduce the HTTP request and boost your website.
How to find unused CSS definitions?
- Go to the website where you want to remove the unused CSS definition.
- Inspect the webpage.
- In the overview CSS, you can select the unused declarations.
Let us see step-by-step how you can identify the unused CSS definitions.
Note: In the below example, we are using the Google Chrome web browser.
Example: In the below code, we will create unused CSS definitions, and then we will identify the unused CSS definitions.
HTML
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title >w3wiki</ title > < style > .GFG { vertical-align: middle; } h1 { color: green; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h3 >A computer science portal for Beginner.</ h3 > < h2 class = "GFG" > GFG </ h2 > </ center > </ body > </ html > |
Step 1: Visit the website you want to identify the unused CSS definitions.
Step 2: Inspect the website with the help of shortcut keys.
- Windows: Control + shift + c
- macOS: Command + option + i
Step 3: Go to the CSS overview option and select unused declarations.
Just click on the three dots present at the right top of the screen.
From the dropdown menu, select CSS overview.
Step 4: After clicking on the CSS Overview, then a new window will appear on your screen. Now you have to click on capture overview.
Step 5: After clicking on the Capture overview, then you have to select unused declaration from the menu.
From the above picture, you can notice that under the “Unused declarations”, you have all the unused CSS definitions with a number of occurrences.
Contact Us