Blog

Dec 072015
 
video_play_arrow

Examine page with videoIn part 1 of the post, we looked at optimizing images, javascript, CSS and the nasty, slow WordPress "emoji" script. We sorted these and reduced the page loading from approximately 3.7 seconds to 2.8 seconds. Looking at the "waterfall" figures on GTmetrix.com shows that the embedded YouTube video easily adds an extra 600 ms to the load times. This is made up mainly of various ad tracking scripts (of course, Google/YouTube only exists through ads!). Ok, using "free" services means living with these but not if it will impact your page rankings! So the solution is broadly to load the page without the scripts and only load the scripts when the visitor clicks on the video to play it. This way, the search engine algorithms will find a low page load time and the site visitor will experience a quick page load with a slight delay when the video is played.

Methods Compared

Well, like anything on the internet, there is more than one way to solve a problem. My preference is naturally always to use the minimal impact method when possible. So the technique used was to adapt a script on the very useful labnol.org site. But to satisfy non-geek types reading this, I actually compared loading times using own script to a WordPress plugin called "Lazy Load for Videos". And to my great surprise, the difference was less than the variation that one gets when testing the load time on any online tester.

With the plugin, all you do is install it and where you want the video on the page, just put in the video address (use "http://www.youtube.com/watch?v=xxxxxxx" where xxxxxxx is the video ID) - do not use the embed YouTube code. There are also settings for various parameters on the plugin settings area and I used the default ones. It is a nice little plugin but I cannot say that it will not clash with your theme or other plugins you might have installed!

Results

Page Speed 7th Dec 2015

Click to Enlarge

So using the smart loading of the video reduced the page load time by about 600 ms to around 2 seconds. This now brings the total time to the researched figure that is found to prevent high "bounce" rates. This is when a typical visitor will no longer wait and click on another site.

So far, the effort involved to improve the page load time is something that can be done in half a day by a reasonably skilled web technician. And all the resources used are free. The next stage of improving these times would be to reduce the first byte response time. On this site, this would involve using a better (non-free) CDN than Cloudflare and possibly tuning or changing the hosting server (this site is on a shared server). The technician time cost will become significant too. This moves us into the realm of the ROI (Return On Investment) and the aim of the site owner.

 

Nov 072015
 

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.

May 012013
 

A lot of surfers are wary of affiliate links, and in certain circumstances, this is fully justified. Especially if the article is meant to be a review of a product that is linked to. Ok, the author might genuinely like the product but loses credibility with an affiliate link at the end. Some affiliate sites pretend to review a product but are just a promotional sales page for the item. These sites are annoying and I hope Google finds a way of removing them from the top of the search results page. These misleading techniques are rife in the Internet Marketing products arena.

wary of affiliate linksSo this is one case. Affiliate links always insert a cookie into your browser which help to reward the person captured your click. This is not a problem per se but if you clicked on an article that was a content-less spun stuff that did not add any value yet later you went and bought something from the site it linked to - like Amazon - would you like the owner of that pointless article to be rewarded? Ok, you can clear your cookies if you are savvy enough but this can be a hassle, as other important site cookies might be removed to (eg. Gmail double log-in would want extra security again, your bank would want your un-memorable user number re-entered, etc.) The other situation which is, from my experience, thankfully rare is when the landing vendor site charges a higher price due to you coming through an affiliate. Vendors who do this tend to be small and unscrupulous ones who you are best to avoid anyway. Most people will Google the product of interest for price and such vendors can be uncovered and avoided..

However, some internet users are afraid of affiliate links for the "wrong" reasons. Some cite privacy concerns. This is largely an unfounded fear because affiliate links rarely track any personal details. It just passes the affiliate tracking info that will be used to credit the site you used the link from. In fact if you got value from the content of that site, it is a nice little thank you to the owner who created it. On multiple product review sites, if many affiliate links go to the different vendors, it is unlikely that the reviews are "rigged".

There are other added-value sites that help reduce time and effort to find a specific product. These can be useful to short-list your product choice and reduce the research needed. I have an Amazon electronics product site where only 4 or 5 star review items are listed where you can also limit the search by stating your price band. All links to the products are Amazon affiliate links but hey, I put in the effort to help you find the product!

So affiliate links can be a way of rewarding someone if they have in some way made your life easier or save you some time. On this site , I only have affiliate links to products I have used and approve of and judged as being of good value and quality.

Tutorials on setting up WordPress >>>