Fix SilverStripe LCP Issues | OpsBlu Docs

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

  1. Use PageSpeed Insights
  2. Check LCP element
  3. Optimize that specific element

Next Steps

Additional Resources

शीर्ष पर वापस जाएँ