A table with scissors and yarn.

Fix render blocking css added by Code Snippets plugin

WordPress Performance

While optimizing a site with W3 Total Cache recently, we ran into the following issue:

A css file named https://domain.org/?code-snippets-css=1&ver=9 was render blocking, and causing a 150ms delay on mobile.

While this isn’t a huge problem, we still wanted to make sure we were being diligent.

Upon further investigation, we found that the user was using the the popular Code Snippets plugin (900,000+ active installs) and adding multiple CSS snippets. What that plugin was doing was combining all the snippets into 1 css file and then loading them via that /?code-snippets-css=1 url.

Solutions

There are many different solutions to this render blocking css. We’ll cover just a few below:

Solution #1 – Add your custom css via the Customizer

We were not dealing with a lot of css code, so this case we took the easy route and just added the css code to the customizer.

Solution #2 – Add a php snippet

Instead of using the “css” snippet, add a “php” snippet in the following manner:

A screenshot showing our custom php snippet to add css to the head.

After you save and activate the snippet, the style will be added within the <head> tag, and will no longer be render blocking.

A screenshot showing our css in the head.

W3 Total Cache logo

We Can Help Optimize Your Website

Optimize your site’s performance with our one-time premium services or ongoing monthly VIP support. View services

Got a Minute?

Your feedback helps us improve. Complete our customer survey now.

Partners

Bunny CDN Logo