Why measure load time at all?

Page load time makes an incredible difference in user experience. Identifying areas where your site's performance isn't up to par can help lower bounce rates and increase conversions. If search engine traffic is of importance to you, then it may be of importance to note that Google has started using site speed in web search ranking.

Client vs. Server page load time

There are two components to delivering a web page to users, rendering the page's content at the server level, and then loading all the resources like images, scripts, and stylesheets that the page uses. Inspectlet allows both of these metrics to be recorded in real-time by setting up a Custom Metric for each component.

Measuring Server-side load time

The server-side load time is the duration from when your servers receive a request to when your servers send a response back to the browser. Typical methods to measure server load time are largely inaccurate because they try to emulate a user's request. Instead of estimating server load time by re-creating the user's request, Inspectlet allows your server to report the actual time it took to render a user's request. Inspectlet will then take the average of all the times reported by your server and provide you with an accurate measure of server-load time.

To record server-side load time, create a custom metric in the dashboard that has a single variable and the metric's result is the average of all the values. Below is an example of using our API in PHP, although Inspectlet supports any server-side language. In this example, the Metric ID is "12345678" and the Website ID is "11111111".

At the very top of your (PHP) code, add:

// Set code execution's start time.
define("TIME_START", microtime(true));

At the very bottom of your code, add:

// Calculate time taken for script to execute, and urlencode() so it can be sent through GET
$time_taken = urlencode(microtime(true) - TIME_START);

// Use CURL if it's available for greater speed
file_get_contents("https://www.inspectlet.com/cmetrics/api/11111111?mid=12345678&value=$time_taken");

Replace the metric ID 12345678 with your own metric ID and the website ID 11111111 with your own website ID in the last line above . And you're done! The sever-side load time should now show up in your Real-time monitor.

Measuring Client-Side load time

The client-side load time is the duration from when the browser starts receiving the page to when the page and all its resources have finished loading. This includes loading all the images, stylesheets, scripts, and other resources that are part of the page.

To record client-side load time, create a separate custom metric in the dashboard that has a single variable and the metric's result is the average of all the values. In this example, the Metric ID is "12345678". Add the following code to your site:

Just before the </head> tag (or close-by if not possible):

<script type="text/javascript">
var inspPageStartTime = (new Date()).getTime();
</script>

Just before the </body> tag (or close-by if not possible):

<script type="text/javascript">
function setEndLoadTime(){ var inspPageEndTime = (new Date()).getTime(); __insp.push(['addCustomMetric', 12345678, {"value": (inspPageEndTime - inspPageStartTime)/1000, "scope": "page"}]);}
var oldOnLoadEv = window.onload; window.onload = (typeof window.onload != 'function') ? setEndLoadTime : function() { setEndLoadTime(); oldOnLoadEv(); };
</script>

Replace the metric ID 12345678 in the code above with your own metric ID. And you're done! The client-side load time should now show up in your Real-time monitor.