1

I want to find the load time of a locally hosted website. Is this way efficient? How can I display the time in a dialogue box?

<head>
<script type="text/javascript">
             var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
        </script>
        </head>
        
<body>
<script type="text/javascript">
          window.onload = function () {
    var loadTime = ((window.performance.timing.domComplete- window.performance.timing.navigationStart)/1000)+" sec.";
    console.log('Page load time is '+ loadTime);
}
        </script>
</body>
Samrat Shrestha
  • 77
  • 6
  • 1
    Is there a reason you don't want to use your browser developer tools for this? It's much easier to profile everything that way – Paul Nov 17 '18 at 15:17
  • Do you mean from the network tab pressing F12? I could not get what was happening there so I wanted the easy way to read the load time. – Samrat Shrestha Nov 17 '18 at 15:27
  • Yes, and it's far easier to see the total time plus the per resource time that way. Look for the OnDomContentLoaded number if your browser supports it for the effective total render – Paul Nov 17 '18 at 15:44
  • Does the developer tool give accurate load time? – Samrat Shrestha Nov 17 '18 at 16:06
  • Yes, they do. In all modern browsers – Paul Nov 17 '18 at 16:20

1 Answers1

1

@Samrat Shrestha This snippet work for you

<doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
    <head>
        <script type="text/javascript">
            $(document).ready(function() {
                 console.log("Time until DOMready: ",window.performance.timing.loadEventEnd-window.performance.timing.navigationStart);
             });
        </script>
        <!-- do all the stuff you need to do -->
    </head>
    <body>

    </body>
</html>

The ready event occurs after the HTML document has been loaded. window.onload fires when the entire page loads (images, styles, etc.)

window.onload vs $(document).ready()

https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API#Examples

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming/loadEventEnd

Syed Ausaf Hussain
  • 133
  • 11