# Render-blocking scripts and stylesheets

Source: https://www.fixreports.com/issues/render-blocking-resources

Scripts and stylesheets in the <head> that load synchronously make the browser wait before it can show anything on screen.

## What it means
We flag pages with more than six stylesheets or synchronous scripts in the <head> that must load before the first paint.

## Why it matters
Each blocking file adds a round trip before the first pixel appears, which delays First Contentful Paint and, usually, Largest Contentful Paint.

## How to find it yourself
- PageSpeed Insights lists render-blocking requests and the time they cost.
- View the page source: <script src> without defer or async in the <head> blocks rendering.

## How to fix it on any website
1. Add defer to scripts that don’t need to run before the page shows; use async for independent ones such as analytics.
2. Inline the small amount of CSS needed for the top of the page and load the rest without blocking.
3. Combine or remove stylesheets you don’t need on every page.

## On Shopify
1. Check theme.liquid and app snippets for scripts in the <head> without defer.

## On WordPress and WooCommerce
1. Use an optimization plugin to defer JavaScript and generate critical CSS, then test that nothing breaks.

## How to check the fix
- Run the speed test again and compare the number of blocking files.

## How FixReports finds it
The speed test counts stylesheets and synchronous scripts in the <head> of each page it tests.

## Frequently asked questions

### What is the difference between defer and async?

Both download without blocking. defer runs scripts in order after the HTML is parsed; async runs each as soon as it arrives, in any order.

## Sources
- Chrome for Developers: Eliminate render-blocking resources: https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources