Optimizing Third-party Scripts

Yesterday, an e-commerce client asked how to increase site speed without losing their marketing tracking. Here's our approach. This client is a $100M+ online retailer with a complex channel mix. Thus, they have lots of marketing pixels onsite. Our recommended approach: 1.) Remove libraries and pixels no longer needed. Audit your existing pixels and events. Disable any pixels/events that are no longer needed. Check for errors and fix any broken pixels. 2.) Tag Managers Move all 3rd party javascript (libraries/pixels) into a tag manager. Tools like GTM, Tealium, Adobe Launch benefit primarily help with data governance and standardization. However, tag managers can also minify and cache 3rd party libraries, reducing page load times. Additionally, they often have OOTB capability to set the priority (sequence) of the tags, more on this below. 3.) Server-side tagging Many ad platforms can receive events server-side vs. clientside (through javasript in the browser). Examples include Meta, Google, TikTok. This can take some of the load off the browser. There are good 3rd party tools for this, including Blotout and Elevar. Server-side tracking has the added benefit of restoring signal to the ad platforms. More conversions to the ad platform will result in better optimization and reduced ad spend. 4.) Sequencing Less-important libraries This is a biggie. If pixels aren't required for the page render, have your web-dev team defer them later in the page. This can also be done in the tag manager. Most tag managers load tags asynchronously by default. That means they load in parallel and won't block other resources from loading. Full-service performance optimization tools like Yottaa can automatically sequence the libraries and calls (very good but not cheap). In summary, I'd tackle in this order: - Remove any pixels/libraries you no longer use/need - Move all 3rd party pixels to a tag manager (GTM) - Fix broken pixels - Optimize the load order of the libraries (sequencing) - Setup server-side tracking for ad platforms if available What else would you add? #measure #digitalanalytics #marketinganalytics #ecommerce

Here is the perfect example of easy #corewebvitals wins. Yesterday I was asked to check out this site that was failing the Core Web Vitals and it was a fist class example of everything you should avoid. If your HTML code looks something like this you should fix it today. Let me show you how and why: 1. Self host your important scripts. The first one is an easy one. You can see the site is loading resources from googleapis cloudflare cnd, unpgk and bootstrapcdn. That is 4 NEW CONNECTIONS that can take up a considerable amount of time for each new visitor. Now if you consider that all these scripts are parser blocking you can imagine we don't want extra delays this early during page load. The solution: self host these scripts! 2. Defer your scripts. Did I tell you these scripts will lock the parser. I did :-) In general you really want to avoid script blocking the parser. The easiest way to do this is is by deferring your scripts. Simply add 'defer' to the script tag and your scripts are deferred. There are cases where this will lead to errors and you need some extra work but for this site it would have worked just fine. 3. Do not lazy load important scripts On this page the 'all-js' script has a data-src attribute. This data scr is used to late load the script. While there is something to say for this technique (though there are better options!) you should always be really careful with late loading resources. In this case the resource will create a huge layout shift and delay critical functionality like search and menu. The solution: just defer this script an do not over-optimize!! 4. De-prioritize less important scripts Sometimes you do not want scripts like swiper.js to load this early during page load. In this case swiper is not used in the visible mobile viewport. Ther are many way to fix it, the simplest way would be to just place the script lower on the page. A more advacned solutions would be to load it during browser idle or attach it tot the intersection observer to load it just-in-time 5. Simplify your fonts Web fonts should be done with CSS (self host your fonts & preload critical fonts). Preferably as early as possible during page load to minimize layout shift cause by web fonts. Using JavaScript to load fonts will just make your fonts load later with more overhead! 6 Bonus: do not fake your lighthouse score Can you see thie line that reads 'if (navigator.userAgent.indexOf("Chrome-Lighthouse") > -1)'. That will hide everything within this condition from Lighthouse. Lighthouse is a lab test and it is not used to measure the Core Web Vitals (that is what CrUX is for). Lighthouse will try to tell you why your page is slow. You should let it :-)

🚀 Quick performance tip! Did you know that 94% of websites use third-party services? During a recent website audit, we found a frequently missed area related to website performance, namely 3rd party tags. As time goes by, these tags can pile up and become outdated, acting as quiet hurdles to good performance, and often affecting the new INP metrics. When we start auditing a client's website, our first step is to get an overview of all 3rd party tags currently used. This helps set the stage for a well-organized review, leading us to some important questions: 1️⃣ Who is responsible for this tag? Identifying ownership is the cornerstone for accountability and effective management. 2️⃣ Do we need this on every page? A discerning look at the necessity of tags on each page can lead to smarter load distribution. 4️⃣ Does the 3rd party vendor have a more performance-optimised tag available? Upgrading to sleeker versions can often enhance performance. 5️⃣ Do we still use it? A straightforward yet frequently overlooked question that can lead to decluttering the tag landscape. 6️⃣ Are there tags that provide similar features? Sometimes, multiple tags may offer overlapping or identical features. Reducing duplication by consolidating to a single choice can save costs and improve visitor experience. These questions help us go through all the tags, making sure that each one is necessary, up-to-date, and as performance-optimised as possible. It's a careful way to handle the often missed, but important area of 3rd party tags, which can really affect how well a website performs. 🚀 Checking 3rd party tags regularly helps clean up your website and makes it run better. Keep auditing and improving! #corewebvitals #INP #tagmanagers #webperformance #pagespeed

