[ font ] preload v.s. prefetch

Preload

link rel="preload" href="static/whatever/whatever.otf" as="font" />

WARNING:

The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it Please make sure it has an appropriate `as` value and it is preloaded intentionally.

The resource http://localhost:3000/static/whatever/whatever.otf was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Solution : use prefetch instead of preload

“preload” is a declarative fetch, allowing you to force the browser to make a request for a resource without blocking the document’s onload event.
“Prefetch” is a hint to the browser that a resource **might** be needed.

 

ref : https://developers.google.com/web/tools/lighthouse/audits/preload?utm_source=lighthouse&utm_medium=unknown

, https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s