Preloading

Summary

Telling the browser to fetch a critical resource (a font, a hero image, a key script) as early as possible in the current page's load, ahead of when it's discovered normally.

• 1Add `<link rel="preload">` for a critical font or above-the-fold image.
• 2Compare page load timing before and after preloading a critical resource.
• 3Learn the difference between `preload` (needed now) and `prefetch` (needed later).