When a browser loads a page, it cannot show anything until it has processed certain files. Those files are called render-blocking resources. They are usually stylesheets and scripts in the page head, and Lighthouse flags them under “Render-blocking requests”. Fixing them is one of the most reliable ways to improve First Contentful Paint and Largest Contentful Paint.
Why some files block rendering
- CSS blocks rendering. The browser will not paint until it knows how the page should look, so it waits for stylesheets in the head.
- Synchronous JavaScript blocks parsing. A normal script tag stops the browser reading the page until the script has been downloaded and run.
Each blocking file adds a round trip, and on a slow mobile connection those add up quickly.
How to find them
Run the page in PageSpeed Insights or Lighthouse and open the render-blocking requests insight. It lists each file and its estimated delay. The Network panel in Chrome DevTools shows the same files in a waterfall, so you can see which ones hold up the first paint.
How to fix render-blocking JavaScript
- Defer scripts. The
deferattribute downloads the script without blocking and runs it after the page is parsed, in order. - Use async for independent scripts, such as analytics, which do not depend on other code.
- Load scripts only where needed. A contact form script does not need to load on every page.
- Remove what you do not use. Old sliders, chat widgets and trackers are common.
- Move non-essential scripts to the footer.
Be careful with jQuery and scripts that depend on it. Deferring one but not the other can break the page, so test after each change.
How to fix render-blocking CSS
- Inline critical CSS. Put the small amount of CSS needed for the top of the page directly in the HTML, and load the rest without blocking.
- Remove unused CSS. Plugins and themes often load large stylesheets for features you do not use. Dequeue them on pages where they are not needed.
- Combine small files. Many tiny stylesheets mean many requests. Inlining very small ones saves round trips.
- Use the media attribute. Styles for print or specific screen sizes should not block rendering on other devices.
Fonts also block
Web fonts can delay text. Preload your main font, load only the weights you use and set font-display: swap so text appears straight away in a fallback font. Hosting fonts on your own domain avoids an extra connection to a third party.
Page builders and plugins
Elementor and other builders create their own CSS and JavaScript. Use their built-in options to load only the assets a page needs, avoid stacking many widgets that load separate files, and keep the page structure simple. A caching or performance plugin can handle deferring and critical CSS, but review its settings carefully rather than turning every option on.
Test after every change
Check the page on desktop and mobile, click through menus, forms and sliders, and re-run Lighthouse. If something breaks, undo the last setting. It is better to remove two blocking files safely than ten recklessly.
What results to expect
Fixing render-blocking files commonly improves First Contentful Paint first, and LCP follows. Pair it with caching and image optimization. See our WordPress speed checklist for the full order of work, and our guide to Core Web Vitals for the targets.
Need it done for you?
Our WordPress speed optimization service includes safe script and CSS optimization. Contact us for a free review.
