Fix LCP Issues on Ezplatform (Loading Speed)

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. eZ Platform (now Ibexa DXP) is built on Symfony and uses a content repository with image variations, Twig templates, and an HTTP cache layer that all influence LCP.

eZ Platform-Specific LCP Causes

• Symfony HTTP cache disabled -- eZ Platform includes Varnish/Symfony reverse proxy support but many deployments run without it, meaning every request hits the full PHP render pipeline
• Image variation generation on first request -- eZ Platform generates image variations (crops, resizes) on-the-fly; first visitors wait for image processing
• Complex content tree queries -- pages pulling content from deep content trees trigger multiple repository queries
• Landing Page block rendering -- Landing Pages with multiple blocks each make their own content queries
• SiteAccess configuration overhead -- multi-site setups with SiteAccess routing add processing time per request

Fixes

1. Enable and Configure Varnish HTTP Cache

eZ Platform is designed to work with Varnish. Enable it:

# config/packages/ezplatform.yaml
ezplatform:
    http_cache:
        purge_type: varnish
        purge_servers:
            - http://varnish:80

If running without Varnish, enable Symfony's built-in HTTP cache:

// public/index.php
use Symfony\Component\HttpKernel\HttpCache\HttpCache;
use Symfony\Component\HttpKernel\HttpCache\Store;

$kernel = new AppKernel('prod', false);
$kernel = new HttpCache($kernel, new Store(__DIR__.'/../var/cache/http'));

Set TTL on content types in your controllers:

// In a content view controller
$response = new Response();
$response->setPublic();
$response->setSharedMaxAge(3600); // 1 hour
return $response;

2. Pre-Generate Image Variations

Configure image variations and warm the cache:

# config/packages/image_variations.yaml
ezplatform:
    system:
        default:
            image_variations:
                hero:
                    reference: null
                    filters:
                        - { name: geometry/scaledownonly, params: [1920, 600] }
                        - { name: format/webp }
                hero_mobile:
                    reference: null
                    filters:
                        - { name: geometry/scaledownonly, params: [640, 320] }
                        - { name: format/webp }
                thumbnail:
                    reference: null
                    filters:
                        - { name: geometry/scaledownonly, params: [400, 300] }

Warm image caches at deploy time:

# Generate all image variations
php bin/console ezplatform:images:generate-variations --variation=hero
php bin/console ezplatform:images:generate-variations --variation=thumbnail

3. Optimize Twig Templates for LCP

Use image variations in your content view templates:

{# templates/full/article.html.twig #}
{% set hero = ez_field_value(content, 'image') %}
{% if hero is not empty %}
  {% set heroVariation = ez_image_alias(hero, content.versionInfo, 'hero') %}
  {% set mobileVariation = ez_image_alias(hero, content.versionInfo, 'hero_mobile') %}
  <img
    src="{{ heroVariation.uri }}"
    srcset="{{ mobileVariation.uri }} 640w, {{ heroVariation.uri }} 1920w"
    sizes="100vw"
    width="{{ heroVariation.width }}"
    height="{{ heroVariation.height }}"
    alt="{{ ez_field_value(content, 'image').alternativeText }}"
    loading="eager"
    fetchpriority="high"
  >
{% endif %}

4. Optimize Landing Page Block Queries

Landing Page blocks can trigger N+1 queries. Use eager loading:

// Custom Landing Page block view with optimized query
class HeroBlockView extends AbstractBlockView
{
    public function getTemplateParameters(BlockValue $blockValue): array
    {
        $contentId = $blockValue->getAttribute('contentId');
        // Use a single query with relations
        $content = $this->contentService->loadContent($contentId);
        $location = $this->locationService->loadLocation(
            $content->contentInfo->mainLocationId
        );

        return [
            'content' => $content,
            'location' => $location,
        ];
    }
}

5. Preload LCP Image

{# In your pagelayout.html.twig #}
{% block head_style %}
  {{ parent() }}
  {% if app.request.pathInfo == '/' %}
    <link rel="preload" as="image" href="{{ heroImageUrl }}" type="image/webp">
  {% endif %}
{% endblock %}

Measuring LCP on eZ Platform

1. Symfony Profiler (dev mode) -- /_profiler shows query count, render time per template, and HTTP cache status
2. Varnish stats -- varnishstat shows cache hit ratio (target 90%+)
3. PageSpeed Insights -- test Landing Pages, article pages, and content listing pages
4. eZ Platform Admin -- check content model complexity and relation depth that affect query times

Analytics Script Impact

eZ Platform analytics is typically added via Twig templates or the eZ Platform Personalization bundle:

• Place GTM/GA in the pagelayout footer with async/defer
• eZ Personalization bundle can cause LCP regression if it triggers server-side content swaps -- profile its impact separately

Related

• Global LCP Guide
• CLS Issues