Render-Blocking Resources: What to Check First

What the flag means

Crystal Ball uses early script and stylesheet patterns to identify resources worth reviewing. Some CSS and JavaScript are necessary, and file count alone does not prove a delay; size, dependency order, download timing, and main-thread work determine the real cost.

The concern is noncritical work that delays first paint or blocks interaction after the server has already responded. Confirm the diagnosis with a browser performance trace before changing load order.

Common causes

Common causes include plugin scripts, Shopify apps, chat widgets, tracking tags, font kits, animation libraries, old code left after redesigns, and embeds that load on every page instead of only where needed.

How to fix it

Confirm the warning first and make a backup before editing the live site. If the change involves templates, code, DNS, redirects, or server settings, switch to Intermediate or ask for help before proceeding.

• Custom HTML/static: Load critical CSS first, defer nonessential JavaScript, and avoid stacking font kits, trackers, and libraries. Google's critical rendering path guide explains the underlying issue.
• WordPress: Use performance plugins carefully to defer scripts and remove unused CSS. Test after each change because aggressive optimization can break menus, forms, and sliders.
• Shopify: Remove unused apps, check theme app embeds, and defer noncritical scripts where the theme supports it. Avoid adding multiple trackers and chat widgets without a purpose.
• Wix: Reduce third-party apps, embeds, and heavy animations. Wix handles much of the platform code, so focus on what was added to the page.
• Webflow: Move noncritical custom scripts before the closing body tag, reduce external libraries, and avoid loading unused animations or embeds on every page.