Skip to content
Astro Cloudinary

Image Performance & LCP

Largest Contentful Paint (LCP) is one of the Core Web Vitals that measures loading performance. It represents the time it takes for the largest content element visible in the viewport to become visible to the user.

Since images are often the largest contentful element on a page, optimizing image loading is critical for achieving good LCP scores.

When to Prioritize Images

You should prioritize images that are:

  • Hero images: Large, prominent images at the top of the page
  • Above-the-fold content: Any image visible without scrolling
  • Critical to First Paint: Images that are essential to the initial page render

Using fetchpriority with CldImage

The CldImage component supports all standard HTML image attributes, including fetchpriority and loading. For critical images, you can set these attributes to prioritize loading:

A variety of colorful and appetizing breakfast dishes 
---
import { CldImage } from 'astro-cloudinary';
---
<CldImage
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
  alt="<Description>"
  sizes="100vw"
  fetchpriority="high"
  loading="eager"
/>

Understanding the Attributes

  • fetchpriority="high": Tells the browser to prioritize fetching this image over other resources
  • loading="eager": Disables lazy loading, ensuring the image loads immediately

When NOT to Prioritize Images

Avoid using fetchpriority="high" for:

  • Below-the-fold images: Images not visible on initial page load
  • Decorative images: Non-critical visual elements
  • Multiple images: Prioritizing too many images defeats the purpose
  • Images in carousels: Unless the first image is above-the-fold
---
import { CldImage } from 'astro-cloudinary';
---
<!-- ❌ Don't prioritize below-the-fold images -->
<div style="margin-top: 2000px;">
  <CldImage
    src="<Public ID>"
    width="<Width>"
    height="<Height>"
    alt="<Description>"
    fetchpriority="high"
  />
</div>


<!-- ✅ Let these lazy load instead -->
<div style="margin-top: 2000px;">
  <CldImage
    src="<Public ID>"
    width="<Width>"
    height="<Height>"
    alt="<Description>"
    sizes="100vw"
  />
</div>

Best Practices

1. Prioritize Only One or Two Images

Typically, only your hero image or the largest above-the-fold image should be prioritized.

---
import { CldImage } from 'astro-cloudinary';
---
<!-- Hero image - prioritized -->
<header>
  <CldImage
    src="hero-image"
    width="1920"
    height="1080"
    alt="Hero image"
    sizes="100vw"
    fetchpriority="high"
    loading="eager"
  />
</header>


<!-- Other images - lazy loaded -->
<section>
  <CldImage
    src="content-image-1"
    width="800"
    height="600"
    alt="Content image"
    sizes="(max-width: 768px) 100vw, 50vw"
  />
</section>

2. Combine with Responsive Sizing

Use the sizes prop along with priority to ensure the browser loads the appropriate image size:

<CldImage
  src="<Public ID>"
  width="<Width>"
  height="<Height>"
  alt="<Description>"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  fetchpriority="high"
  loading="eager"
/>

Learn more about Responsive Images

3. Optimize Image Dimensions

Ensure your width and height match the display size to avoid unnecessary data transfer:

<!-- ❌ Bad: Image is much larger than needed -->
<CldImage
  src="<Public ID>"
  width="4000"
  height="3000"
  alt="<Description>"
  style="max-width: 800px;"
  fetchpriority="high"
/>


<!-- ✅ Good: Image size matches display size -->
<CldImage
  src="<Public ID>"
  width="1600"
  height="1200"
  alt="<Description>"
  style="max-width: 800px;"
  fetchpriority="high"
  loading="eager"
/>

Measuring LCP

To measure LCP and verify your optimizations are working, you can use the Web Vitals JavaScript API:

<script>
  // Measure LCP using the Web Performance API
  const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    const lastEntry = entries[entries.length - 1];


    console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
    console.log('LCP Element:', lastEntry.element);
  });


  observer.observe({ type: 'largest-contentful-paint', buffered: true });
</script>

You can also use browser DevTools:

  1. Open Chrome DevTools
  2. Go to the Performance tab
  3. Click the record button and reload the page
  4. Look for the LCP marker in the timeline

Additional Resources

Learn More