Optimizing Front‑End Resource Loading with preload and prefetch
The article explains how to improve front‑end performance by using the browser hints preload and prefetch—preload for critical resources like fonts, prefetch for resources needed later—showing practical examples, webpack automation, best‑practice guidelines, and common pitfalls to avoid.
Static resource loading is critical for front‑end page performance. This article introduces two browser resource hints – preload and prefetch – that help control the order and timing of resource loading.
Example scenario : a checkout page displays a coupon list whose background image loads only when the list expands, causing a noticeable delay on slow networks. The root cause is that the background image is fetched too late.
Two initial solutions are discussed:
Inline the image as a Base64 data‑URL (adds size to CSS, may increase first‑paint time).
Use JavaScript to preload the image.
preloadImage() {
const imgList = [
require('@/assets/imgs/error.png'),
require('@/assets/imgs/ticket_bg.png')
];
for (let i = 0; i < imgList.length; i++) {
const newIMG = new Image();
newIMG.src = imgList[i];
}
}The JS approach leverages the browser cache but requires manual timing and hard‑coded URLs.
The better solution is to use the native prefetch hint, which tells the browser to download resources during idle time.
What is prefetch? According to MDN, prefetch uses idle time to download documents that the user may navigate to soon. It is implemented via a <link rel="prefetch" href="..."> tag.
<head>
...
<link rel="prefetch" href="static/img/ticket_bg.a5bb7c33.png">
...
</head>When the coupon list expands, the image is served from the prefetch cache, eliminating the visual delay.
preload is a related hint that forces the browser to fetch a resource as early as possible, typically for resources needed immediately (e.g., fonts).
Example of preloading fonts:
<head>
...
<link rel="preload" as="font" href="<%= require('/assets/fonts/AvenirNextLTPro-Demi.otf') %>" crossorigin>
<link rel="preload" as="font" href="<%= require('/assets/fonts/AvenirNextLTPro-Regular.otf') %>" crossorigin>
...
</head>After adding these tags, the Flash of Unstyled Text (FOUT) disappears and the network panel shows the font requests occurring early.
Automation with webpack
Manually inserting link tags is cumbersome and hard‑codes hashed filenames. The preload-webpack-plugin works with html-webpack-plugin to inject the appropriate tags during the build.
const PreloadWebpackPlugin = require('preload-webpack-plugin');
...
plugins: [
new PreloadWebpackPlugin({
rel: 'preload',
as(entry) { // determine resource type
if (/\.css$/.test(entry)) return 'style';
if (/\.woff$/.test(entry)) return 'font';
if (/\.png$/.test(entry)) return 'image';
return 'script';
},
include: 'asyncChunks', // can be 'initial'|'allChunks'|'allAssets'
fileBlacklist: [/\.svg/], // exclude
fileWhitelist: [/\.script/] // include
})
]For finer control, webpack supports the special comment /* webpackPreload: true */ on dynamic imports:
import(/* webpackPreload: true */ 'AsyncModule');Best practices
Do not overuse preload ; most resources are handled automatically.
Use preload for critical resources hidden behind CSS/JS (e.g., fonts).
Use prefetch for resources likely needed later (e.g., next page assets, background images).
Set the as attribute for preload links; otherwise browsers may fail to load correctly.
Vue‑CLI defaults
Vue CLI automatically injects preload for initial render assets and prefetch for async chunks via @vue/preload-webpack-plugin . These can be customized or disabled via chainWebpack .
Summary and pitfalls
Both hints are non‑blocking and decouple loading from execution.
Use them judiciously; excessive preloading can waste bandwidth.
Font preloads must include crossorigin to share cache.
Resources must have proper cache‑control headers; otherwise prefetch may re‑request from the server.
HTTPS is required for prefetch in many browsers.
Browser support is still evolving; they act as progressive‑enhancement features.
vivo Internet Technology
Sharing practical vivo Internet technology insights and salon events, plus the latest industry news and hot conferences.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.