Fix LCP Issues on Zyro (Loading Speed) | OpsBlu Docs

Fix LCP Issues on Zyro (Loading Speed)

Improve Zyro LCP by compressing hero images, limiting custom code injections, and choosing AI-builder templates with lighter asset loads.

Largest Contentful Paint (LCP) measures how quickly the main content of your Zyro site loads. Poor LCP directly impacts SEO rankings and conversion rates.

Target: LCP under 2.5 seconds Good: Under 2.5s | Needs Improvement: 2.5-4.0s | Poor: Over 4.0s

For general LCP concepts, see the global LCP guide.

Zyro-Specific LCP Issues

1. Image Optimization in Zyro

The most common LCP issue on Zyro sites is unoptimized images.

Problem: Large hero images or featured images loading slowly.

Diagnosis:

  • Run PageSpeed Insights
  • Check if hero/featured image is flagged as LCP element
  • Look for "Properly size images" or "Serve images in next-gen formats"

Solutions:

A. Use Zyro's Built-in Image Optimization

Zyro automatically optimizes images, but you can help:

Before Uploading:

  1. Resize to appropriate dimensions:

    • Desktop hero: 1920px width max
    • Mobile hero: 750px width max
    • Use image editing tools

  2. Compress images:

    • Target: Under 200KB for hero images
    • Use TinyPNG or Squoosh
    • Balance quality vs. file size

  3. Use correct format:

    • Photos: JPG or WebP
    • Graphics/logos: PNG or SVG
    • Avoid large PNG files for photos

Upload Process:

  1. In Zyro editor, select your image element
  2. Click Change Image → Upload optimized file
  3. Zyro will further optimize via CDN
  4. Publish and test

B. Zyro's Automatic Optimization Features

What Zyro Does Automatically:

  • Serves responsive images (different sizes for different screens)
  • Uses CDN for fast delivery worldwide
  • Automatic WebP conversion for supported browsers
  • Image lazy loading for below-fold images

No Code Required: Zyro handles optimization when you upload via the editor.

2. Custom Code Impact on LCP

Custom tracking and third-party scripts can delay LCP.

Identify Custom Code Impact

Diagnosis:

  1. Run PageSpeed Insights on your site
  2. Look for "Reduce JavaScript execution time"
  3. Check "Avoid enormous network payloads"
  4. Note custom scripts in diagnostics

Common Culprits:

  • Multiple tracking pixels in header
  • Synchronous script loading
  • Heavy JavaScript libraries
  • Custom code without async/defer

Optimize Custom Code Placement

Bad (Blocks Rendering):

<!-- In Zyro Header Code -->
<script src="https://example.com/heavy-script.js"></script>
<script>
  // Lots of inline JavaScript
  // Blocks page rendering
</script>

Good (Async Loading):

<!-- In Zyro Header Code -->
<script async src="https://example.com/heavy-script.js"></script>
<script>
  // Minimal inline code
  // Defer heavy operations
</script>

Better (Defer to After Page Load):

<script>
  window.addEventListener('load', function() {
    // Load heavy scripts after LCP
    var script = document.createElement('script');
    script.src = 'https://example.com/heavy-script.js';
    document.body.appendChild(script);
  });
</script>

Consolidate Tracking Through GTM

Instead of multiple pixels in custom code:

Before (Multiple Scripts):

<!-- GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXX"></script>
<script>/* GA4 code */</script>

<!-- Meta Pixel -->
<script>/* Facebook Pixel code */</script>

<!-- Other tracking -->
<script>/* More tracking */</script>

After (Single GTM Container):

<!-- Just GTM -->
<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXX');</script>

Benefits:

  • One script load instead of many
  • Better async handling
  • Easier to manage
  • Less blocking

See GTM Setup for implementation.

3. Zyro Template Performance

Different Zyro templates have different performance characteristics.

AI-Generated vs Manual Templates

AI-Generated Templates (Recommended):

  • Optimized by Zyro's AI
  • Clean, efficient code
  • Better image handling
  • Faster LCP

Manually Customized Templates:

  • May have custom CSS/JS
  • Potential performance issues
  • Consider reverting to original

Template-Specific Optimizations

Test Your Template:

  1. Create test page with minimal content
  2. Run PageSpeed Insights
  3. Note baseline LCP score
  4. Compare to production site

If Template is Slow:

  • Try different Zyro template
  • Contact Zyro support
  • Remove unnecessary customizations
  • Optimize custom sections

4. Zyro CDN and Hosting

Zyro uses a global CDN, but optimization is still important.

Zyro CDN Benefits

