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
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.
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.
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
- use lazy loading of images
- 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
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.
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.
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.
Image credit: Going nowhere fast