Utilizing the CSS Me Not Bookmarklet to See (and Disable) CSS Recordsdata

Stoyan is completely appropriate. As a lot as all of us love CSS, it’s nonetheless an essential participant in how web sites load and utilizing much less of it’s a good factor. He has a neat new bookmarklet known as CSS Me To not assist diagnose pointless CSS recordsdata, however we’ll get to that in a second.

The [problem] is that CSS is within the essential path, it blocks rendering and sometimes even JavaScript execution. We love CSS, it’s magic, it may do unbelievable feats and repair damaged UIs and manipulate photos and draw wonderful footage. We love CSS. We simply need… much less of it, due to its inherently blocking nature.

Generally our websites use whole stylesheets which might be merely pointless. I hate to confess it, however WordPress is a infamous offender right here, loading stylesheets for plugins and blocks that you just may not even actually be utilizing. I’m in that place on this website as I write. I simply haven’t discovered the time to root out a few little stylesheets I don’t want from loading.

Stoyan created a fast bookmarklet known as CSS Me Not to see all these CSS recordsdata. The massive profit, in fact, is that it lets you already know what you’re up towards.

You possibly can discover these stylesheets in DevTools as properly, however the CSS Me Not bookmarklet makes it further simple and has a killer bonus characteristic: turning off these stylesheets. Testing the bookmarklet right here on CSS-Tips, I can see 4 stylesheets that WordPress masses (due to settings and plugins) that I do know I don’t want.

If you happen to wished to do that in DevTools as an alternative, you could possibly filter your Community requests by CSS, discover the stylesheet that you just wish to flip off, right-click and block it, and re-load.

I’ve been preventing this combat for ages, dequeuing scripts and kinds in WordPress that I don’t need.

Eradicating completely unused stylesheets is an apparent win, however there may be the extra squirrely challenge of eradicating unused CSS. I point out in that put up the one-true-way of actually figuring out if any specific CSS is unused, which is attaching a background-image to each selector after which checking the server logs after a good quantity of manufacturing time to see which of these photos had been by no means requested. Stoyan corroborates my story right here:

UnCSS is type of a “lab”. The “actual world” might shock you. So a trick we did at SomeCompany Inc. was to instrument all of the CSS declarations at construct time, the place every selector will get a 1×1 clear background picture. Then rummage by the server logs after every week or so to see what is definitely used.

Utilizing the CSS Me Not Bookmarklet to See (and Disable) CSS Recordsdata initially revealed on CSS-Tips. You must get the publication and turn out to be a supporter.