How to increase page speed of a WordPress website – Updated 2016
Majority of the PHP websites are based on WordPress framework and sometimes brilliantly crafted websites are slow. When it comes to services/ecommerce, page speed shouldn’t be neglected.
I’m going to cover all the steps needed to increase page speed of a wordpress website
First of all, make sure your website is hosted on a good server. See few types of server.
As dedicated and cloud servers are fast servers so skipping them for now.
Shared Server: Reduce server response Time
Most of the websites are hosted on shared server, make sure your website is hosted on a good one.
You probably would be thinking why I’m discussing only above servers, few reasons as follow.
- Good Server Response
- Less Plugin conflicts (some of the servers don’t allow to host cache plugins)
Above the Fold?
Above the fold content is the portion of a website that appears initially once the website is loaded or simply, when no scrolling is needed and the portion of the website you see on your screen is above the fold, no matter what screen resolution you have.
Rest of the portion is below the fold as you have to scroll for it.
As JS/CSS files are loaded separately in web page so this increases time for loading. These files shouldn’t be included in above the fold section so the first screen can be loaded quickly for users.
Now let’s get into the plugins and necessary steps to increase a web page speed.
Dashboard & CPanel Credentials.
You obviously need dashboard and cpanel credentials to access website back-end and image directory files.
If your website is not responsive then you should fix responsiveness first as Google Page Speed tool will keeps on alarming regarding responsiveness issue.
Install W3 Total Cache Plugin in your website and perform the following steps
1. Click on Toggle All Cache types under General Settings of W3 Total Cache (Once you enable this option, please test your website in the browser and check if everything is working properly)
2. Now follow the screens and make the configuration under the same general settings tab.
3. Above settings will create a cache for website pages on the host side. Use the Disk Enhanced as the file will be saved on the same server and this makes easier for a browser to render website quickly.
4. By default plugin saves the Minify Mode on Auto, keep it manual so you can exclude files from above the fold content portion.
5. You really don’t need to enable Database Cache as if you make changes on daily basis, this will take a bit of time to show on user end (Depends on the Cache time).
6. Enable Object Cache & save it on Disk.
All other settings should remain same under general settings tab.
Now run a quick page speed check on Google Page Speed Insights or GTmetrix. You will still see many JS and CSS files for optimization under Above the Fold & Minify CSS/HTML/JS page results. However leave them for now and fix other suggested sections.
By default W3 Total Cache enables cache when you click on Toggle All Cache Settings but in case if google page speed still suggests to follow compression then use the following plugin, just activate and it’ll start working (No settings required)
Leverage Browser Caching
Download Htaccess Editor so you can use website’s htaccess file within the dashboard.
Copy the following lines of code and paste it in Htaccess Editor, save settings.
This part is easy but a little tricky, 90 percent of the times Page Speed tool suggests optimizing images.
If you hover over the suggested link of the image, a thin pop-up will appear containing the full path of that image, copy and paste it in the browser and just download all images one by one.
Go to tinypng.com to decrease the image size.
Note: If page speed tool says to resize the image, then probably you have uploaded a large image through wordpress dashboard and resized it manually which actually sets a new height/width for the image as an inline CSS, causes page load.
Avoid Landing Page Redirects
Avoid putting wordpress login page links on the homepage, avoid unnecessary redirections.
Minifying HTML/JS & CSS files
1. Go to Minify tab in W3 total cache plugin settings.
2. Disable Minify error notifications & enable Disable Minify for Logged In users.
3. Enable all the options checked in the following Snapshot.
Enable settings shown in the Snapshot.
Also, if Page Speed Tool still suggest JS files to put below the fold then click on Add a Script and include JS files one by one, save settings.
Follow the settings in the snapshot, include CSS files if needed just like the previous step you did for JS.
Note: W3-total Cache saves a cache file in cache folder, plugins area. Google Page Speed tool picks that and shows in the suggestions, just let it remain the same as there is nothing you can do about it.