What Changes Should I Make to Third-Party Scripts and Widgets to Minimize Layout Shifts and Fix "CLS Issue: More Than 0.1 (Mobile)"?

Summary

To minimize layout shifts and fix the "CLS issue: more than 0.1 (mobile)", you need to properly manage third-party scripts and widgets. This involves techniques such as preloading, preconnecting, async loading, setting dimensions, and discussing with third-party providers or replacing highly shifty scripts. Implementing these changes can significantly improve your website's performance, user experience, and Google PageSpeed Insights score.

Preloading and Preconnecting

Preloading

Scripts and styles related to third-party widgets can be preloaded using <link rel="preload">. This informs the browser to load these resources early, thereby minimizing layout shifts. However, use this technique cautiously to prevent overloading the network and CPU [Uses-Rel-Preload, 2022].

Preconnecting

Use <link rel="preconnect"> to establish early connections to third-party domains. This can help reduce the time spent in network handshakes. Yet, remember to ensure connections are kept to a minimum as each has an overhead [Uses-Rel-Preconnect, 2021].

Async Loading and Setting Dimensions

Async Loading

Load third-party scripts asynchronously to prevent them from blocking the main thread and causing layout shifts. Check with your script provider or use the <script async> tag [HTML

See how your internal links are holding you back

Get a free internal-link report for your site. No credit card.

Get my free linking report