Google and CLS?

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Post Reply
timeforhelp1
Registered User
Posts: 300
Joined: Thu Feb 19, 2009 5:34 pm

Google and CLS?

Post by timeforhelp1 »

I hate their monopoly but yeah, what am I and us meanials gonna to do about it, anyways.

If you are unaware CLS is Cumulative Layout Shift...
CLS is the unexpected shifting of web page elements while the page is still downloading. The kinds of elements that tend to cause shift are fonts, images, videos, contact forms, buttons and other kinds of content.
Notably certain ad formats, like a push down ad that pushes the webpage down as it loads.

Now one of my advertisers (justpremium)( If you want to monetise your site I highly recommend them guys.) have sent me this...
Going back to keeping things simple, in order to run our formats on desktop, only one small change to the site layout will be sufficient to bring the site into CLS compliancy. This small change is simply having a reserved billboard space on pages you would like to run our desktop units on. This space should have a height of 250px for JustPremium to overlay and therefore not shift the content
So you can see what I possibly have to do on the forum, web pages not affected.
How would I do this without it looking silly, and remember it's only desktop so would not need to be seen in mobile mode.

Cheers
User avatar
GTI
Registered User
Posts: 300
Joined: Mon Aug 24, 2020 4:59 pm
Location: West Sussex
Name: Laura

Re: Google and CLS?

Post by GTI »

For HTML you would add responsive-hide to the advert class,

Here's an example:

Code: Select all

<div class="advert responsive-hide">
	<div class="advert-content">
		I AM CONTENT
	</div>
</div>
If you wanted to do it the CSS way without the HTML example you would just add a media rule,

Here's an example:

Code: Select all

@media (max-width: 700px) {
	.advert {
		display: none;
	}
}
You could have a 1000px wide advert banner across the top of your forum, below the headerbar but above the navbar, this is the most common place for them,

A 250px wide banner would ideally need to be in a sidebar, because it's not very wide but could be 1200px high.
Most of us will enjoy Christmas in the comfort of our own homes this year, however, sadly, that can't be said for people in the Ukraine who are suffering day after day, due to the Russian invasion.

If you would like to make a small donation to help Ukrainians in their time of need, you can donate to help all Ukrainians via BritishRedCross or you can donate to help the Ukrainian children via Unicef. 🇺🇦 Thank You 🇺🇦
User avatar
thecoalman
Community Team Member
Community Team Member
Posts: 5871
Joined: Wed Dec 22, 2004 3:52 am
Location: Pennsylvania, U.S.A.
Contact:

Re: Google and CLS?

Post by thecoalman »

They are referring to the height, the browser doesn't know what the height of the content is. When a user loads a page and scrolls down, the ad code finally loads and the page shifts. Presumably it's banner and will consume the entire width with margins so there should be plenty of real estate for the width. By specifying a height (or width if necessary) for the ad container the space for the ad is already available, no page shift. Using the example above you need an advert class with a height of 250px.
“Results! Why, man, I have gotten a lot of results! I have found several thousand things that won’t work.”

Attributed - Thomas Edison
User avatar
GTI
Registered User
Posts: 300
Joined: Mon Aug 24, 2020 4:59 pm
Location: West Sussex
Name: Laura

Re: Google and CLS?

Post by GTI »

thecoalman wrote: Wed Aug 04, 2021 12:28 am They are referring to the height,
Aha yep sorry I misread that.
Most of us will enjoy Christmas in the comfort of our own homes this year, however, sadly, that can't be said for people in the Ukraine who are suffering day after day, due to the Russian invasion.

If you would like to make a small donation to help Ukrainians in their time of need, you can donate to help all Ukrainians via BritishRedCross or you can donate to help the Ukrainian children via Unicef. 🇺🇦 Thank You 🇺🇦
User avatar
BJZilberman
Registered User
Posts: 1
Joined: Thu Aug 05, 2021 10:50 am

Re: Google and CLS?

Post by BJZilberman »

You could make a placeholder div with "advertisement loading" in it or something, and make a simple jquery that checks the dom for changes, once the ad is loaded you can hide the placeholder within that height spacer
timeforhelp1
Registered User
Posts: 300
Joined: Thu Feb 19, 2009 5:34 pm

Re: Google and CLS?

Post by timeforhelp1 »

Apologies, I did mean to get back quicker, seems they think a phpbb forum wouldn't cause too many problems.
Which is good news for others in the same situ.
Thanks for the replies!
Post Reply

Return to “phpBB Custom Coding”