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

Fix LCP Issues on SITE123 (Loading Speed)

Improve Site123 LCP by compressing uploaded images before adding, choosing lightweight templates, and limiting injected third-party code.

Largest Contentful Paint (LCP) measures how quickly the main content of your Site123 website 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.

Site123-Specific LCP Issues

1. Heavy Site123 Templates

The template you choose significantly impacts LCP.

Problem: Templates with complex animations, video backgrounds, or heavy styling load slowly.

Diagnosis:

  • Run PageSpeed Insights on your Site123 site
  • Check if LCP time is high (over 2.5s)
  • Compare different templates using Site123's template preview

Solutions:

A. Choose Lighter Templates

When selecting a Site123 template:

  • Avoid templates with full-screen video backgrounds
  • Choose templates with simpler hero sections
  • Select templates with minimal animations
  • Test template load speed before committing

Best performing template styles:

  • Clean, minimal designs
  • Text-focused hero sections
  • Simple image headers
  • Lightweight navigation

B. Simplify Existing Template

If you're committed to your current template:

  1. Remove video backgrounds

    • Replace with static images
    • Or use lightweight image sliders

  2. Reduce animations

    • Disable parallax effects
    • Remove fade-in animations on hero section
    • Simplify hover effects

  3. Minimize template sections

    • Remove unused sections from pages
    • Simplify complex layouts
    • Reduce number of widgets

2. Unoptimized Hero Images

The largest image on your page is typically the LCP element.

Problem: Large, uncompressed hero images loading slowly.

Diagnosis:

  • Run PageSpeed Insights
  • Check if hero image is flagged as LCP element
  • Look for "Properly size images" warning
  • Check image file size (should be < 200KB for hero images)

Solutions:

A. Optimize Images Before Upload

Recommended Image Sizes:

  • Hero images: 1920px width maximum
  • File size: Under 200KB (ideally under 100KB)
  • Format: JPG for photos, PNG for graphics, WebP for best compression

Tools for Optimization:

  • TinyPNG - Free compression
  • Squoosh - Advanced compression with WebP
  • ImageOptim - Desktop app (Mac)
  • Photoshop: "Export for Web" feature

Before uploading to Site123:

  1. Resize to maximum needed dimensions (1920px width for full-width)
  2. Compress to reduce file size
  3. Convert to WebP if Site123 supports it
  4. Test file size (aim for < 200KB)

B. Use Site123's Image Optimization

Site123 may automatically optimize images:

  1. Upload high-quality images
  2. Site123 will compress and serve optimized versions
  3. Verify optimization in browser DevTools (Network tab)

C. Replace Large Images

If hero image is critical to LCP:

  • Use solid color backgrounds instead
  • Use gradient backgrounds
  • Use smaller, strategically placed images
  • Consider text-only hero sections

3. Code Injection Scripts Blocking Render

Scripts added via code injection can delay LCP.

Problem: Render-blocking JavaScript/CSS in code injection.

Diagnosis: Run PageSpeed Insights and look for:

Solutions:

Instead of adding scripts to Head Code, use Footer Code:

Before (Head Code):

<script src="https://example.com/heavy-script.js"></script>

After (Footer Code):

<script src="https://example.com/heavy-script.js"></script>

This loads scripts after page content renders.

B. Add Async/Defer Attributes

For scripts that must be in head:

<!-- Async: Downloads in parallel, executes when ready -->
<script async src="https://example.com/analytics.js"></script>

<!-- Defer: Downloads in parallel, executes after HTML parsed -->
<script defer src="https://example.com/tracking.js"></script>

When to use which:

  • async: Independent scripts (analytics, ads)
  • defer: Scripts that depend on DOM (event tracking, form validation)

C. Inline Critical CSS

For critical styling needed immediately:

<!-- In Head Code -->
<style>
  /* Only styles for above-fold content */
  .hero-section {
    background: #f0f0f0;
    padding: 60px 20px;
  }
  .hero-title {
    font-size: 48px;
    color: #333;
  }
</style>

Load full CSS asynchronously:

<link rel="preload" href="https://example.com/styles.css" as="style"
<noscript><link rel="stylesheet" href="https://example.com/styles.css"></noscript>

