This article is the fifth edition of the Advent of Patterns series. In this series, running from December 1st to December 24th 2024, I will document one design or programming pattern I have noticed recently. Read more about this series.
Pre-rendering refers to rendering something before it is explicitly needed.
Pre-rendering can improved the perceived performance of an experience by ensuring that resources are ready when they are needed, rather than requested when they are needed.
There are a few places where the technology is used on the web.
There is a HTML link relation called rel=preload that lets you preload a resource, too. This can be placed toward the top of a page to tell the browser that it should start loading a resource as soon as possible. For example, you may tell the browser to preload a CSS file. According to MDN, links with the rel=preload relation will be loaded “before browsers’ main rendering machinery kicks in”. Adding the attribute will thus ensure a resource is available quickly for use in rendering a page.
In addition, I recently learned that Google Chrome’s address bar uses pre-rendering (unrelated to the rel=preload link above). The Chrome address bar aims to pre-render a web page after you type in a certain number of characters. In “Prerender pages in Chrome for instant page navigations,” Google notes:
When you type a URL into the Chrome address bar (also known as “the omnibox“), Chrome may automatically prerender the page for you, if it has high confidence you will visit that page, based on your previous browsing history.
The article later goes on to say:
Chrome will continually update its predictors based on your typing and selections.
- For a greater than 50% confidence level (shown in amber), Chrome proactively preconnects to the domain, but does not prerender the page.
- For a greater than 80% confidence level (shown in green), Chrome will prerender the URL.
This feature works by keeping count of what page you navigate to when you type in a certain string of characters in the address bar. For example, if you type in “sh” and you almost always go to Google Sheets, Google can start pre-connecting or pre-rendering Google Sheets. This makes page loading faster, provided the feature correctly guesses the page that you want to open.
Pre-rendering content can help improve loading because an asset can be retrieved before it is required.
The confidence description above is significant because pre-loading content arbitrarily is likely to result in a poor experience. For example, suppose I have only visited Google Sheets once and the browser preloads Google Sheets. I may want to go to another website, like my shopping list. If the browser tried to preload Sheets without confidence, it is wasting resources – requests are being made to a resource that is not used.
Preloading is related to the Precomputation pattern I have written about in the past, which relates to how doing work upfront can help improve the runtime of an application. An example of precomputation is creating search indices, where creating an index takes time but it also makes querying faster than a manual, non-index search.
In both pre-rendering and precomputation, work is done before the user interaction to help make the user interaction faster.
