Resource Hints and Debouncing

Introduction

User experience (UX) and user interface (UI) are among the most important aspects to consider when creating any application. It’s imperative to make the UX and UI as smooth and hassle-free as possible for the end user. To that end, several front-end optimization techniques are used by developers to ensure a smooth UX. Front-end optimizations might often be considered low-priority tasks when talking about API design. However, that is not the case, because the UI is what the user will interact with and what will connect the user with the API. This is why it’s important to understand front-end optimization techniques. In this lesson, we’ll focus on resource hints, specifically prefetching, preloading, and preconnecting.

Resource hints

Resource hints are hints or instructions that instruct the browser on managing specific resources—such as web pages, images, and so on—as well as which resources need priority in being fetched and rendered. They’re implemented using the rel attribute of the link element in HTML, as shown in the code snippet below. These hints are implemented by the front-end developers in their HTML pages.

Let’s now discuss each of these in more detail.

Prefetching

Prefetching is a resource hint that allows the browser to fetch resources that might be needed later. These resources are stored in the browser's cache. Let's imagine that a user is scrolling on the home page of a video-sharing website. It’s expected that a user will click on a video that will interest them. In this case, we would want to improve the subsequent video's load time by fetching the video in advance and storing it in the browser's cache. The prefetch directive is well suited for that. This example has been visualized in the illustration below

In the example above there are two scenarios, one with prefetching and one without. Without prefetching, the video request is only sent when the user clicks on the video. However, with prefetching, the video is fetched in advance, reducing latency.

The prefetch directive is implemented in the following way:

In the HTML snippet given above, we see that the browser has been instructed to fetch the page with the news story and the cover photo from the back-end API in advance. These ...