A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore resource hints: preload, prefetch, and preconnect using a short example that you can inspect and change.
The Idea in Plain English
Preconnect can prepare the connection to an external origin before it is needed. Use it sparingly for origins the page will contact soon.
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="preconnect" href="https://cdn.example.net" crossorigin>
<link rel="stylesheet" href="https://cdn.example.net/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.
A browser may resolve the hostname and establish a network connection ahead of time.
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: preconnect to a static asset origin. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Preconnecting to dozens of domains, increasing the work instead of improving loading.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Preconnect can prepare the connection to an external origin before it is needed. Use it sparingly for origins the page will contact soon.
- A browser may resolve the hostname and establish a network connection ahead of time.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.