Case Studies

Case Study: How I used Google Tag Manager To Increase Pagespeed

About The Client

Lifetreewellness has a combined 60 plus years of experience – with testimonies galore of hearings that have taken place using God’s methods.

Their staff offers a wide selection of services which include Detox Programs, Foot Detox, Lemon Wraps Plus, Cold Sheet Packs, Rife Technology, Far Infra Red Saunas, Contrast Therapy, Vitamin C Therapy, Oxygen Therapy, Diagnostics, Bio-Mechanical Therapy, Massage Therapies, Herbal Therapies & much more!
 
You can learn more about them here: lifetreewellness.com

Previous Pagespeed Statistics:

Google Pagespeed Insights Score (Before):

GTMetrix Score (Before):

The Process:

First and foremost, I usually take the approach of seeing what I can fix within the pagespeed insights that won’t take too much time and which can be implemented instantly without a developer’s help. 

Here were the issues:

  • Youtube video link slows down contentful paint
  • Minimize JS files
  • Minimize CSS Files
  • Defer Images & etc

Main focus point:

Our main focus was the Youtube video link as it took most of the time to render before loading the webpage. Here is how it looks on the homepage:

I noticed one thing..

In Shopify, it allows you to insert a Youtube video directly onto the homepage which is the prime reason the pagespeed was taking more time to render than it should. 

 

How did I fix this ?

I took a multi-step approach to rectifying this issue. Here is a summary of the steps I took to fix the issue:

  • Removed direct Youtube link insertion 
  • Replaced the Youtube video link feature in Shopify with embedded video (iframe of the same video)
  • Lazy loaded embedded iframe Youtube video
  • Added a data-src attribute to the iframe code 
  • Using Google Tag Manager to add / remove the src attribute from the code 

Step 1: Removing the Youtube Link Insertion

This step was pretty simple, Shopify allows you to drag and drop certain elements onto the homepage so I was able to easily access the ‘Video’ element and turn it off as seen below:

Step 2: Replaced the Youtube video link feature in Shopify with embedded video (iframe of the same video)

Next, I decided to use the embedded Youtube video Iframe feature because I knew I would be able to manipulate the loading of the Iframe with Google Tag Manager. I used the Custom HTML feature in Shopify to insert the Iframe code as seen below:

Please note: You need to make the iframe code responsive by getting your hands a little dirty with HTML and CSS to make the video fit perfectly into any screen width as seen in the code above.

Source Code For Above:

Step 3: Lazy loaded embedded iframe Youtube video

You can add an HTML attribute called ‘Lazy Load’ which won’t load the content until it’s in the fold of the user’s view. Here is the code which adds the functionality:

Step 4: Added a data-src attribute to the iframe code 

Added the attribute ‘data-src’ will allow the Iframe code inserted to make the call to the server after the browser window has finished loading completely.

After the browser window finishes loading, this code will find all the iframes on your site (or on whichever pages are loading this script), and if the data-src exists, copy that attribute to the src attribute. By default, a YouTube video embed code doesn’t have an ID or class name, so this code should work for all YouTube videos without any adjustment.

Step 5: Using Google Tag Manager to add / remove the src attribute from the code 

This is where things get a little bit interesting and complicated. First and foremost, I had to really understand what I was implementing here for this to work. I will break it down for you below:

Step 1: Implement a pageview - window loaded trigger on the homepage

I had to understand that the window loaded pageview trigger acts as a placeholder for the code seen below:

In this case , we needed to implement this on the homepage since that’s where the video is located so I set a filter in the trigger to ‘/’. You can see this implementation below:

Step 2: Implement a custom HTML tag that inserts the data-src attribute to the iframe of the embedded video

I wrote this code to find the id of the iframe I embedded and dynamically insert the ‘data-src’ attribute when the window is fully loaded (based on the pageview – window loaded trigger). 

This will allow the homepage to load first and then insert the data-src attribute and make an API call to acquire the YouTube video. So essentially the JavaScript will be parsed after the window is loaded.

The results of this experiment were astonishing!

Results:

Google Pagespeed Insights Improvements:

Mobile:

Desktop:

GTMetrix pagespeed improvements:

This implementation improved the score from ‘C’ to ‘B’ in terms of performance. The blocking time decreased by 142ms! That’s a huge difference!

Conclusion:

Google Tag Manager is a very powerful tool. When you combine this tool with JavaScript , you can do almost anything. I was able to increase pagespeed with a simple but very effective solution by over 142ms! This really helps the lifetreewellness.com website to load much faster on both mobile and desktop platforms. This really helped their SEO rankings for certain keywords which you can read about here. What can we learn from this? Well in order to accomplish certain tasks, sometimes creativity is required. I will be publishing more Google Tag Manager solutions soon to this website. I hope this post helped and I will attach a link to the source code below for the custom HTML tag.

Source Code

Leave a Comment