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

Fix LCP Issues on Sharepointcms (Loading Speed)

Improve SharePoint LCP by optimizing web part rendering, compressing Site Assets library images, and leveraging Office 365 CDN.

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. SharePoint Online (Modern) renders pages using SPFx web parts, Microsoft's CDN for framework assets, and the SharePoint page rendering pipeline. LCP depends on web part complexity, image library optimization, and whether the Office 365 CDN is enabled.

SharePoint-Specific LCP Causes

  • Heavy SPFx web part bundles -- custom SPFx web parts often ship large JavaScript bundles that block rendering
  • Unoptimized Site Assets images -- images uploaded to document libraries serve at original resolution without automatic processing
  • Office 365 CDN not enabled -- without CDN, all assets are served from the SharePoint tenant origin, increasing latency
  • Multiple web parts per page -- each web part initializes independently, competing for rendering resources
  • SharePoint framework overhead -- the SPFx runtime, React bundle, and Fabric UI load before any custom code executes

Fixes

1. Enable Office 365 CDN

# Connect to SharePoint Online Management Shell
Connect-SPOService -Url https://yourtenant-admin.sharepoint.com

# Enable public CDN for static assets
Set-SPOTenantCdnEnabled -CdnType Public -Enable $true

# Add origins for your site assets
Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl "sites/yoursite/SiteAssets"
Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl "sites/yoursite/ClientSideAssets"

# Verify CDN is active (may take 15 minutes)
Get-SPOTenantCdnEnabled -CdnType Public

2. Optimize Hero Images

Compress images before uploading to Site Assets:

# Pre-compress before uploading to SharePoint
mogrify -strip -quality 80 -resize "1920>" hero.jpg
cwebp -q 80 hero.jpg -o hero.webp

In SPFx web parts, use SharePoint's image rendition URLs:

// In your SPFx web part
const imageUrl = `${siteUrl}/_layouts/15/getpreview.ashx?` +
  `path=${encodeURIComponent(originalImageUrl)}` +
  `&resolution=6`;  // 1280px width rendition

return (
  <img
    src={imageUrl}
    width="1280" height="720"
    alt={title}
    loading="eager"
    fetchPriority="high"
    style={{ aspectRatio: '16/9', width: '100%', height: 'auto', objectFit: 'cover' }}
  />
);

3. Optimize SPFx Web Part Bundles

// In gulpfile.js -- enable bundle analysis
const bundleAnalyzer = require('webpack-bundle-analyzer');
build.configureWebpack.mergeConfig({
  additionalConfiguration: (config) => {
    config.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin());
    return config;
  }
});

// Use dynamic imports for heavy dependencies
const HeavyComponent = React.lazy(() =>
  import(/* webpackChunkName: "heavy" */ './HeavyComponent')
);

// In package-solution.json -- enable tree shaking
{
  "solution": {
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true
  }
}

4. Preload Critical Resources

In your SPFx application customizer:

// In your ApplicationCustomizer onInit()
const head = document.head;

// Preconnect to CDN
const preconnect = document.createElement('link');
preconnect.rel = 'preconnect';
preconnect.href = 'https://publiccdn.sharepointonline.com';
head.appendChild(preconnect);

// Preload hero image if on homepage
if (this.context.pageContext.legacyPageContext.serverRelativeUrl === '/sites/home') {
  const preload = document.createElement('link');
  preload.rel = 'preload';
  preload.as = 'image';
  preload.href = '/sites/home/SiteAssets/hero.webp';
  head.appendChild(preload);
}

5. Reduce Web Part Count

  • Limit pages to 3-4 web parts above the fold
  • Use the Section Background feature instead of separate hero web parts
  • Replace multiple list web parts with a single custom web part that fetches consolidated data
  • Move non-critical web parts below the fold with loading="lazy" on their images

Measuring LCP on SharePoint

  1. SharePoint Page Diagnostics tool -- browser extension that shows page load metrics and identifies slow web parts
  2. Chrome DevTools Performance tab -- filter for LCP entries in the rendering timeline
  3. Network waterfall -- check for large SPFx bundle downloads blocking render
  4. CDN verification -- confirm assets load from publiccdn.sharepointonline.com rather than the tenant origin

Analytics Script Impact

  • SharePoint Online has no built-in public analytics (usage analytics are admin-only)
  • Add GA/GTM via SPFx Application Customizer with async loading
  • Avoid injecting tracking scripts via Script Editor web parts (blocks rendering)
  • Microsoft Clarity can be added via Application Customizer for session replay
Back to top