How to Move Css calls to footer

Yeah we can do this for js files to load your pages faster but if you do it for CSS the whole website will not work properly.

You can use WP rocket that works great with the combination of Cloudflare CDN.

I’ve seen moving css files down to the footer work with a standard html built site but you’re saying it won’t work with a php built site? I’ve tried WP Total Cache but it messed up my website by removing the header/logo among other things so I abandoned it. I’ve also had issues with Cloudflare and abandoned it also. Is Wp Rocket a plugin as I can’t find it on the wordpress site. If anyone else knows of a way to accomplish this I’d appreciate hearing about it. Thanks in advance.

It’s good practise to move JS files into the footer because as the website loads it will pause and load these files – so the user sits in front of a white, or partially loaded screen.

CSS on the other hand is your entire website look and layout. I don’t see why you’d want that to load last. I’d typically have it in the header. CSS files don’t take near the load time compared to JS.

Overall I’d worry more about other major performance gains, such as looking closer at premium hosting and image file reduction.

Thanks for the replies. Yes I’ve moved the js to the footer and optimized my images, hosted on a dedicated server but google still says I need to defer or move my css so I was just trying to figure out how to do it. Don’t need to be penalized by google for speed issues if I can fix them.

Just curious why this would have been resolved when I didn’t get the answer I was looking for? Surely there must be a function that can move the css to load last if there is one for js. If I knew php I would try to write one myself however I am php illiterate which is why I came here looking for help. Thanks.

Okay I’ll close this now as I got a response from another forum that explains that I can’t use a function to do what I want.
Here is the reply to me from the other forum in case someone else was wondering:

It is not possible to rectify the render-blocking CSS issue using a function. The only thing that can be done is use a minification service like cssminifier.com to minify your CSS so it loads faster.

Another thing that can be done is to use separate CSS stylesheets that is only requested when required. Like a separate css for media queries that only loads when the site is opened on a smaller screen. But in most cases this is an overkill and can make it very difficult when it comes to editing your CSS files

I guess I’ll have to go through all my plugins and minify the css and do it again when it updates. I can’t believe this is the only way but it is what it is I guess. Thanks to all who replied for trying to help me.