This document discusses how tag management can help optimize website performance. It begins by explaining different metrics for measuring performance like total page load time, page render time, and above the fold time. It then discusses how tag management helps by enabling informed trade-offs when deploying tags, making tags asynchronous to avoid blocking rendering, and standardizing the deployment process. The document also covers underlying technical details that affect performance like network traffic and rendering processes. It provides general tips like quantifying performance issues and testing components separately. Finally, it outlines how a tag management system like Ensighten can help by centralizing third-party content deployment and standardizing best practices.

1. Enterprise Tag Management
Optimizing Site Performance
Josh Goodwin, CTO

2. Introduction
 Performance matters!
– You all know the data, faster website = better user
experience = higher conversion rates.
#agility2013

3. Introduction --- agenda
 Explaining “Performance”
– Different metrics for performance
– Total page-load time
– Page render time
– Above the fold time
– Measurement methodology
– Gomez/Keynote/etc
– Webpagetest.org
– Understanding the underlying technology & processes
– What most affects page performance?
 How does tag management help?
– Ability to make informed trade-offs
– Asynchronous as much as possible
– Standardized deployment chain
#agility2013

4. Explaining Performance - Metrics
#agility2013

5. Explaining Performance - Metrics
 Time to interactivity
– This is the time between starting a page load, and the actual user’s ability to interact with
your website.
– This methodology was coined by Zakas from Yahoo!
– http://www.youtube.com/watch?v=2ERgBl6LKb8&#t=95s
 Above the fold time
– This is the time it takes for the content 'above the fold' to become interactive.
– Majority of users don’t care about the content that is being loaded at the bottom of the
page, they care about what is visible. And when the page is loading, their focus is the
immediate screen visible to them, which is the “top of the page” aka “above the fold”.
 Perceived load time:
– The amount of time an average user would measure as the load time
– An older, more generic version of the two aforementioned measurements:
– http://www.neustar.biz/blog/webmetrics-performance/actual-load-time-versus-perceived-
load-time-and-the-support-of-service-level-agreements/
#agility2013

6. Explaining Performance - Metrics
 Classical Metrics
– Time to first byte
– Time to last byte
– Total requests
– Total DOM nodes
#agility2013

7. Explaining Performance - Methodology
 Know your goals:
– Is it to do better on Keynote vertical rankings?
– Worried about Google Page Rank?
– Purely user experience?
 Know your limitations:
– Internet is almost totally out of your control
– Test everything, but stress over what you can act on
– Sample, sample, sample
– Investigate what sampling reveals, and take action!
 Know your tools:
– Sampling: webpagetest.org
– Investigating: Gomez & Keynote
#agility2013

8. Explaining Performance - Methodology
 Tips & concerns for sampling:
– Test each major browser / know your audience
– Test frequently, but focus on the pages / flows that count
– Have a way to test your testing tool
– Individual samples should never be more than concerning!
– WebPageTest.org: free, open-source, excellent
 Tips & concerns for investigating:
– More expensive means more focus on specific pages / flows
– Test with more “volume” per page / flow. Establish trends.
– Be ready to initiate single page or scripted tests quickly
– Keynote, Gomez, Selenium (see: saucelabs)
#agility2013

9. Underlying Technical Details
#agility2013

10. Underlying Technical Details
 Two-stroke engine: Network Traffic &
Rendering
 Network Traffic
– Browsers have to ask for everything
they get
– Starts with the raw HTML, but continues
through images, css, video, etc.
 Rendering
– Browsers are getting better and better
at drawing pages faster
– There are a few key blockers for
rendering
#agility2013

11. Underlying Technical Details – Network Traffic
 Network Traffic covers a lot of steps
– DNS lookups
– Connection building / tearing down
– SSL negotiation
 Subject to hard and fast rules
– Overall connection limits
– Per-domain connection limits
 Somewhat out of your control
– This is where uncertainty lives!
– Routes to content change frequently
– You can control concurrency to some extent
#agility2013

12. Underlying Technical Details – Network Traffic
#agility2013

13. Underlying Technical Details – Rendering
 Rendering is: the process by which the browser draws
content described by HTML to the screen
 How content is rendered is where we can have big
immediate impact
 Rendering is really easy, and as computers get faster so
does render time
 If rendering is easy, then why are we talking about it?
#agility2013

14. Underlying Technical Details – Rendering
#agility2013

15. Underlying Technical Details – Rendering
 When do the network traffic cycles and rendering cycles
bump heads?
– Anytime what’s being rendered can mess with the HTML
below it.
– Script tags (embedded code) with document.write
– Ad tags
– Optimization tags
– Script tags with the code in a JS file
– Almost all non-basic conversion pixel tags
– Link / Object tags
– CSS, and some multimedia tags
– This only applies to stuff embedded in your HTML!
#agility2013

16. General Tips for Performance Optimization
 Quantify your performance issues
– Use analytics to relate site performance to conversion rates
– This is all about trade-offs, know how much your tags &
analytics cost
 Test & Optimize back-end systems separately from
network traffic and rendering
– Testing with a single variable is hard enough
– Let IT focus on making the application faster
– Don’t let network or application performance color rendering
decisions and vice versa
 Use Ensighten to make your decisions actionable
#agility2013

17. How Can Ensighten Help?
 Centralizing third party content – benefits:
– A consistent build-chain that guarantees standards like:
minification and gzipping
– Forces you to go asynchronous with everything by default
– Makes you acknowledge when you’re doing something
blocking / synchronous
 Centralizing deployment methodology:
– What is tag performance?
– Codify best practices, and enforce adoption
 Deploy tags when you know the value is greater than
the potential performance cost based on data
 Features coming soon…
#agility2013

18. Enterprise Tag Management
Thank You!