<< Back

Measuring page load times

I'm sure many of you have seen old-timey webpages that state their loading time in the footer. Its not such a common practice anymore, but its a good bit of nostalgia. Can we make it work on Neocities?

Of course we can! Otherwise this article wouldn't exist.

Here is where our good friend Javascript comes into use again. Most modern browsers provide the user with the window.performance object. You can read more about it here, or here.

This object provides us with pretty much everything we need to know about our page timing, so all we have left to do is some simple math. Ew, math. Anyway, here is what we gotta do:

  1. Get the time when our page started loading.
  2. Subtract it from the time our page finished loading.
  3. Convert it to seconds (or minutes if you are using dial-up) and display it on the page.

That should be a piece of cake. Lets get to JS:

  1. You don't need jQuery for this one!
  2. Find your <script> tag if you have one, or create a new one like so:

    Hint: place this snippet at the very end, that way you maximize your accuracy.

    Now, we have a variable that has our loading time in milliseconds. You can convert it to seconds by diving it by 1000.
  3. Now all you have to do is show the variable somewhere on your page, in your footer, for example. We can do it with Vanilla JS like so:

    Or, if you do have jQuery already, for consistency and simplicity, you can do it like this:

    Hint: did you notice I really like jQuery?

And there's that! This particular tutorial may have been a bit confusing, so I apologize. If you need any help setting it up or want me to clarify something, or noticed an error, let me know! I'll appreciate it a lot. Hope this article was of use.