OK, so I'm really struggling with a 'brand-new' WordPress website. I'm no WordPress developer, I only have some knowledge of HTML, CSS and a very basic understanding of PHP, Javascript and jQuery.
Currently, the loading speed of my website is slow. I have a small number of plugins installed (the essential ones only). I ran the Google Loading Speed test and they recommended to eliminate render-blocking resources. I had a look here and kind of got an idea of what I need to do. If I understand correctly, I need to split the main stylesheet into several based on media query -- i.e. one for screens up to 400px, another for screens up to 900px, etc.
The trouble is -- I don't have just one stylesheet. There's obviously the main style.css stylesheet, but then every plugin comes with their own! Not to mention that the theme has several different functions/features that use additional stylesheets.
Same for Javascript code.
How am I supposed to split all stylesheets? Doing it manually would take forever, not to mention I'd always run the risk of messing things up.
Any tips? Thanks!
OK, so I'm really struggling with a 'brand-new' WordPress website. I'm no WordPress developer, I only have some knowledge of HTML, CSS and a very basic understanding of PHP, Javascript and jQuery.
Currently, the loading speed of my website is slow. I have a small number of plugins installed (the essential ones only). I ran the Google Loading Speed test and they recommended to eliminate render-blocking resources. I had a look here and kind of got an idea of what I need to do. If I understand correctly, I need to split the main stylesheet into several based on media query -- i.e. one for screens up to 400px, another for screens up to 900px, etc.
The trouble is -- I don't have just one stylesheet. There's obviously the main style.css stylesheet, but then every plugin comes with their own! Not to mention that the theme has several different functions/features that use additional stylesheets.
Same for Javascript code.
How am I supposed to split all stylesheets? Doing it manually would take forever, not to mention I'd always run the risk of messing things up.
Any tips? Thanks!
Share Improve this question asked Jun 8, 2019 at 17:21 wordpressn00bwordpressn00b 132 bronze badges1 Answer
Reset to default 0Generally you can't impact when and how your plugins are loading their own stylesheets. Messing around with that will usually mean you can never update because it'll reset all your work.
That's the trade off of using plugins - you lose control over some things that impact your performance, accessiblity, and validation. Without astronomical budgets and time to build your own versions, you generally have to accept this.
Where you can tackle this task is in your theme, either your custom theme or the child theme of something you've installed.
The article you referenced is right in the fact that you could split up your sheets into very specific use cases in order to only load what styles you need, but you're right in that is a pretty ridiculous task once you've already got a large number of stylesheets. You literally do need to take the time and copy and paste each item into the appropriate sheets and link to them accordingly. I'm sorry, there isn't a quick fix for that.
But even so, developers don't usually work that way. We usually write our stylesheets in something called SASS and organize them by the area being styled rather than the use case (ie. media queries go with the element styles, not in a seperate media queries file), and then compile ALL of our sheets into a single stylesheet that gets streamlined and loaded, using Gulp or Grunt (for example). You can do the same with javascript files. This is the approach I recommend.
It does take a higher level of skill to impliment something like this. If you're familiar with version control, command line, and using node.js, or think you could figure it out, then I would encourage you to give it a try. Here's a tutorial on getting started.