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.
Previous Pagespeed Statistics:
Google Pagespeed Insights Score (Before):
GTMetrix Score (Before):
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).
The results of this experiment were astonishing!
Google Pagespeed Insights Improvements:
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!