I assumed I could start “recording” then click around different areas of the site and watch that unused number go down as different pages with different HTML are rendered, but alas, when the page refreshes, so does the Coverage tab. I didn’t just dump a big style library onto this site I wrote each line of that by hand, so I have my doubts that more than 2/3 of it is unused globally. I imagine it’s right, and that the rest of the CSS is used elsewhere. It tells me that 70.7% of my style.css file is unused. For example, if I visit the homepage of CSS-Tricks right now… 😬 Looking at “coverage”Ĭhrome’s DevTools has a “Coverage” tab that will tell you how much of your CSS and JavaScript is in use. But the gain in doing that for CSS is even more important because CSS is loaded in the head and is render blocking. If you had a 100 KB JPG that you could compress to 20 KB by dropping it onto some tool, that’s awesome and totally worth it. I don’t do anything special to reduce the size.) You have a suspicion, or some evidence, that you aren’t using a portion of those bytes. (As I write, this site has ~23 KB, and there are quite a lot of pages and templates. That might even be the reason you reached for a framework to begin with. CSS frameworks often don’t provide simple ways to opt-in to only what you are using, and customizing the source to work that way might require a level of expertise that your team doesn’t have. Bootstrap), included the framework’s entire CSS file, and you only used a handful of the patterns it provides.
FREE ONLINE CSS DUPLICATE DETECTOR DRIVER
I imagine the #1 driver for the desire to remove unused CSS is this:
That’s not to say you can’t use them or it can’t be done. None of them are exactly lying to you - they often just don’t have enough information to give you results that are safe and actionable.
I think you should have a healthy level of skepticism for any tool like that.
I’m sorry, but I’m going to disappoint you. You want to run the tool, delete what it tells you, and you have a faster site in 2.2 minutes. If you’ve landed here because you’re hoping to be pointed at a tool you can run that tells you exactly what CSS you can delete from your project, well… there are tools out there, but I’m warning you to be very careful with them because none of them can ever tell you the complete story. Here’s what I’d like you to know upfront: this is a hard problem.
0 kommentar(er)
