How to Eliminate render-blocking resources from your WordPress site

How to Eliminate render-blocking resources from your WordPress site

How to Eliminate render-blocking resources

You Will Need

Transcript

I am the Server log kid and today we are going to be looking at page speed and how to make your site quicker.
Okay, so today we’re gonna go over how to make your site with one specific element how to eliminate render-blocking JavaScript, which is slowing down your website in this video and give you step by step instructions on how to quickly fix this for free. If your website is built using WordPress.
The principles are the same for any platforms. They might the plugins and the strategy might differ slightly. But this is for many people using WordPress. We all know that page read is important, whether that’s for SEO, PPC UX is important and it’s one of the biggest issues in If you look at platforms like web dev, for slowing down your site, sem rush audit tool, if your link in Google Analytics has got a beta thing, which now tells you where real users are in issues repatriate on specific pages, Screaming Frog, you can connect into their API into page view insights and get page by page. speed data 60. Again, a page level, which pages slow and which ones are fast. I don’t want to get into why this is important, or even the tech behind it. And I just want to give you a simple step by step guide on how to fix this if you’re interested in in the tech or why it is important. A quick google search will tell you everything is now the smart people other than me that can explain this much better than I can. So in this video, I’m going to focus on the how to fix it, not the way so for this to work, we’re going to need one plugin for WordPress, and it’s free. And one website can generate you some critical CSS. There’s several out there. The one I wrote show you I use about 60% of the time. But I can pretty much follow these instructions step by step. So from doing on someone else’s machine, I’ll just type in critical path CSS generator, and I’ll just use the first one that pops up. So they all do roughly the same thing anyway. So as you can see from my screen here, I’ve got web dot dev open and you can see my pretty scores pretty bad performance is 33. And as you can see was pretty good, but I’m pumped for this video. So what if we scroll down on here we can see that one of the big issues eliminate render-blocking resources. And why did I decide on this video? Well, I asked in the Facebook group SEO, on-page rocks, technical SEO meta easy, if people are struggling with this issue, and if they wanted a quick video on how to fix it is pretty much quite easy to do. So here is the video. If technical SEO is something you want to do all them all about, definitely join the group and ask any questions. But let’s get started. So let’s go to the site. On page rocks. This is the site of the metre, I think you’ll see you’re so lucky it offered artificial fire up down there is look. So yeah, this is a site. And if you view the source, you can see the here’s the CSS, it’s caused an issue. Mine on like 95% of the world’s websites out there has to CSS files. So we’re not showing you the results At the end, it’s not going to be 100%. Perfect, because I’m only going to fix the top one. There’s going to be follow up videos if your site does fall into small 5% on how to fix both, but the majority of us for 95% of us this will fix it once and for all. So I’m not going to go through how to instal plugins on your site or your house because if you don’t know that right now, then a quick Google search real quick YouTube search will show you how to do that. I’m going to show you how to instal plugins. So I’ve gone ahead I’ve already installed autoptimise it is in settings.

And it was already installed. So some of the things I got ticked in here, mine won’t come pre-ticked. But you can see I’ve ticked we want optimised JavaScript code. Agree all the inline CSS JS files. Same with CSS files, just tick the ones that are relevant to it might need a bit of testing. I should set aside this video before you make any of the changes. Make sure you’ve got a backup of your site just in case something does break and you can revert to it. I never try and do this on the live site without testing first. And if I do it straight onto a live site, make sure there’s a backup in case I need to roll back. That’s for any change on FM WordPress, this radical aren’t issues. It’s always better to be safe and sorry. And if you do this for the first time, you ensure maybe get a dev site or testing site to build this on something that if you do mess up. So we’ve got it. So the one way we take is this inline and defer CSS because if we go back to web dot Dev, it eliminates render-blocking resources. And this is what’s caused an issue. So if we take that now brings up this box here, we need to input some information.
So we’ll go across to
Pegasus, this is one we mainly use, but there are multiple islands out there. I will put the URL below as well. But basically, all you do comes over here. Type in your URL. Click that. wait a few seconds, and it goes off and does all the magic where it
is this is a few seconds.
He’s just loaded into Roger slowed him. We’ll just wait for it. Oh, there we go. I already said We want to copy that all our code back into here, paste it. Scroll down, save and clear cache. And remember, we’re going to play all caches for this because
otherwise, when we check the sweet in a minute, you won’t have it.
Just let me just clear we have a few questions for different things.
So now we’ve cleared all caches, and we’ve fixed that issue. So if we go back to web dot Dev, and we click on the Run audit
to see how the score was a three
way fit to run
it doing this in real-time so it takes a few seconds to run.
You look at this one in high, high performance right here.
What this has done, it’s magic.
It’s just running
to 49.
But that has now dropped down to
the medium level because that’s sec one. So there for you, it’ll be completely gone. You have a bigger jump than that because I’ve still got it as a medium issue. But yeah, that’s it. That’s all you need to do to eliminate it. If you’ve only got the one
line, it’ll jump up massively.
And
that we are about to another video later this week, which is, if we just got on here, I don’t want to say quickly. But Google Fonts ironically is not very good page loads in multiple resources you don’t need it slows down your site. So if you’re interested in how to quit again, for free, fix the Google Fonts issue on your site. join our Facebook group on-page rocks, technical SEO, maybe easy, or subscribe to our YouTube channel. And we’ll get that video later this week on how to fix Google Fonts thanks for now.

Let me know if you have any questions and how you get on.

1 thought on “How to Eliminate render-blocking resources from your WordPress site”

Leave a Comment

Your email address will not be published. Required fields are marked *