There are plenty of factors that can affect your website’s performance. For instance, the size of the web page, number of HTTP requests, network latency, server response time etc…As a developer, you might keep adding new features, designs etc… and sometimes you might forget to remove old styles declared on your stylesheet. Such unused CSS rules will add to your page size and will ultimately result in high load time. But identifying the unused CSS rules is not that easy. Thankfully, Google Chrome has a feature called “Audit” (as a part of Chrome Developer tools) that helps you to identify and remove unused CSS rules.
Chrome Audit tool reports various factors that affect website’s performance; For instance, Web Page Performance, Network performance related issues such as Minimize cookie size, Leverage browser caching, Leverage proxy caching etc…
How to access Chrome Developer tools?
Option 1 : You can access Chrome’s Developer Tools by clicking > Tools > Developer tools.
Option 2: Right click on a webpage and select “Inspect element”
- Use Ctrl+Shift+I (or Cmd+Opt+I on Mac) to open the DevTools.
- Use Ctrl+Shift+J (or Cmd+Opt+J on Mac) to open the DevTools and bring focus to the Console.
- Use Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open the DevTools in Inspect Element mode, or toggle Inspect Element mode if the DevTools are already open.
To Audit your website
Click on “Audits” tab to reveal the Chrome Audit window.
You can choose to enable or disable the kind of Audits you like to perform. Similarly, you can choose to Audit the webpage at its present state or reload the page and audit on load. Once done, click ‘Run‘ button.
Once the Audit is completed, the tool will display the list of identified problems as below. It will also save the results and it can be access under Results tab.
That’s it! Click on the arrow to see the identified issues and fix it.
And the Bonus is here…
- Improve Search engine ranking using “SEO Tools” Chrome Extension
- What is IP Canonicalization and Why it’s important for SEO?
- Why should redirect www domain to non-www or vice versa for better SEO?