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

Fix LCP Issues on Strikingly (Loading Speed)

Reduce Strikingly LCP by compressing hero section images, limiting custom code injections, and choosing lightweight single-page templates.

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

Strikingly-Specific LCP Issues

1. Hero Image Optimization

The most common LCP issue on Strikingly sites is unoptimized hero/banner images.

Problem: Large hero images loading slowly on one-page sites.

Diagnosis:

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

Solutions:

A. Upload Optimized Images to Strikingly

Strikingly automatically optimizes images, but starting with smaller files helps:

Before Uploading:

  1. Resize to appropriate dimensions:

    • Desktop hero: 1920px width max
    • Mobile hero: 750px width max
    • Use tools like TinyPNG, Squoosh, or Photoshop

  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 Strikingly editor, click your hero section
  2. Change Image → Upload optimized file
  3. Strikingly will further optimize via CDN
  4. Publish and test

B. Use Strikingly's Image Quality Settings

Strikingly automatically serves optimized images:

What Strikingly Does:

  • 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: Strikingly handles optimization automatically when you upload via their interface.

C. Avoid Custom HTML Image Uploads

If using custom HTML sections:

Bad (Not Optimized):

<img src="https://yoursite.com/large-image.png" alt="Hero">

Good (With Optimization):

<img
  src="https://optimized-cdn.com/image.jpg"
  width="1920"
  height="1080"
  alt="Hero"
  loading="eager"
  decoding="async"
>

Best: Use Strikingly's built-in image blocks instead of custom HTML when possible.

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 Strikingly Header Code -->
<script src="https://example.com/heavy-script.js"></script>
<script>
  // Lots of inline JavaScript
  // Blocks page rendering
</script>

Good (Async Loading):

<!-- In Strikingly 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. Strikingly Template Performance

Different templates have different performance characteristics.

Modern vs Legacy Templates

Modern Templates (Recommended):

  • Optimized for Core Web Vitals
  • Lightweight code
  • Better image handling
  • Faster LCP

Legacy/Older Templates:

  • Use unoptimized CSS and larger image assets
  • Lack lazy loading and modern image compression
  • Switch to a newer template for better LCP scores

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:

  • Switch to different Strikingly template
  • Contact Strikingly support
  • Optimize custom sections
  • Remove unnecessary template features

Custom Sections Performance

Strikingly custom HTML sections can impact LCP:

Best Practices:

  • Minimize custom HTML sections
  • Avoid heavy JavaScript in custom sections
  • Use Strikingly's built-in blocks when possible
  • Keep custom CSS minimal

4. 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>

Alternative Approaches:

  • Use click-to-load for videos (thumbnail that loads video on click)
  • Place social widgets below fold
  • Remove widgets that aren't essential
  • Use lightweight alternatives

5. Font Loading Issues

Custom fonts can delay LCP if not optimized.

Strikingly Font System

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

Using Built-in Fonts (Recommended):

  • Already optimized by Strikingly
  • 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;
}

Font Display Strategies

font-display options:

  • swap - Show fallback immediately (recommended for Strikingly)
  • optional - Use custom font only if cached
  • block - Wait for custom font (not recommended)

6. Strikingly CDN and Hosting

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

Strikingly CDN Benefits

Automatic:

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

No Configuration Needed: Strikingly handles CDN automatically.

Ensure Assets Use Strikingly CDN

Upload Assets to Strikingly (Not External Hosts):

Bad:

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

Good:

<!-- Strikingly CDN, optimized -->
<img src="https://d1xdky342e0q8y.cloudfront.net/...">

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

7. One-Page Site Considerations

Strikingly specializes in one-page sites, which can be heavy if not optimized.

One-Page Performance Issues

Problem: All content loads at once, increasing LCP.

Solutions:

A. Prioritize Above-Fold Content:

  • Optimize hero section first
  • Lazy load below-fold sections
  • Minimize initial content

B. Implement Section Lazy Loading:

<!-- Add to Custom Code -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Lazy load images in lower sections
    var lazyImages = document.querySelectorAll('img[data-src]');

    var imageObserver = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var img = entry.target;
          img.src = img.dataset.src;
          imageObserver.unobserve(img);
        }
      });
    });

    lazyImages.forEach(function(img) {
      imageObserver.observe(img);
    });
  });
</script>

C. Split into Multi-Page Site: If content is extensive, consider using Strikingly's multi-page feature instead of one-page layout.

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 Strikingly 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 for Strikingly sites)
  • 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

Manual Monitoring:

  • Test weekly after changes
  • Document LCP scores
  • Track impact of optimizations

Strikingly-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 Strikingly's built-in fonts instead of custom fonts
  • Upload all images to Strikingly (not external links)
  • Test with modern Strikingly template
  • Defer chat widgets and social embeds
  • Remove custom JavaScript from header
  • Test on mobile device (primary concern)

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

Common LCP Elements in Strikingly

Different sections have different LCP elements:

Section Type Common LCP Element Optimization Priority
Hero Banner Background image Highest
Image Banner Hero image Highest
Video Hero Video poster High
Text Hero First heading/text Low (usually fast)
Gallery First gallery image Medium

Optimize the LCP element for your specific site first.

Advanced Optimizations

Preload Critical Assets

Add to Custom Code (Header):

<!-- Preload hero image -->
<link
  rel="preload"
  as="image"
  href="https://d1xdky342e0q8y.cloudfront.net/...your-hero-image..."
  imagesrcset="..."
  imagesizes="100vw"
>

<!-- Preload critical font -->
<link
  rel="preload"
  as="font"
  href="font.woff2"
  type="font/woff2"
  crossorigin
>

Note: Only preload the LCP element. Don't overuse preload.

Critical CSS Inlining

For advanced users, inline critical CSS:

<style>
  /* Critical CSS for hero section */
  .hero-section {
    /* Inline styles for above-fold content */
  }
</style>

Caution: Requires CSS knowledge. Test thoroughly.

Resource Hints

Add to Header Code:

<!-- DNS prefetch for external domains -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">

<!-- Preconnect to critical origins -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Troubleshooting Poor LCP

LCP Still Above 4 Seconds

Check:

  1. Hero image file size (should be < 200KB)
  2. Custom code in header (minimize)
  3. Third-party widgets above fold (remove or defer)
  4. Template performance (try different template)
  5. Hosting/CDN issues (contact Strikingly support)

LCP Improved in Lab But Not Field

Possible Causes:

  • User devices slower than test
  • Real user network conditions
  • Geographic distribution of users
  • Mobile vs desktop discrepancy

Solutions:

  • Focus on mobile optimization
  • Test on 3G network conditions
  • Consider user's typical devices
  • Wait 28 days for CrUX data to update

LCP Varies Wildly Between Tests

Normal Variation:

  • Network conditions
  • Server response time
  • Cache status
  • Time of day

Reduce Variation:

  • Run multiple tests
  • Use WebPageTest (multiple runs)
  • Focus on median/average
  • Test at different times

When to Contact Strikingly Support

Consider reaching out to Strikingly 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

Strikingly Support:

Next Steps

For general LCP optimization strategies, see LCP Optimization Guide.

返回顶部