It’s all about speed they say! A quick search on website page speed in Google will bring loads of informations and research telling you speed does matter and have been an important signal for Google in their search ranking algorithm since 2010. It was right so updated on webmaster central blog.

Here in this article we will be focusing on enhancing the speed of WordPress CMS based websites and how to fine tune the application with various plug-ins and codes (in .htaccess) to increase the download speed.

For us to know what tweaking is required and which part of the WP CMS application (CSS/JS/Images etc) is slowing down the website, do a quick online speed test using Google PageSpeed Insights tool. It’s a website performance testing tool for all devices and you’ll get a result as below with scores for both Desktop and Mobile:

With each problem there are links to resources and tools to correct them when you click on “Show how to fix”. Isn’t this goldmine for website owners and web masters?

With WordPress CMS, while the application is optimised for speed, yet while developing websites, we add or tweak stuff that impacts the overall working of the application. Most common issue are with the large size images, not adding an expiry to header, compression not enabled to reduce file size etc. Lets take a look at some of them here and rest in another article.

Image Compression:

Using light compressed images in the design sends less data over the network connections reducing the overall download speed. This issue is usually detected when the tool finds images that are heavy and can be further compressed without accepting their clarity. There are various image optimisation plugins such as EWWW Image Optimizer, WP Smush, Imsanity, or Hammy. There will be many more however these will help solve our purpose of optimising the images.

For further in-depth reading, check Image optimisation checklist from Google.

Enable compression:

Another way to reduce amount of time to download your website is to enable compression or confirm if compression is enabled on your server. Usually with gzip compression on, it considerably reduces the side of data/file transfer thus reducing the download time.

To know if your hosting server has gzip compression enabled or not, visit the website http://checkgzipcompression.com/ and check it. You’ll get something like this below:

Not that you know if gzip compression is enabled or not. In case it’s not, we can add few lines of code in your .htacess file that will do the trick. Below is the code.

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

# BEGIN DEFLATE COMPRESSION
<IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE application/atom+xml
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE application/json
        AddOutputFilterByType DEFLATE application/rss+xml
        AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
        AddOutputFilterByType DEFLATE application/x-font-ttf>
        AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
        AddOutputFilterByType DEFLATE application/xhtml+xml
        AddOutputFilterByType DEFLATE application/xml
        AddOutputFilterByType DEFLATE font/opentype
        AddOutputFilterByType DEFLATE image/svg+xml
        AddOutputFilterByType DEFLATE image/x-icon
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE text/plain
        AddOutputFilterByType DEFLATE text/x-component
        AddOutputFilterByType DEFLATE text/xml
</IfModule>
# END DEFLATE COMPRESSION

As a test we added these lines of code to a website that didn’t have the gzip compression enabled on their server and again tested for Google page speed. As you can see from below results, the score increased to 67% from 48% for Desktop version and 28% from 20% for Mobile version although there is a less improvement in Mobile version of the website. Below is the enhancement in the score for Desktop and Mobile.

Before
 

After
 

For WordPress we have plugins like ZenCache which was formerly Quick Cache, WP Total Cache & WP Super Cache.

Again for the test purpose, we added ZenCache plugin to the website, saved the settings and tested for page speed. There is further improvement in the score although comparatively less.
 

Additionally there are several plugins that checks the performance of the various plug-ins you may have added to the website to highlight if they too are contributing to the loading time. Once such plugin is P3 (Plugin Performance Profiler).

So, with above two issues taken care of in 15-20 min, you have improved your website speed score from 48 top 70. Ain’t you genius with a geek cap on?

Eliminate render-blocking JavaScript and CSS in above-the-fold content:

While the use of JS and CSS have become defacto, it can also add to download speed. When a browser renders a page, it needs to parse HTML markup code; if it encounters any script(s), it waits for the script to execute or load, if it’s an external file, before continuing rendering of rest of the code. This adds to the delay in rendering the page and finally page loading.

Thus we should avoid adding lot of scripts at the start of the page and if the script files are small, they can be added as inline code itself which will sped up rending as the browser doesn’t have to wait for external page to load and execute. This is not to suggest most of the script should be added as inline as this will have counter productive effect.

If the script or JS files are must but they are not important in rendering the of the pages initially, they can be made to load Asynchronously by adding a HTML tag “async”.

<script src="my.js" async>

Reduce server response time:

People and companies use different servers for their websites and applications and they all differ in their response time in which they complete a user’s request. Server response time is time taken by the server to complete a request to load a page. If it’s above 200 ms (milliseconds), this is an issue and should be resolved immediately by either switching to a better performing servers or optimise your application for prompt execution.

Leverage browser caching:

Showing Cached pages have always been an intelligent move to speed up site loading and displaying contents fast. Best example is browser displaying the content it had temporarily stored when you visited a website to reduce time to fetch data from the server. One drawback of browser caching is that the user isn’t shown the latest contents if there have been any updates between visits. Clearing the browser cache or temp folder displays the latest contents. This browser caching is done to reduce the data transfer between the client and the servers along with reducing the data costs, if applicable.

During browser caching, a time is specified for the next caching to occur; so if a user visits between the time specified, he is shown the cached data. Besides serving caches of certain files that usually do not change, such as PDF documents, CSS, JS makes business sense and thus leveraging browser cache becomes imperative.

With WordPress CMS application, there are various plug-ins to help resolve this browser caching problem. Leverage Browser Caching Ninjas, WP Total Cache (yes this is a multi-purpose plugin which we had suggested to enable gzip compression).

If you are one of those who do not like to load website with plugins, there is another way through adding lines of code in your .htaccess file. Add the below code and it should be fine!

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

As you notice, the Google PageSpeed score improved further after adding the code in .htaccess.
 

Minify HTML/CSS/JavaScript:

Just as we need to optimise the images, it’s required to also optimise the HTML/CSS/JavaScript files. This is called minification and it involves removing unnecessary codes, comments, white spaces without affecting the overall working of the resources.

For minifying CSS, you can try YUI Compressor and cssmin.js. For minifying JavaScript, try the Closure Compiler, JSMin or even YUI Compressor. Once you have minified the JS/CSS files, you are ready to use them in the website.

So, with a bit of efforts, we were able to improve the Google PageSpeed drastically specially for the Desktop version. With more efforts we can surely improve the Mobile version score as well which will be the theme of our another article to be published soon. Visit again and stay tuned for our another round of testing.