Casper Cumulative Layout Shift (CLS) on Google Pagespeed Insights is > 0.10

Themes
1

I am an happy user of the default Casper theme. I am using right now the 5.4.8.

Unfortunately, I noticed that on Google Pagespeed Insights, the theme has a quite low accessibility score, due to a cumulative layout shift that is usually higher than 0.10.

I was wondering if the developers have in mind to fix these issues in the future, in order to get a better CLS score:

image
image946×259 16.7 KB

main.gh-main > article # intro > div.gh-content > p

I have several of these paragraphs error in my page. They all add up and increase my CLS score. This happens also with other Ghost pages.

I am available for discussion about this with the Casper developers.

2

Updated with more infos about the error.

3

Can you share the page where you’re seeing this?

CLS (cumulative layout shift) is usually calculated separately from accessibility. CLS measures how much the page shifts during load. Minimal or zero shifting is ideal. Casper generally scores fine on CLS, so we need more information to answer your question.

1 Like
4

I have discovered a solution to address the issue. The official table of contents ghost guide suggests using tocbot to generate a table of contents that appears on the side for desktop devices and at the top of the content for mobile devices. However, this approach is not ideal for mobile, as it violates Google guidelines by causing cumulative layout shift. To resolve this, I have added the following code within the style tag in the default.hbs header:

@media (max-width: 1300px) {
.gh-sidebar {
display: none;
}
}

By implementing this code, the table of contents will no longer be displayed on mobile devices or smaller screens. This ensures better adherence to Google guidelines and improves the overall user experience by also giving a positive CLS rating.

1 Like
5

Hey @RyanF ,

Unfortunately, I have similar issues with Casper. An example URL with this issue (but all my articles are the same): https://tmsvr.com/gradle-multi-module-build/ . The Chrome lighthouse tests look okay, but Google PageSpeed insights show worse than acceptable CLS values degrading search rankings.

The main contributor to the CLS is the section shown on the screenshot, basically the whole content block.

Screenshot 2023-09-03 073105
Screenshot 2023-09-03 0731051432×531 38.6 KB
This is the same for every page.

This metric used to be okay, but a few months ago just broke for some reason. Any advice would be greatly appreciated!

6

Hi, there!
I think your site is fine and wouldn’t worry about optimizations at this point. I’d just keep creating content.

The first, and most important thing to note is that PageSpeed Insights (PSI) has no bearing on search rankings. People are surprised by this, but PSI is a diagnostic tool. What does impact search rankings is the Chrome User Experience Report. The difference here is that this report is based on real-world usage. That data is most readily available in Google Search Console.

As important as it is to offer users the best experience (fast, smooth website), this experience plays a negligible role in search rankings. It’s much more important to have lots of high-quality content.

If you do want to chase the optimization dragon, two easy options:

  1. Don’t use a feature image.
  2. Use jpeg instead of a png. It’ll likely be a smaller file size.

You can also follow the suggestions laid out in Google PSI, but these will likely require updates to your theme. We are also always working on improvements to web vitals for Ghost sites :racing_car:

2 Likes