Prosilver, content jumping and cumulative layout shifts (CLS)

For support and discussion related to templates and themes in phpBB 3.3.
Post Reply
cangor
Registered User
Posts: 82
Joined: Thu Oct 28, 2010 1:56 pm

Prosilver, content jumping and cumulative layout shifts (CLS)

Post by cangor »

Hello,

I'm using a style based on Prosilver (just changed some colors). I looked in the Core Web Vitals at the Google Saerch Console which shows me all "red" (which means "poor") for my phpBB forum. The reason seems to be that some "Cumulative Layout Shifts" (CLS) are happening when the forum is displayed on a mobile. A good explaination is here: https://web.dev/cls/, but in general it says that the layout is changing AFTER the page was displayed which might disturb the user.

And in fact when looking at my forum, the links for "register" and "login" are displayed as icons and texts, but the text is hidden after the page is loaded which makes the layout "jump around", especially when using a slow connection. This happens in this forum here as well by the way.

The text seems to be hidden in forum_fn.js, and I don't understand why these things are handled in a javascript (which is loaded at the end of the page and therefor the changes are happening very late) and not in the stylesheet using media queries.

Is this a known problem? Does anybody have a solution for this problem? I'm afraid Google is rating my forum bad because of this CLS stuff.
User avatar
PlanetStyles.net
Former Team Member
Posts: 4684
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Prosilver, content jumping and cumulative layout shifts (CLS)

Post by PlanetStyles.net »

Some of phpBB's responsive elements are controlled by JS, specifically it's things like:

- Link labels for Notifications / PMs / contact us / the team / members / delete cookies being hidden and replaced by an icon
- Navlinks (such as FAQ) are removed and collapse into the "Quick links" toolbar
- Breadcrumbs are condensed
- Tabs are condensed
- forumlist columns are hidden and replaced with topic / post counts below forum description
etc etc..

I would suspect the reason for these being handled by JS as opposed to CSS would be primarily because:

1. These areas are often template-event heavy, and are therefore variable in nature. CSS media queries are outstanding for responsive design, but only if you reliably know the content you're working with. If you have a lot of extensions, linklists can often get quite long, and defining a fixed CSS responsive breakpoint just isn't going to work.
2. Ancient framework. Prosilver was built in 2006(?) and is still used as the primary framework to this day. Responsive design wasn't a consideration back then, which is why there are lots of hacky solutions present today.

I really wouldn't anticipate any improvements on the CLS front in the phpBB 3.x.x development branch, but 4.0.x will come with brand new and modern front-end technologies, which you can see here: viewtopic.php?t=2485796 .
Post Reply

Return to “[3.3.x] Styles Support & Discussion”