Fix SilverStripe LCP Issues

Improve SilverStripe LCP by enabling partial caching, using resampled image methods, and optimizing SilverStripe template includes.

Optimize LCP (Largest Contentful Paint) for better Core Web Vitals scores on SilverStripe sites.

LCP Thresholds

Good: ≤ 2.5 seconds
Needs Improvement: 2.5 - 4.0 seconds
Poor: > 4.0 seconds

Image Optimization

Use SilverStripe Image Resizing

File: themes/yourtheme/templates/Layout/Page.ss

<!-- Instead of original image -->
<img src="$HeroImage.URL" alt="$HeroImage.Title">

<!-- Use resized version -->
<img src="$HeroImage.FitMax(1920,1080).URL"
     alt="$HeroImage.Title"
     width="1920"
     height="1080"
     loading="eager">

Configure Image Formats

File: app/_config/config.yml

SilverStripe\Assets\Image:
  default_quality: 85

Preload Hero Images

File: themes/yourtheme/templates/Page.ss

<head>
    <% if $HeroImage %>
    <link rel="preload"
          as="image"
          href="$HeroImage.FitMax(1920,1080).URL">
    <% end_if %>
</head>

Template Caching

Enable Partial Caching

File: themes/yourtheme/templates/Layout/Page.ss

<% cached 'header', $LastEdited %>
    <header>
        <!-- Header content -->
    </header>
<% end_cached %>

PHP Caching

Enable OPcache

File: php.ini

opcache.enable=1
opcache.memory_consumption=256
opcache.max_accelerated_files=20000

CDN Integration

Configure Assets CDN

File: .env

SS_ASSETS_URL="https://cdn.yoursite.com/assets"

Database Optimization

Add Indexes

private static $indexes = [
    'Title' => true,
    'URLSegment' => true,
];

Reduce JavaScript

Combine Requirements

File: app/src/PageController.php

protected function init()
{
    parent::init();

    Requirements::combine_files(
        'app.js',
        [
            'themes/yourtheme/javascript/main.js',
            'themes/yourtheme/javascript/utils.js',
        ]
    );
}

Testing

Use PageSpeed Insights
Check LCP element
Optimize that specific element

Next Steps

Troubleshoot Tracking Issues

Additional Resources

Nach oben