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

Fix LCP Issues on Sitefinity (Loading Speed)

Improve Sitefinity LCP by enabling output caching, using image thumbnails from the media library, and optimizing widget rendering.

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

What is LCP?

Largest Contentful Paint measures when the largest content element becomes visible. Google recommends LCP under 2.5 seconds. Sitefinity is a .NET-based CMS with a widget-based page composition model, built-in media library with image processing, and configurable output caching. LCP depends on output cache configuration, image thumbnail generation, and widget rendering pipeline efficiency.

Sitefinity-Specific LCP Causes

  • Output cache disabled or misconfigured -- Sitefinity's output cache must be explicitly enabled per page/template; without it, every request processes the full .NET rendering pipeline
  • Full-resolution media library images -- images served via /images/default-source/... URLs use original uploads unless thumbnail profiles are configured
  • Widget rendering overhead -- each widget on a page (Content Block, News List, Image Gallery) executes its own controller and view, adding cumulative render time
  • Sitefinity CDN not configured -- without CDN integration, all assets serve from the origin server
  • MVC vs. Web Forms rendering -- legacy Web Forms pages have higher rendering overhead than MVC pages

Fixes

1. Configure Output Caching

Enable output caching in Sitefinity's admin panel and verify in configuration:

<!-- In web.config -->
<system.web>
  <caching>
    <outputCacheSettings>
      <outputCacheProfiles>
        <add name="SitefinityCache" duration="3600"
             varyByParam="*" varyByCustom="browser"/>
      </outputCacheProfiles>
    </outputCacheSettings>
  </caching>
</system.web>

In the Sitefinity backend:

  • Go to Administration > Settings > Advanced > System > Output Cache Settings
  • Enable output caching with appropriate duration (3600s for content pages)
  • Set page-level cache profiles via Pages > Page Properties > Cache

2. Use Image Thumbnails

Configure thumbnail profiles and use them in your templates:

// In your MVC widget controller
var image = App.WorkWith().Images()
    .Where(i => i.Id == imageId)
    .Get().FirstOrDefault();

if (image != null)
{
    // Use a thumbnail profile instead of the original
    var thumbnailUrl = image.ResolveThumbnailUrl("hero-1200x630");
    model.ImageUrl = thumbnailUrl;
    model.ImageWidth = 1200;
    model.ImageHeight = 630;
}

<!-- In your widget's Razor view -->
@if (!string.IsNullOrEmpty(Model.ImageUrl))
{
    <img src="@Model.ImageUrl"
         width="@Model.ImageWidth" height="@Model.ImageHeight"
         alt="@Model.Title"
         loading="eager"
         fetchpriority="high"
         style="aspect-ratio: @Model.ImageWidth/@Model.ImageHeight; width: 100%; height: auto; object-fit: cover;" />
}

Configure thumbnail profiles at Administration > Settings > Advanced > Libraries > Images > Thumbnails.

3. Inline Critical CSS

<!-- In your Sitefinity MVC layout (_Layout.cshtml) -->
<head>
    <style>
        /* Critical above-fold CSS */
        body { font-family: system-ui, sans-serif; margin: 0; }
        .sf-header { display: flex; height: 64px; align-items: center; }
        .hero-section { width: 100%; aspect-ratio: 16/9; }
        .content-area { max-width: 1200px; margin: 0 auto; padding: 1rem; }
    </style>

    @* Defer full theme CSS *@
    <link rel="preload" href="@Url.Content("~/ResourcePackages/YourTheme/assets/dist/main.css")"
          as="style" />
    <noscript>
        <link rel="stylesheet" href="@Url.Content("~/ResourcePackages/YourTheme/assets/dist/main.css")" />
    </noscript>
</head>

4. Optimize Widget Loading

Reduce the number of widgets above the fold and optimize existing ones:

// Use Sitefinity's built-in lazy loading for list widgets
// In your News List widget controller
public ActionResult Index(int page = 1)
{
    var items = App.WorkWith().NewsItems()
        .Where(n => n.Status == ContentLifecycleStatus.Live)
        .OrderByDescending(n => n.PublicationDate)
        .Take(6) // Limit items above the fold
        .Get();

    return View(items);
}
  • Move non-critical widgets (related content, tag clouds, archives) below the fold
  • Use Sitefinity's Lazy Loading option on widget properties where available
  • Consolidate multiple Content Block widgets into a single block where possible

5. Enable CDN Integration

<!-- In web.config -- configure CDN for static assets -->
<sitefinity>
  <cdn>
    <add name="AzureCDN" provider="Telerik.Sitefinity.Modules.Libraries.Web.CDN.AzureCDNProvider"
         cdnUrl="https://yourcdn.azureedge.net" />
  </cdn>
</sitefinity>

Or configure via Administration > Settings > Advanced > System > CDN.

Measuring LCP on Sitefinity

  1. Sitefinity Insight (if licensed) -- built-in analytics showing page load performance
  2. Application Insights -- integrate Azure Application Insights for server-side render timing
  3. PageSpeed Insights -- test homepage, listing pages, and detail pages
  4. TTFB check -- curl -w "TTFB: %{time_starttransfer}\n" -o /dev/null -s https://yoursite.com -- if over 500ms, focus on output cache configuration

Analytics Script Impact

  • Sitefinity Insight is the built-in analytics module -- verify it loads asynchronously
  • Configure GA/GTM via Marketing > Analytics or add scripts to the layout's footer section
  • Avoid adding tracking scripts via Content Block widgets in the page header area
  • Sitefinity's personalization engine can delay rendering if configured to run synchronously
Nach oben