The Complete Guide to Speeding Up Your WordPress Site

Having a slow website is a frustrating experience. Not only will it rank poorly in the search engines (loading speed is one of the ranking factors in Google), it also gives your visitor a bad user experience. However, while most webmasters would love to speed up their websites, most of them don’t have the technical knowledge to do it. If you fall into this camp and are using WordPress, we have a complete speed optimization guide for you. The following steps are what we have done for this site and they have worked well for us.

Slim down the website

When a visitor visits your site, the browser has to request the page from your server and load the page in its entirety before the reader can view it. This means that if you have a bloated site, it will take a long time for the browser to download and render it. Here are some ways to slim down your WordPress site:

1. Relook at your site’s theme design

Re-evaluate your site’s design and see if you can remove unnecessary items from the site. There is no point in stuffing too much information in the sidebar when the visitor is only interested in the actual content. Here are some things that you can remove:

• Fanciful slider, animation and effects.
• Miscellaneous widgets on the sidebar
• Ads – Only if you have added too many ads. In some cases, you can earn more with fewer ads

2. Get rid of unnecessary plugins

Thee are two main types of WordPress plugins: one that affects only the admin area and one that adds additional content to the site. For the latter, it is always accompanied by extra javascript and css files which will add extra weight to the site.
Take a look at your plugins list and deactivate those old plugins that are inefficient and no longer in use. If a plugin has not been updated for a long time, you may also want to check out alternative plugins that are lighter weight and yet can do the job more efficiently.

3. Reduce the file size of your HTML, CSS and Javascript

There are two ways to reduce the overall size of your site. The first is to combine multiple stylesheets and javascript files into one, and the second is to minify the files. Minifying means the removal of unnecessary spaces and comments and to combine multiple repeated codes into one. A good plugin that you can use to achieve this is W3 Total Cache plugin.
In the W3 Total Cache settings page, under the “General Settings”, enable the “Minify” mode.

Next, go to “Minify -> HTML & XML” section, check the boxes beside “Enable,” “Inline CSS Minification,” “Inline JS Minification” and “Remove line break”.

Next is the “JS minification” section. This is a tricky part as it works for some themes but not for others. Personally, I have no luck with this setting, but you might want to try it out and see if it works for your site.

One thing that I do recommend for this setting is to use “Minify” rather than “Combine only.” Combining several javascripts together can cause undesirable effects and break the site.
The last part that you need to configure here is the “CSS minification” section. This allows you to minify and combine all the CSS used in the theme.

To get the best out of this, it is best for you to open your website, view the source code and copy all the CSS links to the “File URI” field in the “CSS file management” section. All the CSS files you added to this field will be minified and combined into one single CSS file.

4. Optimizing the images

Image files are usually the ones that make up the bulk of the site’s file size, so it is important for you to optimize the images and keep them to the most minimum size possible. Wp Smush.it is a great plugin that optimizes your images when you upload them. It also comes with a bulk-smush feature that can optimize all the previously uploaded images.

Speed up the site’s loading speed

Some of the ways you can use to speed up the site’s loading speed include:

• cache the site
• set browser cache
• switch to google’s jquery
• deferred javascript loading
• use lazy loading of images
• use asychronous javascript
• use CDN

Here are some plugins that can do the above work for you.

1. W3 Total Cache

We have covered minification in the above section, but what makes W3 Total Cache powerful is its caching module. First, enable the “Page Cache” module in the “General Settings” section. On a shared hosting, select “Disk: Basic” for the page cache mode. For VPS or dedicated server, select “Disk: Enhanced.”

Scroll further down the page till you see the “Browser Cache” section; check the box to enable it as well.
This will enable both the page cache and broswer cache for your site. The page cache is simply a static HTML page that will be served instead of the dynamic PHP page. The browser cache informs the browser to cache your page and to serve it from the cache when the reader visits the same page again.

2. WP Deferred Script

Most javascript files are blocking in nature, which means the site has to wait for all the javascript files to finish loading before the content can load. This is also known as synchronous loading. One of the ways to combat this is to move javascripts to the bottom of the page so they will load only after the content has finished loading.
WP Deferred Script is a useful plugin that moves all enqueued scripts to the bottom of the page. It is using lab.js in the backend and will work with most plugins. There are no settings to configure. Once activated, it will automatically defer all javascript loading to the end of the page. Another good thing is that it loads javascripts asychronously, which means it loads javascript in parallel with the content.

3. Jetpack Photon

Another good way to reduce the loading speed is to load all images from a CDN source. If you have installed the Jetpack plugin, activating the Photon module will automatically add an image CDN to your site.

Alternatively, if you are using external CDN, like MaxCDN or Amazon CloudFront, you can configure the CDN module in W3 Total Cache plugin too to make use of the CDN services.

4. Lazy Load

Have you noticed how the images are loaded on demand when you scroll down the page? This is called Lazy Loading, and it is a good way to speed up the site as well. The plugin that we are using here is Unveil Lazy Load, but if you do a search for lazy loading, there are plenty of lazy loading plugins that you can use; some are even optimized for videos and iframe.

5. DFP

If you are serving ads in your site, you will know that ads are often the ones that take the longest to load and cause the site to go slow. Worst still, most ads are synchronous in nature and will block the content from serving until they are fully loaded. One of the ways to get rid of this issue is to serve the ads using Google DFP. For those who are not aware, Google DFP is an ad management program for you to manage your ads.
On this site, we are using the jquery.dfp.js script to load all DFP tags on demand, so it doesn’t slow down the loading of the site. The implementation can be rather complicated and we won’t cover it here. If there is enough interest (you can express your interest in the comments), I will do another tutorial detailing the step-by-step process to implementing it into your site.

Conclusion

If you followed the steps above, I can assure you that your site is now running faster than before, even if you are on a shared hosting. A good way to test your site’s loading speed is the Google PageSpeed Insights tool. Simply enter your URL and it will analyse your site for you. Do it before and after the optimization and see the huge differences.