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.

  • Shared
  • Dedicated
  • Cloud

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.

  • CDN
  • 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.

Required Plugins

  1. W3 Total Cache
  2. Htaccess Editor
  3. Gzip Compression

Dashboard & CPanel Credentials.

You obviously need dashboard and cpanel credentials to access website back-end and image directory files.

Responsiveness

If your website is not responsive then you should fix responsiveness first as Google Page Speed tool will keeps on alarming regarding responsiveness issue.

Installation

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)

toggle

2. Now follow the screens and make the configuration under the same general settings tab.

page-cache

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.

minify-settings-w3-total-cache
4. By default plugin saves the Minify Mode on Auto, keep it manual so you can exclude files from above the fold content portion.

database-object-cache-w3-total-cache

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.

Enable Compression

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)

Check & Enable GZip

Leverage Browser Caching

Download Htaccess Editor so you can use website’s htaccess file within the dashboard.

Htaccess Editor

Copy the following lines of code and paste it in Htaccess Editor, save settings.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Optimize Images

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

In previous steps, we have just enabled the manual settings to minimize JS/C
SS files. Now let’s complete that process, assigning JSC/CSS paths to W3 total cache plugin.

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.

minify-detail-w3-total-cache

JS Minification

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.

js-settings-w3-total-cache

CSS Minification

Follow the settings in the snapshot, include CSS files if needed just like the previous step you did for JS.

css-minification-w3-total-cache

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.

Enjoy testing results on GtMetrix & Google Page Speed Insights

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponShare on LinkedInEmail this to someone
  • Interesting and helpful tips you have shared. Sites on the cloud load faster. Hosting on Cloudways WordPress hosting platform gives the fastest load time for WordPress. Optimized sites load faster here compared to other providers.

    • Thanks for sharing your thoughts. I didn’t include Cloud in this post, tried to keep this post for an average user. I’m a huge fan of cloud based hosting and will share my thoughts for cloud hosting in a separate article. 🙂