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.
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!
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.
EDIT: We added two plugins which counter-intuitively reduced the page load time even further:
So we now have a page load time reduced from about 3.7 seconds to 2.8 seconds. Quite a respectable drop, we thought.