Table of Contents
If you’ve spent any time developing on WordPress, you’ve probably encountered a slow theme that loads tons of files for no apparent reason, producing a slow website and a big headache. It can be infinitely frustrating to build an awesomely-designed website that runs slowly. This slowness has an effect on everything and everyone involved – yourself, your business, and your reputation included.
Related Content:
At Go Fish Digital, our WordPress development agency is often called in to solve page load time problems, and we do so in several ways. So, how can you reduce the load time of your WordPress theme or website? I’ve outlined several tips below that will help solve this problem:
1. Detect the WordPress problem
The first thing to do is to determine what is making your WordPress website load slowly. Is it large images, lots of HTTP requests, Javascript files, or all of the above? It’s your job to find out.
The easiest way to find this information is to use your browser’s internal tools. If you’re using Chrome, navigate to your problematic page, and press Command + Alt/Option + J for Mac, Ctrl + Shift + C or F12 for Windows, or just right click on the page and select “Inspect”. This will bring up your “inspector”. You will see something like the following:
Yours may come up smaller – that’s normal. You just need to stretch the window to fit more of the information. You can even dock the inspector in different parts of the window or pop it out as its own window if you want. Now, you need to navigate to the “Network” tab in the top middle area. You should see something like the following:
At this point, you might not see anything in this section. If this happens simply refresh the page. As the page data loads, you’ll start to see this window populate with various entries. These will be various files and network-related calls that can be fine-tuned to speed up your load times.
Once you sort the entries by which files/calls are taking the most time to load, you’ll start to see items like images, Javascript, and CSS files come up. This is normal, and this is what you’re going to focus on initially.
Note: Sometimes, gathering assets from different websites are the problem (like Facebook/Twitter widgets, Ads, etc.). In these cases, you’ll need to consult with the third party that you’re using to figure out a unique way to reduce the load time.
2. Use WordPress Minification
Minification is the process of removing redundant or unnecessary data without affecting how everything is processed by the browser. I would start here with most of the issues with a site. Often when you’re looking through the Network tab, you’ll see a ton of CSS files. Every single time the browser has to go to the server to retrieve something like a CSS file, or a Javascript, it causes more load time. Even if a single file is larger than several files separately, the single file will load faster because there are fewer server requests. Here’s a small list of plugins that will help you compress those CSS and Javascript files into a single, manageable download for your visitors:
- Autoptimize
- Merge + Minify + Refresh
- Fast Velocity Minify
- Minqueue (it’s sort of outdated, but it still works pretty well!)
Autoptimize is a good example of a really simple and useful plugin that will decrease page load times. Our web development team has used it on several websites and we’ve seen great results.
One thing to remember is that compressing all of the Javascript on your site may lead to some difficulties with other plugins, like WooCommerce, so stay vigilant!
3. Image Compression
Another common problem that creates slow websites is large image loads on both desktop and mobile. If you looked at your Network tab from before and saw that you had massive images loading, then this part is for you. Luckily, there are a few plugins that help us compress an image. I recommend the following:
To manually compress the images in your theme, however, I would just go to TinyPNG. This tool produces a zip file with all your newly compressed images. You can then upload those files into your theme to overwrite the existing images.
Have you heard about Lazy Loaders? Lazy loading is a Javascript technique that only loads an image on your page when your users actually see it. It’s a pretty handy feature and there are a few plugins that can achieve it:
Once you’re done installing the plugin, refresh the page and be sure to view the Network tab for changes.
Note: It’s a good idea to periodically reoptimize and refresh all the images on your site. There’s a cool little plugin for that right here.
Cache plugins
Caching pages is a very important part of web development and web optimization. Caching basically stores various responses, files, and other information for quick reuse later. You can read a little bit more about it here. Long story short, there are various levels of caching throughout your application/website affecting everything from the server up to the actual web pages that are accessed.
WordPress, with the use of the plugins below, can render data and store it for later use when another visitor hits your site. This will help speed up your site tremendously. I recommend the following cache plugins (be sure to talk to your hosting solution about which they prefer):
- W3 Total Cache
- WP Super Cache
- Sucuri Security and other Sucuri services
- Built-in cache from the hosting provider (WP Engine is a good example of this)
4. Use Content delivery networks (CDNs) For WordPress
Imagine that you’re trying to get a letter to your neighbor. You would most likely walk out of your house and stick the letter in the other person’s mailbox, which doesn’t take much time or effort on your part at all. Now, imagine if your letter needs to go to someone in another country. You will have to undergo a much longer and arduous process like going to the post office, buying postage, and then waiting days to ensure the recipient has gotten it. That’s essentially what happens when you request someone’s website.
Content delivery networks (CDNs) act as if someone from another country is accessing your website from next door to you. There are tons of computers set up throughout the world with your website assets on them that deliver them to people closer to them than you are. This dramatically decreases page load time and allows for better optimization on your server. There are other benefits of CDNs as well that you can read about in this article. There are several great services for CDNs, including but not limited to:
So, let’s say that you’re a developer and you’ve tried all of these different options — is even more fine-tuning available? I’d like to submit a method that I’ve used on several websites.
Controlling all the output with code
Note: The following part of the article can cause problems with the front-end of your website if you’re new to development. It’s best not to do this on production servers until you feel confident about the process and theory behind this idea. Only do this if you know exactly what you want on the front-end in terms of Javascript and CSS.
Before you begin compressing and optimizing your code even further, you should know exactly which CSS files and Javascript files you want to load into the page. For now, load your own compressed Javascript file and CSS file into the header and footer and deactivate all Javascript and CSS files that WordPress outputs. You can do that in the following two hooks:
The above code snippet is typically located in your header.php file in your theme’s folder, and it outputs all your header code where you could include Javascript, CSS, and more. You can read more about it in WordPress’ Codex here. Another place that WordPress injects code is in the footer. You can see this in the footer.php file of your theme. You can read about this in the codex as well. The hook will be the following code snippet:
Next, you need to take control of all Javascript and all CSS from your theme. To do that, you have to blanket tell WordPress to not allow Javascript and CSS files to be outputted. A theme usually registers these files in their respective functions.php file, but you need to tell WordPress to not allow any of them in the header or footer to register in your functions.php file. Each theme should have that functions.php file, so find yours (or make it in the root of your theme) and add the following code to your functions.php file:
If you refresh the page you should see that, for the most part, no javascript files were loaded.
Tip: All Javascript should be loaded in the footer, while CSS is loaded in the header of the website. This allows for the browser to render the structure of the website first before it starts with the Javascript. Typically, this results in the best experience for users.
If you refresh the page now, you’re going to see a really messed up site because there are no CSS files outputted. That’s what you want. Now, you’re going to control everything by placing your files in place of all of those Javascript and CSS files.
So, let’s say you know which stylesheet that you want to load. It can be your compressed output from Gulp or Grunt located in a folder like (theme)/assets/build/CSS/main.css or something similar. It can even be the style.css file in the root of your theme folder. Either way, you want to output the main stylesheet. Here’s the code (edit it to match the location and name of your file):
So, now let’s say that you’ve compressed a Javascript file in the same way you compressed the CSS. You can now load the Javascript into the footer of your site like so:
Reload the page and now you should be able to locate each file in the source code. That ensures that the PHP code that you have in your functions.php file is working. You can now check the Network tab, and see if you’ve improved in overall load sizes and time.
Conclusion
The most important thing to remember is that it’s absolutely possible to fix your page load problems, but it takes creative problem solving and some research. Remember to take a good look at the tools that are native to your browser to help you find the problem. Then, look to the aforementioned plugins, and strategies to produce neat, well-formed websites for public consumption. You can do it!
Let me know if my tips helped you improve load times on your website in the comments below.
Search News Straight To Your Inbox
*Required
Join thousands of marketers to get the best search news in under 5 minutes. Get resources, tips and more with The Splash newsletter:
