Finding Load time of website using Javascript

Question

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>

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
– Paul, Commented Nov 17, 2018 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
– Samrat Shrestha, Commented Nov 17, 2018 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
– Paul, Commented Nov 17, 2018 at 15:44

Syed Ausaf Hussain · Accepted Answer · 2018-11-18 09:10:20Z

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

edited Nov 18, 2018 at 9:10

answered Nov 17, 2018 at 18:05

Syed Ausaf Hussain

1331 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Finding Load time of website using Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related