Boosting Your Shopify Store's PageSpeed Best Practices: The CSP 'object-src' & 'base-uri' Fix

Hey fellow store owners and developers!

Ever run your Shopify store through PageSpeed Insights only to be met with those pesky "Best Practices" warnings? They can feel a bit like a mystery, especially when they mention things like Content Security Policy (CSP) directives. Recently, our community jumped into a fantastic discussion about one such flag: the missing object-src and script-src directives.

It all started with Puneet (aka WetandDry) sharing a "partial fix" for the object-src 'none' recommendation. The beauty of community discussions is how different experts weigh in, adding crucial context and even improving on the original idea. Let's break down what we learned and how you can apply these insights to your own store.

Understanding the CSP 'object-src' Warning

First off, what are we even talking about? Content Security Policy (CSP) is a security standard that helps prevent certain types of attacks, like Cross-Site Scripting (XSS). Essentially, it tells your browser which resources (scripts, images, plugins, etc.) are allowed to load on your page.

The specific warning Puneet highlighted was about object-src. This directive controls where plugin content (think old Flash or Java applets) can load from. The recommendation to add object-src 'none' means you're telling the browser: "Don't load any plugin content from anywhere."

The good news? As Weaverse and others pointed out, virtually no modern Shopify store uses Flash or Java plugins. So, adding this directive typically has zero functional impact on your storefront. It's a sensible security hardening step that helps clean up your Lighthouse "Best Practices" score without breaking anything.

The Community-Approved Fix: Adding the Meta Tag

The core solution, as initially shared by Puneet and seconded by CodingFifty, involves adding a specific tag to your theme's layout/theme.liquid file. This meta tag delivers a Content Security Policy directly to the browser.

Step-by-Step Instructions:

1. Access your theme code: From your Shopify admin, go to Online Store > Themes.
2. Find your current theme and click Actions > Edit code.
3. In the file explorer on the left, navigate to the layout directory and click on theme.liquid.
4. Locate the section: You'll see an tag near the top of the file.
5. Paste the code: The community strongly emphasized that placement genuinely matters. A CSP delivered via only governs what loads after it’s parsed. So, you'll want to place this meta tag as high as possible, ideally as the first line inside your section. This ensures it's parsed before any other scripts that might be injected early by apps.
6. Add this line (for object-src only):

7. Save and test: Click "Save" in the top right. Then, clear your store's cache (if applicable) and run PageSpeed Insights again to verify the result.

Going a Step Further: The 'base-uri' Directive

Vlad_Gerasimchuk chimed in with a fantastic "cheap win" to add alongside object-src 'none': the base-uri 'none' directive. Lighthouse's "CSP is effective against XSS" audit actually looks for three directives: script-src, object-src, and base-uri.

Adding base-uri 'none' blocks an injected tag from rewriting all your relative URLs to an attacker's domain. Like object-src 'none', it has near-zero functional risk on a typical Shopify store. So, you can safely stack them for a bit more of a "Best Practices" bump!

Updated Instructions (with 'base-uri'):

Follow steps 1-4 above, but for step 5, use this combined meta tag:

Again, place this combined tag as high as possible within the section of your layout/theme.liquid file.

Important Nuances and What This Fix Doesn't Do

While these meta tags are great for improving your "Best Practices" score, the community also shared some vital qualifications:

• Check for Embedded PDFs: Weaverse reminded us to do a quick check! While rare, some stores might embed PDFs (size charts, spec sheets, menus) using