A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore preload warnings for unused resources using a short example that you can inspect and change.
The Idea in Plain English
Preload asks the browser to fetch a resource early when it will definitely be needed by the current page. Set as for the resource type and verify that the page actually uses it.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<head>
<link rel="preload" href="/fonts/reading.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/styles/site.css">
</head>What Each Part Does
- The link element declares a relationship such as a stylesheet or alternate language.
- The head holds page metadata, not the visible lesson content.
- rel describes the relationship between the current page and a linked resource.
- href is the URL or fragment destination of a link.
- type chooses the relevant kind of script, input, media or embedded object.
The browser may start downloading the resource before it discovers the normal reference.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: demonstrate a safe and an unsafe snippet and validate behavior focused on Preload Warnings for Unused Resources, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Preloading too many resources, using the wrong as value or omitting crossorigin for cross-origin fonts.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Preload asks the browser to fetch a resource early when it will definitely be needed by the current page. Set as for the resource type and verify that the page actually uses it.
- The browser may start downloading the resource before it discovers the normal reference.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.