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

Fix Slow LCP on Voog (Speed Guide)

Reduce Voog LCP by compressing hero images before uploading, simplifying Liquid-based layouts, and deferring third-party tracking scripts.

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. Voog is a hosted CMS with Liquid-based templates, a built-in media library, and multi-language support. Unlike fully closed website builders, Voog allows template customization via Liquid, giving more control over performance. LCP depends on image optimization, Liquid template efficiency, and the overhead of third-party scripts.

Voog-Specific LCP Causes

  • Unoptimized media library images -- Voog's CDN provides some resizing, but uploaded images may still serve at excessive resolution if the source is very large
  • Liquid template complexity -- deeply nested {% for %} loops and {% include %} calls in Liquid templates add server-side render time
  • Content area widget loading -- Voog's content areas render editable regions that include extra markup for the editing interface
  • Multi-language overhead -- multi-language sites load language switcher assets and duplicate content queries per language
  • Third-party scripts -- analytics, chat, and social media scripts added via the design editor's code injection

Fixes

1. Optimize Images Before Upload

# Resize to max 1920px wide, compress to 80% quality
mogrify -strip -quality 80 -resize "1920>" hero.jpg
cwebp -q 80 hero.jpg -o hero.webp

# Target: hero images under 200KB

Use Voog's built-in image transforms in Liquid templates:

{% comment %} Use Voog's image resize filter {% endcomment %}
{% if page.image %}
  <img
    src="{{ page.image | image_url: width: 1200 }}"
    width="1200" height="630"
    alt="{{ page.title }}"
    loading="eager"
    fetchpriority="high"
    style="aspect-ratio: 1200/630; width: 100%; height: auto; object-fit: cover;"
  >
{% endif %}

2. Streamline Liquid Templates

{% comment %} SLOW: Loading all blog posts with full content {% endcomment %}
{% for article in blog.articles %}
  {% include 'article-full' %}
{% endfor %}

{% comment %} FASTER: Limit fields and use inline rendering {% endcomment %}
{% for article in blog.articles limit: 6 %}
  <div class="article-card">
    {% if article.image %}
      <img src="{{ article.image | image_url: width: 400 }}"
           width="400" height="225" alt="{{ article.title }}" loading="lazy">
    {% endif %}
    <h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
    <p>{{ article.excerpt | truncate: 120 }}</p>
  </div>
{% endfor %}

3. Inline Critical CSS

In your Voog theme's layout template:

<head>
  <style>
    /* Critical above-fold CSS */
    body { font-family: system-ui, sans-serif; margin: 0; }
    .header { display: flex; height: 64px; align-items: center; }
    .hero { width: 100%; aspect-ratio: 16/9; }
    .content { max-width: 800px; margin: 0 auto; padding: 1rem; }
  </style>

  {% comment %} Defer full theme stylesheet {% endcomment %}
  <link rel="preload" href="{{ 'style.css' | stylesheet_url }}" as="style"
  <noscript>
    <link rel="stylesheet" href="{{ 'style.css' | stylesheet_url }}">
  </noscript>
</head>

4. Defer Third-Party Scripts

{% comment %} In your layout template, before </body> {% endcomment %}

{% comment %} Load analytics asynchronously {% endcomment %}
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_ID"></script>

{% comment %} Delay non-essential scripts {% endcomment %}
<script>
  // Load chat widget after 5 seconds
  setTimeout(function() {
    var s = document.createElement('script');
    s.src = 'https://chat-provider.com/widget.js';
    s.async = true;
    document.body.appendChild(s);
  }, 5000);
</script>

5. Optimize Multi-Language Pages

{% comment %} Only load language switcher when multiple languages exist {% endcomment %}
{% if site.languages.size > 1 %}
  <nav class="language-switcher">
    {% for lang in site.languages %}
      <a href="{{ page.url | localize: lang.code }}"
         {% if lang.code == page.language.code %}class="active"{% endif %}>
        {{ lang.code | upcase }}
      </a>
    {% endfor %}
  </nav>
{% endif %}

Measuring LCP on Voog

  1. PageSpeed Insights -- test homepage and content-heavy pages in each language
  2. Chrome DevTools Network tab -- check image sizes and script loading order
  3. Compare templates -- test pages using different Liquid templates to identify which are slowest
  4. Voog preview mode -- compare published page performance vs. editor preview (editor adds overhead)

Analytics Script Impact

  • Add analytics via Voog's Design > Code injection or directly in Liquid layout templates
  • Place all tracking scripts before </body>, not in <head>
  • Voog's built-in visitor statistics add minimal overhead
  • Avoid stacking multiple analytics tools (GA + Hotjar + Facebook Pixel, etc.)
Nach oben