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.
At Go Fish Digital, we’re 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:
Detect the problem
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.
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.
Minify all the things
- 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.
Image compression and Lazy Loaders
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.
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.
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)
Content delivery networks (CDNs)
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:
- Cloudfront by AWS
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
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):
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.
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.