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
Although rare, it is possible in certain circumstances for the page to start rendering only after fully loaded (and the load event). We often see this in cases where the page does not have any external JavaScript or CSS.
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.
By looking at the screen captures, you can visually identify when this is happening by looking for multiple screenshots from the previous page before the current page is rendered. If this is an issue, you can use a JavaScript step to white out the entire window before loading a new page. Please see the example of how to accomplish this below.
Clearing the Screen Between Steps
Clearing the window consists of creating a div element that overlays the entire screen. For example, by running the following code in a "Run JavaScript" step before a "Go to url" step, you can make the screen blank:
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")[0];
body.appendChild(div);
Note that adding this could affect how the check is running because elements that are hidden behind the div are no longer accessible. So if you need to click a button to trigger the page change, you will have to do this through JavaScript.