Overview
Synthetic monitoring runs scripts with multiple steps. Usually a step represents a website's
page, where some content verification is performed to confirm the step has completed
successfully. With RUM, we currently rely on the browser's onload event to detect that a
page has loaded. This is not good enough because for most pages the content that matters
is visible to the user before or after the onload event. We want to know when that content is
available. Such a situation would occur for example when you use Ajax to populate the page
content after the onload event is triggered. Another use case is on the contrary to record if
the main content of the page has been made available to the user even if all elements of the
page have not loaded (typically below the fold).
Perceived Load Time is a RUM feature that allows our customers to capture a custom load
time that they define because it makes the most sense to their website.
Main ideas
• Define a timeout value that both enable the RUM perceived load time feature and is also used to detect
that the page has successfully loaded in a timely manner
• Instrument your web page source code: call a JavaScript function that will make RUM mark that
timestamp as the perceived load time. Optionally, a description can be given.
• If this feature is enabled RUM will be able to define page "timeouts", that is when the user leaves the page
before the perceived load time event is detected, or if that event is not called before the timeout value you
define.
• This feature is optional and backward compatible. By default the RUM beacon will rely on the browser's
onload event as usual.
Scenarios
• "onPerceivedLoad" is triggered before the browser's onload event
Perceived Load Time will be recorded and returned to our servers as usual 1 second after
the onload event
• "onPerceivedLoad" is triggered after the browser's onload event
A request to our servers will be sent out at that time with the perceived load time value
• "onPerceivedLoad" is not triggered in time (time out)
A request to our servers will be sent out when the timeout occurs. The sample will be
marked as "timeout".
• user leaves the page before "onPerceivedLoad" is triggered or before timeout
A request to our servers is sent at the "onbeforeunload" browser event. The sample will be
marked as "onbeforeunload".
Implementation
• Easy to enable Perceived Load Time feature inside the rum tag:
var ns_rum = {}; // Optional: uncomment the second line below in order to enable Perceived Load Time (timeout in seconds) // Then
• Simple way to mark perceived load event anywhere in the page after ns_rum object has been declared:
ns_rum.onPerceivedLoad();
Example after an image has loaded:
<img src="..." onload="ns_rum.onPerceivedLoad('Main image loaded')"/>
Note that if you want to enable this to only a few pages you can keep the flag commented
out in the header, and set it inside the specific pages templates. Here is an example with a
15 seconds timeout:
<script> ns_rum.perceivedLoadTimeout = 15; </script>
Page Load Timing
Default behavior (no perceived load event triggered):
Perceived load event triggered before onload:
Perceived load event triggered after onload, for example upon Ajax response:
RUM console
Once perceived load information starts getting collected, that data will be available in the
RUM console in both the Time Series and Analysis tab:
Of course the data is also available through the RUM API.