HTML Performance Controls

Priority for Images

Set the priority for loading images based on importance.

<img src="./image1" fetchpriority="low" alt="Low Priority Image" />
<img src="./image2" fetchpriority="high" alt="High Priority Image" />

Explanation:

Use fetchpriority="low" for less important images. Use fetchpriority="high" for more important images.

Lazy Loading for Images

Delay the loading of images until they're needed.

<img src="./image1" loading="lazy" alt="Lazy Loading Image" />

Explanation:

Add loading="lazy" to load images only when they come into view.

Establish Early Connection

Preconnect to a server for faster connections.

<link rel="preconnect" href="https://example.com" />

Explanation:

Use rel="preconnect" to establish a connection with a server in advance.

Preload Critical Assets

Load essential assets before they're needed.

<link rel="preload" as="script" href="./critical.js" />

Explanation:

Use rel="preload" to load critical scripts in advance.

Prefetch Resources for Faster Navigation

Fetch resources in advance for quicker page navigation.

<link rel="prefetch" href="./articles/" as="document" />

Explanation:

Use rel="prefetch" to fetch resources ahead of time, improving navigation speed.