Fix Kentico Kontent (Kontent.ai) LCP Issues | OpsBlu Docs

Fix Kentico Kontent (Kontent.ai) LCP Issues

Improve Kentico Kontent LCP by using image transformation API, reducing Delivery API payload sizes, and enabling frontend SSG/ISR.

General Guide: See Global LCP Guide for universal concepts and fixes.

What is LCP?

Largest Contentful Paint measures when the largest content element becomes visible. Google recommends LCP under 2.5 seconds. Kontent.ai (formerly Kentico Kontent) is a headless CMS with a Delivery API and built-in image transformation. LCP depends on your frontend rendering strategy and how you use Kontent.ai's asset pipeline.

Kontent.ai-Specific LCP Causes

  • Client-side API fetching -- fetching content items in the browser adds JS + network + render time before LCP
  • Unoptimized asset URLs -- Kontent.ai assets support URL-based transforms but most implementations use default URLs
  • Large Delivery API payloads -- requesting full content items with all elements and linked items when only a few fields are needed
  • Rich text resolution overhead -- Kontent.ai's rich text element requires client-side resolution of inline content items and links
  • Frontend SPA hydration -- React/Next.js/Gatsby hydration delays before content is visible

Fixes

1. Use SSG/ISR with Kontent.ai SDK

// Next.js with Kontent.ai JavaScript SDK
import { DeliveryClient } from '@kontent-ai/delivery-sdk';

const client = new DeliveryClient({ projectId: process.env.KONTENT_PROJECT_ID });

export async function getStaticProps() {
  const response = await client.item('homepage')
    .elementsParameter(['hero_image', 'hero_title', 'seo_metadata'])
    .toPromise();

  return {
    props: { page: response.data.item },
    revalidate: 60,
  };
}

2. Use Kontent.ai Image Transformations

Kontent.ai assets support URL-based transforms:

// Kontent.ai image URL optimization
function optimizeKontentImage(assetUrl, { width = 800, quality = 80, format = 'webp' } = {}) {
  if (!assetUrl) return '';
  return `${assetUrl}?w=${width}&q=${quality}&fm=${format}&fit=crop`;
}

function HeroImage({ asset }) {
  return (
    <img
      src={optimizeKontentImage(asset.url, { width: 1920 })}
      srcSet={`
        ${optimizeKontentImage(asset.url, { width: 640 })} 640w,
        ${optimizeKontentImage(asset.url, { width: 1024 })} 1024w,
        ${optimizeKontentImage(asset.url, { width: 1920 })} 1920w
      `}
      sizes="100vw"
      width={asset.width}
      height={asset.height}
      alt={asset.description || ''}
      loading="eager"
      fetchPriority="high"
    />
  );
}

3. Reduce Delivery API Payloads

// Use elementsParameter to request only needed fields
const response = await client.items()
  .type('blog_post')
  .elementsParameter(['title', 'slug', 'thumbnail', 'summary', 'date'])
  .limitParameter(10)
  .depthParameter(0) // Don't resolve linked items
  .toPromise();

4. Preload LCP Image

<Head>
  <link rel="preconnect" href="https://assets-us-01.kc-usercontent.com" />
  <link rel="preload" as="image" href={optimizeKontentImage(heroAsset.url, { width: 1920 })} />
</Head>

Measuring LCP on Kontent.ai

  1. Kontent.ai Delivery API analytics -- check response times in the project dashboard
  2. Chrome DevTools Network tab -- filter for kc-usercontent.com to see asset delivery times
  3. Compare SSG vs CSR -- static generation eliminates the API waterfall
  4. Test content types: landing pages, blog posts, product pages each have different API call patterns

Analytics Script Impact

Kontent.ai is headless; use your frontend framework's deferred loading. Kontent.ai's Web Spotlight preview adds its own script -- ensure this is excluded from production builds.

返回顶部