How to Speed Up Your WordPress Website

My buddy Zach messaged me and he’s like, hey, can I hire you to speed up my WordPress website? And I was like, Dude, just do A, B and C, and I’m pretty sure you’ll see a huge performance boost. A few days passed and he said the speed tips you gave me worked perfectly. So 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 state to.

Google, as you say, speed as a ranking signal for desktop searches since 2010 and as of twenty eighteen page speed, became a ranking factor for mobile searches, too. And even those 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 paciullo 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 blockings. 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 theme’s 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. All right. So let me give you a background on the website will be optimizing and we’ll start with some benchmark speeds. This is a brand new affiliated site built on WordPress using the free Astro theme. He’s activated seven plug ins, 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 Insight’s shows a mobile score of forty five and a desktop score of seventy nine. Them shows a load time of one point seven, two seconds, page size of one point seven megabytes and sixty three requests and metrics fully loaded in four point three seconds with a page size of one point five, five megabytes and sixty one requests. Now, since these tools only allow you to view one page at a time, I ran a full crawl using a site on a tool. And if we look at page explorer, you’ll see there were a total of twenty three pages. We can load time of one second or longer, which is basically all of the site’s pages. So there’s definitely some room for improvements. So the first thing we did was to switch DNS providers to cloud Flair’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 crowd. Flair’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 into 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 rocket plug in. WPE rocket is an all in one side 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 plug in handles common page speed optimizations like caching, preloading compression and lazy loads, images to name a few after activating the plug. And you can access the 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 the Minify HTML and optimized Google fonts. Modification just removes whitespace 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 team uses them.

The next section is about optimizing CSS files again, I minified access files and also chose to combine them. You already understand the benefits of mystification. So let’s touch on combining files. WordPress sites often include multiple access 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 point one or two with one point one. 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 to the files can load concurrently, meaning if you have multiple case 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, too, you can use CDMs Tester in your You URL. The final option we enabled is to optimize access delivery. Basically, this option will generate access needed for content above the fold and asynchronously load other case 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 file section. So first I remove J Query Migrate, which is a file that’s been added to WordPress since version three point six. Now, since there weren’t any issues with J query 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 the Minifie JS files, as we did with HTML and success 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 followed in. This will in most cases fix the eliminate render blocking JS issue that you may have seen in Page Speed Insight’s. Now it’s important to note that if you choose the Minifie, combine and or defer your JavaScript files, things may break on your site. So it’s important to actually test your sites 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 point five, a 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 enter the code, but that can get messy and confusing if you don’t have coding knowledge. But if we add another link tag to preload the stylesheet, then this would tell browsers to load the file with a higher priority than the jazz file. And that’s exactly what this option in WP Rockit does for you. Now, the last thing I want to talk about here is using a CDN and it’s easiest to understand how these work if we look at our first example of how devices connect to Web servers.

So again, if the server is in L.A. and a visitor is in Las Vegas, it probably won’t take very long for the two devices to connect, seeing us a relatively close in proximity. But what happens when someone from Germany, India, Australia or Singapore tries to connect to the Web server? It’s going to take longer, and that’s where citizens can help. CDN stands for Content Delivery Network, and that’s exactly what it is, a network of servers located all over the world that delivers content to visitors as fast as possible. By using a CDN, you’re essentially caching files on multiple servers globally. Then when a visitor tries to access your site, it’ll connect them to the one that’s closest, creating a faster connection between the user and the content. So if your site attracts a global audience, then it might be worth signing up for a CDN service, enabling the option and WP rocket and adding the appropriate name. Now there are other free caching plug ins that have a lot of these features like auto optimized and three total cache. But I personally prefer to pay a small fee for Brocket as I’ve had the best results with them in the final step in the site’s speed optimization tutorial is to optimize your images. Now, since we’ve already added lazy load to images, this will solve a lot of problems. But if you’re using featured images that are above the fold on load, then Lazy Load isn’t going to help. Plus, smaller images will save you with storage space. So the simple solution is to compress your images using losse or lossless compression. And there’s some great plugins that will do this for you, like short pixel and image of fi. Now, to give you an idea of how much image compression can help, take a look at the WordPress Media Library here. You’ll see that short pixel has reduced the image sizes by quite a lot, which will help improve page speed. Short Pixel also has a feature that lets you serve images in the Web p format, which basically lets you compress the images even further without compromising quality by much. Just go to settings and choose short pixel, then click on the advanced tab. From here, you’ll want to make sure that you’ve checked this box so short pixel creates a Web version of your images. So now that we’ve done the three main optimizations for WordPress site speed, let’s run the page speed tools and compare them with our original benchmarks on page speed.

Insight’s The Page previously scored a forty five on mobile and now has a score of ninety five. It had a desktop score of seventy nine and now has a near perfect desktop score on Pincham. The page previously loaded in one point seventy seconds with a one point seven megabyte page size and sixty three requests with a new speed test. You’ll see there was a significant decrease on all three metrics. Page size is just over nine hundred kilobytes. Meantime, came in at two hundred milliseconds and the number of requests have shrunk by nearly 3x and you’ll see the same pattern for metrics and improvement across the board. Finally, I ran a new crawl of the site with a site on it and as you can see, every single page loaded in under a second. Now, these are the steps that work for Zack’s site, and I’ve used it for other sites with success. But remember, each WordPress configuration will be different since you might be using a clunkier theme. More resource consuming plugins have inferior hosting or you have tons of third party tracking scripts. So 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 teams or hiring a developer to make the appropriate fixes. So give it a shot.

Leave a comment

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