Performance Lab: How Tags Affect a Perfectly Optimized Storefront

Find out what's the best score a complex store can really get
20/03/2024·Leandro Borges e Vinicius Trindade

About

Website performance is full of nuances and it's a field of research on it's own. Everyone is looking to get approved by Google’s Core Web Vitals and this is exactly what we aim at deco.cx. Anyhow, the elephant is the room remains “What's the best score a complex store can really get?”

Today, we set our sails to answer: how exactly third-party tags affect a perfectly optimized storefront?

Methodology

This study was conducted mirroring a typical e-commerce homepage that loads:

  • A header leading to 30+ links with 3 level menu navigation
  • 1 full-banner carousel with 2 high definition images (1200x1200)
  • 1 Campaign Timer
  • 3 Product Shelfs fetching 12 products each
  • 1 Shoppable Banner
  • 1 Category grid
  • 1 Blog post section
  • A footer with 4 columns and 20+ links

Key Metrics

Adding tags to your storefront will have a direct impact on two performance metrics:

  • Total Blocking Time: One of Core Web Vitals metrics, it measures the total amount of time after First Contentful Paint (FCP) where the main thread was blocked for long enough to prevent input responsiveness.
  • Performance Grade: We used https://pagespeed.web.dev/ API to run tests because it guarantees isonomy of the overall conditions (CPU, connection, etc). More over, since it's an universal tool, anyone can double check this study on their own.

We calculated the final grades for each scenario by running the performance audit 100 times and using the median. This strategy will help us:

  • Avoiding Google Page Speed cache (servers are all USA based)
  • Avoiding outliers* that could miss lead results

Scenario 1: Perfectly Optimized Storefront (no tags)

This is a storefront built on top of deco.cx without any third-party tags, only with our built-in Analytics Tools (weights 1kb).

Gráfico 1

Graph 1: Frequency by Performance score with Perfectly Optimized Storefront

Max grade: 96

Min grade: 73

Average: 91

Median: 93

Check this storefront: https://tag-affect.deco.site

Scenario 2: Perfectly Optimized Storefront + GTM/GA

Now, we have added Google Tag Manager tag and it's most common partner the Google Analytics tag.

Gráfico 2

Graph 2: Frequency by Performance score with GTM/GA

Max grade: 96

Min grade: 68

Average: 86

Median: 84

Check this storefront: https://tag-affect.deco.site/gtmga

Scenario 3: Perfectly Optimized Storefront + Full GTM

Now, we have added all tags that a complex operations like one of our most sophisticated customer has.

Gráfico 3

Graph 3: Frequency by Performance score with sophisticated GTM

Max grade: 75

Min grade: 60

Average: 69

Median: 68

Final Thoughts and Conclusion

Gráfico 4

Graph 4: Performance comparation

Gráfico 5

Graph 5: Total Blocking Time comparation

Perfectly Optimized Storefront TBT Average: 184

Heavy GTM Storefront TBT Average: 2305,5

Using deco.cx you can reach as high as 90+ on Google performance grade while creating a heavy content digital experience (fully dynamic using high quality media). As you add more and more third-party tags, will you get as low as 65ish, increasing your TBT by 12X.

This points out a few relevant insight:

  • The most damaged Core Web Vital metric is the TBT, since each tag typically involves additional JavaScript execution, which can delay the rendering of a webpage and cause blocking of other critical tasks, such as user interaction or resource loading.
  • There is a trade-off between adding third-party tags and your website performance

The rule used for removing outliers in the study is based on quartiles. Check out more at Khan Academy