D. Consolidate Scripts with GTM

Instead of multiple code injections:

  1. Install GTM once
  2. Add all tracking through GTM
  3. Control load timing via GTM triggers
  4. Single container load vs. multiple scripts

Before (multiple injections):

<!-- Head Code -->
<script src="ga4.js"></script>
<script src="meta-pixel.js"></script>
<script src="hotjar.js"></script>
<script src="analytics-tool.js"></script>

After (single GTM):

<!-- Head Code -->
<script>(GTM container code)</script>

4. Third-Party Scripts and Widgets

External scripts and widgets can significantly delay LCP.

Problem: Chat widgets, social feeds, review widgets loading synchronously.

Common Culprits:

  • Live chat widgets (Intercom, Drift, LiveChat)
  • Social media feeds (Instagram, Facebook, Twitter)
  • Review widgets (Trustpilot, Yelp)
  • Email capture popups
  • Video embeds (non-YouTube/Vimeo)

Solutions:

A. Delay Widget Loading

Load widgets after main content:

<!-- In Footer Code -->
<script>
  // Delay widget loading 3 seconds
  setTimeout(function() {
    // Load chat widget
    var script = document.createElement('script');
    script.src = 'https://widget.example.com/chat.js';
    document.body.appendChild(script);
  }, 3000);
</script>

B. Load on User Interaction

Load widgets only when user interacts:

<script>
  var widgetLoaded = false;

  function loadWidget() {
    if (widgetLoaded) return;

    var script = document.createElement('script');
    script.src = 'https://widget.example.com/widget.js';
    document.body.appendChild(script);
    widgetLoaded = true;
  }

  // Load on scroll, click, or mousemove
  ['scroll', 'click', 'mousemove', 'touchstart'].forEach(function(event) {
    window.addEventListener(event, loadWidget, { once: true });
  });
</script>

C. Use Lighter Alternatives

  • Replace heavy chat widgets with simple contact forms
  • Use native embeds for social content
  • Consider static testimonials instead of dynamic review widgets
  • Use lazy-loaded iframes for video embeds

D. Remove Unused Widgets

Audit all code injections and remove:

  • Unused tracking scripts
  • Inactive chat widgets
  • Deprecated tools
  • Duplicate implementations

5. Custom Fonts Loading

Custom fonts can delay text rendering and LCP.

Problem: Fonts loading slowly or causing invisible text (FOIT).

Diagnosis:

  • PageSpeed Insights: "Ensure text remains visible during webfont load"
  • Network tab: Large font file downloads
  • Flash of invisible text on page load

Solutions:

A. Use System Fonts

Fastest option - use system fonts instead:

/* In Head Code */
<style>
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  }
</style>

B. Optimize Custom Font Loading

If custom fonts are required:

<!-- In Head Code -->
<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=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

Key parameter: &display=swap ensures text is visible immediately with fallback font.

C. Preload Critical Fonts

For fonts absolutely needed for LCP:

<link rel="preload" href="https://fonts.gstatic.com/s/opensans/v28/mem8YaGs126MiZpBA.woff2" as="font" type="font/woff2" crossorigin>

Note: Only preload fonts used above the fold.

D. Limit Font Variations

Reduce number of font weights and styles:

Before:

Open Sans: 300, 400, 500, 600, 700, 800

After:

Open Sans: 400, 700 (regular and bold only)

Fewer variations = faster loading.

6. Site123 CDN and Hosting

Site123 uses CDN for content delivery, but optimization helps.

Site123 CDN Best Practices:

A. Let Site123 Handle Optimization

Site123 automatically:

  • Serves content from nearest CDN edge
  • Compresses images
  • Minifies CSS/JS (for Site123-generated code)

You don't need additional CDN configuration.

B. Avoid External Hosting for Assets

Keep all assets on Site123:

Good:

  • Upload images directly to Site123
  • Use Site123's file manager
  • Use Site123's built-in features

Avoid:

  • Linking to external image hosts
  • Loading CSS/JS from slow external servers
  • Embedding content from slow third-party sites

7. Mobile-Specific LCP Issues

