search

opencomponents / oc-template-react

⚛️ Module for handling React templates in OC
MIT License
23 stars 16 forks source link

Significant Cumulative Layout Shift (CLS) identified for server-side rendered OCs #648

Closed sforsberg closed 2 years ago

sforsberg commented 3 years ago

For any server-side rendered OCs that display to the user on page load (e.g. a site-wide header), browsers are rendering the HTML before parsing the CSS. This can lead to an increase in Cumulative Layout Shift of the page which is now part of Core Web Vitals that Google uses for search rankings.

In our case we currently have an Aggregate CLS of 0.25 - 0.5 on Desktop and Mobile. Google deems these values as "Poor" so we are likely encountering some significant SEO losses with these scores. These scores are mostly attributed to 1 or 2 elements in our header OC which is a SSR Open Component.

After digging into this issue for some time, trying different approaches to set fixed dimensions to these elements and others we were still running into this CLS issue. One thing I noticed is that our styles for the header aren't always available on initial page load render.

Proposed Solution

Swap the <style /> tag with the <div /> tag in oc-template-react-compiler so that the browser parses the styles ahead of rendering the HTML to the DOM to mitigate CLS.

I have a working example of this solution here: https://github.com/opencomponents/oc-template-react/compare/master...sforsberg:swapCssAndOCDiv which I have tested locally.

sforsberg commented 2 years ago

The merged PR has resolved this issue 👍