# Boosting LCP: A Guide to fetchpriority="high" In the world of web performance, every millisecond counts. We’ve all been there: you open a site, the text loads, but the main hero image—the thing you actually want to see—stays blank for an extra second. That lag often kills your **Largest Contentful Paint (LCP)** score. Enter `fetchpriority`. This HTML attribute is a game-changer for telling browsers exactly which assets deserve the "VIP treatment." --- ## What is `fetchpriority`? The `fetchpriority` attribute is a browser hint that signals the relative importance of a resource. While browsers are generally smart at guessing what to load first, they aren't psychic. They might prioritize a late-discovery script over the massive hero image that is actually the most important thing on the screen. By adding `fetchpriority="high"`, you’re moving that asset to the front of the line. ### How it Works When a browser parses a page, it assigns a priority level (Low, Medium, High, or Very High) to every resource. * **Images** are usually "Low" or "Medium" by default. * **Scripts** and **CSS** are usually "High." By manually setting the priority, you override these defaults to ensure your "hero" elements don't get stuck behind less critical background tasks. --- ## Why Use It? (The LCP Connection) **Largest Contentful Paint (LCP)** measures when the largest image or text block becomes visible. If your hero image is the LCP element, `fetchpriority="high"` can: 1. **Reduce Queueing Time:** The browser starts downloading the image sooner. 2. **Optimize Bandwidth:** It allocates more "pipe" to that specific asset. 3. **Improve UX:** Users see the "meat" of your page faster, reducing bounce rates. > **Note:** Real-world tests have shown that correctly implementing `fetchpriority` can improve LCP by **20-30%** in many cases. --- ## How to Implement It You can apply this attribute to ``, ``, `