Mobile LCP is often worse than desktop.

Problem: Site123 mobile pages loading slowly.

Diagnosis:

  • Test with PageSpeed Insights (mobile mode)
  • Check "Mobile" tab specifically
  • Test on actual mobile devices

Solutions:

A. Optimize for Mobile

  • Upload mobile-optimized images (smaller dimensions)
  • Test mobile template variations in Site123
  • Simplify mobile layouts
  • Reduce mobile animations

B. Responsive Images

Ensure Site123 serves appropriately sized images for mobile:

  • Check image sizes on mobile (DevTools → Device Mode)
  • Verify Site123 responsive image serving
  • Consider uploading multiple image sizes if Site123 supports it

C. Reduce Mobile Code Injection

Some scripts may not be needed on mobile:

<script>
  // Only load on desktop
  if (window.innerWidth > 768) {
    // Load desktop-only widget
  }
</script>

Testing & Monitoring

Test LCP

Tools:

  1. PageSpeed Insights - Lab and field data
  2. WebPageTest - Detailed waterfall
  3. Chrome DevTools - Local testing (Lighthouse)
  4. GTmetrix - Performance tracking

Test Multiple Pages:

  • Homepage (usually worst LCP)
  • Main service/product pages
  • Blog posts
  • Contact page

Test Different Devices:

  • Desktop
  • Mobile (both in DevTools and on real device)
  • Tablet

Monitor LCP Over Time

Chrome User Experience Report (CrUX):

  • Real user data in PageSpeed Insights
  • Shows 28-day trends
  • Represents actual visitor experience

Google Search Console:

Regular Monitoring:

  • Test monthly with PageSpeed Insights
  • Check after template changes
  • Verify after adding new code injections
  • Monitor after Site123 platform updates

Common LCP Elements in Site123

Different pages have different LCP elements:

Page Type Common LCP Element Optimization Priority
Homepage Hero banner image Highest
Service Pages Header image High
Blog Posts Featured image Medium
About Page Team photo / hero image Medium
Contact Page Map or header image Low

Optimize the LCP element for your highest-traffic pages first.

Quick Wins Checklist

Start here for immediate LCP improvements:

  • Optimize hero images (< 200KB, correct dimensions)
  • Move non-critical scripts to footer code injection
  • Add async/defer to remaining head scripts
  • Remove unused code injection scripts
  • Consolidate tracking through GTM
  • Use font-display: swap for custom fonts
  • Delay chat widgets and social feeds
  • Test with PageSpeed Insights
  • Verify improvements on mobile
  • Monitor Core Web Vitals in Search Console

Site123 Template-Specific Issues

Templates with Video Backgrounds

Issue: Video backgrounds are always slow LCP.

Fix:

  • Replace with static image
  • Use video only below the fold
  • Consider removing video entirely
  • Use lightweight GIF animations instead

Templates with Sliders/Carousels

Issue: Image sliders can delay LCP.

Fix:

  • Optimize first slide image (it's likely the LCP element)
  • Lazy load subsequent slides
  • Consider static hero instead of slider
  • Reduce slider JavaScript complexity

Templates with Parallax Effects

Issue: Parallax scrolling adds JavaScript overhead.

Fix:

  • Disable parallax on mobile
  • Use simpler scroll effects
  • Consider static backgrounds
  • Test impact with/without parallax

When LCP Still Won't Improve

If you've optimized everything and LCP is still poor:

Consider Template Change

  • Test different Site123 templates
  • Choose simpler, performance-focused templates
  • Prioritize speed over visual effects

Evaluate Site123 Limitations

Site123 has some inherent limitations:

  • Less control than custom-built sites
  • Platform-level code you can't modify
  • Shared hosting environment

Options:

  • Accept current performance (if within acceptable range)
  • Upgrade Site123 plan if better performance tiers exist
  • Consider migration to faster platform for critical business sites

Professional Help

Consider hiring a developer if:

  • LCP consistently over 4 seconds despite optimizations
  • Complex requirements beyond Site123's capabilities
  • Need custom performance tuning
  • Business impact justifies investment

Next Steps

For general LCP optimization strategies, see LCP Optimization Guide.

返回顶部