Building a site from scratch always opens opportunities to test each design addition and measure the results it will have on page performance. We recently had this opportunity while building a site with Site Origin’s Page Builder. This was particularly helpful in measuring CLS and getting the shift under control.
What is CLS?
CLS stands for Content Layout Shift. It’s a measure of how far the elements on the page move, unexpectedly, as it’s loading. Some elements are loaded at different phases as the page loads. If an element above the fold shifts while the viewer decides to interact with it, this can have serious negative effects. The viewer can accidentally interact with a part of the page they didn’t intend to.
Google has been getting more strict with CLS in the past few years. They’ve even changed the way they measure it. You can have a page that loads instantly, but then fail the Core Web Vitals Assessment simply because one item shifted unexpectedly.
Building with Site Origin’s Page Builder was particularly eye opening, and we learned several tips to keep the layout shift below the .1 threshold.
- Build with CSS, not JavaScript functions provided by the Page Builder.
- Use a minimal theme, like Corp. More robust themes like Vantage already have CLS issues built in.
- Add a WordPress hook to disable features of page builders that cause high CLS. The Page builder CSS builder class creates responsive CSS. You have the opportunity to filter CSS for a layout before the CSS is sent using siteorigin_panels_css_object. You can use this to build what would have been delivered by Javascript and build a CSS class instead. Build this into a plugin so you can easily reuse the code on any website built this way.
How does this apply to AMP?
Running a separate AMP theme on a website with Page Origin’s Site Builder will bypass the desktop version of the page all together, and following the basic rules of AMP, reduce CLS to 0 while viewing the page on a mobile device. This will also improve the mobile version of the Core Web Vitals Assessment within 28 days of converting the mobile version.
