How inline JavaScript quietly slows down your Shopify store (and how to fix it)
When a Shopify site feels sluggish, most people start with the usual suspects: large images, too many apps, bloated scripts.
We run PageSpeed Insights, scroll through network tabs, and see which JavaScript files load.
But there’s one performance issue that’s easy to miss and doesn’t show up where you’d expect it - inline JavaScript.
Inline scripts sit right inside your HTML document. They don’t have filenames, and they don’t appear as separate rows in most performance tools. Yet they can quietly add serious weight and delay to your store’s first load.
Let’s unpack why this happens and how you can track it down.
What inline scripts actually are
When a browser loads a web page, it first downloads the HTML document - the main file that holds your page’s structure and content. Then it starts fetching other resources like CSS and JS files.
But sometimes, JavaScript is written directly inside the HTML, between <script> tags. This is called inline JavaScript.
Example:
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
</script>This looks harmless, but inline scripts can become a performance problem if they grow too large or include unnecessary logic.
Inline scripts are hard to notice because:
They don’t have filenames like “app.js” or “theme.js”.
They blend into the HTML file itself.
Most speed tools don’t highlight them clearly.
We’ve seen stores where the HTML file, which should be around 30–50kB, bloated to over 150kB just because of inline JavaScript.
Why inline scripts slow down Shopify stores
There are two main reasons inline scripts can hurt performance.
1. They increase the HTML file size
If your HTML file grows from 30kB to 130kB, that’s an extra 100kB being downloaded before the browser even starts to load images or other assets. On a mobile connection, that might mean an extra 100–200 milliseconds of waiting time.
This delay happens before any content appears on the screen. The bigger the HTML, the slower the first render.
2. They block rendering
Inline scripts can’t be deferred like external ones. When a browser hits an inline script, it must stop parsing HTML, run the script, and only then continue rendering.
If that script takes a while to process, it delays when the user sees anything on the page. On lower-end mobile devices, this effect is even stronger.
We once optimized a Shopify store that had over 120kB of inline code running on every single page. After replacing it with a few simple custom snippets and moving tracking logic to external files, the store’s load time dropped by more than 100ms per page view. That’s a big difference at scale.
How to find inline JavaScript on your site
You don’t need to dig through DevTools manually. There’s a faster way.
Enter your store’s URL.
Wait for the report to load.
Look for rows labeled “script #text”. Those are your inline scripts.
You can then check how large each inline block is and see whether it includes code that could be moved elsewhere. Many times, it’s tracking or app-generated code that doesn’t need to be inline at all.
If you’re unsure, you can copy the script text, paste it into a text editor, and look for references to analytics, third-party widgets, or marketing tools. These are usually safe to move.
When it makes sense to clean them up
Inline JavaScript isn’t always bad. Small pieces that set up page-specific variables or tracking events are fine. But you should review it when:
Your HTML file exceeds 100kB.
Your site feels slow on mobile, even after optimizing images and apps.
You see many “script #text” entries in DebugBear or similar tools.
FAQ
1. Is inline JavaScript ever necessary? Yes. Some scripts, especially those that must run before anything else (like cookie banners), make sense inline. The key is keeping them small.
2. Will removing inline scripts break apps or tracking? Possibly. If the script was added by an app, test after removal. In most cases, you can move it to an external file or trigger it after page load.
3. Does Shopify itself add inline JavaScript? A small amount, yes. The platform injects basic tracking and theme logic. That’s usually fine. Problems appear when multiple apps each add their own inline snippets.
4. What’s a good HTML file size target? Under 60kB is ideal for most Shopify stores. Above 100kB, you should review what’s inside.
5. Can inline CSS cause similar issues? Yes, though the impact is usually smaller. Still, large inline CSS can add weight to your HTML and block rendering too.
Wrapping up
Inline JavaScript often hides in plain sight. It doesn’t show up as a file, yet it can slow your Shopify store down just as much as heavy third-party apps.
The fix isn’t complicated - just awareness, a quick scan with the right tool, and some cleanup. Once you trim or move that code, your store will load faster, feel smoother, and give visitors a better impression.
