CODEWITHSUNDEEP
csspagespeed-insightscore-web-vitalscumulative-layout-shift
Phillip Dews
Phillip Dews

Reputation: 338

body causing large layout shift

I have built a custom coded theme for a client of mine and its passing its core web vitals on mobile but not on the desktop version. It seems the main culprit is the body. Here is the score.

I ran it through the CLS Debugger HERE and its not picking it up, instead its giving it a good score.

I changed the CSS on the body to this to se if this would make a difference:

body {
  font-family: "Mukta", sans-serif;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
  float: left;
}

However it has not. Does anyone have any other suggestions to get this website passed for me client. Many thanks. Phillip Dews

Upvotes: -5

Views: 1391

Answers (1)

aarondiel
aarondiel

Reputation: 829

  • remove the width: 100%, body is a block element and will use the full width of the screen by default
  • avoid height: 100% since if the site every expands (for instance because there is less horizontal space) you will get overflow. i suggest using min-height: 100% instead
  • i see no reason to use position: relative and float: left on a body element, you might want to remove these

that's all i can say with the information you gave us.

Upvotes: -2

Related Questions