SEO - Search Engine Optimization
Google has used site speed as a ranking signal for desktop searches since 2010. And as of 2018, page speed became a ranking factor for mobile searches.
Even though speed improvements will only affect a small percentage of slow websites, faster page load times lead to better user experience and ultimately, more revenue.
So, there are a number of reasons why your website might load slowly. But the most common reasons that I’ve seen are due to slow connectivity, caching, page size, and sometimes more technical reasons like render blocking JS.
And the 3 steps in this video should help you get better performance from your site. But keep in mind that the things we did for this site won’t necessarily translate perfectly to your site.
This is because there are tons of things to consider when it comes to WordPress site speed like your theme’s code, specific plugins you might be using, server configuration, image file sizes and more.
Before you do anything, run your site through some site speed checking tools, like Google’s PageSpeed Insights, Pingdom, GTMetrix or our own Site Audit tool.
This will help you see what you need to improve.
The first thing we did was to switch DNS providers to Cloudflare’s free DNS service.
And you’ll learn how this works and why this is important in the video.
The next thing we did was purchase and install the WP Rocket plugin.
WP Rocket is an all-in-one site speed optimization plugin for WordPress. The plugin handles common page speed optimizations like caching, preloading, compression, and lazy loads images to name a few.
You’ll learn what you need to do after installing WPRocket on your site.
And finally, we optimized our images.
The simple solution is to compress your images using lossy or lossless compression. And there are some great plugins that’ll do this for you like ShortPixel and Imagify.
And these 3-steps gave us a huge improvement, as shown in the speed checking tools we used.
If you’re still unhappy with your site speed after making these optimizations, then you’ll likely need more custom work done for you. So you may want to consider removing plugins and scripts, switching themes, or hiring a developer to make the appropriate fixes.
#speedupyourwordpresswebsite #pagespeed #technicalseo
Timestamps:
0:00 Intro
0:58 Common reasons that impact website’s load time
1:50 Run a test through page-speed testing tools
3:01 Switch to a fast DNS provider
5:23 Start with caching files
6:05 Optimize CSS files
7:41 Set up JS files loading
8:50 Optimize the media files
9:10 Set up preloading priority
9:49 Use CDN
11:09 Optimize your images
Transcript
00:00
So my buddy Zach messages me and he’s like:
00:02
“Hey, can I hire you to speed up my WordPress website?”
00:05
And I was like:
00:06
“Dude… Just do A, B, and C, and I’m pretty sure you’ll see a huge performance boost.”
00:12
A few days passed and he said:
00:13
“The speed tips you gave me worked perfectly.”
00:17
So today, I’m going to show you how to speed up your WordPress site with three simple steps,
00:22
and take your site speed from something like this… to this.
00:26
Stay tuned.
00:26
[music]00:31
Google has used site speed as a ranking signal for desktop searches since 2010.
00:36
And as of 2018, page speed became a ranking factor for mobile searches too.
00:41
And even though speed improvements will only affect a small percentage of slow websites,
00:46
faster page load times lead to better user experience and ultimately, more revenue.
00:52
In fact, a study by Google shows that as page load time goes up, bounce rate rises with it.
00:58
Now, there are numerous reasons why your website might load slowly.
01:02
But the most common reasons that I’ve seen are due to slow connectivity, caching, page size,
01:08
and sometimes more technical reasons like render-blocking JS.
01:12
But if you’re anything like Zach, who’s not exactly the most technical person, then
01:17
the three steps that I’m about to show you should help you get better performance from your site.
01:22
Now, before we get started, it’s important to note that the things I did for this site
01:26
won’t necessarily translate perfectly to your site.
01:29
There are tons of things to consider when it comes to WordPress site speed like your
01:34
theme’s code, specific plugins you might be using, server configuration, image file sizes,
01:40
and more.
01:41
So as we go through the tutorial, I’ll try and explain the more technical reasons behind
01:45
poor performance, so you can hopefully diagnose further issues yourself.
01:50
Alright, so let me give you a background on the website we’ll be optimizing and we’ll start
01:54
with some benchmark speeds.
01:57
This is a brand new affiliate site built on WordPress using the free WP Astra Theme.
02:02
He’s activated seven plugins, many of which will contribute to page load time in big and
02:08
small ways.
02:09
Now, to keep things simple, I’ve run a single post, which has text, images, and a video
02:15
through three page-speed tools.
02:18
PageSpeed Insights shows a mobile score of 45 and a desktop score of 79.
02:24
Pingdom shows a load time of 1.72 seconds, page size of 1.7mb, and 63 requests.
02:32
And GTMetrix, fully loaded in 4.3 seconds with a page size of 1.55 megabytes and 61 requests.
02:41
Now, since these tools only allow you to view one page at a time, I ran a full crawl using
02:46
Ahrefs’ Site Audit tool.
02:48
And if we look in Page Explorer, you’ll see there were a total of 23 pages with a load
02:53
time of 1 second or longer, which is basically all of the site’s pages.
02:57
So there’s definitely some room for improvements.
03:01
So the first thing we did was to switch DNS providers to Cloudflare’s free DNS service.
03:06
Now, in order to understand why we used Cloudflare, you need to understand how the web works,
03:12
at least at an elementary level.
03:14
Websites are just files on a computer that are made accessible through the Internet.
03:18
Now, each device that’s connected to the Internet has an IP address, including the server that
03:24
hosts your website.
03:25
So if your server is located in Los Angeles, California, and your visitor is in Las Vegas,
03:31
these two IP addresses need to create a connection in order to download the file contents to the device.
03:37
Now, IP addresses are tough to memorize and I doubt many people would key in an address
03:42
like this to visit your site.
03:45
That’s where DNS comes into play.
03:47
DNS stands for Domain Name System.
03:50
And it’s often referred to as the “phone book of the world wide web.”
03:54
In short, DNS maps domain names to IP addresses so people can type in a domain
03:59
name to visit a website.
04:00
But the thing with this is that when someone types in the domain name in their browser,
04:05
a DNS lookup occurs to find the IP address of the server.
04:09
So that takes time.
04:10
And usually, free DNS providers from your domain registrar are usually slow to respond,
04:16
creating slower page load times.
04:18
Cloudflare’s DNS on the other hand is pretty darn fast, considering it’s free.
04:23
But again, your mileage may vary depending on the DNS provider, you’re currently using.
04:29
So to set this up, sign up for a Cloudflare account and then click Add a site.
04:34
Enter your domain name, select and confirm your plan, and after a few seconds, Cloudflare
04:41
will give you a chance to review your DNS records.
04:44
Click Continue and you’ll be asked to change your nameservers, which is something you’d
04:48
need to do with your domain registrar.
04:51
Boom! Step one is done.
04:53
The next thing we did was purchase and install the WP Rocket plugin.
04:58
WP Rocket is an all-in-one site speed optimization plugin for WordPress.
05:02
And they make it super-simple to make technical optimizations even if you have
05:07
no clue what you’re doing.
05:08
The plugin handles common page-speed optimizations like caching, preloading, compression, and lazy loads
05:15
images to name a few.
05:17
After activating the plugin, you can access the WP Rocket settings from the top navigation bar.
05:23
Alright, so let’s go through some of the important settings starting with caching.
05:27
If you’re unfamiliar with caching, it’s basically a way to temporarily store copies of files,
05:33
so it can be delivered to visitors in a more efficient way.
05:36
And because this site is a basic blog that’s responsive, I enabled caching for mobile devices.
05:42
Next is file optimization, which is where you’ll spend the majority of our time.
05:47
For the Basic Settings, I chose to minify HTML and optimize Google Fonts.
05:52
Minification just removes whitespace and comments from code,
05:55
which will reduce file size.
05:57
And smaller files load faster than larger ones.
06:01
I also chose to optimize Google Fonts since the theme uses them.
06:05
The next section is about optimizing CSS files.
06:09
Again, I minified CSS files and also chose to combine them.
06:14
You already understand the benefits of minification, so let’s touch on combining files.
06:19
WordPress sites often include multiple CSS files.
06:23
Some will be for themes, others for plugins, and you might have added some custom ones too.
06:28
Now, whether you choose to activate this option or not will mostly depend on how your server
06:33
delivers the files.
06:35
Generally speaking, your files will be loaded either using HTTP 1.1 or HTTP 2.
06:42
With 1.1, your files will be loaded consecutively, meaning, one file needs to fully load before
06:48
the next one starts loading.
06:50
So combining your CSS scripts can help reduce the load time because fewer CSS files will need
06:56
to be loaded.
06:58
Now, with HTTP 2, the files can load concurrently.
07:02
Meaning, if you have multiple CSS files, they can begin loading at the same time,
07:07
so combining them won’t necessarily be as impactful.
07:11
To see if your site uses HTTP 2, you can use Key CDN’s tester and key in your URL.
07:18
The final option we enabled is to optimize CSS delivery.
07:22
Basically, this option will generate CSS needed for content above the fold and asynchronously
07:28
load other CSS files so they don’t block the rendering process.
07:32
Now, these concepts can be quite technical so I won’t expand on these but in general,
07:38
these are page speed optimization best practices.
07:41
Alright, let’s scroll down to the JavaScript files section.
07:45
So first, I removed jQuery Migrate, which is a file that’s been added to WordPress
07:49
since version 3.6.
07:51
Now, since there weren’t any issues with jQuery for this theme or any plugins, I chose to disable
07:57
it as there’s no point in loading an additional script without purpose.
08:02
Again, we chose to minify JS files as we did with HTML and CSS and combined our JS files
08:08
since there were no conflicts or issues.
08:11
And the last option we enabled is to defer loading of JavaScript.
08:15
This option will basically delay the loading of JavaScript files so the most important
08:20
content like your HTML and CSS can be delivered to your visitors first.
08:25
And then the JS will load.
08:27
And this will in most cases, fix the “eliminate render-blocking JS” issue that you may have
08:32
seen in PageSpeed Insights.
08:35
Now, it’s important to note that if you choose to minify, combine, and/or defer your JavaScript
08:41
files, things may break on your site.
08:44
So it’s important to actually test your site’s functions before permanently leaving it on.
08:49
Alright, let’s move on to the Media category.
08:52
Here, I’ve chosen to lazyload all media files.
08:55
LazyLoad improves page speed because it defers the loading of images and videos until they’re
09:00
visible on the screen.
09:02
In fact, WordPress 5.5 will lazy-load images by default, so you won’t necessarily need
09:07
a plugin if you just want this feature.
09:10
Next up is Preloading.
09:12
Preloading allows you to define essential resources so that browsers know the priority
09:17
of files that should be loaded first.
09:19
For example, let’s say that your HTML code looks like this:
09:23
Based on this code, the JavaScript file would need to load first simply because of hierarchy.
09:29
Of course, you could edit the code, but that can get messy and confusing if you don’t have
09:33
coding knowledge.
09:34
But if we add another link tag to preload the stylesheet, and this would tell browsers
09:40
to load the CSS file with a higher priority than the JS file.
09:45
And that’s exactly what this option in WP Rocket does for you.
09:49
Now, the last thing I want to talk about here is using a CDN.
09:53
And it’s easiest to understand how these work if we look at our first example of how devices
09:57
connect to web servers.
09:59
So again, if the server is in LA and a visitor is in Las Vegas, it probably won’t take very
10:05
long for the two devices to connect, seeing as they’re relatively close in proximity.
10:10
But what happens when someone from Germany, India, Australia or Singapore tries to connect to
10:15
the web server?
10:16
It’s going to take longer.
10:18
And that’s where CDNs can help.
10:20
CDN stands for Content Delivery Network.
10:23
And that’s exactly what it is.
10:25
A network of servers located all over the world that delivers content to visitors as
10:30
fast as possible.
10:32
By using a CDN, you’re essentially caching files on multiple servers globally.
10:37
Then when a visitor tries to access your site, it’ll connect them to the one that’s closest,
10:42
creating a faster connection between the user and the content.
10:46
So if your site attracts a global audience, then it might be worth signing up for a CDN service,
10:51
enabling the option in WP Rocket, and adding the appropriate CNAME.
10:56
Now, there are other free caching plugins that have a lot of these features like Autoptimize
11:01
and W3 Total Cache, but I personally prefer to pay a small fee for WP Rocket as I’ve had
11:07
the best results with them.
11:09
And the final step in this site speed optimization tutorial is to optimize your images.
11:15
Now, since we’ve already added LazyLoad to images, this will solve a lot of problems.
11:20
But if you’re using featured images that are above the fold on load, then lazyload isn’t
11:25
going to help.
11:26
Plus, smaller images will save you with storage space.
11:30
So the simple solution is to compress your images using lossy or lossless compression.
11:36
And there are some great plugins that’ll do this for you like ShortPixel and Imagify.
11:41
Now, to give you an idea of how much image compression can help, take a look
11:45
at the WordPress media library here.
11:48
You’ll see that ShortPixel has reduced the image sizes by quite a lot, which will help
11:52
improve pagespeed.
11:54
ShortPixel also has a feature that lets you serve images in the WebP format, which
11:59
basically lets you compress images even further without compromising quality by much.
12:04
Just go to Settings and choose ShortPixel.
12:07
Then click on the Advanced tab.
12:10
From here, you’ll want to make sure that you’ve checked this box so ShortPixel creates a WebP
12:14
version of your images.
12:16
So now that we’ve done the three main optimizations for WordPress sitespeed,
12:20
let’s run the PageSpeed tools and compare them with our original benchmarks.
12:25
On PageSpeed insights, the page previously scored a 45 on mobile and now has a score of 95.
12:32
It had a desktop score of 79 and now has a near-perfect desktop score.
12:37
On Pingdom, the page previously loaded in 1.72 second with a 1.7mb page size and 63 requests.
12:46
With the new speed test, you’ll see there was a significant decrease on all three metrics.
12:51
Page size is just over 900 kilobytes, load time came in at 200 milliseconds,
12:57
and the number of requests have shrunk by nearly 3X.
13:01
And you’ll see the same pattern for GTMetrix
13:04
and improvement across the board.
13:06
Finally, I ran a new crawl of the site with Ahrefs’ Site Audit, and as you can see
13:11
every single page loaded in under a second.
13:15
Now, these are the steps that worked for Zach’s site and I’ve used it for other sites with success.
13:20
But remember, each WordPress configuration will be different since you might be using
13:25
a clunkier theme, more resource-consuming plugins, have inferior hosting, or you have
13:30
tons of third-party tracking scripts.
13:32
So if you’re still unhappy with your site speed after making these optimizations,
13:37
then you’ll likely need more custom work done for you.
13:40
So you may want to consider removing plugins and scripts, switching themes,
13:44
or hiring a developer to make the appropriate fixes.
13:48
So give it a shot and if you enjoyed this tutorial, then make sure to like, share and
13:52
subscribe for more actionable SEO and marketing tutorials.
13:55
And let me know in the comments if these tips helped you boost your WordPress site’s speed.
14:00
I’ll see you in the next tutorial.
Optimized Webmedia Marketing is the best SEO Vancouver company and the best Vancouver SEO company. We offer top-notch search engine optimization (SEO) solutions to companies of all sizes. To learn how we can help optimize your website to attract more visitors, book a free consultation.
SEO, GOOGLE ADS, PPC, DIGITAL MARKETING SOCIAL MEDIA, AMAZON, WEB DESIGN
OUR AWARDS
I have worked with Optimized Webmedia Marketing since the start of the year. Since starting to work with them, we have seen a significant increase in sales through our PPC campaigns. The team is great to work with, they are always professional, very detailed and always deliver work on time. Highly recommend!
Jelena Radinovic
Optimized Webmedia Marketing provides great SEO, PPC, and Digital Marketing Services.They really care about their clients, they are responsive and professional, and get great results.I highly recommend this Digital Marketing Agency.
Maxim Wong
We have been working with Optimized Webmedia Marketing since our company was young. They handled all our web related promotions and designs since day one. With their help and support, we were able to boost our clientele super fast and become one of the top companies in lower mainland. Their knowledge of digital marketing is next to none and we highly recommend their service to all business owners!