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 into account how long 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.
Read the article about page load time to learn more about it.
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 website 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.
For more information on how Core Web Vitals work, check out the short video below:
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.
