Fix Carrd LCP Issues

Largest Contentful Paint (LCP) measures how long it takes for the largest visible content element to render on the page. This guide provides Carrd-specific solutions to optimize LCP while maintaining the platform's signature speed.

General Guide: See Global LCP Issues for universal concepts and fixes.

What is LCP?

Largest Contentful Paint (LCP) is one of Google's Core Web Vitals that measures loading performance. It reports the render time of the largest image, text block, or video visible within the viewport.

LCP Thresholds

• Good: ≤ 2.5 seconds
• Needs Improvement: 2.5 - 4.0 seconds
• Poor: > 4.0 seconds

Carrd Baseline Performance

Out of the box, Carrd sites typically achieve:

• LCP: 0.8 - 1.5 seconds (excellent)
• PageSpeed Score: 95-100
• Overall Performance: Among fastest website builders

If your Carrd site has LCP > 2.5s, optimization is needed.

Common LCP Elements in Carrd

The LCP element on Carrd sites is typically:

• Hero section image
• Large heading or title text
• Background image on first section
• Video thumbnail or poster
• Large logo or branding image
• Featured content in first screen

Diagnosing LCP Issues on Carrd

Step 1: Identify Your LCP Element

Use Google PageSpeed Insights:

1. Go to PageSpeed Insights
2. Enter your published Carrd site URL (not preview)
3. Click Analyze
4. Scroll to Diagnostics
5. Find Largest Contentful Paint element
6. Note which element is causing the delay

Step 2: Measure Current LCP

Test on your published site:

• Google PageSpeed Insights: Mobile and desktop scores
• Chrome DevTools Lighthouse: Built-in performance audit (F12 > Lighthouse)
• GTmetrix: gtmetrix.com
• WebPageTest: webpagetest.org

Important: Always test your published site, not Carrd's preview mode.

Carrd-Specific LCP Optimizations

1. Optimize Hero Images

Hero images are the most common LCP element on Carrd sites.

Image Optimization Before Upload

Before uploading to Carrd:

1. Compress images:

   • Use TinyPNG
   • Or Squoosh
   • Or ImageOptim (Mac)
   • Target: < 200KB for hero images

2. Resize to appropriate dimensions:

   • Desktop hero: 1920px wide maximum
   • Mobile hero: 800px wide maximum
   • Don't upload 4K images for web use

