07. Priority Hints
Introduction
Section titled “Introduction”Priority hints allow you to indicate the relative importance of resources to the browser, helping optimize page load performance. By using attributes like fetchpriority and loading, you can guide browsers to prioritize critical resources and defer non-critical ones. Understanding priority hints helps create faster-loading web pages.
fetchpriority Attribute
Section titled “fetchpriority Attribute”Indicate resource priority:
<!-- High priority --><img src="hero.jpg" alt="Hero" fetchpriority="high">
<!-- Low priority --><img src="decoration.jpg" alt="Decoration" fetchpriority="low">loading Attribute
Section titled “loading Attribute”Control when resources load:
<!-- Lazy load --><img src="image.jpg" alt="Image" loading="lazy">
<!-- Eager load (default) --><img src="critical.jpg" alt="Critical" loading="eager">Common Use Cases
Section titled “Common Use Cases”Critical Images
Section titled “Critical Images”<img src="hero.jpg" alt="Hero image" fetchpriority="high" loading="eager">Above-the-Fold Content
Section titled “Above-the-Fold Content”<img src="logo.png" alt="Logo" fetchpriority="high">Below-the-Fold Content
Section titled “Below-the-Fold Content”<img src="footer-image.jpg" alt="Footer" loading="lazy" fetchpriority="low">Best Practices
Section titled “Best Practices”Prioritize Critical Resources
Section titled “Prioritize Critical Resources”<!-- Good: High priority for critical content --><img src="hero.jpg" alt="Hero" fetchpriority="high">
<!-- Good: Low priority for non-critical --><img src="decoration.jpg" alt="Decoration" fetchpriority="low">Use Lazy Loading
Section titled “Use Lazy Loading”<!-- Good: Lazy load below-the-fold images --><img src="image.jpg" alt="Image" loading="lazy">