Skip to main content
All website issues
Speed

Files are blocking the page from loading quickly

What this means for your business

Files are making visitors wait before they can see anything on your page — like someone blocking the door before letting customers in. These are usually scripts or stylesheets that load before anything is shown.

How to fix it
Medium
1–2 hours

  1. 1Identify render-blocking resources: run your URL through PageSpeed Insights (pagespeed.web.dev) — it lists which scripts and stylesheets are blocking rendering.
  2. 2Ask your developer to add defer or async to non-critical script tags — this lets the browser display your page first, then load the scripts after.
  3. 3Ask your developer to load non-critical stylesheets after the page is visible — only the styles needed for the first screen should be required upfront.
  4. 4Remove or replace Google Fonts with a self-hosted version — loading fonts from Google's servers adds an extra network request that delays rendering.
  5. 5Audit any third-party scripts in your page header. Everything there runs before your content appears. Move what you can to load later.

On WordPress

Autoptimize or WP Rocket can automatically defer and combine CSS/JS files. Enable "Optimize JavaScript" and "Optimize CSS" in either plugin's settings.

On Shopify

In your theme.liquid file, add defer to <script> tags. Use Shopify's script tag API to control when scripts load rather than including them in the HTML directly.

Pro tip: Google Fonts is one of the most common render blockers. Replace it with font-display: swap and preconnect, or switch to a system font stack for maximum speed.

Does your site have this problem?

SiteSprout scans your site, tells you which issues you actually have in plain English, and keeps watch so nothing breaks silently.

Scan your site free