3. Choose correct format:

   • JPEG: Best for photographs
   • PNG: For graphics with transparency
   • WebP: Best compression (Carrd doesn't auto-convert, so convert before upload)

Example Optimization Workflow

Original: hero.jpg (3.2 MB, 4000x3000px)
   ↓
Resize to 1920x1440px
   ↓
Compress with TinyPNG (70% quality)
   ↓
Final: hero-optimized.jpg (180 KB, 1920x1440px)

Result: 95% size reduction without visible quality loss.

Background Images vs. Image Elements

For best LCP:

• Use image elements (not background images) when possible
• Image elements load with higher priority than background images
• Browsers can optimize image element loading better

In Carrd editor:

• Add Image element instead of using background image in section settings
• If you must use background image, ensure it's compressed

Preload Critical Images (Advanced)

For power users, preload your LCP image:

1. Add Embed element at top of page
2. Select Code type
3. Add preload link:

<link rel="preload" as="image" href="YOUR_IMAGE_URL.jpg">

To get your image URL:

1. Publish your site
2. Right-click the image
3. Select "Inspect"
4. Copy the src URL from the image tag

Example:

<link rel="preload" as="image" href="https://carrd.imgix.net/i/hero-image.jpg">

2. Minimize Embed Elements Impact

Each embed element adds overhead. Optimize their impact on LCP:

Embed Placement Strategy

1. Analytics embeds at top: GA4, GTM, Meta Pixel (they load async)
2. Non-visual embeds: Hide with display: none
3. Heavy embeds at bottom: Widgets, social feeds, chat boxes
4. Critical embeds only: Remove unnecessary custom code

Async Loading for Scripts

Always add async or defer to script tags in embeds:

Before (blocking):

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

After (non-blocking):

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

Or use defer if script order matters:

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

Reduce Number of Embeds

Audit your embeds:

1. Go through each embed element
2. Ask: "Is this essential?"
3. Remove or consolidate duplicates
4. Use GTM to combine multiple tracking tags into one embed

Example consolidation:

• Before: 5 embeds (GA4, Meta Pixel, TikTok Pixel, LinkedIn Tag, Hotjar)
• After: 1 GTM embed managing all tags

3. Optimize Custom Fonts

Custom fonts can delay LCP if not loaded efficiently.

Limit Font Usage

Best practice:

• Maximum 2 font families
• Maximum 3-4 font weights per family
• Avoid loading fonts you don't use

In Carrd:

• Choose fonts in Settings > Fonts
• Only select weights you actually use (e.g., 400 and 700)

Font Display Optimization

If using Google Fonts via embed, optimize loading:

<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=Inter:wght@400;700&display=swap" rel="stylesheet">

Note the display=swap parameter - shows fallback font while loading.

System Font Alternative

For best LCP, consider using system fonts:

In a Style embed:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

System fonts load instantly (0 LCP impact).

4. Optimize Background Elements

Background Videos

Problem: Background videos significantly delay LCP.

Solutions:

1. Replace with image: Use a poster image instead
2. Lazy load video: Load video after page load
3. Compress video: Use tools like HandBrake to reduce size
4. Remove on mobile: Videos often autoplay fails on mobile anyway

Carrd-specific:

• In section settings, use Background Image instead of Background Video
• If video is essential, ensure it's heavily compressed (< 2MB)

Background Colors

Fast alternative: Use background colors instead of images when possible.

In Carrd:

• Section Settings > Background > Color
• Solid colors have 0 LCP impact
• Gradients are also very fast

5. Optimize Third-Party Embeds

Third-party widgets can significantly impact LCP.

Lazy Load Embeds

Load non-critical embeds after page load:

<script>
window.addEventListener('load', function() {
  // Load widget after page loads
  var script = document.createElement('script');
  script.src = 'https://widget.example.com/embed.js';
  document.body.appendChild(script);
});
</script>

Common Heavy Embeds

These often cause LCP issues:

• Social media feeds: Instagram, Twitter embeds
• Chat widgets: Intercom, Drift, Crisp
• Forms: Typeform, Google Forms embeds
• Calendly: Scheduling widget
• YouTube: Embedded videos

Solution: Place these embeds below the fold (lower on page) or lazy load them.

Placeholder Technique

For YouTube or video embeds:

1. Use a static thumbnail image instead
2. Load actual embed on click
3. Dramatically improves initial LCP

6. Carrd-Specific Performance Settings

Enable Carrd's Built-In Optimizations

Carrd automatically:

• Compresses images (but pre-compression is better)
• Lazy loads images below fold
• Minifies CSS
• Serves assets via CDN

Ensure these work:

• Upload reasonably-sized images (don't rely solely on Carrd compression)
• Don't override lazy loading with custom code

Image Loading Priority

Carrd loads images in this order:

1. Images in viewport (above fold)
2. Images just below viewport
3. Images further down page

Optimize for this: Place most important, largest images above fold.

7. Mobile-Specific Optimizations

Mobile LCP is often worse than desktop. Carrd mobile fixes:

Mobile Image Optimization

1. Test on real mobile devices: Simulators aren't accurate
2. Compress more aggressively: Mobile users often on slower connections
3. Smaller dimensions: Mobile doesn't need full desktop resolution

Mobile Embed Strategy

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

Reduce Mobile Complexity

In Carrd editor:

• Use simpler layouts for mobile
• Fewer images on mobile breakpoints
• Hide non-essential elements on mobile

Advanced Optimizations

Resource Hints

Add resource hints for critical external resources:

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://www.googletagmanager.com">

Add this in an embed element at the top of your page.

Critical CSS Inlining

For advanced users, inline critical CSS:

<style>
/* Critical CSS for above-the-fold content */
.hero-section {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}
</style>

This ensures styling loads immediately, preventing layout flash.

Reduce Tracking Tag Impact

If using multiple tracking tags:

Problem: Each tag adds ~20-50ms to LCP Solution: Use Google Tag Manager

Before (5 embeds):

• GA4 embed
• Meta Pixel embed
• TikTok Pixel embed
• LinkedIn Tag embed
• Hotjar embed

After (1 embed):

• GTM embed (managing all 5 tags)

LCP improvement: ~100-200ms

Testing Your Improvements

Before and After Comparison

1. Baseline: Test current LCP with PageSpeed Insights
2. Document score: Note current LCP time
3. Implement fixes: Apply optimizations from this guide
4. Publish changes: Publish your Carrd site
5. Wait: Allow time for CDN updates (5-10 minutes)
6. Retest: Run PageSpeed Insights again
7. Compare: Verify LCP improvement

Testing Tools

• Google PageSpeed Insights: Official Core Web Vitals scores
• GTmetrix: Detailed waterfall and optimization suggestions
• WebPageTest: Advanced testing with video recording
• Chrome Lighthouse: F12 > Lighthouse > Generate Report

Real User Monitoring

Track LCP in production with GA4:

<script>
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (entry.entryType === 'largest-contentful-paint') {
      const lcp = entry.renderTime || entry.loadTime;

      // Send to GA4
      if (typeof gtag !== 'undefined') {
        gtag('event', 'LCP', {
          'value': Math.round(lcp),
          'event_category': 'Web Vitals',
          'non_interaction': true
        });
      }
    }
  }
}).observe({type: 'largest-contentful-paint', buffered: true});
</script>

