I know this may seem a bit vague, but I'm about to give more context: in the company I work for we use (my personal thought is we're misusing) Google Tag Manager (GTM) to inject some third party scripts inside GTM tags. Mostly we use it to manipulate the DOM in certain page templates (like, for instance, product pages) and inject third party scripts (examples are Zopim chat, Facebook pixel, etc…).
Things we tipically do are: manipulating the DOM when DOMContentLoaded and/or load events happen on page load, so It seems obvious to me that without these GTM tags our site will get a better score in PageSpeed Insights and in Chrome DevTools' Lighthouse. I can't test the website without GTM tags activated since it's already everywhere in the site.
How much is this kind of use of GTM harming our site speed?
There are a few different ways in which you can find out the performance impact of GTM and the third party tags.
Via the Developer tools
You can block gtm.js in your browser developer tools. This will prevent loading of Google tag manager and the associated tags. You can find out more about that feature here. Once you have done this, you can run Google Lighthouse from your browser, to see how your scores improve.
Via Webpagetest
You can also use Webpagetest to find out the performance without third party tags. Webpagetest has a request blocking feature or you can use the following Webpagetest script to test out the performance with only your first party domains.
blockDomainsExcept yourwebsite.com
navigate https://yourwebsite.com
This is to measure the performance impact of your third party scripts. You probably will get similar results if you include the third party scripts directly into your website without using GTM. That being said, there are ways to optimise your GTM setup for performance and to fully leverage the features of a tag manager to improve the performance of your website. You can check out this article if you are interested in optimizing your GTM setup.
Injecting tags is what GTM is for, so this does not constitute abuse.
GTM itself is just a delivery mechanism; it's one JS file (I think an empty container is some 100KB unzipped, and 30KB to download if your browser supports compression) with a mechanism for asynchronous loading of tags. By itself it will contribute very little to the page load time.
Of course the stuff you deploy via GTM might slow down your site a lot - partly because it will download external libraries, and partly because DOM manipulations might force reflows/repaints in the browser. However this is not due to GTM, this is due to the tags you use, and would happen exactly the same if you integrated Zopim etc. via some other means.
So, will using a lot of (potentially bad [1]) JavaScript make your site slow? In all likelihood, yes. It this the fault of GTM? It is not, other than in the sense that GTM makes integrating the nasty stuff a little easier.
[1] Not a dig against you, it's just that marketing tags are quite often written in appallingly outdated JavaScript.
Yes, it reduces the Lighthouse performance scores, especially the mobile ones. We have to be very careful adding GTM to our website, especially for the homepage. For my website, GTM was injecting another 5 JS files from different domains. This adds more Round-trip time (RTT)to our application and in-turn add more load to browser.
When I removed GTM from my homepage, it improved Lighthouse performance scores by 5 points. So there should be some kind of suggestions/insights provided by GTM itself whether it is going to impact our website or not.
Related
I have a React app and want to install Google Tag Manager on certain pages, but I do not want it present after a user logs in. Is it possible to disable / remove the GTM scripts after a certain user action?
I am using react-gtm-module to install Google Tag Manager but open to other options.
Well, this, basically, answers it: How to unload a javascript from an html?
But a better answer would probably be: don't unload GTM. It's not a good practice. It adds a lot more complexity to your overall logic. People don't expect someone to arbitrarily override deployed scripts' namespaces. It's very likely to cause havoc at some point and it's unlikely the one to debug it would be thankful to you for a thoughtful implementation.
Instead, consider using blocking triggers within GTM to just prevent certain tags from firing.
I'm looking into google tag manager and would like to avoid making a request from the client to render the tags. Is it possible to request the tags from GTM on the server and render them up front?
No (*). Not only is GTM itself a client-side technology, most marketing tags likewise require to be run in the browser.
There are a few things like Google Analytics or Google Ads conversion tags that can be run on the server (although the implementation is very much different from the JS tags), but GTM has no part in that. If you want vaguely similar functionality to GTM that moves at least a part of your tags out of the client-side code you should look at a service like segment.com (I am not affiliated. Segment.com is not free).
Update Feb 2020: Google has announced a closed beta for server-side tracking, where you run a container in a cloud environment that then distributes the requests. Simo Ahava has a little info in his twitter feed: https://twitter.com/SimoAhava/status/1222459714614841346. This is not yet a production feature.
(*) Not in any meaningful sense of the world. Just to cover every angle, you could download the GTM javascript file and run it in a headless browser on the server or something similarly stupid, but there would be no point, and I just mentioning it to pre-empt smartass comment to that effect.
If I add a tracking pixel that suddenly 404s or contains an error, does the parent page still load normally? Will some browsers hang with a perpetual 'loading' indicator?
A 404 would never result in a permanent loading indicator (after all a 404 is a pretty definitive response). If by "pixel" you mean an actual image then a 404 will not affect the original page (other than the a browsers network tab will show the error, but this will only be visible to developers).
If you mean "tracking pixel" generically for tracking script and include Javascript tracking tags the answer is only marginally different - a 404 will not affect page load, but if your site calls a function that is included in the external file then there will be problems.
If a script you include directly in GTM throws an error GTM will not allow you to publish the tag in question (however logical errors and variable name collisions are very much possible).
If an error is introduced in a linked (i.e. loaded from a remote location) 3rd party script the script it will affect the parent page - GTM does not check linked scripts, and they will behave no differently as if they were linked directly in the source code. The nature of the error will depend on the script, so as a second worst case the hosting page will die (the real worst case is if this is not an error but an malicious attack that injects javascript that runs in the context of the page - in that case the script might steal cookies, send you clients credit cards numbers to scammers and deface your website. Many people don't seem aware of this, so I thought I just mention it).
I've a Ajax .net website which follows this structure :
Control (ascx) : TopMenu, LeftPanel, RightPanel, Footer, all are very simple controls and don't require any connection to database or server side code !
One div body (ajax)
Everytime the website starts, the 4 controls load first, then comes the Ajax body. The performance is pretty good in development environment.
But when i uploaded the precompiled site to the host, it always take quiet long for starting up, after the first load, the performance is good
What i can't understand is : as far as i know, the four ascx control will be rendered first, that means the page will be loaded to the client, after that is the ajax content. So what's causing the performance on start up ?
P/s :
i did set the key compilation=false in web.config
i compiled the site using Publish tool in VS 2010 (Release mode and not allow updatatable ... )
i have no images on the site, it's a very simple site
i've checked similar topics, and event posted a question not so long ago about
this, but still without success
my site: http://iketqua.net
From your site and running the Network Analysis on google chrome what is blocking the render of your site is a huge delay for make a lot of calculations on page load, there is a lot of time that takes to start get data.
Also the google analytic script, must be placed on bottom of your page, together with other external scripts for google plus, facebook like etc.
Also there are 2 fonts on this css, that can not be load, and this takes almost 3 seconds delay.
http://iketqua.net/Styles/Fonts/MyriadPro/font.css
(source: planethost.gr)
If you are referring to the very first request after deployment to production. I don't think there's anything you can do about it. ASP.NET first request will always be slow, even if it is a pre-compiled site because the server still needs to load resources on the server-side.
But, if you are talking about first load from the client-side perspective, by just running Chrome Developer Tools I can see that your site's home page is quite heavy (44 requests, ~4 seconds to load) which explains why the first load takes some time and sub-sequent requests are quicker...mainly, because most of those 44 requests get cached by the browser. Now, in your dev environment it happens quickly because there is no significant network latency or connection hops, once you move to production the network lantency and connection hops plays a big role in performance...that's why many sites use CDNs.
Suggestions
Make your site lighter. There's many things you can avoid. For example:
This background image (http://iketqua.net/img/header_bg.png) is useless because it is a plain color which you can easily achieve that using css. That'll translate to one request less
Bundling and minification tools to minify and merge style sheets and js files
Optimize your css. Take the time to review your css and clean it. I can't believe that such a simple page can be requesting 9 css files...probably most of them are coming from open source frameworks (jQuery UI, DatePick, etc)
I lack permissions to post this as a comment, but if it's fine in the development environment, it may be something as simple as ability of the host or the connection to the host.
After the first load, the performance is good
I'd be inclined to think this is due to the site being cached.
I posted a question the other day about why IE8 would not allow me to embed a page using the OBJECT tag. Per that discussion, and per my other research, I decided to just go with an IFRAME as it was not clear that the third-party application actually needed to be in an OBJECT.
Now here I am, a day later, finding out that IE8 has the same cross domain issue with IFRAME that it does with OBJECT. Is there any way around this? Why can I not find any discussion about this being an issue?
It has been awhile since I have had ot use an IFRAME for anything but I am pretty certain that this used to be really easy to do. Am I missing something, or am I really stuck going back to early AJAX days of having to build a local PHP proxy script to proxy my request to the remote server?
Take a look at EasyXDM. It's a library which wraps cross-browser quirks and provides an easy-to-use API for communicating in client script between different domains using the best available mechanism for that browser. Caveat: you need to have control over both domains in order to make it work (where "control" means you can place static files on both of them).