𝗛𝗼𝘄 𝗪𝗲 𝗔𝗰𝗵𝗶𝗲𝘃𝗲𝗱 𝗮 𝗣𝗲𝗿𝗳𝗲𝗰𝘁 100/100 𝗣𝗮𝗴𝗲 𝗦𝗽𝗲𝗲𝗱 𝗳𝗼𝗿 𝗮 ₹1000𝗖𝗥+ 𝗔𝗥𝗥 𝗲𝗖𝗼𝗺𝗺𝗲𝗿𝗰𝗲 𝗕𝗿𝗮𝗻𝗱 The secret sauce? 𝗚𝗼𝗼𝗴𝗹𝗲 𝗧𝗮𝗴 𝗠𝗮𝗻𝗮𝗴𝗲𝗿 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻. Here’s the exact breakdown of how we did it - 1️⃣ 𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗦𝗰𝗿𝗶𝗽𝘁𝘀: We delayed non-essential scripts like chat tools and behavioral tracking until after the page loaded or user interaction, ensuring faster access to key elements, drastically improving user experience. 2️⃣ 𝗥𝗲𝗱𝘂𝗰𝗲𝗱 𝗦𝗰𝗿𝗶𝗽𝘁 𝗩𝗼𝗹𝘂𝗺𝗲: By removing unnecessary third-party scripts, we lightened the page, significantly improving overall speed and making the site more responsive. E.g. Remove the scripts of tools that we don't need anymore 3️⃣ 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝗶𝗰 𝗦𝘁𝗮𝗸𝗲𝗵𝗼𝗹𝗱𝗲𝗿 𝗔𝗹𝗶𝗴𝗻𝗺𝗲𝗻𝘁: We collaborated with marketing, sales, and product teams to schedule tools like user behavior tracking once the page load is complete. 4️⃣ 𝗜𝗻𝗹𝗶𝗻𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗖𝗿𝗶𝘁𝗶𝗰𝗮𝗹 𝗦𝗰𝗿𝗶𝗽𝘁𝘀: Working with our tech team, we inlined long-term critical scripts. This helped in speeding up the First Contentful Paint to just a few seconds, giving users immediate access to key visuals. 5️⃣ 𝗧𝗮𝗴 𝗦𝗲𝗾𝘂𝗲𝗻𝗰𝗶𝗻𝗴 & 𝗣𝗿𝗶𝗼𝗿𝗶𝘁𝗶𝘇𝗮𝘁𝗶𝗼𝗻: The game-changer! Only the most critical tags, like conversion tracking, fired on page load. Marketing tags such as retargeting were delayed, significantly improving both speed and user engagement. 6️⃣ 𝗣𝗮𝘂𝘀𝗲𝗱 𝗨𝗻𝘂𝘀𝗲𝗱 𝗧𝗮𝗴𝘀: We paused tags that no longer contributed to key decision-making, reducing time-to-interactive and directly improving conversion rates by speeding up the user journey. 7️⃣ 𝗦𝗺𝗮𝗿𝘁𝗲𝗿 𝗧𝗮𝗴 𝗧𝗿𝗶𝗴𝗴𝗲𝗿𝘀: We set triggers to fire tags only based on specific user actions, which not only saved load time but also increased session duration, as users interacted more fluidly with the site. 8️⃣ 𝗖𝗼𝗺𝗽𝗿𝗲𝗵𝗲𝗻𝘀𝗶𝘃𝗲 𝗧𝗲𝘀𝘁𝗶𝗻𝗴: Every new script was rigorously tested before launch, ensuring peak performance and zero downtime, even during high-traffic periods. 9️⃣ 𝗥𝗼𝘂𝘁𝗶𝗻𝗲 𝗔𝘂𝗱𝗶𝘁𝘀: Regular audits every few months allowed us to remove obsolete tags, keeping performance sharp and maintaining the high page speed we achieved. 𝗞𝗲𝘆 𝘁𝗮𝗸𝗲𝗮𝘄𝗮𝘆 - Effective management of Google Tag Manager can boost conversions by up to 30% and improve page speed score by up to 20 points, boosting both user experience and bottom-line revenue. I'd love to hear your experiences and insights on leveraging GTM for page speed optimization. How has GTM transformed your marketing operations and contributed to better user experiences? . . Also a big shoutout to Gunjan Agrawal and Mandar Zope for their awesome contributions in making this happen!. . . #GrowthInsights #GoogleTagManager #PageSpeedOptimization #UserExperience #ConversionOptimization