How To Speed Up Your WordPress Site

Today I’m going to show you how to speed up your WordPress site with three simple steps and take your site speed from something like this to this, stay tuned.

Google has used SiteSpeed as a ranking signal for desktop searches since 2010, and as of 2018, PageSpeed became a ranking factor for mobile searches, too. And 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. In fact, a study by Google shows that as page load time goes up, bounce rate rises with it.

 

Now, there are numerous 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. But if you’re anything like Zach, who’s not exactly the most technical person, then the three steps that I’m about to show you should help you get better performance from your site.

 

Now, before we get started, it’s important to note that the things I did for this site won’t necessarily translate perfectly to your site. There are tons of things to consider when it comes to WordPress site speed. Like your themes, code specific plugins, you might be using server configuration, image, file sizes, and more. So as we go through the tutorial, I’ll try and explain the more technical reasons behind poor performance, so you can hopefully diagnose further issues yourself.

How to speed up your wordpress site

All right, so let me give you a background on the website. We’ll be optimizing and we’ll start with some benchmark speeds. This is a brand new affiliate site built on WordPress using the free WP Astra theme. He’s activated seven plugins, many of which will contribute to page load time in big and small ways. Now, to keep things simple, I’ve run a single post which has text images and a video through three page Speed tools.

 

Page Speed Insights shows a mobile score of 45 and a desktop score of 79. Pingdom shows a load time of 172 seconds, page size of 1.7 megabytes, and 63 requests in metrics, fully loaded in 4.3 seconds with a page size of 155 megabytes and 61 requests. Now, since these tools only allow you to view one page at a time, I ran a full crawl using Ahrefs site Audit tool, and if we look in Page Explorer, you’ll see there were a total of 23 pages with a load time of 1 second or longer, which is basically all the site’s pages. So there’s definitely some room for improvements. So the first thing we did was to switch DNS providers to Cloudflare’s free DNS service.

 

Now, in order to understand why we use Cloudflare, you need to understand how the Web works. At least at an elementary level. Websites are just files on the computer that are made accessible through the Internet. Now, each device that’s connected to the Internet has an IP address, including the server that hosts your website. So if your server is located in Los Angeles, California, and your visitor is in Las Vegas, these two IP addresses need to create a connection in order to download the file contents to the device. Now, IP addresses are tough to memorize, and I doubt many people would key in an address like this to visit your site. That’s where DNS comes into play.

 

Dns stands for domain name system, and it’s often referred to as the phone book of the World Wide Web. In short, DNS maps domain names to IP addresses so people can type in a domain name to visit a website. But the thing with this is that when someone types in the domain name in their browser, a DNS lookup occurs to find the IP address of the server, so that takes time. And usually free DNS providers from your domain Registrar are usually slow to respond, creating slower page load times. Cloudflare’s DNS, on the other hand, is pretty darn fast considering it’s free. But again, your mileage may vary depending on the DNS provider you’re currently using. So to set this up, sign up for a Cloudflare account, and then click Add a site, enter your domain name, select and confirm your plan, and after a few seconds, Cloudflare will give you a chance to review your DNS records.

 

Click Continue, and you’ll be asked to change your name servers, which is something you need to do with your domain Registrar. Boom, step one is done. 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, and they make it super simple to make technical optimizations, even if you have no clue what you’re doing. The plugin handles common PageSpeed optimizations like Caching preloading compression, and lazy loads images to name a few.

 

After activating the plugin, you can access the WP Rocket settings from the top navigation bar. All right, so let’s go through some of the important settings, starting with Caching. If you’re unfamiliar with Caching, it’s basically a way to temporarily store copies of files so it can be delivered to visitors in a more efficient way. And because the site is a basic blog that’s responsive, I enable Caching for mobile devices.

 

Next is file optimization, which is where you’ll spend the majority of your time for the basic settings. I chose to minified HTML and optimize Google fonts. Minified just removes white space and comments from code, which will reduce file size and smaller files load faster than larger ones. I also chose to optimize Google fonts since the theme uses them. The next section is about optimizing CSS files.

 

Again, I minified CSS files and also chose to combine them. You already understand the benefits of minified, so let’s touch on combining files. WordPress sites often include multiple CSS files. Some will be for themes, others for plugins, and you might have added some custom ones, too. Now, whether you choose to activate this option or not will mostly depend on how your server delivers the files.

 

Generally speaking, your files will be loaded either using Http one one or Http two with 1.1, your files will be loaded consecutively, meaning one file needs to fully load before the next one starts Loading. So combining your CSS scripts can help reduce the load time, because fewer CSS files will need to be loaded. Now with Http two, the files can load concurrently, meaning if you have multiple CSS files, they can begin Loading at the same time. So combining them won’t necessarily be as impactful to see if your site uses Http two, you can use key, CDNS tester, and key in your URL.

 

The final option we enabled is to optimize CSS delivery. Basically, this option will generate CSS needed for content above the fold and asynchronously load other CSS files so they don’t block the rendering process. Now, these concepts can be quite technical, so I won’t expand on these, but in general, these are page speed optimization best practices. All right, let’s scroll down to the JavaScript files section, so first I removed Jquery Migrate, which is a file that’s been added to WordPress since version three. Six.

 

Now, since there weren’t any issues with Jquery for this theme or any plugins, I chose to disable it as there’s no point in Loading an additional script without purpose. Again, we chose to minifyjs files as we did with HTML and CSS and combined our JS files since there were no conflicts or issues in. The last option we enabled is to defer Loading of JavaScript. This option will basically delay the Loading of JavaScript files, so the most important content, like your HTML and CSS can be delivered to your visitors first, and then the JS will load, and this will in most cases, fix the eliminate render blocking JS issue that you may have seen in PageSpeed Insights. Now, it’s important to note that if you choose to minify, combine and or defer your JavaScript files, things may break on your site, so it’s important to actually test your site’s functions before permanently leaving it on.

 

All right, let’s move on to the media category here. I’ve chosen to lazy load all media files. Lazy load improves page speed because it defers the Loading of images and videos until they’re visible on the screen. In fact, WordPress Five Five will lazy load images by default, so you won’t necessarily need a plugin if you just want this feature.

 

Next up is preloading. Preloading allows you to define essential resources so that browsers know the priority of files that should be loaded first. For example, let’s say that your HTML code looks like this. Based on this code, the JavaScript file would need to load first simply because of hierarchy. Of course, you could edit the code, but that can get messy and confusing if you don’t have coding knowledge.

Be the first to comment

Leave a Reply

Your email address will not be published.


*