53% of mobile visitors will leave a page that takes longer than 3 seconds to load.
How does that make you feel about your own website’s performance?
Even if your site can squeeze in under the 3-second threshold, tomorrow it might not. Constant changes to your website from multiple teams make maintaining fast load times a serious challenge.
Is there a way you can monitor performance and receive alerts whenever a page fails your standard of performance? Yes, there is. But first, you need to define exactly how you plan to measure performance.
Finding the Right Metric to Measure Page Performance
Page performance is often understood simply as “page load time.” Traditionally, page load time refers to when a page is completely loaded (on DOM ready, or the DOMContentLoaded event). But in most cases, users don’t need the page to load completely in order to start interacting with it.
As a result, many companies will opt for different performance metrics, such as the following:
- First Contentful Paint: The time at which the first text or image is painted
- First Meaningful Paint: The time at which the primary content of a page is visible
- Speed Index: How quickly the contents of a page are visibly populated
- First CPU Idle: The first time at which the page’s main thread is quiet enough to handle input
- Time to Interactive: The amount of time it takes for the page to become fully interactive
Google Lighthouse, one performance testing solution, offers each of these metrics in its audits.
Using Lighthouse to test performance
According to its developer page, “Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication.”
Lighthouse is a fantastic tool, with amazing metrics for measuring performance and other aspects of the web experience.
It does, however, have some major limitations:
- Lighthouse only scans one page at a time.
- Lighthouse only runs when you run it.
If your goal is to have automated monitoring of website performance, then Lighthouse on its own won’t fulfill that need. You will need to pair it with a solution like ObservePoint.
Monitoring for Page Performance Across Your Site
Scalable web testing and governance require a solution that can automatically scan large websites and run tests against the pages. While traditionally ObservePoint is used as a platform for testing that analytics tracking is functioning properly, it can also run performance testing via Google Lighthouse across your site.
Here are the basics of the process:
- ObservePoint runs an audit of your site. ObservePoint can either crawl your site from link to link or audit specific pages you define.
- ObservePoint runs Google Lighthouse on each page.
- ObservePoint imports the Lighthouse metrics into the ObservePoint platform.
- ObservePoint evaluates the metrics against user-defined rules. In ObservePoint, Rules are tests you can configure to run against the data collected during the audit. If at any point a Rule fails, you receive an email notification. In the case of performance, you could set a Rule to notify you if a specific Lighthouse metric ever exceeded a threshold of performance.
By combining ObservePoint with Google Lighthouse, you can schedule scans to run on a periodic basis to monitor page performance and receive notifications of poor-performing pages.
So what do you do when you discover an error? You’ll need to systematically investigate what part of your site is causing the poor performance. Tags are often the culprit.
Determining What Causes Poor Page Performance
Oversized images and superfluous libraries can increase load time, but one of the primary culprits of poor load times is third-party tags.
On a recent call with an analytics professional, he talked through how when he notices a page has begun to perform poorly, his first course of action is to look for any new tags that weren’t there previously.
Most of the time you will know exactly which vendors have tags on your site. (If you don’t, you can easily check using our free TagDebugger.) Frequently though, unexpected tags can appear, either from an internal stakeholder or from a vendor who deploys tags on your site via piggybacking.
You need to be able to identify the source of unauthorized tags. And in either case, whether you know the source of the tag or not, you also want to know how that tag affects performance.
Here are some methodologies to help you remediate tags that may be affecting performance.
Isolating the source of unauthorized tags
You never want unexpected, unauthorized tags appearing on your site. Unauthorized tags and their associated scripts can negatively affect page performance and user experience and even threaten visitors’ data privacy.
Where do these tags come from?
Unknown tags often crop up as a result of piggybacking. Tag piggybacking is when one tag calls another, resulting in unexpected image or script requests.
Piggybacking is common with advertising tags, as an advertiser will use an existing ad tag to deploy other ad tags to collect visitor data on your site. The issue with piggybacking is that it can result in a daisy-chain of performance-sucking tags.
When an unknown tag pops up, you’ll need to determine where it originates. To do so, follow these steps:
- Identify a potential parent tag. Unless a tag firing on your site is hardcoded on your page, it must be coming through as a piggyback tag from another tag. The quickest way to determine whether a tag is hardcoded or piggybacking is to block a potential parent script. A good place to start is your TMS container tag.
- Block the hypothesized parent tag. Blocking your TMS or another tag will also block all tags that might be piggybacking off that tag.
- Determine if the unauthorized tag failed to load. If you block the network request loading your TMS and then the unauthorized tag doesn’t load anymore, then you know the parent tag must be your TMS or (or a child of the TMS). If the tag continues to load, then the unauthorized tag or its parent tag must be hardcoded somewhere on your page. ObservePoint’s TagDebugger can help you easily see which tags are loading on a page.
- Repeat the process until you find the source of the tag. If after blocking your TMS you find that you successfully blocked the piggybacking script, then you can start repeating this process with the child tags of the TMS until you find the immediate parent of the piggybacking tag.
Alternatively, if you need to run this same process across your site, or if you want a repeatable, automated process, you can use the Remote File Map feature of ObservePoint. Remote File Map \ allows you to block scripts from loading or replace them altogether so you can isolate the source of an unauthorized tag.
Isolating the effect of tags on performance
In the case that a tag is fully authorized, you might still have some concerns about how that tag affects performance. Or, as some of our customers have expressed, you might feel pressure from other website stakeholders who suspect your tags might be negatively affecting performance.
You also might think you could use a similar methodology as described above to identify the net effect of tags on performance: run one Lighthouse audit where the tags fire, another where the tag is blocked, and compare the results.
Unfortunately doing so won’t give you a measure of the true net effect because blocking the network request doesn’t completely remove the tag's effect. If you don’t completely remove the tag and instead just block its request, then the tag will do the networking equivalent of a “pump-fake,” where the tag will still request the resource but then be blocked by the browser. This pump-fake still ties up performance and won’t give you a true number.
The appropriate way to isolate the effect of a tag would be to:
- Run a Lighthouse audit on your live (production) website.
- Turn off the tag in your staging environment (or temporarily in production if you don’t have a staging environment).
- Run the Lighthouse audit on the environment without the tag.
- Compare performance metrics.
This technique will give you an objective view on how your tags affect performance, either to defend your territory or to identify areas where you can improve. If you don’t want to worry about managing this process, ObservePoint can integrate directly with your TMS, allowing you to carry out this process automatically.
Monitoring Performance, Privacy, and Analytics Accuracy in the Face of Constant Change
Websites change all the time. Multiple teams touch different aspects of the site and, unfortunately, a change from one team can negatively affect the success of another.
ObservePoint enables you to set up site-wide governance of websites and mobile apps to help you maintain consistency in the face of change. To see how ObservePoint can help you monitor performance or any other aspect of your site, schedule a demo.
About the AuthorLinkedIn More Content by Jack Vawdrey