Skip to main content

Render time

core web vitals frontend
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

What Is Render Time?

Render time is the metric that refers to the time it takes for a website or web app to load enough that the user can actually interact with the page. While quite similar to load time which measures the time it takes for a page to become visible, render time will tell you how soon your app or website is usable.

Render Time vs Load Time

While often mistaken, these two serve a completely different purpose. 

Page load time refers to the amount of time it takes for a page to show up on your screen. It’s usually measured in seconds and you calculate it based on the time it takes to load the page to completion compared to when you clicked on the link.

Render time, on the other hand, is different. While similar to load time, in the sense that it measures the time it takes to fully load, it also takes in account how long do users have to wait until the page is ready to be interacted with. Hence, it will have a higher impact on user experience.

While render time and load time are metrics that measure two different things, it’s worth pointing out that both of these should be closely monitored and measured.

Why Is Render Time Important?

Render time is an important metric as it can point out potential website performance issues that may frustrate your users. Monitoring page render time gives you a better understanding of how long the users need to wait until the website is fully functioning and ready to interact with.

Until recently, render time wasn’t as important as it is now. In the past, websites used to be less complex, have all assets loaded from the same location, and there weren’t many APIs to be integrated. In modern websites and applications, this has changed. Most websites use external APIs and resources that load at different times and have a drastic effect on the website’s usability. 

A good example to emphasize the importance of render time would be an eCommerce store that has thousands of products, uses a CDN to deliver images, social media platforms APIs for login and registration, and a third-party payment processor. Whenever a user wants to purchase an item from the store, all the assets loaded from third parties need to be fully displayed in a timely manner. At the same time, the login, registration, and payment processor must load just as quickly or risk losing the sale on account of a slow-loading website.

How Do You Measure Render Time?

The easy answer would be to use the Navigation Timing API that works on most modern browsers and use JavaScript to record the data. 

function onLoad() { var now = new Date().getTime(); 
var page_load_time = now - performance.timing.navigationStart; 
console.log("User-perceived page render time: " + page_load_time); }

While this will show you how long it takes for your page to render, it’s a rudimentary implementation that requires adding a similar piece of code on every single webpage you want to monitor. It lacks an alerting system that you might want to implement and involves collecting the data manually.

A better solution is to use third-party monitoring tools that will give you details on the render timings, as well as the first and last contentful paint, the time to first byte, latency, cache, and other key metrics for website performance

Monitoring Render Time with Sematext

Sematext has two dedicated solutions to help you monitor website performance

Sematext Synthetics is a synthetic monitoring tool that runs synthetic tests on your website at predefined intervals and from different locations around the world. It provides customizable dashboards where users can see the Core Web Vitals metrics,  resource load time, SSL certificates errors, and more.

Sematext Experience is a real user monitoring solution that allows you to understand how users experience your website at any moment. It paints a clearer picture of how the website performs by recording real user interactions.

When it comes to monitoring a website or app, the best way to go about it is to implement both types of monitoring. Together, they make a powerful website monitoring software that helps ensure the health of your services and applications.

Start free trial


See Also

Content
Plans and Pricing

Pricing is calculated per agent per hour for App and Server Monitoring and per Docker host per hour for Docker Monitoring.

See Plans and Pricing

Stay up to date

Get tips, how-tos, and news about Elastic / ELK Stack, Observability, Solr, and Sematext Cloud news and updates.

Sematext Newsletter
Create Status Page with Synthetics! Learn more