AI Summary
This video provides a step-by-step guide to speeding up a WordPress website using WP Rocket and Imagify. The presenter demonstrates how to improve load times from 8.7 seconds to under 2 seconds by implementing caching, image optimization, file minification, CDN integration, and database cleanup.
Chapters
Use PageSpeed Insights or GTmetrix to get a baseline performance score and identify issues like render-blocking requests and large images.
Install WP Rocket to enable caching, which stores preloaded versions of pages to reduce server load and speed up delivery.
Enable lazy load for images, background images, and iframes/videos so they only load when scrolled into view.
Preload fonts and self-host Google Fonts to eliminate external requests that slow down page load.
Install Imagify to compress images, generate WebP versions, and resize images to a maximum width of 2560 pixels.
Minify CSS and JavaScript files, remove unused CSS, and defer JavaScript loading to reduce render-blocking.
Connect WP Rocket with Cloudflare CDN to manage caching and deliver content from servers close to users.
Clean up post revisions, drafts, spam comments, and transients, and schedule weekly optimization.
Mobile score improved from 52 to 91, desktop from 80 to 100. First Contentful Paint dropped from 8.7s to 1.1s.
By following these simple steps, you can dramatically improve your website's speed and performance, leading to better user experience and higher search engine rankings.
Clickbait Check
95% Legit"The title promises a speed improvement and delivers exactly that with clear, actionable steps."
Mentioned in this Video
Tutorial Checklist
Study Flashcards (7)
What is the recommended maximum image width for web use according to the video?
easy
Click to reveal answer
What is the recommended maximum image width for web use according to the video?
2560 pixels.
05:30
What does 'lazy loading' do for images?
easy
Click to reveal answer
What does 'lazy loading' do for images?
It delays loading images until they are about to scroll into view, improving initial page load time.
03:00
What is the benefit of self-hosting Google Fonts?
medium
Click to reveal answer
What is the benefit of self-hosting Google Fonts?
It eliminates external requests to Google's servers, speeding up page load.
04:00
What is 'render-blocking' and how does WP Rocket address it?
medium
Click to reveal answer
What is 'render-blocking' and how does WP Rocket address it?
Render-blocking resources (like CSS/JS) prevent the page from displaying content quickly. WP Rocket minifies, combines, and defers these files.
07:00
What is the difference between lossless and smart compression in Imagify?
hard
Click to reveal answer
What is the difference between lossless and smart compression in Imagify?
Lossless compression preserves exact image quality with minimal size reduction; smart compression reduces size more aggressively with negligible visual difference.
05:00
What is Cumulative Layout Shift (CLS) and how does adding image dimensions help?
medium
Click to reveal answer
What is Cumulative Layout Shift (CLS) and how does adding image dimensions help?
CLS is when page elements shift unexpectedly as images load. Specifying image dimensions reserves space, preventing layout shifts.
03:30
What performance improvement was achieved in the video?
easy
Click to reveal answer
What performance improvement was achieved in the video?
Mobile score from 52 to 91, desktop from 80 to 100; First Contentful Paint from 8.7s to 1.1s.
11:30
💡 Key Takeaways
Baseline Performance
Establishes the starting point (8.7s load time) to measure improvement.
Caching Explanation
Clearly explains how caching works and why it's critical for speed.
01:30Lazy Load Implementation
Demonstrates a simple setting that significantly reduces initial load.
03:00Image Optimization with WebP
Highlights the importance of modern image formats for smaller file sizes.
05:00Render-Blocking Elimination
Shows how to remove a common performance bottleneck.
07:00Final Results
Quantifies the dramatic improvement, validating the entire process.
11:30Full Transcript
My site used to take 8.7 seconds to load. Now it's down to under two. And in 2025, users expect nearly instant load times on your website. So, it's more critical than ever that we get that time down. If your site is slow, not only will users probably bounce, but Google might not even show your website in search results in the first place. Not only Google, but also all of the AI chat bots that are also now
referencing content from the web. So, let me give you a very simple step-by-step almost copy and paste approach that you can take to speed up your website today. This video is sponsored by WP Rocket, an amazing premium plug-in that we use to make many of our websites blazing fast. And today, I'm going to show you a bunch of things that you can improve on your website, whether you're using WP Rocket or not. To start off with,
we want to get a baseline of how our website is performing. But not only are we going to get a baseline, we're also going to figure out what it is that's preventing our website from loading faster. For that, we're going to use a tool called page speed insights. We can also use gtmetrics. Both of them are going to give you a great breakdown and they're going to do it for free. For that, you can go to
page speed.web.dev or I usually just Google page speed insights and it pops up right at the top. And then you enter the URL for a page on your website. Now, that's the thing is it's only going to be checking that page. It's not checking how your entire website performs, but it's really good to make sure your homepage loads fast. And it's great to check uh especially big pages. If you have a landing page, like a sales
page, those pages are usually going to be full of images and other content that can slow the load times down. And so getting those pages to load faster, great. If you check a couple of your blog posts here and there and they're doing great, then chances are your normal blog content on your website is all probably doing really good. Here I get a report. It's going to show me mobile and desktop. Usually mobile's going to perform
quite a bit worse and they're going to help me diagnose the performance issues. This is where I got that 8.7 seconds. It took that long for the first like page of content to actually completely load so that people could see the content. That's way too long. And we can look down here a little bit further and find out what were the things that slowed us down. Render blocking requests, that's a big one. Image delivery, that's another
one. There's several things here. And so we're going to break it down. We're going to go through several of these. Uh, these are really common issues and I'm going to help you overcome those using some really great tools. Another great way to check this is GTMetrics. Same concept. I can put in the URL for a page and I can just run it and it's going to do a check for me. GTMetrics thinks this website's doing better
than Page Speed Insights does, but it does me give me several issues that I can start working on. I really love how Page Speed Insights gives me a mobile and a desktop version because we can do a lot of work to improve the desktop speed of our websites, but people are using mobile more and more. And your website should be designed and built as a mobile experience first. It should look good on desktop, but you should
really focus on what your website looks like and how it performs on mobile devices. So, I'm going to make sure that I get this performance score way up and I get this speed time way down. Let's jump into the first thing we're going to do. First, we're going to turn on caching. That was one of the things that the GTMetrics, in fact, it was the top thing GTMetrics showed me here. It said, "Serve static assets with
an efficient cache policy." Now, one of the reasons that this website isn't worse than it is is I've already got a great baseline setup. I'm already using a good host with Cloudways. I'm already I use Cloudflare as my domain registar. So, I'm already using their CDN automatically as well as a basic cache. But we're going to be able to optimize that caching a lot better by using WP Rocket. So, I'm going to go ahead and install
that and you're going to see the basic setup and how it's super easy to get started. I just go download it from my account on their website. Then, I'm going to go to plugins, add plugin, and I click upload plugin. Choose a file. I'm going to grab that whole zip file from my downloads and install. Now, then I'll activate the plugin. And now, there it is. I'm going to go ahead. I can click on the settings
here or I can go here to settings and go to WP Rocket. Okay. Now, look at this. WP Rocket's now activated and already working for you and it should already be loading faster now. That's pretty crazy. I also love that like their tutorials and the getting started and stuff. It's all right here in the plugin. I can link to it right from here. I don't have to like go separately to their website and go look for
all this support. It's just kind of right here. Okay. Now, here here's some of the caching and we can preload. We can actually go generate the cache right now ahead of time and it's already activated. I mean, I didn't have to do anything. I haven't done anything and the caching is already set up to work. So, I keep talking about caching, but let me tell you exactly what caching does. Essentially, what's going on is it's storing
a a cached version of the pages on your website, the content on your website. So, it's like preloaded. When people go to click on it, they can view this cached version. And it prevents like your servers from having to generate and load up every page every time. It just already knows what it looks like and how it's supposed to function. And that cached page, it's already gone through all the code, seen exactly everything that's supposed to
be there and what it's supposed to look like, and just put it together so it can load way faster. And then that cache gets renewed on a regular basis so that when you make updates on your website, if you update a page, um, it will automatically replace that page in the cache. And then when we pair this with a CDN, it allows people to receive the content from a server that's located really close to where they
are and they're able to view a cacheed version from a local server. That just loads so much faster than if it has to ping the server wherever you have that code stored and then it has to load all that code from your servers. Now there are free ways to do this. I again I told you I'm using Cloudflare that's my domain registar and so they already have a cache for me too. But this is another layer
of caching for me. Now I can go to the advanced rules and I can set how long is my cache lifespan. So I can make it longer or shorter. So if I notice that things aren't appearing right, I can shorten that time so that it refreshes that cache more often. Or if I'm rarely making changes to my website, I can make that longer if I want to. I can also specify certain pages that should never be
cached. So if there are certain pages on your website, oftentimes like um customer dashboard pages, that kind of stuff, you shouldn't cache those. they'd need to be up todate every single time, right after a customer makes a change in their account. For a lot of us, that's not an issue. But if you have e-commerce and you're doing it right on your WordPress site, those pages are great ones to knock cash. And all you have to do
is put the URL, everything after, in my case, fixeddiy.com. Then I would say whatever comes after that. So like /c customer dashboard, which I don't have that page on this website. I don't need to do that. But that would make it so that that page never gets cached and it's always going to ping my server, but just for that page. You can do the same thing with specific cookies or user agents. If you don't know what
that is, um certain query strings, if you don't know what those are, then you probably don't need to worry about it. Just go ahead and let it cache everything. Also, if I'm doing work on the website or and I've made some changes and I just need it to be up to date right away, I just click here at WP Rocket and I just click clear and preload cache. And what's that's going to do is going to
wipe out the cache right now and go ahead and reload it with the fresh content on the website. Okay, now we're going to talk about optimizing images. This can be one of the biggest things that make a difference to your website. And that's because images, they're often big. I mean, when I take a photo with my phone, I get these huge images that are just way bigger than what people need, especially on a computer screen. And
so those file sizes can be very large. Now, fortunately on my phone, um, you know, Apple has them pretty well optimized, so the file sizes aren't terrible, but they're still pretty big. We want images on our website to be like in the kilobytes, not megabytes, kilobytes. And to do that, we need to optimize them. The other thing, too, though, is we want, especially large images to only load when it's time for them to load, if a
user scrolling toward them. We don't need them to load immediately. And for that, we can use WP Rocket. For actually optimizing the images and getting the file size down, we're going to use a different tool. I'll show you that in just a second. First, let's look at what we can do within WP Rocket. Let's go with media. So, lazy load. I'm going to lazy load the images. What that does again is it's going to make it
so that the images only load as I get to where I'm scrolling toward them. That way, when I initially load the page, it's not trying to load a bunch of images further down the page. It's just loading the stuff at the very top. So, we're going to enable lazy load for images. We're also going to enable for the background images. I don't have any on that homepage right now, but if I had a big Actually, I
do. You know what? This right here, that is technically a background image. So, that should help. Granted, that one I don't want to lazy load cuz it's the top of the page. So, although that one's going to load at the very beginning cuz it's the very top of the page. I also want to enable this for iframes in videos. Iframes often load really slow because they have to actually go pull that content from another website. Now,
this is really cool, too. When I enable this for the iframes in videos, I can replace a YouTube iframe with a preview image. So, it can take the thumbnail image or whatever and just show it as an image instead of an iframe until someone actually clicks on it. I'm going to enable that. I'm curious what that's gonna how that's going to feel on the front end on the website. Ooh, image dimensions. This is good. So, if
the image dimensions are missing like in the code, we're going to add those dimensions. And what that's going to do also, especially with all this lazy loading and stuff, is it's going to specify the image dimensions so that when the page loads, it knows how much space to reserve for that image. And that way it doesn't shift things around suddenly as it starts loading an image. If you you've probably seen that you're on a website, right,
and you're scrolling and then all of a sudden it goes to load an image or an ad or something like that and all of a sudden it pushes the text around. That's not a good user experience and it's called cumulative layout shift. It's actually something that Google pays attention to and we want that as small as possible. So we're going to go ahead and do that. What about fonts? We're going to preload fonts. This is all
like in the image section, right? But this is huge. We're going to self-host Google Fonts. That's crazy. One of the things that slows down sites a ton is when they run scripts that have to go look at other websites. Analytic scripts are usually pretty bad for this, but Google fonts, it's like every theme almost all over WordPress, right? You've got all these Google fonts and whether or not you're using them, you can use a system font
like Ariel and still it's going to load this script to go pull a bunch of Google fonts that you could be using on your website. So instead, what it's going to do is it's going to host those fonts on the website. It's going to go download them and pull them over to the website. And that's going to make it so that those pages load faster because it doesn't have to go ping Google and pull in those
fonts every time. I love this. We're going to save these changes and turn everything on. I know it seems like I'm excited like, haven't I used this tool before? And I have, but it's been a while and I haven't set it up in a while either. And so setting it up on a new website, I'm really excited to see all the cool things that it can do. Okay, so that was media, but down here we've got
image optimization. compress your images. Okay, see here they're specifying that they don't actually do this. We need to use another tool for this. And the one they recommend because it integrates perfectly with WP Rocket is Imagify. We're going to go ahead and install the Imagify. Sketch wants a little bit of love. We all got time for that. Right now, I go to my free account on Imagify and I need to grab an API key, which they
actually emailed to me when I set up the free account. So, I'm just going to go ahead and paste it and click save. Now, notice when I update the plugins on the website, WP Rocket sends me a notification saying, "Hey, some plugins have been disabled or enabled or changed in some way. So, if they're going to affect the front end of your website, you should probably clear the cache right now." And when we clear the cache,
it's going to clear it and preload it again. So, now we have our Imagifi settings here. And you notice it's right here next to WP Rocket. Now, we're going to autooptimize images on upload. We're going to back up the originals. And what that does is it allows us to keep that full-size version somewhere so that we always have that fulls size version. We could always revert back to it if we needed to. Now, by default, it
doesn't check this lossless compression. Lossless compression is it's going to basically look exactly the same. It's just going to make the image file size a little bit smaller as much as it can without losing anything in the image. Now, that's usually not necessary, especially for the web. If you're like a photography website or something like that, you might want that, but for most of us, we don't want that. let's go ahead and use their smart compression
and they'll optimize it to make the images look almost like as close as possible like without most of us humans really noticing much of a difference to the original image but reducing the file size as much as possible. Now the next thing we want is this nextG format. We can turn that off if we want but really you don't want to do that. We have these new formats for images like webp and AVIF. AVIF isn't supported
on all browsers yet but webp really pretty much is. But what that is is just an image format that also is a much smaller file size. So PNGs have a lot more data in them and so they have a bigger file size. JPEGs have a smaller file size. They store less data. WEBP is a much more optimized image format so that less data is stored and it allows us to have our images look really good but
still be a smaller file size. So we're going to have it generate WEBP versions of our images because our cameras don't take WEBP versions. They take usually JPEGs or um Apple does their high efficiency um HEIC version. Then we're going to check this box to display images in the nextG format. And using the picture tags is the best way to do that. Also, when we upload images to our website, sometimes they're going to be like four
or 5,000 pixels wide. We don't need that. Here, it's saying let's reduce image sizes to no more than 2560 pixels wide. That's still pretty freaking wide. A lot of times you can get away with like 1920, sometimes even like 1,200. The only reason I don't go a ton smaller is because a lot of times I want to be able to have an image like this that is like the full width of the web page. If we
make all images smaller and then it's got to stretch it back out, it's going to start getting pixelated. So we'll leave it at 2560 for now. And if we need to go smaller because the images are still way too big, then we'll go smaller. And then it's asking what size images do you want? do a thumbnail size, a medium, medium, large, large, and big. And the cool thing about this is by generating all these different sizes,
when an image shows up on a web page, but it's like a smaller version, it's going to be able to load the smaller version. So even though I'm only reducing these to 2560 pixels wide, it's going to generate a version that's only 1,024 pixels wide. And so if I have, you know, an image that's going to show up on the page 900 pixels wide, it can use this large format and that file is not going to
be very much bigger than what it really has to be to still be beautiful and crisp. Apparently, I can also add optimization for the theme. We're not worrying about that right now. Let's focus on the images. So now we're all set with Imagify image optimization. And we're going to save and we're going to go to the bulk optimizer. That's going to optimize all the images that are already on the website. And then now every time I
upload an image, it'll just optimize it as it goes. Okay. Okay, so now it hasn't done any, but I'm going to go ahead and I'm going to magify them all. Fortunately, it's a small website so far. It's great reason to do this at the beginning of a website if you can because if I had hundreds of images on the website to optimize right now, I couldn't use the free plan. I would have to go ahead and
use a paid plan, which is fine. Go ahead and pay for the plan for a little bit, get everything optimized, and then if you need to, you could back off probably to the free version because most of the time that can probably keep up uh with the needs that your website has on an ongoing basis. Okay. Now, while that optimization is happening, we're also now going to optimize the way all of the other stuff, the other
code loads on the website. We're going to do this by minifying and combining files. Now, there's tools to do this outside of WP Rocket. You can use autooptimize. That's really the biggest the main one. It's been around for a long time and that's going to minify all these files for you. But if you're going to use WP Rocket, you can just do all this right here in the tool and it does a great job of it.
Now, I want to show you something. This is why this is important. Okay? Now, notice this top issue right here. render blocking requests. I click on that. I get all of these CSS things. See this CSS.css.css. All of these CSS files that need to load before it can load all the content. Cuz the CSS is the style that tells it here's what it needs to look like. What we're going to do is we're going to combine
all those and then it's only going to load the things it needs to load before the page content can load. It's going to load that first and then it can defer the rest until after. It's going to do this for the CSS. It's also going to do this for JavaScript. I don't have a ton of JavaScript on this page, so that's not causing an im an issue right now, but the CSS really is. So, we're going
to go here to file optimization. Now, of course, when I turn this on, it's already set to do this. If there are specific CSS files I don't want to include in the minification, I can always put them here. If you don't know that you need to keep one out, you probably don't need to keep one out. Just leave it. Now, so we're minifying here, and that minification just leaves in only the code, only the things that
it needs to know. So we can ignore everything else. But then here we can optimize the CSS delivery. So this eliminates the render blocking CSS on the website. So I'm going to check that box and I'm going to remove unused CSS. This is recommended for top performance. But if it breaks the way things look on the website, we can switch to just load it asynchronously. And so that does what I was describing before. That just puts
the critical stuff first and then it loads the rest of it after. We're going to go ahead and load asynchronously. That way we just make sure we're not breaking anything. But we could maybe speed it up even more just by removing the unused. Now, same thing. We're going to minify JavaScript files. I'm going to go ahead and combine things. Again, if we notice issues on the website after this, we can deactivate it. Not a big deal.
And we can exclude specific JavaScript if we notice it broke one thing. We can remove that. Now, this also I'm going to select this to defer loading JavaScript. So, it's not going to load JavaScript. A lot of times, different tools will put JavaScript like in the header and it'll load it before it loads the content on your page. even if it doesn't need to. Now, if there is certain content or certain JavaScript you need to load
at the very beginning, you can exclude that right here. We can also delay the JavaScript execution until the user actually scrolls to the part where they need to use it or until they click or something like that. So, we're going to go ahead and check that cuz I'm not again using a lot of JavaScript. I'm going to save changes. So, I basically turned on everything and you can just back off any of these things that take
it too far and cause your website to not function correctly on the front end. Okay, now they're telling me like, "Hey, we really think you should just remove unused CSS instead of loading asynchronously." Fine, we'll try it. We'll see what it looks like. If it breaks anything, it probably won't cuz again, the website's not very complex yet, but we'll go ahead and change it and save it. Okay, next is we're going to use a CDN. Now,
I told you I'm already using a CDN because I'm working through Cloudflare, but I can connect WP Rocket with my CDN, and that way I can manage that CDN right here on my website instead of having to go separately to Cloudflare to go do that. So, let's go ahead and integrate it right here. I can pay for their CDN. Now, here I don't need to do anything here because of Cloudflare, but if I want to connect
the two, I'm what I'm going to need to do is look at the add-ons, which I could see right here, or I can click the link here under CDN, and I scroll down to Cloudflare. So, I'm going to go ahead and integrate with Cloudflare. We'll turn on that add-on. Now, I can click Cloudflare, and I need to go get an API key. Now, I'll save that. And what that's going to do, it's going to allow me
to clear out Cloudflare's cache, which is the cache that goes out and is delivered to their CDN. Uh, it's going to let me clear that out straight from here and it's going to allow me to do some different settings and stuff. So, here we can enhance my Cloud Fighter configuration based on WP Rocket's recommendations. We'll go ahead and do that. Development mode, that's going to temporarily deactivate the CDN and that way I can work on the
website like do development work and have it live like as I'm changing it so that I see the changes as they happen. And then we're going to leave this relative protocol off. So, we're going to go ahead and just leave it like that. Set the optimal settings and now they're connected. Oh, now they're giving me some stuff here. Optimal settings activated for Cloudflare. BLCP elements been optimized. The images above the fold were excluded from lazy load.
See, they do all this automatically. Like so many other tools I've had to like check a box where it's like, do you want us to not lazy load the images above the fold? Like, duh. So, that should help. All of these things should help. Next, the last thing that we're going to do is we're going to optimize the database. Now, I told you this is a brand new website, so I probably don't have a lot of
bloat and stuff yet, but the database is where like all the information for our website is stored. And that database gets pinged all the time. Every time we add content or anything, and every time we add a new plugin, it ends up creating these new database tables. And anyway, it can get pretty messy. And so, they're going to help optimize the database for us. This is a brand new website, and there's already 12 revisions in the
database. You take a draft, you save it, you save it 5 minutes later, you save it 5 minutes after that. each one of those draft versions got saved. And unless you're optimizing it, it's never going to get rid of those old drafts that you don't need anymore, as well as getting rid of trashed posts in your database. So, we're going to just go ahead and do post cleanup. Uh comments cleanup. We can get rid of the
spam comments and and comments that we've trashed. Transients, cleaning out those transients. Optimizing tables. We can do that and it's going to clean it out right now, but I can schedule a daily or weekly. I'll go ahead and do weekly. I'm not constantly doing stuff on the website. I don't have um customers with accounts constantly adding and changing their information. And so weekly is going to be plenty and then we're going to optimize. Now it says
run a backup first. You should run a backup first. I can do that by going to my uh host and I can just request a backup right now. I am going to go ahead and do that. I don't that's not the point of this video so I won't show it. And then we'll come back and we'll optimize this. All right. Now we're going to save and we're going to optimize. Okay. So it got rid of trashed
posts. It got rid of drafts, autodrafts. It got rid of revisions. And now it's set to do that every week. And I'm not worried about the backup every week because I get a daily backup of my website from my host anyway, which is awesome. Okay, I am going to go ahead and clear the cache. I do want to give it a few minutes to go ahead and preload everything into the cache again, but then we're going
to be ready to test the speed, and I think it's going to be better. Okay, just with the things we just did in the last few minutes with WP Rocket and Imagify, we took my mobile score from 52 to 91, the desktop score from 80 to 100. Nailed it, right? And this is what's even more important than the overall score. My speed index was 8.7 seconds with the first content full paint. That's like the first piece
of content that like main content that like showed up so that people could actually interact with my website. 8.7 seconds. That's crazy. Now it's first contentful paint 1.1. My speed index 3.7 seconds. That largest contentful paint is still the biggest issue. And that is probably that big image. And if I reduced that size even more. I don't need it to be 2560 pixels wide. I could probably improve that even better. Notice this render blocking request issue
we had before. It's completely gone now. There was some layout shift before. It's not even showing up here at all. We got rid of so many of the issues. There are still a few things we could optimize and that's going to speed it up even more. But what you can do in just a few minutes with a tool like this is incredible. And what's impressive to me is you could do it without any technical knowledge. Just
follow the steps I just gave you and check the boxes. Even what you get right out of the box without having to do anything is impressive. Now, if you followed along and you did these same things on your website, I'd love to see you comment below how much did your uh website speed improve. And I want to thank WP Rocket specifically for building a tool that we actually use and that's actually worthwhile having and even paying
for to make our websites run amazingly fast and doing it without having to juggle dozens of tools and making it so simple. I invite you to try out WP Rocket. You can use the link I put in the description. It'll make it easy for you. And then I invite you to go check out this video where I talk about how to improve the SEO on your website also very simply without a bunch of technical knowledge and
in a matter of minutes. Go watch that next. your website's going to be functioning so much better and perform better in search results both you know Google being regular search engines but also with GEO on all of the AI tools because you're going to make your website so much more optimized. Thanks for joining me today here at Income School. We'll see you all in our next video.