There are cases when visual metrics cannot be calculated. These include:
1. The page never rendered
This could be because the page timed out while loading, or the page didn't render anything within the viewport. In this case, the browser window does not change and all of the visual metrics will be reported as 0.
2. The page is identical to the page before it
This might be the case if the page is reloaded. A common use case for having a check that reloads a page is to test the effects of caching. Generally, the second load should be faster than the first.
However, depending on how long it takes to render the page the second time, our 100 ms image capture window might not catch the reloading of the page. In this case, whiting out the page (described below) before the refresh should help in the calculation of the visual metrics.
3. The page renders after fully loaded
4. The screenshot reached the file size limit
In order to not affect timings while capturing, we are grabbing large, raw screenshots whenever there is a visual change. These captures are then converted to PNGs during post-processing.
We have set a cap on the maximum size of the initial captures that works for 99.9% of checks. If that file size limit is reached, we stop capturing. This could mean that captures for subsequent requests are not being captured.
If you believe that this is happening, you can try reducing the viewport size under 'Advanced Settings' for the check or disabling animation on the page, as these are the biggest factors that contribute to large file sizes.
Metrics Anamolies in Multi-Page Checks
When a multi-page check is running, pages that load after the initial page can be affected by the previous page if the previous page is changing while the browser is preparing to render the next page. There are times when we can automatically identify that this is happening, including when the start render time is lower than the first byte time, but there is no way for us to identify all cases.
Clearing the Screen Between Steps
var div = document.createElement("div");
div.style = "z-index: 99999999999999999; position: absolute; left: 0px; top: 0px; background-color: white; height: 100%; width: 100%;";
var body = document.getElementsByTagName("body");