time-to-interactive
Version:
Utility to report time to interactive for Real User Monitoring (RUM)
76 lines (70 loc) • 2.42 kB
HTML
<html>
<head>
<script src="dist/time-to-interactive.min.js"></script>
<title>Time To Interactive</title>
<style>
body {
padding: 0;
margin: 0;
}
header,
.page-header {
background: #000;
color: #fff;
width: calc(100% - 40px);
height: auto;
font-size: 16px;
padding: 20px;
}
.content{
padding: 20px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
text-align: center;
background-color: #000;
color: #FFF;
padding: 10px;
}
</style>
</head>
<body>
<div class="page-header">Time to Interactive</div>
<header>
Demo uses two APIs exposed in UMD fashion:<br /><br />
1. <strong>getPageTTI</strong>: This is the time to interactive value reported for the entire page.<br />
2. <strong>getReferentialTTI</strong>: This is the time to interactive value reported for an action, this could be
a click action, route navigation for single page applications etc.
</header>
<div class="content">
<div>Time to Interactive for the page: </div><span id='tti'></span>
<br /><br />
<div>Time to Interacive for the action: </div><span id='rtti'></span>
<br /><br />
<button onclick="changeFrame()" style="height: 25px; width: auto">Perform Action</button>
<br /><br />
<div id='frameContent'>
<iframe width="560" height="315" src="https://www.youtube.com/embed/lWtMjkAQa9w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<script>
window.getPageTTI.then(function (e) {
document.querySelector('#tti').innerHTML = e + "ms";
});
var changeFrame = function () {
getReferentialTTI().then(function (e) {
document.querySelector('#rtti').innerHTML = e + "ms";
});
document.querySelector('#frameContent').innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/jjJ7Qi1MLVQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
}
</script>
</div>
<footer>
Source Code: <a style="color:#FFF" href="https://github.com/gauravbehere/time-to-interactive">https://github.com/gauravbehere/time-to-interactive</a>
</footer>
</body>
</html>