Using the CSS Me Not Bookmarklet

Stoyan is completely right. Although we all love CSS, it is still an important factor in website loading speed, and reducing CSS usage is a good thing. He created a convenient bookmark called "CSS Me Not" for diagnosing unnecessary CSS files, which we'll cover in more detail later.

The problem is that CSS is on a critical path, which blocks rendering and even often blocks JavaScript execution. We love CSS, it's amazing, it can do incredible feats, fix damaged UI, manipulate images and draw amazing pictures. We love CSS. We just want…less CSS because its nature is blocking.

Sometimes our website uses entire style sheets that are completely unnecessary. I have to admit that WordPress is notorious for this, and it loads stylesheets for plugins and blocks that you may not use at all. I was in this situation as I wrote this article. I just haven't found time to clear some small stylesheets that don't need to be loaded.

Stoyan created a quick bookmark called "CSS Me Not" to view all these CSS files. Of course, the biggest benefit is that it lets you know what you are facing.

You can also find these stylesheets in DevTools, but the "CSS Me Not" bookmark makes it easier, and there is a killer extra: turn off these stylesheets . Testing this bookmark on my CSS-Tricks website, I can see that WordPress loads four stylesheets (due to settings and plugins) I know I don't need them.

If you want to do this in DevTools, you can press CSS to filter your network requests, find the stylesheet you want to close, right-click and block it, and then reload.

I've been working on this for years, unqueueing scripts and styles in WordPress.

Deleting a completely unused stylesheet is an obvious win, but there is a more difficult issue, which is to remove unused CSS. In that post, I mentioned the only way to really understand if any particular CSS is not used, is to attach a background image to each selector and then check the server log after a period of production time to see which images have never been requested. Stoyan confirmed what I said here:

UnCSS is a bit like a "lab". The "real world" may surprise you. So we did a trick at SomeCompany Inc. is to add tools for all CSS declarations at build time, where each selector gets a 1×1 transparent background image. Then check the server logs carefully after about a week to see what is actually used.

The above is the detailed content of Using the CSS Me Not Bookmarklet. For more information, please follow other related articles on the PHP Chinese website!