We'll walk you through what are the most common reasons that are causing your page to rerender and how to troubleshoot the rendering performance using freely available tool Chrome DevTools.
Rendering events
There are four different events, which can cause rendering of the web page. The first of which is layout invalidation. Moreover, page layout invalidation can be caused by a DOM (Document Object Model) change.
There is several reasons, why the page’s layout might get invalidated:
- Responsive design problems
- JavaScript errors
- Content loading issues
- Positioning errors
- Dynamic content changes
These are just a few, however, there are many more reasons why this event might get triggered.
Another rendering event is the execution of a page layout. Furthermore, this process entails layout or reflow, where the browser calculates the layout of a page, based on the styles, dimensions, and positioning rules.
Next on our list is the recalculate style event, where the browser recalculates the styles that are being applied to the elements on the page to maintain its visual representation.
Lastly, the fourth rendering event is the Scroll event, which fires whenever a nested view is scrolled. In other words, whenever a user scrolls through a scrollable embed on a web page.
Properties
As we mentioned before, some properties can give us further insight into what caused a rendering event to fire.
- Layout invalidated – this one is for Layout records and it gives us the information about the code that caused the layout to be invalidated.
- Nodes that need layout – another one for Layout records, however, this one tells us the number of marked nodes that need layout before the relayout starts.
- Layout tree size – this one is also for the Layout records, and it gives us the total number of nodes under the relayout root.
- Layout scope – possible values for this property are Partial or Whole Document. Furthermore, for the Partial value, the re-layout boundary is a portion of the DOM.
- Elements affected – this property is for Recalculate style records, and as its name suggests, it gives us several elements that were affected by a style recalculation.
- Styles invalidated – another one for Recalculate styles records, which provides us information about the code that caused style invalidation.
Troubleshooting rendering performance
Chrome’s DevTools can be very useful for advanced analysis and discovering issues with a web page if you know how to use it. Furthermore, we’re going to delve into its rendering analysis functions, which can give us information about painting processes, layout shift of regions, layer borders, real-time rendering stats and more.
First of all, you’ll need to open up the Rendering tab in the Chrome DevTools, to be able to use the functions we listed above.
You can do so by clicking on the three dots in the top right corner of the DevTools window, hovering over the More tools option to expand the submenu and selecting Rendering. This will open up the Rendering tab at the button of the DevTools. Here you can simply enable the functions it offers, some of which we’ll describe further here.
Highlight repainted elements with Paint flashing
The first option we can enable is Paint flashing, which will cause elements, on the page you’re auditing, to flash green. Keep in mind that this functionality might become overwhelming if you’re auditing a website with elements that are constantly moving.
Moreover, it is worth mentioning that the paint process is usually the longest-running step of the rendering process.
Highlight Layout Shift Regions
This is another tool that flashes elements, however it does so for those elements that cause layout shifts. Furthermore, it flashes with a purple colour. It is worth noting that it’s only good for whenever we can actually see the elements shifting, which we might miss due to fast load speed or if elements are out of view when the page loads.
Display layers and tiles with Layer borders
Compositor layers are outlined with orange, while tiles are outlined with cyan borders. Furthermore, it’s important to monitor these layers, because there is a fine balance between good looks and optimal performance, which we need to maintain. In other words, each layer takes up memory and resources to manage and if there are too many, it may hurt the performance of the web page.
View frames per second in real-time with Frame Rendering Stats
Enabling this option, you’ll get a small rectangle in the top left corner of your view, displaying real-time information such as:
- Estimated frames per second as the page runs
- Frame timeline as a plot of three types of frames – successfully rendered, partially rendered, and dropped frames
- State of GPU raster – on or off
- GPU memory usage and maximum memory size
Identify Scroll performance issues
This option highlights elements in teal that can slow down scrolling, harming page performance. Furthermore, this includes all main-thread scrolling situations, such as touch and wheel event handlers and more.
Measuring rendering performance
To measure the rendering times of events on a page, we need to use the Performance tab in the DevTools. However, this will not only give us a timeline for rendering events but also for everything else that happens during page load.
But before we jump into it, we need to open the web page we want to audit in incognito mode, which will eliminate any extensions that might affect the load time. After that, we’re ready to audit the web page inside the Performance tab.
When you first open the Performance tab, you’ll see that you have 2 buttons available in the middle. To perform a page load audit, you need to click the second one (reload button). After that, you’ll need to wait a couple of seconds until it automatically stops and gives you the results.
Moreover, what it’s doing during that wait time, is simulating a user visiting and interacting with the page, based on which it will later give you metrics and other information about the page load. Among these results, you will also find the triggered rendering events and how long they took to finish.
Conclusion
To conclude, we learned about what exactly rendering events are, what information we can get from them, and how big of an impact they might have on the performance of a web page. More importantly, we explored how to use readily available tools such as Chrome’s DevTools to audit a web page and gain detailed information about a page load process.
