A parser-blocking script stops everything. The browser is reading your HTML top to bottom. It hits a <script> tag with no defer or async attribute. It stops parsing. Downloads the script. Executes it. Then continues building the page. Nothing appears on screen during that entire process. Parser-blocking scripts block the construction and rendering of the DOM until the script is loaded, parsed, and executed. They also create congestion on the network and significantly delay page rendering, impacting metrics like First Contentful Paint and Largest Contentful Paint. Most Shopify themes have at least one. Many have several. Some have them stacked in the <head> where they do the most damage, blocking the entire page render before a single pixel appears. You can use Theme Check to identify possible performance issues in your theme code, including large CSS and JS bundles, references to remote assets, and parser-blocking JavaScript. Finding them is straightforward. Fixing them requires knowing which scripts are safe to defer and which ones have dependencies that need to load in order. ↓ Swipe through. How to find them, what they cost, and how to fix them. How many parser-blocking scripts does your theme have right now? Drop a comment.
You can optimise your theme, but it won’t matter if apps are blocking the render. Most Shopify apps inject scripts into <head> without defer or async, slowing your first render. More apps = slower store. - Custom isn’t always better, but it gives you control, and that’s what improves performance.
7841806439
You can just capture and break apart content for header to extract the script api placed scripts. You can even take it a step further and manage the injection of every element in content for header if you want. The latter is more extreme, but you can move most items to the end of the body and adjust as needed. Most items relating to checkout and shop pay have to stay in the header from all of my tests. That said, while Shopify says do not do what I am saying, might as well. The only code you truly cannot mess with are app embeds. App embeds are injected into the page serve through unknown methods. Even if you capture and do not output content for header, have layout none, etc enable enabled app embeds will still be injected at the bottom of the head element.