Finding Load time of website using Javascript

up vote
0
down vote

favorite

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>

asked Nov 17 at 15:15

Samrat Shrestha

266

New contributor

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 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 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 at 15:44

Does the developer tool give accurate load time?
– Samrat Shrestha
Nov 17 at 16:06

Yes, they do. In all modern browsers
– Paul
Nov 17 at 16:20

add a comment |

up vote
0
down vote

favorite

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>

asked Nov 17 at 15:15

Samrat Shrestha

266

New contributor

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 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 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 at 15:44

Does the developer tool give accurate load time?
– Samrat Shrestha
Nov 17 at 16:06

Yes, they do. In all modern browsers
– Paul
Nov 17 at 16:20

add a comment |

up vote
0
down vote

favorite

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>

asked Nov 17 at 15:15

Samrat Shrestha

266

New contributor

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>

<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>

<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>

javascript page-load-time

asked Nov 17 at 15:15

Samrat Shrestha

266

New contributor

asked Nov 17 at 15:15

Samrat Shrestha

266

New contributor

asked Nov 17 at 15:15

Samrat Shrestha

266

New contributor

asked Nov 17 at 15:15

Samrat Shrestha

266

asked Nov 17 at 15:15

Samrat Shrestha

266

New contributor

Samrat Shrestha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

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 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 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 at 15:44

Does the developer tool give accurate load time?
– Samrat Shrestha
Nov 17 at 16:06

Yes, they do. In all modern browsers
– Paul
Nov 17 at 16:20

add a comment |

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 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 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 at 15:44

Does the developer tool give accurate load time?
– Samrat Shrestha
Nov 17 at 16:06

Yes, they do. In all modern browsers
– Paul
Nov 17 at 16:20

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 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 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 at 15:44

Does the developer tool give accurate load time?
– Samrat Shrestha
Nov 17 at 16:06

Yes, they do. In all modern browsers
– Paul
Nov 17 at 16:20

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

@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 at 9:10

answered Nov 17 at 18:05

Syed Ausaf Hussain

366

New contributor

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

Samrat Shrestha is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53352540%2ffinding-load-time-of-website-using-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

@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 at 9:10

answered Nov 17 at 18:05

Syed Ausaf Hussain

366

New contributor

add a comment |

up vote
0
down vote

@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 at 9:10

answered Nov 17 at 18:05

Syed Ausaf Hussain

366

New contributor

add a comment |

up vote
0
down vote

@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 at 9:10

answered Nov 17 at 18:05

Syed Ausaf Hussain

366

New contributor

@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 at 9:10

answered Nov 17 at 18:05

Syed Ausaf Hussain

366

New contributor

edited Nov 18 at 9:10

answered Nov 17 at 18:05

Syed Ausaf Hussain

366

New contributor

answered Nov 17 at 18:05

Syed Ausaf Hussain

366

answered Nov 17 at 18:05

Syed Ausaf Hussain

366

New contributor

Syed Ausaf Hussain is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

Samrat Shrestha is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Samrat Shrestha is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr