Member Avatar for asif49

I want to write how long it takes to parse one of the pages for my website. I've got the setting up of the time variable at the top of my script then have a lot of stuff which is done in-between. I then display time elapsed at the bottom (after the whole page has loaded).

Is it possible to display the time on top of the page?

  • 4 Contributors
  • 6 Replies
  • 127 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by asif49

Dani AI

Generated

A few practical ways to show the page parse time at the top without changing the whole page flow.

As described, the usual server-side measurement is done with PHP timing functions (microtime). That measures only server-side generation time (not network or browser render). and already touched on several options; below are two beginner-friendly approaches that are easy to drop into an existing script, plus notes on tradeoffs.

A simple, no-jQuery method: put a placeholder near the top and, when the server finishes, emit a small inline script that writes the elapsed time into that placeholder. This avoids learning a library and runs in any browser.

<?php
$start = microtime(true);
?>
<!doctype html>
<html>
<body>
  <div id="elapsed">calculating...</div>

  <!-- page content -->

<?php
$elapsed = microtime(true) - $start;
$ms = round($elapsed * 1000, 1);
echo "<script>document.getElementById('elapsed').textContent = 'Parsed in {$ms} ms';</script>";
?>
</body>
</html>

If you want to keep the HTML untouched until you have the final value, use output buffering and replace a marker before sending the response. That gives a single final output but will delay sending anything until the buffer is flushed.

<?php
$start = microtime(true);
ob_start();
?>
<!doctype html>
<html>
<body>
  <div id="elapsed"><!--ELAPSED--></div>

  <!-- rest of page -->

<?php
$output = ob_get_clean();
$elapsed = microtime(true) - $start;
$ms = round($elapsed * 1000, 1);
$output = str_replace('<!--ELAPSED-->', "Parsed in {$ms} ms", $output);
echo $output;

Notes and troubleshooting:

  • Use microtime() for precision.
  • Inline script at the end is reliable because the element already exists; if you move scripts earlier, wait for DOM ready (see MDN DOMContentLoaded).
  • Using flush()/chunked output can show top content immediately but may be blocked by webserver or gzip buffering (flush() docs).
  • Don’t expose detailed backend timings on a public production site unless needed for debugging—keep it for dev builds.

If learning JS feels heavy, the inline approach above is the smallest step; later, ’s jQuery idea is a natural next step.

Recommended Answers

All 6 Replies

Member Avatar for Member #733618

I think that you are not able...

Member Avatar for kevindougans

Of course it's possible, but seems a bit time wastefull.

You have 2 (edit: 3) options that I can think of:

1. Use CSS; i.e. Put it in a div with an id of "elapsed" and then set in your style sheet that this div should fit somewhere nicely at the top of your page.

2. Use the output buffer; Put in a placeholder at the top of the page for the elapsed time then use a regular expression to replace it with the time (although the time elapsed will be (slightly) out of sync now since it will be complete before the page has been rendered)

3. JQuery. Once you have figured the elapsed time run a JQuery function to update the div at the top. I'd definitely recommend this option.

Edited by kevindougans because: n/a
Member Avatar for asif49

Hmm, my skill level at the moment isn't enough to deal with this I don't think. It's too much of a big deal having the results at the bottom of the page though so I guess I'll just stick with that!

Member Avatar for kevindougans

Fair enough. I would seriously recommend learning the basics of JQuery though. It sounds (and looks scary) at first but it's a great resource and you'll be amazed at the amazing things it can do on ANY browser with very little hand written code. Showing, hiding and updating the text in <div>'s on the fly has been such a priceless thing for me over the past few years. It will really help push you in right direction making you an all round better developer even if you barely use it, but just knowing of its capabilities or perhaps learning another similar resource.

Member Avatar for vaibhav1983

Why would you want to do that in first place.

I mean if your site performance is really good then you can but not if your site performace is average.

Also this can be easily done using jquery.

Let me know if you need any assistance.

Member Avatar for asif49

Well, yes if it can be easily done then sure Vaibhav I'd love some assistance on making it happen!

And yeah (kevindougans) I'm definitely going to learn it sooner or later. It's just that this year I'm pretty much busy with learning other stuff so have to squeeze in some time to learn web development here and there. Thanks on the advice though!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.