Asset Loading Strategies and Executing Code off the Main Thread

There are situations in the life cycle of an application where loading more JavaScript is inevitable. This chapter details techniques to mitigate the impact of such situations. You’ll learn about asset loading optimizations such as a script element’s async, the defer attribute, the impact of type="module", and the link element’s rel (relationship) attribute’s preconnect, preload, and prefetch values. Next, you will further optimize script loading using Next.js’ Script component and its different options. The chapter wraps up with an exploration of reasons to execute JavaScript code off the main thread and an approach to do so.

In this chapter, we’ll cover the following topics:

• How to control asset loading more granularly with a script’s async and defer attributes, and links with preconnect, preload, and prefetch
• Further optimization opportunities...