plugins - Execute inline javascript in wordpress after page fully loaded

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');

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');

• plugins
• javascript
• cache

Share Improve this question edited Jan 8, 2020 at 16:07 query asked Jan 7, 2020 at 23:01 queryquery 11311 silver badge66 bronze badges 11

• 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 ♦ Commented Jan 8, 2020 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 Commented Jan 8, 2020 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 ♦ Commented Jan 8, 2020 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 Commented Jan 8, 2020 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 Commented Jan 8, 2020 at 16:34

 |  Show 6 more comments

1 Answer 1

Sorted by: Reset to default 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');