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.