Hello @shopfy-2020 , Absolutely understand your frustration, you’re not alone. I’ve seen many merchants run into this exact issue — Depending on third-party apps for essential features to experience a decline in performance metrics like LCP and INP but this isn’t ideal, and yes, the burden of optimization ends up on the merchant, which can feel unfair — especially when you’re trying to just run a business.
Here are some advanced techniques you can try to resolve the issue:
1. Use requestIdleCallback for Non-Essential App Initializations
- Instead of loading all app logic as soon as the page loads, defer non-essential scripts using requestIdleCallback. This lets the browser prioritize rendering and user interaction first.
if (‘requestIdleCallback’ in window) {
requestIdleCallback(() => {
loadThirdPartyApp(); // init chat widgets, upsells, etc.
});
} else {
setTimeout(loadThirdPartyApp, 2000);
}
- Use font-display: swap for App Fonts
Fonts from apps can block rendering.Ensure fonts are loaded with font-display: swap.
@font-face {
font-family: ‘CustomAppFont’;
src: url(‘{{ ‘custom-font.woff2’ | asset_url }}’) format(‘woff2’);
font-display: swap;
}
3.Remove Unused Apps and Scripts
- Disabled or inactive apps still load scripts.
- Use Shopify Admin > Online Store > Themes > Edit Code, and search in theme.liquid or other themes for app scripts and remove unused ones.
Once you applied these solutions, you can test your website using Google Page Insights
Alternatively, if you’re overwhelmed with optimization tasks and want to streamline performance, I’d recommend trying the Shopify Website Speedy app. It automates many Web Vitals improvements like Lazy loading images and deferring heavy third-party scripts.
(Disclaimer: We are the developers of this app and are happy to assist with any questions you may have!)