Show You can enable the DevTools experiment named "Track CSS rules usage while recording Timeline" to get new CSS Coverage tooling. This feature answers a question: What CSS is unused on my page, even during page interaction. To use this feature:
This even works with minified code after you pretty print it. Update: Sources Colour Picker is now in Chrome Stable! Fresh digital marketing tips to help you grow your business - delivered right to your inbox. Websites are ever-evolving products. They are updated for speed, security, accessibility, and new features. The thought experiment about the Ship of Theseus comes to mind when thinking about the lifetime of a website. If you replace boards on a wooden ship as they rot, every board will eventually get replaced. At that point, is it the same ship? Over time, you
could update each individual part of your website, leaving you to wonder, “Is this the same website we originally built?” While updating your site, you may find something you originally used is no longer needed. You may also find you had things in place you thought you needed and never did. Maybe you changed your provider for product reviews of your online store, and have styles still in place for the old provider. Or maybe you styled the store pages that never launched, as you used a
third-party service to sell your products. In development terms, we often refer to this unnecessary code as “bloat.” Bloat can cause slower load times, unintended visual changes, and broken functionality. It makes the overall maintenance of a website tougher. While a website is made up of many different types of files in different coding languages, let’s take a look at our CSS stylesheets, which are commonly edited during site updates, and find opportunities to remove some bloat. Getting readyIn Chrome’s Dev Tools (Command+Option+C on Mac, Control+Shift+C on Windows/Linux, or right-click on the page and choose “Inspect”), select the “Sources” tab, and if “Coverage” isn’t a displayed tab at the bottom, select it using the three vertical dots to the left of those tabs. Running your reportInside the “Coverage” tab, click the reload button and it will update to show you what files are loading the most “Unused Bytes” on that page. Select a file and it will open in the panel above. Lines highlighted to their left in red are unused. You’ll want to test this on different types of pages of your site, as you likely have elements on your homepage that aren’t on interior pages, and vice versa. Four questions to ask yourself
TestingUse visual regression testing tools like Backstop.JS to test for any visual changes across your site as you optimize your CSS. You don’t want to remove something you thought wasn’t being used, only to find it utilized on another page. Documenting your codeWell-documented code is going to make this review easier, as you’ll be able to see what the intended impact of it is on your site. Take this review as an opportunity to clear up confusion or questions you had about lines of your code. Using version control properly on your code will also help you find more details on when certain lines were created or modified, and why. SEE HOW HALL CAN HELP INCREASE YOUR DEMAND Where are the unused CSS in dev tools?Run Command:. Open Chrome DevTools.. Open the command menu with: cmd + shift + p.. Type in “Coverage” and click on the “Show Coverage” option.. Click To Reload Button.. Select a CSS file from the Coverage tab, which will open the file up in the Sources tab.. Red Color CSS Unused and blue Color CSS used in HTML File.. How do I get the unused CSS code?Coverage Tab in Chrome DevTools (Manually) This Coverage tab helps us find unused Js and CSS code. Open your Chrome browser, go to “Developer Tools”, click on “More Tools” and then “Coverage”. A Coverage will open up.
What is unused CSS?Unused CSS are stylesheets completely useless for rendering and loading the page — yet, they're included in the page's code. If you remove all of them, nothing will happen. The page will be displayed correctly above and below the fold. At the same time, unused CSS affects the page's loading time.
How do I find unused CSS and JavaScript files in my website?You can find it via the following steps:. Open Chrome DevTools. Control + Shift + I. ... . Open the Command Menu. Control + Shif t +P. ... . Type + click the following: "Show Coverage". Click the reload button to reload the page and to see which code is loaded.. Then double click on the JS or CSS file that you want to unminify.. |