Common Carrd LCP Issues and Fixes

Issue: Large Unoptimized Hero Image

Symptom: LCP > 3.5s, hero image identified as LCP element

Fix:

1. Download your hero image from published site
2. Compress with TinyPNG (target < 200KB)
3. Resize to max 1920px wide
4. Re-upload to Carrd
5. Republish

Expected improvement: 1-2 seconds LCP reduction

Issue: Too Many Embed Elements

Symptom: LCP > 2.8s, multiple tracking tags installed

Fix:

1. Install Google Tag Manager (1 embed)
2. Move all tracking tags to GTM
3. Remove individual tag embeds from Carrd
4. Publish

Expected improvement: 200-500ms LCP reduction

Issue: Custom Web Font Loading

Symptom: LCP 2.6-3.0s, text is LCP element

Fix:

1. Add font preload link (see above)
2. Or switch to system fonts
3. Limit font weights to 2-3 maximum

Expected improvement: 100-300ms LCP reduction

Issue: Background Video

Symptom: LCP > 4.0s on mobile, video in hero section

Fix:

1. Remove background video on mobile
2. Use poster image instead
3. Or remove video entirely

Expected improvement: 2-3 seconds LCP reduction on mobile

Issue: Third-Party Widget Loading

Symptom: LCP 2.7-3.2s, chat widget or social feed at top

Fix:

1. Move widget embed to bottom of page
2. Or lazy load widget after page load
3. Consider if widget is necessary

Expected improvement: 300-800ms LCP reduction

Monitoring LCP Over Time

Set Up Ongoing Monitoring

Use Google Search Console:

1. Go to Google Search Console
2. Add your Carrd site (verify ownership)
3. Navigate to Experience > Core Web Vitals
4. Monitor LCP performance over time
5. Identify pages with poor LCP

Monthly LCP Audits

Establish a routine:

1. Monthly: Run PageSpeed Insights on key pages
2. Check: LCP still in "good" range (< 2.5s)
3. Review: Any new embeds or images added?
4. Optimize: If LCP degraded, apply fixes
5. Document: Track changes and improvements

Carrd vs. Other Platforms

Carrd LCP Advantages

• Minimal code: Clean, lightweight HTML
• Global CDN: Fast content delivery
• Auto-optimization: Built-in image lazy loading
• No plugins: No bloat from third-party plugins
• Static: No server-side processing delays

Maintaining the Advantage

Carrd gives you a head start with 95+ PageSpeed scores. Maintain it:

• ✓ Compress images before upload
• ✓ Minimize custom embeds
• ✓ Use GTM for tracking consolidation
• ✓ Test on mobile devices
• ✓ Regular performance audits

Next Steps

• Optimize CLS for layout stability
• Fix Tracking Issues if analytics aren't working
• Troubleshooting Overview for other common issues

Additional Resources

• Web.dev - Optimize LCP
• Google PageSpeed Insights
• TinyPNG - Image Compression
• Squoosh - Image Optimization
• Carrd Documentation