Automatic:

  • Global content delivery
  • Image optimization
  • Gzip compression
  • HTTP/2 support

No Configuration Needed: Zyro handles CDN automatically.

Ensure Assets Use Zyro CDN

Upload Assets to Zyro (Not External Hosts):

Bad:

<!-- External, slow loading -->
<img src="https://yourserver.com/image.jpg">

Good:

<!-- Zyro CDN, optimized -->
<img src="https://cdn.zyro.com/...">

Upload images, files, and assets directly to Zyro for automatic CDN delivery.

5. Third-Party Widgets and Embeds

Social media widgets, chat tools, and other embeds impact LCP.

Common Third-Party Impact

Slow Third-Party Elements:

  • Facebook page plugins
  • Instagram feeds
  • Twitter timelines
  • Live chat widgets
  • Review/rating widgets
  • YouTube embeds above fold

Optimize Third-Party Widgets

Defer Non-Critical Widgets:

<script>
  // Load chat widget after page load
  window.addEventListener('load', function() {
    setTimeout(function() {
      // Insert chat widget code here
      var chatScript = document.createElement('script');
      chatScript.src = 'https://chat-provider.com/widget.js';
      document.body.appendChild(chatScript);
    }, 3000); // Wait 3 seconds after load
  });
</script>

Use Lazy Loading for Embeds:

<!-- YouTube with lazy loading -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  loading="lazy"
  width="560"
  height="315"
></iframe>

6. Font Loading Issues

Custom fonts can delay LCP if not optimized.

Zyro Font System

Zyro provides built-in fonts that are pre-optimized:

Using Built-in Fonts (Recommended):

  • Already optimized by Zyro
  • Faster loading
  • No additional configuration needed

Custom Fonts (Requires Optimization):

If adding custom fonts via CSS:

Bad (Blocks Rendering):

@import url('https://fonts.googleapis.com/css2?family=CustomFont');

Good (With font-display):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=CustomFont&display=swap" rel="stylesheet">

Best Practice:

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Show fallback immediately */
  font-weight: 400;
  font-style: normal;
}

Testing & Monitoring

Test LCP

Tools:

  1. PageSpeed Insights - Lab and field data
  2. WebPageTest - Detailed waterfall
  3. Chrome DevTools - Local testing (Ctrl+Shift+I → Performance)

Test Your Zyro Site:

  1. Enter your site URL in PageSpeed Insights
  2. Wait for results
  3. Check LCP score in Core Web Vitals
  4. Review "Opportunities" for specific issues

Test Different Devices:

  • Desktop
  • Mobile (most important)
  • Tablet

Identify LCP Element

In PageSpeed Insights:

  • Scroll to "Diagnostics" section
  • Look for "Largest Contentful Paint element"
  • Shows which element is causing slow LCP

In Chrome DevTools:

  1. Open DevTools (F12)
  2. Performance tab
  3. Record page load
  4. Look for LCP marker
  5. Click to see element

Monitor LCP Over Time

Chrome User Experience Report (CrUX):

  • Real user data in PageSpeed Insights
  • Shows 28-day trend
  • Mobile and desktop separate

Google Search Console:

  • Core Web Vitals report
  • Shows pages failing LCP
  • Impact on SEO

Zyro-Specific Quick Wins

Start here for immediate LCP improvements:

  • Compress hero image to < 200KB before uploading
  • Remove custom code from header (move to footer if possible)
  • Consolidate tracking through GTM
  • Remove unused third-party widgets
  • Use Zyro's built-in fonts instead of custom fonts
  • Upload all images to Zyro (not external links)
  • Defer chat widgets and social embeds
  • Remove custom JavaScript from header
  • Test on mobile device (primary concern)
  • Use AI-generated templates for best performance

Performance Checklist

Before and after optimization:

Before Optimizing:

  • Run PageSpeed Insights baseline test
  • Document current LCP score
  • Identify LCP element
  • List all custom code in header
  • Note third-party widgets

After Each Change:

  • Save and publish site
  • Wait 5 minutes for cache
  • Run PageSpeed Insights again
  • Compare LCP score
  • Document improvement

Final Verification:

  • LCP under 2.5 seconds
  • Tested on mobile
  • No JavaScript errors
  • All tracking still works
  • Site functionality intact

When to Contact Zyro Support

Consider reaching out to Zyro support if:

  • LCP consistently over 4 seconds after optimizations
  • Template appears to have performance issues
  • CDN serving slowly in your region
  • Images not optimizing properly
  • Technical issues with platform

Zyro Support:

Next Steps

For general LCP optimization strategies, see LCP Optimization Guide.

返回顶部