Third-party script hydration mismatch
Hey, I have a third-party script for my CMP which modifies part of the
<body> to add the elements required to show the cookie banner.
The script is loaded with async and defer.
When these elements are added, I get a hydration error.
Using the app:mounted hook or some fixed timeout to show the banner is a solution but then i get a hit in LCP. Any recommendations on how to approach this?
thanks!3 Replies
https://developer.chrome.com/docs/lighthouse/performance/third-party-facades would be the only way to avoid either issue
Chrome for Developers
Lazy load third-party resources with facades | Lighthouse | Chr...
Learn about the opportunities to lazy load third-party resources with facades.
basically you render a "fake" cookie consent banner that gets replaced with the real thing once it's hydrated
it's not ideal though, you'd probably be better off implementing the CMP yourself if you want to avoid performance penalties
i managed to do something like this in the end yeah, thanks!