Hi Ross!
From a maintainability perspective, inlining CSS (that is, embbeding CSS directly into the HTML code of your site) is considered a bad practice and so I’m going to give you a different recommendation.
Basically, assuming I got it correctly, what they asked you to do is to get rid of WPP’s stylesheet to reduce the number of files that the browser must load to render your pages. This is actually a good idea: the less files there are to load, the faster your page can be rendered.
So, to avoid inlining WPP’s CSS and comply with GTMetrics’ suggestion:
- Go to Plugins > Editor and select WordPress Popular Posts from the dropdown.
- Click on wordpress-popular-posts/style/wpp.css to open WPP’s stylesheet, copy its contents.
- Paste WPP’s CSS into your theme’s stylesheet (you can do this via Appeareance > Editor, and then click on your theme’s stylesheet to edit it).
- Go to Settings > WordPress Popular Posts > Tools, set “Use plugin’s stylesheet” to disabled, and hit the Apply button to save changes.
Thread Starter
RossB
(@rossb)
Hi Hector and thanks a lot for your excellent and very clear recommendation. I have just followed your instructions and run the site through GTMetrix, and all fixed! Plus, the site speed has increased a few percent as a result – page speed score now 84% (up 2%) and Yslow score 95% (up 1%). I’ll take every improvement I can! I’ve been doing a lot of research on optimising my site for speed, and you have just provided one of the last pieces of the jigsaw!
The only item they’re saying I should inline now is my child theme stylesheet. Is that even possible, I wonder?
Whatever, again, many thanks for your prompt and productive reply!
Cheers
Ross
Possible? Yes. You could embed the entire CSS code from your stylesheet into the HTML code but -as I said before- is not a good idea nor is practical, so I’d just leave it alone.
If you want to further improve things, you could use a caching plugin. WP Super Cache -or was it W3 Total Cache?- includes a “combine stylesheets” feature that merges all the css files into one or something like similar (I’ve never used it tbh, but I’ve seen various mentions about this over the web and even here). Might be worth a shot.
Thread Starter
RossB
(@rossb)
Thanks for your further comments, Hector.
Already using WP Super Cache. Don’t recall seeing that “combine stylesheets” option when going through the settings, but will check again.
As you suggest, best to just leave the child theme stylesheet alone. I’m already getting v good load speeds for my site. You can get too obsessive about this optimising stuff, so time to pull back!
Cheers
Ross
Thread Starter
RossB
(@rossb)
Hector, if you’re still there, may I ask you a final question?
Now that I’ve pasted the CSS from your plugin to my child theme stylesheet, should I also delete the WPP stylesheet?
I’m thinking it would be a good idea to copy and paste the CSS from the stylesheets of some other plugins, as per your suggestion re the WPP stylesheet CSS, and would appreciate your thoughts on whether deleting the plugin stylesheets is generally advisable after such an action.
Cheers
Ross
Hi Ross!
If you disabled it as I suggested (see step 4), there’s no need to delete it as the browser won’t load it at all. If you decide to delete it after all, the next time you update the plugin WordPress will just recreate it again along with all plugin’s files.
Thread Starter
RossB
(@rossb)
Yep, I did disable it as per your suggestion. All AOK then!
Thanks v much for your help, Hector.
Cheers
Ross
