Render <style /> before OC react <div /> to mitigate CLS

[sforsberg]

In an effort to mitigate Cumulative Layout Shift (CLS) for server-side rendered OCs, this change renders the<style /> tag before the OC <div /> tag to ensure the browser is able to parse the styles before rendering the OCs HTML to the DOM.

In the current project I am working on, our server-side rendered OC header is the leading contributor to our site-wide CLS issues. According to Google Search Console, our Aggregate CLS score ranges anywhere from 0.25 - 0.5+. Once this fix was implemented locally, I saw that the CLS dropped to under 0.01 in my local (typically local CLS is around 0.5 - 0.7).

Issues Fixed

• 648

[kmcrawford]

This LGTM, @matteofigus do you know if this will cause any issues with the render order? CLS is a big thing these days and if OC is a culprit it would be good to fix.

[sforsberg]

@matteofigus Can this be merged and published? 🙏

[matteofigus]

Released. Thanks for the help.