Improving the load time for a wordpress blog has lots of benefits – good user experience (faster page loads also results in more pageviews), better rankings in search engines (SEO), reduced cost (due to reduction in resource (RAM, CPU, cycles and bandwidth) usage) etc.
So, if you run a wordpress blog/website that needs a little optimization you should follow this guide. But you need root access to your server. If you’re on a shared server, then first things you should do is move to a VPS; it’s cheap, faster and more secure and you also get full control over the server environment.
I’m using Digital Ocean for this blog and I’m pretty happy with the performance (read my review on digital ocean and the article about setting up wordpress on vps server). They’ve plan starting at $5/mo, cheaper than most of the shared hosting providers. Signup using my referral link and get 2 months of free hosting – $10 credit to give it a try.
Step 1. Enable Caching
Caching static resources such as images, css, js etc on the browser helps in reducing page load time on subsequent page visits.You can enable browser caching either using a plugin or manually. If you’re using Apache, then you can skip this step as Hyper Cache will do that for you (using htaccess config).
Caching static content (browser)
Login to your server(over ssh) and type (I assume you’re using Ubuntu or any debian derivative for OS with nginx as the web server, otherwise change command accordingly) :
sudo nano /etc/nginx/sites-available/site.conf
Add these lines to enable browser caching with nginx.
Save the file (Ctrl x and y) and reload the nginx server to apply above configuration.
sudo service nginx reload
PHP caching If you’re using lots of plugin then the php code will take lots of time and resources to execute, that means server response time will be high (not a good thing). So, caching php code means – the server will send cached html instead of generating it on every single request (which is lot faster). As a result, the server response time (as well as TTFB (Time to First Byte)) will go down (that means faster page load, even on first visit). To enable php caching there are lots of ways, the most simple way is to use HyperCache plugin. (Disable browser caching or compression if you’ve already done that manually with nginx) Download HyperCache plugin for wordpress and enable/activate it. (you can do it from wordpress dashboard or by manually extracting the file on server)
Step 2. Enable Compression
Sending compressed data over the network means faster download time for pages, plus you’ll save bandwidth for server and user as well. All modern browser supports compression, so there is no reason why you shouldn’t be using it. SSH into to the server and type :
sudo nano /etc/nginx/nginx.conf
And add these lines to nginx config. (you may want to tweak few variables like compression level etc depending on your need, if you’re not sure, then just go with the default value)
Save the file (Ctrl x and y) and reload the nginx server to apply above configuration.
sudo service nginx reload
Step 3. Move JS to Footer
By default, most of the WordPress themes load javascript files in header and it causes render blocking issue. The browser will not start rendering the page until all the javascript files are downloaded. Moving those js files (jquery etc) to bottom of the page (before body tag) will have good impact on page loading time, especially if you use lots of js plugins.
To move the javascript to footer, simply download and install this plugin and clear the cache from wordpress dashboard -> Settings -> Hyper Cache page.
Step 4. Use CDN for jQuery
Using CDN for jquery has many advantages. It reduces load/bandwidth on your server, low latency for users (since the jquery will be downloaded from the CDN end point near to your user, that means faster download) and lots of other people use it, So, it may be already cached in user’s browser (best case). First you need to find out the jquery version you are using, so you can specify exact version from below.
- For jquery : Google CDN
- For jQuery migrate : jQuery CDN
To use above CDN, just add these lines to your theme’s functions.php (at the end) and clear the cache (if you’re using any caching). Don’t forget to correct jquery version if required. (you can edit it using wordpress dashboard -> Appearances -> Editor but make sure you’ve already created a backup for theme files, in case anything goes wrong.)
Step 5. Image Optimization
Optimizing images is important because it’s usually the most heavy static resource on a web page. So, if you use lots of images in your blog pages/articles, then you should :
- Optimize images before upload (use an online tool like this one : https://tinyjpg.com/). You can also use some plugins like this one. (BTW, I haven’t used them but it seems good)
- Avoid scaling/resizing a big bulky image after page load. Scale images to the required size before you upload them or use this plugin – Imsanity
- And you can also use imgur or Dropbox to host your images. (it will act as CDN)