Nov 072015
 

Share with:

FacebookTwitterGoogleStumbleUponLinkedInRedditDigg


As this site is a resource that has video tutorials on website creation, we want ABCofWebsites to be an example of best practice! One metric of a class leading site is the load speed. So this "Faster Loading Site" project is to get this site loading faster. For information, this site is being served through Cloudflare free CDN )content delivery network). Gold subscribers can see a video explanation of CDN here.

We will be writing this blog as the site is being made faster loading, so you may experience some glitches while we go into maintenance mode to update it. Please be patient! The base site has had very little done to it to speed up its loading. Also this post will only look at the first (landing/home) page to reduce complexity, but the techniques used will be rolled out to other pages gradually.

gtmetrix_7Nov2015

GTmetrix Base Values (click to enlarge)

Firstly, we will use the site Gtmetrix to give us a base value of the site's loading speed. GTmetrix is used in its default mode, which checks this site from a location in Vancouver using a Firefox equivalent browser.

The image on the right is a looks at the raw load time data of the site as it is. Also included is the "waterfall" diagram which is very useful to determine which components of the page contributes to the page load time. Clicking on the image will give a larger image for clarity - to return to the blog, use the browser return arrow.

The first line on the waterfall shows the server initial response time. This is pretty rubbish at 1.5 seconds but it depends upon the load on the servers of the Cloudflare free service and as a heavily used free service, is as to be expected.

The next big time hog on the chart is the advert link to wealthy affilliate at 915ms. The image is being loaded from their site and their site initial response and wait time is awful. So the first step is to download the image to our server and serve it from there. Now be aware that some publishers don't want you to mess with the provided affiliate link and so might invalidate your click through registration. So we go ahead and download and optimize the image and serve it from our website.

So here are the two GTmetrix values for this image before and after serving from our local server. The "after" figure is value from a second load to allow Cloudflare to cache it. Dramatic reduction from 915ms to 12ms!

Remote server WA logo

Before - Remote Server Load Time

Local server WA logo

After - Local Server Load Time

So we went ahead and did the same with the other image (S2 Member affiliate link) on the page that's being loaded from remote servers. The load time for this reduced from 289ms to 44ms.

Thes two actions reduced the page load time by approximately 300ms to 3.4 seconds. We were disappointed that reducing these remotely loaded images did not make too much difference to our page load time. Further analysis showed that we need to look at the css and javascript loading which as it stands, needed to load first, blocking the page rendering. This is especially true of the embedded YouTube video on the home page. This will be looked at in part two of this post. Watch this space!

EDIT: We added two plugins which counter-intuitively reduced the page load time even further:

  1. The emoji javascript load was taking about 400ms. This is in the WordPress core (ridiculous!) so the plugin Disable Emoji was installed to wipe this out.
  2. The css and javascript loading was consolidated by the plugin Autoptimize. This dropped the number of HTTP requests from 44 to 25.

So we now have a page load time reduced from about 3.7 seconds to 2.8 seconds. Quite a respectable drop, we thought.

Share with:

FacebookTwitterGoogleStumbleUponLinkedInRedditDigg