Top Separator / Bottom Separator - CLS Shift / Structure

We’ve been using the Top and Bottom separators on our site and just had to remove them from the homepage because GT Metrix/PageSpeed made reference to content shift. When we checked the issue, it was through use of the Separators.

WITHOUT SEPARATOR
Grade A
Performance 92%
Structure 97%
CLS 0

WITH SEPARATOR
Grade B
Performance 82%
Structure 98%
CLS 1

Here is the code referenced in GT Metrix which caused the CLS issue:

Blockquotediv
#cs-content > div#x-section-3 > div.x-section-separator > svg.angle-top-in

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none" class="angle-top-in" style="fill: rgb(197, 232, 108);">

The entire CLS 1 score was attributable to this Dom Element alone.

Please help as it’s a great feature, but unfortunately, Google considers CLS to be one of their determining features.

Hey @stuartmurphy,

I checked your site and I see a separator. However, there’s no CLS report in Pagespeed Insights.

Please restore the separator so we could see the issue.

Thanks.

Hi, Yes there were more separators. Added back in now as requested. CLS = 1 and Waterfall on GTMetrix will show the issue for you to review.

Hey @stuartmurphy,

I see the result now in both GTMetrix and Pagespeed Insights and I think I have an idea why. Just not 100% sure yet.

Instead of using the built-in dividers, would you mind trying another method as shown in the following video:

Please also give us the following info in a Secure Note so we could do more tests.

  • WordPress Login URL
  • Admin username and password

You can find the Secure Note button at the bottom of your posts.

Thanks.

Hi Christian,

Thanks for looking at this issue. Much appreciated. I’ve employed the SVG method as you kindly suggested. Tested with GT Metrix and CLS issues are sorted. Any idea why the separators built-in to X are causing this issue as they appear to be SVG separators themselves?

It’s a little more time consuming to do this, however, there’s more control over the final result with the SVG method, even though it defeats the significant benefits of using built in methods .

I’ve input two different styles just to check that this method is okay.

Thanks Christian

Hey @stuartmurphy,

I think it’s because the built-in separators don’t have a set width, unlike the other method. I’ll investigate further and report to our development team my findings.

Thanks.

Hi @christian

Homepage separators are fine until logged out of admin and they are totally broken - they look fine when logged in and checking URL logged into to WP. When viewing in incognito mode, or in any browser, Chrome, Safari, Edge, the separators look broken. when going into other internal pages of the site, the separators (X Original ones) work fine, but the SVG method appears to break down when logged out. Any idea why?

UPDATE: I added around pixels extra to each SVG Separator and it solved the issue - using this methodology, it doesn’t seem to give you an accurate view of what you get and what is baffling is that the view from a browser is different when not logged in.

Hey @stuartmurphy,

The dividers look the same when logged in and out. It could be the optimization plugin that is causing the issue on your end.

Please clear all caches including your browser cache. Also, check your site using other browsers including their private mode.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.