Layout Shift Issue

  • Resolved Anuj

    (@anujmakhloga)


    1 year, 2 months ago

    I am reaching out to you because I am experiencing a layout shift issue on my website that is causing significant performance problems. This issue has been confirmed through Google’s PageSpeed Insights.

    I have attached relevant images (includes website’s name) that illustrate the problem –

    The first element causing this issue on both mobile and desktop versions is literally the entire post container, isn’t it? In the mobile version, the other elements causing this issue are just the paragraphs. And, in the desktop version, the other element causing this issue is the navigation menu bar.

    Mobile elements – 1st element (zoomed image of the 1st element)

    Desktop elements – 1st element

    However, you can also verify this by checking my website on the PageSpeedInsights platform.

    I’m not sure if the ‘additional CSS’ I’m using on my website is the reason behind all these issues. Some of it was provided by your team to me in the past, and the rest I found in the forum. I worked on them and stopped when they showed approximate results for me. I was trying to design my homepage with two columns because the featured image on the homepage was displaying in a very large size and didn’t look good.

    I have no idea how optimized it is. Here’s the additional css code I am using (I will remove its access later, just in case) – (Additional CSS)

    Please look into this matter and provide guidance or a possible solution. Your assistance would be greatly appreciated.

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi there,

    The images you shared are the effects of the CLS, not the cause of the CLS.

    For instance, something is likely pushing down this entire Container: https://ibb.co/dMG8Hz2

    For reference, could you share the link to the site in question?

    Thread Starter Anuj

    (@anujmakhloga)

    Here’s the link – wikibuff.com/rachin-ravindra/

    The CLS is because of the ads.

    You’ll need to find a way to reserve space for them.

    With GP Premium it’s possible.

    Without GP Premium, you basically need to make sure they are placed in a div that has a min-height equal to the Advertisement height.

    Moreover, it’s best if you also host and Google Font locally instead to further reduce CLS.

    Thread Starter Anuj

    (@anujmakhloga)

    Hi,

    Thank you for identifying the cause of this issue. One last request, could you please determine which specific ad placement is causing it? Is it the one in the header or the one in the sidebar (which are auto ads I guess coz I haven’t placed them manually)? I’m unsure if the ads placed between the paragraphs are causing it, as I’ve placed ads between posts before and never encountered this error.

    The one that causes the most CLS seems to be the one just below the Header though I would assume all Ads have the same effect.

    Try adding the Ads through a plugin called Ad Inserter but make sure they are in a div with a min-height value as mentioned.

    Thread Starter Anuj

    (@anujmakhloga)

    Thank you so much. I am indeed using Ad-Inserter and had placed an ad ‘Before Post’, which I have now removed and assigned to ‘Before Content’. However, only the heading and the paragraphs are shifting, rather than the entire layout, which was happening before. I don’t understand why it’s affecting the other elements when it’s inside the article container this time. I’m confused. Should I use ‘Fixed Ads’ in the header part instead of ‘Responsive Ads’? Will I still get this error even after that?

    Hi there,

    speak to the Ad Inserter plugin support, they are better placed to assist with issues related to adverts that their plugin is inserting. The Theme has no input on this.

    Thread Starter Anuj

    (@anujmakhloga)

    Thanks for your time and effort.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Layout Shift Issue’ is closed to new replies.