#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/performance-optimization/prefetching-and-preloading

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/performance-optimization/prefetching-and-preloading

Repovive

Prefetching and Preloading - Performance Optimization | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Prefetching and Preloading

Loading before needed

Load resources before the user needs them.

Preload: High priority, needed for current page.

<link rel="preload" href="font.woff2" as="font" />

Prefetch: Low priority, needed for future navigation.

<link rel="prefetch" href="next-page.js" />

Route prefetching: Load next page's code on hover.

Data prefetching: Fetch data before navigation.

Caution: Don't prefetch everything. Wastes bandwidth. Prefetch likely next actions only.