Fix LCP Issues on Strikingly (Loading Speed)

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:

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:

• Email: support@strikingly.com
• Live chat (Pro/VIP plans)
• Help center: support.strikingly.com

Next Steps

• Fix CLS Issues
• Debug Tracking Issues
• Optimize Custom Code

For general LCP optimization strategies, see LCP Optimization Guide.