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

Themes
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