Fix Slow LCP on Bludit (Speed Guide) | OpsBlu Docs

Fix Slow LCP on Bludit (Speed Guide)

Speed up Bludit LCP by enabling flat-file caching, compressing theme images, and minimizing plugin-injected CSS and JavaScript.

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. Bludit is a flat-file CMS (no database) built with PHP, so LCP performance depends on PHP execution speed, theme optimization, and hosting quality.

Bludit-Specific LCP Causes

  • Shared hosting PHP performance -- Bludit is often deployed on cheap shared hosting where PHP executes slowly, adding 500ms-2s to TTFB
  • Unoptimized theme images -- Bludit has no built-in image processing pipeline; uploaded images serve at original resolution
  • Plugin-injected scripts -- plugins like Simple Stats, Disqus Comments, and social sharing add synchronous JavaScript
  • No built-in CDN -- Bludit serves everything from the origin server with no asset CDN by default
  • Large content/ directory scans -- on sites with many pages, Bludit's flat-file reads slow down as the bl-content/ directory grows

Fixes

1. Enable Bludit's Built-In Cache

Bludit includes a page cache that stores rendered HTML. Enable it in the admin panel at Settings > General > Advanced:

// Or set directly in bl-content/databases/site.php
"opCache" => true,
"cacheTime" => 3600, // Cache pages for 1 hour

For more aggressive caching, create a simple full-page cache plugin:

<?php
// bl-plugins/simple-cache/plugin.php
class pluginSimpleCache extends Plugin {
    public function beforeAll() {
        if ($_SERVER['REQUEST_METHOD'] !== 'GET') return;
        $cacheFile = PATH_CACHE . md5($_SERVER['REQUEST_URI']) . '.html';
        if (file_exists($cacheFile) && (time() - filemtime($cacheFile)) < 3600) {
            readfile($cacheFile);
            exit;
        }
    }

    public function afterAll() {
        if ($_SERVER['REQUEST_METHOD'] !== 'GET') return;
        $cacheFile = PATH_CACHE . md5($_SERVER['REQUEST_URI']) . '.html';
        $content = ob_get_contents();
        file_put_contents($cacheFile, $content);
    }
}

2. Optimize Images in Theme Templates

Bludit themes output images without any processing. Add responsive images to your theme:

<!-- In your theme's php template (e.g., themes/yourtheme/php/page.php) -->
<?php
  $coverImage = $page->coverImage(true);
  if ($coverImage) {
    // Bludit stores images in bl-content/uploads/
    $imagePath = $coverImage;
?>
  <img
    src="<?php echo $imagePath; ?>"
    width="1200"
    height="630"
    alt="<?php echo $page->title(); ?>"
    loading="eager"
    fetchpriority="high"
    style="aspect-ratio: 1200/630; object-fit: cover; width: 100%;"
  >
<?php } ?>

Since Bludit has no image processing, optimize images before upload or use a build-time tool:

# Optimize all uploaded images with ImageMagick
find bl-content/uploads/ -name "*.jpg" -exec mogrify -strip -quality 80 -resize "1920>" {} \;
find bl-content/uploads/ -name "*.png" -exec mogrify -strip -resize "1920>" {} \;

3. Defer Plugin Scripts

Audit your active plugins at Settings > Plugins and disable any you do not use. For plugins you keep, modify their script loading:

<!-- In your theme's footer area or by overriding plugin output -->
<script>
// Defer non-critical plugin scripts until user interaction
document.addEventListener('DOMContentLoaded', function() {
  ['scroll', 'click', 'touchstart'].forEach(function(evt) {
    window.addEventListener(evt, function loadPlugins() {
      // Load Disqus
      var d = document.createElement('script');
      d.src = '//yoursite.disqus.com/embed.js';
      document.body.appendChild(d);

      // Remove listeners after first trigger
      ['scroll', 'click', 'touchstart'].forEach(function(e) {
        window.removeEventListener(e, loadPlugins);
      });
    }, { once: true });
  });
});
</script>

4. Add a CDN via .htaccess

Since Bludit runs on Apache (typically), add caching headers and consider fronting with Cloudflare:

# .htaccess in Bludit root
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

5. Preload Hero Image

Add a preload tag in your theme's <head> section:

<!-- In themes/yourtheme/php/head.php -->
<?php if ($WHERE_AM_I === 'page' && $page->coverImage(true)): ?>
  <link rel="preload" as="image" href="<?php echo $page->coverImage(true); ?>" />
<?php endif; ?>

Measuring LCP on Bludit

  • PageSpeed Insights -- primary tool since Bludit has no built-in analytics
  • Check TTFB separately -- run curl -o /dev/null -w "TTFB: %{time_starttransfer}s\n" https://yoursite.com to isolate server response time from rendering
  • Test with plugins disabled -- temporarily disable all plugins via admin panel and re-test to measure their LCP impact
  • Key pages to test: homepage (usually a post listing), individual posts (cover image is typically LCP element), and static pages

Analytics Script Impact

Bludit's plugin system means analytics are loaded via plugins. Common issues:

  • Simple Stats plugin -- Bludit's built-in analytics is lightweight but runs PHP on every request, adding to TTFB
  • Google Analytics plugins -- some Bludit GA plugins inject synchronous scripts; check that the output uses async
  • Manual <script> tags -- if you added analytics directly to your theme's head.php, ensure they use async or defer
Back to top