LCP — Loading Performance

Slow LCP —
Render-Blocking Resources

CSS and JavaScript are holding your page hostage before it can paint.

Where to find it: PageSpeed Insights > Opportunities > Eliminate Render-Blocking Resources

What It Is

Render-blocking resources are CSS stylesheets and JavaScript files that the browser must fully download and process before it can paint any content to the screen. By default, every <link rel='stylesheet'> and <script> tag in the page head is render-blocking. This means the browser stalls — showing a blank white page — for however long it takes to load all of those files. The LCP element can't render until that blocking is resolved, directly inflating the LCP score.

Why It Matters

Every millisecond of render-blocking delay is added directly to your LCP score. A page with 500KB of blocking CSS and JavaScript loaded in the head can easily add 1–3 seconds of blank-screen time before any content appears. This is particularly damaging on mobile connections where download speed is slower and the impact of each blocking resource is amplified. Eliminating or deferring render-blocking resources is one of the highest-leverage LCP improvements available — and it benefits every page on the site, not just individual URLs.

Root Diagnostics

Common Causes

Understanding why this failure occurs is the first step to fixing it permanently.

Blocking CSS in Head

Full stylesheets loaded synchronously in the <head> block rendering. The browser must download and parse the entire CSS file — even rules that apply to nothing on this page — before painting.

Synchronous JavaScript in Head

Third-party scripts and plugin scripts loaded with <script src='...'> in the head block rendering until each script downloads and executes. Analytics, tag managers, and font loaders are frequent culprits.

Unused CSS Not Purged

The site loads a full CSS framework (Bootstrap, Tailwind, etc.) but only uses a fraction of it. The browser must still download and parse every unused rule, wasting render-blocking time.

No Critical CSS Inlined

All CSS is loaded externally, including the styles needed to render above-the-fold content. Inlining critical CSS eliminates the render-blocking round-trip for the most important styles.

Interactive Standard Operating Procedure

The Fix Blueprint (Interactive SOP)

Check off each step to monitor your implementation progress live!

Implementation Progress: 0% Completed (0/7)

1. Identify All Render-Blocking Resources

Run the page through PageSpeed Insights. Open the 'Eliminate render-blocking resources' opportunity. It lists every blocking CSS and JS file with its estimated savings. Screenshot this — it's your fix priority list.

2. Add defer to Non-Critical JavaScript

For every <script src='...'> tag that doesn't need to run before the page is visible, add the defer attribute: <script src='script.js' defer>. Deferred scripts download in parallel but execute after HTML parsing — eliminating the block.

3. Move Remaining Scripts to Bottom of Body

Any scripts that can't be deferred should be moved from the <head> to just before the closing </body> tag. This ensures the page renders before the scripts execute.

4. Extract and Inline Critical CSS

Identify the CSS rules needed to render above-the-fold content — fonts, layout, hero styles, navigation. Inline these rules directly in a <style> tag in the <head>. Load the full stylesheet asynchronously using media='print' onload='this.media=all'.

5. Audit and Purge Unused CSS

If the site uses a CSS framework, set up PurgeCSS or use Tailwind's built-in purge configuration to remove all unused rules from the production CSS bundle. This can reduce CSS payload by 80–95%.

6. Load Third-Party Scripts Asynchronously

For analytics, tag managers, and other third-party scripts, use async or defer attributes — or load them after the window load event. These scripts almost never need to execute before the page is visible.

7. Re-test and Validate

Run PageSpeed Insights again after each change. The 'Eliminate render-blocking resources' opportunity should show reduced or zero remaining blocking resources. Track LCP score improvement with each change.

Tools

PageSpeed Insights
Free (pagespeed.web.dev) | Lists every render-blocking resource with estimated time savings — the essential starting point
Chrome DevTools Coverage Tab
Free | Built into Chrome — shows exactly which CSS and JS rules are unused on the page, byte by byte
PurgeCSS
Free (purgecss.com) | Removes unused CSS rules from stylesheets — integrates with webpack, Vite, and most build tools

Time to Fix

1 hour

To audit all blocking resources

Hours to Days

Script defer (minutes) | CSS extraction (hours) | Purge setup (hours)

Pro Tip

Fix JavaScript blocking first — it's faster and delivers the most immediate LCP gain.

Adding defer to non-critical scripts takes minutes per script and can remove seconds of render-blocking time immediately. CSS inlining and purging take longer and require testing. Start with JS deferral, verify the LCP improvement, then move to CSS. This approach gives you a quick win to show the client while the deeper CSS work continues.

Slow LCP — Render-Blocking Resources