Defer render-blocking CSS

Effort Estimate

2-3h

Priority Level

High

Description

announcement-bar.css and accelerated-checkout-backwards-compat.css are loaded synchronously in the <head>, blocking page rendering. Render-blocking CSS delays First Contentful Paint by up to 790ms on mobile.

Fix Instructions

In theme.liquid, move non-critical CSS to load asynchronously using <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">. For the announcement bar, consider inlining critical styles. The checkout CSS can be loaded with media="print" trick or deferred via JavaScript.

Notes & Comments

No comments yet. Start the conversation.

⌘ + Enter to submit