Apps causing layout shift on product pages

Shopify Apps
, ,
1

Hello, we are noticing apps like sell easy and appstle on our product pages are causing CLS on desktop. Does anyone have any suggestions on how to best mitigate CLS issues when incorporating apps into the product information section?

Example product for us that is expericing the CLS issues.

4

Do you have any examples of reserved space that have worked for you?

6

Hey @drewfullleaf,
If you are facing issue with the CLS on the product page that cause with the Shopify apps then the best solution is to do the custom of the app functionality.
This is the best way to reduce the CLS. Because the Shopify apps has a lot of scripts itself to make the functionalities on the site. Could you please share the 4 digits collab code so that I can create it with custom coding.
Thanks

7

Hii @drewfullleaf , As you have mentioned, you have a CLS problem for the desktop view, but when I tested your site through Google Page Insights Report, the results are very different, as there is no CLS issue existing in your site for both views. Rather than having CLS, you are having issues with other core web vitals like LCP, FCP, and TBT you need to make changes to improve them.

Here are the practices you can follow to fix the issue -

Delaying page rendering
You can delay the page rendering or certain scripts for a specific period, you can use setTimeout.

window.addEventListener('load', function() {
    setTimeout(function() {
        // Delayed content or scripts
        document.getElementById('delayed-content').style.display = 'block';  // Show an element after delay
    }, 3000); // Delay by 3 seconds
});

Defer CSS for Non-Essential Styles
For non-essential CSS (styles that don’t impact the immediate display), you can load them after the page load using JavaScript:


<script>
  window.addEventListener('load', function() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = '{{ 'deferred-style.css' | asset_url }}';
    document.head.appendChild(link);
  });
</script>

Additionally, you can use requestIdleCallback to Delay Non-Essential Tasks
Like the below example-

if ('requestIdleCallback' in window) {
    requestIdleCallback(function() {
        // Load non-essential resources or do things that don't block the rendering
        console.log('This task is delayed until the browser is idle');
    });
}

Use efficient cache lifetimes
You can configure cache headers to define how long resources should be cached by the browser or proxy caches. This helps reduce the load on Shopify’s servers and improves performance for returning visitors. You can apply caching for non-essential resources by adding specific cache-control headers.
Like the mentioned example -

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    console.log('Service Worker registered with scope:', registration.scope);
  }).catch(function(error) {
    console.log('Service Worker registration failed:', error);
  });
}

After applying the above practices, I recommend testing your site again and seeing if the issue is solved or not. If you still have issues, then I recommend trying Website Speedy- an optimization app that automatically fixes the core web vitals and increases the store’s performance.