By Irina Diaconu 
Satisfied visitors explore websites by interacting with the content and taking the desired actions. For most of them, a site that loads quickly is the starting point of a positive user experience. When a site takes too long to render, you will deal with unhappy visitors who become frustrated and immediately close the page. So, how to increase the number of happy visitors? By monitoring rendering time and optimizing it.
|
Why is a quick rendering time important to keeping visitors engaged? Studies show that your website or mobile app has to become interactive with the users quickly. Otherwise, they’ll just leave.
|
|---|
Rendering Time: What Does It Mean?
The rendering time measures how long it takes for a website’s content to appear on the screen and be user-ready. It starts when the browser begins processing the page and ends once everything is fully visible. A fast-loading content leads to a short render time, improving the overall user experience.
We invite you to get through our guide on how to monitor rendering time and improve it. These actions will help you achieve a smoother, faster user experience for your visitors.
Track Rendering Metrics
Rendering metrics allow you to perform measurements that indicate how quickly and smoothly the visual content appears until it becomes functional for users. Therefore, these metrics track aspects related to speed and stability during the loading process.
What Rendering Metrics to Track?
Some of the most efficient metrics to monitor render time are:
- First Contentful Paint (FCP) – it measures how quickly the first bit of content is displayed on a webpage. It offers users a visual indicator that the site is loading. It is a key rendering metric because the faster it loads, the quicker users feel the site is responding. A good score helps reduce the perception of waiting time.
- Largest Contentful Paint (LCP) – it tracks the time needed for a webpage to load the largest visible element (text, image, or video). This metric is important when monitoring rendering time because it reflects how fast users can see and interact with the primary content. When this feels shorter, users remain engaged with the website.
- Cumulative Layout Shift (CLS) – it determines the stability of the content on a webpage. The metric tracks any sudden layout movements that may occur as the page is being rendered. The elements inspected are the text, images, videos, or buttons. Unstable elements create a frustrating user experience, quickly driving visitors away from the site.
How to Track Them?
You can efficiently track rendering metrics using testing tools like Google Lighthouse, WebPageTest, or Wattspeed. These tools let you simulate different internet speeds or device types to determine how well your site performs under various conditions before real users encounter any problems.
- Google Lighthouse is an open-source tool developed by Google. Its primary purpose is to analyze website efficiency, search engine optimization, accessibility, and more. The tool is free and provides access to data reports and directions for developers, SEO experts, and site owners to increase user experience, boost search engine visibility, and improve site loading speed.
- WebPageTest is another open-source tool that is available for free. By running speed tests across different browsers and locations, the tool offers data on rendering speed, load time, and essential key metrics. As such, the tool helps identify issues that need fixing for optimizing the website and ensures users have a smooth.
- Wattspeed is a web optimization tool designed to analyze and provide detailed insights into performance factors, best practices, SEO, and more. It uses real and synthetic monitoring to comprehensively view a website’s performance, capturing data from real user experiences and simulated tests. The tool gathers significant data about your website, including rendering metrics. Wattspeed uses Lighthouse with added upgrades that make it even more effective. It allows you to switch regions, easily enabling URL monitoring from multiple locations. The Lighthouse report lets you see the metrics’ values and tips that help you achieve a better score. How exactly?
Real user and synthetic data: rendering metrics are collected by using both RUM and synthetic monitoring. The metrics monitor key aspects of your website’s performance:
- when the first text or image appears on the screen — First Contentful Paint (FCP)
- the time it takes for the largest text or image to load — Largest Contentful Paint (LCP)
- how much visible content shifts around while the page loads — Cumulative Layout Shift (CLS).
FCP, LCP, and CLS are great metrics to consider. Besides them, Wattspeed also calculates the Speed Index. This metric measures the average time required by the content above the fold to be displayed on the screen. While metrics like FCP and LCP measure specific points in time, Speed Index is important for rendering as it shows how smoothly and quickly the visual content appears.
Opportunities and diagnostics sections: they flag any errors or warnings, making it easier to spot issues that need fixing to improve your site’s speed and stability. You can access improvement tips and potential savings by clicking on any of the metrics.
|
Google Lighthouse in Wattspeed You can run Lighthouse snapshots directly in Wattspeed. What is great about Wattspeed is that it automates the snapshots over an extended period, allowing you to track changes and monitor trends without manually running tests each time. |
|---|
What Values Determine a Good or a Poor Score?
Every rendering metric has defined limits that indicate its performance level. You can easily speed up your render time with the right tools to evaluate and improve these scores.
|
Metric |
Good score |
Poor score |
|---|---|---|
|
First Contentful Paint (FCP) |
The first piece shows up in 1 to 2 seconds, providing a quick visual indication that the page is loading. |
Delayed content as the first piece of content takes at least 4 seconds to appear, so the page feels slow and unresponsive. |
|
Largest Contentful Paint (LCP) |
The main content usually loads in less than 2.5 seconds, providing a fast and engaging experience. |
The main content loads slower, 4 seconds or more, which increases the waiting time. |
|
Cumulative Layout Shift (CLS) |
Stable layout with elements that remain in place and minimal unexpected shifts. |
High layout shifts, with content that moves during the loading process of the elements. |
How to Improve Rendering Metrics?
The main purpose of rendering metrics is to give you an insight into how fast visitors see the page’s content and whether elements move around during the loading process. Improving them will take you one step closer to achieving a responsive website.
|
First Contentful Paint (FCP) | ||
|---|---|---|
|
What to do? |
How to improve? | |
|
Fast-up content delivery. |
choose a Content Delivery Network (CDN) | |
|
Get rid of render-blocking resources. |
defer no-criptical scripts and focus on loading essential CSS | |
|
Decrease loading times on repeat visits. |
use page caching | |
|
Reduce at minimum the resources required. |
optimize critical path rendering | |
|
Largest Contentful Paint (LCP) | ||
|
What to do? |
How to improve? | |
|
Speed up content delivery. |
use a faster response for HTML pages | |
|
Minimize images of large sizes while maintaining their quality. |
choose the appropriate file format, such as WebP, and compress images | |
|
Choose to load media just before it comes into view. |
opt for lazy loading. | |
|
Make sure the server infrastructure is appropriate for the traffic. |
upgrade to a quicker web hosting service. | |
|
Cumulative Layout Shift (CLS) | ||
|
What to do? |
How to improve? | |
|
Decrease layout shifts. |
set the width and height of the videos and images. | |
|
Avoid animations that may affect the layout. |
use CSS transitions. | |
|
Reduce layout shifts caused by pop-ups and banners. |
reserve space for pop-ups and banners. | |
|
Avoid pushing content around. |
use font-display. | |
By implementing these tips, you can effectively reduce FCP, LCP, and CS and achieve a faster and more stable browsing experience.
Check Out Visual Tools to Monitor Rendering Time
Visual tools allow you to understand the order in which your site’s elements load, making it easier to spot any delays that might be slowing things down. These instruments are great for monitoring rendering time efficiently.
What Visual Tools to Use?
- Filmstrip is a great performance tool that makes a difference in the rendering process. Using a sequence of screenshots, the tool visually catches the loading process. The screenshots are captured regularly to see how the page loads over time. They allow you to detect when different elements appear on the page and the possible delays.
- Waterfall chart is a simple tool that helps you see how a webpage loads, breaking down each step in the process. It shows how long different elements—like images, scripts, or stylesheets—load and in what order. The tool helps you spot any slowdowns or delays and determine which parts are causing them.
How Wattspeed Filmstrip View Helps Prioritize Optimizations?
Wattspeed’s filmstrip player illustrates the page’s loading process. It uses multiple screenshots taken over time to show the page loading process. This is a great way to catch rendering delays. It allows you to:
- play/pause: click to start or stop the screenshot sequence.
- watch previous/next frame: use these to move backward or forward through the frames in the filmstrip.
- select timespan checkbox: when checked, the table displays only the requests made up to the current frame.
- Select the tick checkbox: when checked, it only shows the requests that are part of the selected frame.
Track Progress Over Time
Once you detect the possible issues and take the necessary actions, you have to track the progress to better understand the impact of your efforts.
Advantages of Wattspeed’s History Report
The History report shows how the most important rendering metrics have changed over time, giving you a clear picture of your site’s trends.
- Performance view: allows you to monitor rendering metrics’ efficiency over time. When you analyze your website from different locations, you can access the performance metrics based on the desired location.
- Chrome User Experience Report (CrUX): provides information on how real Chrome users experience your website, relying on data collected for the past 12 months. It mirrors Lighthouse metrics in real-life conditions, helping you see how much improvement is needed to meet rendering metrics’ standards.
Set Up Alerts for Slowdowns
Setting up alerts in a web performance tool allows you to track key metrics and set limit values that activate notifications when exceeded. As soon as the slowdown happens, you will receive an alert (via email or Slack), which allows you to take the right actions immediately.
Configure Alerts in Wattspeed
Wattspeed allows you to set up alerts for metrics so you can act fast if the website slows down. There is an alerts section accessible via the navigation sidebar that lets you to:
- create an alert, add a name, and write an optional description for quick identification.
- select the webpage for which you want to set the alert.
- input conditions for various metrics: e.g. CLS > 0.1 (CLS is higher than 0.1 percentage of the total viewport), LCP > 2500 ms (LCP takes longer than 2500 ms). To make things easier, Wattspeed recommends good practices for each metric available.
- add an email address/Slack channel to send alerts when the conditions are met.
Optimized vs. Unoptimized Website.The Impact on Rendering Time
The comparison below highlights how rendering metrics impact loading speed and server response time and influence the overall user experience.
|
Aspect |
Optimized Website |
Unoptimized Website |
|---|---|---|
|
Loading Speed |
Typically under 2-3 seconds which provides a smooth user experience. |
Needs at least 5 seconds to fully load, which leads to user frustration. |
|
Server Response Time |
Quick server response, usually less than 200 ms, speeding up the loading process. |
Slow server response, in most cases above 500 ms, delays content delivery to the user. |
What are the benefits of website optimization? One major advantage is improving rendering time. When optimized, the site loads faster, stays stable as elements appear, and responds quickly, keeping visitors engaged and satisfied. In contrast, an unoptimized site often suffers from slow rendering times. For users, this makes it feel slow and unstable, with content shifting around and long loading times, leading to frustration and a higher chance of users leaving.
Tracking metrics that indicate render time offer insights into how quickly the content is displayed and whether the page stays stable during the loading process. Using rendering metrics can greatly impact website performance, and with the right tools, monitoring and improving them can be surprisingly straightforward.