0

I am trying to find out the time it takes to fully load a page in wordpress using javascript.My JavaScript code is inline.I am using wp_print_scripts hook but as it prints scripts in document head i have doubt that i am not getting the time after full page load. i am not getting the correct time as body and footer content is yet to be executed/loaded.So i think i am getting the time it takes to load the head not the whole page.I can not use wp_footer and shutdown hooks because my page is cached.So how can i run my code to get the time after full page load without clearing/flushing the cache? Here is my code:

my-plugin.php

function print_script() {

    <script type="text/javascript">
    window.onload = function () {
        var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart;
        alert(loadTime);
        console.log(loadTime);
    }
            var var1 = <?php echo json_encode('var1'); ?>;
            var var2 = <?php echo json_encode('var2'); ?>;
            var var3 = <?php echo json_encode('var3'); ?>;

    </script>


  }
add_action('wp_print_scripts', 'print_script');
  • The browser dev tools should already be able to tell you this without making any changes to your site at all, perhaps you can provide some context to this as to why you need to get this in your themes code? What problem are you trying to solve with this? – Tom J Nowell Jan 8 at 0:38
  • What to look in browser dev tool ? I need the page loading time of cached pages in my plugin.Due to cache necessary wordpress hooks are inaccessible so i need to rely on pure javascript.My javascript in running in document head so i have doubt that i am not getting the correct time as body and footer content is yet to be executed/loaded.So i think i am getting the time it takes to load the head not the whole page. – query Jan 8 at 16:05
  • Most caching plugins display the page generation time in a HTML comment in the footer, and you can see page generation times in a lot of analytics packages, e.g. Google Analytics. Also, if your page was cached, then the page generation time was zero, so it doesn't make sense to report this data for those pages – Tom J Nowell Jan 8 at 16:23
  • 1
    Your code should work fine... Open your dev-tools in Chrome (or similar) e.g. F12 or Cmd+F12. Refresh page. Observe load time shown in Chrome, then in your dev-tools console, copy and paste: window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; this will show you can equivalent to what Chrome is showing. – Adam Jan 8 at 16:24
  • 1
    See imgur.com/a/Qgi3hwu - and where applicable use different values on the window.performance.timing object if you want something other than domContentLoadedEventEnd – Adam Jan 8 at 16:34
0

I think you should in this case use echo:

function print_script() {

echo '<script type="text/javascript">
window.onload = function () {
    var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart;
    alert(loadTime);
    console.log(loadTime);
}
        var var1 = <?php echo json_encode('var1'); ?>;
        var var2 = <?php echo json_encode('var2'); ?>;
        var var3 = <?php echo json_encode('var3'); ?>;

</script>';


}
 add_action('wp_print_scripts', 'print_script');
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.