In our PSI data we are seeing some pages with outrageous CLS numbers which we cannot reproduce or make sense of. In fact, here is an example of one page that has 2.52, but I did not even think it was possible to get over a score of 1.0, which would be a complete shift of everything on the screen, am I right? And is there some problem with the data/chrome, because this is not an isolated incident...our site pages suddenly started suffering terrible CLS data about a month ago and we are bewildered, in Core Web Vitals area of GSC.
Look in the Field Data at the CLS...2.52, but the lab data is .044. PSI Link
Why the difference between lab data and field data?
CLS in the lab tests (synthetic tests) is purely for initial page load and above the fold.
CLS in the field data (real world) is measured from the second the first (well technically second) paint event right until page unload.
So if there are layout shifts happen as someone scrolls the page those keep adding to your CLS.
How can I have a CLS greater than 1?
Imagine you scroll the page and the scroll bar suddenly appears, that would shift the whole page. Now CLS is based on the percentage of the page that moves. So if the whole page shifted to the left by 10px you would get a Layout Shift of almost 1 (think of 1 as 100% of the visible page, 0.5 would be 50% of the visible page moved etc.).
Let's assume that as you scroll the page further the scroll bar suddenly disappears, the whole page now shifts to the right by 10px. This would result in an additional Layout Shift of almost 1.
Now you have had two Layout Shifts of almost 1 - your Cumulative Layout Shift would be almost 2.
I have simplified how layout shift is calculated but I think the principle is easier to understand with the above example.
Real User Metrics (RUM) are the way to capture these sorts of issues.
As for CLS data suddenly changing, I would recommend using something like the web vitals library to pipe the data to either a custom backend or to your analytics so you can see if this is a specific device, screen size etc. causing it.
Spotting Issues with Developer Tools
To see layout shift regions, go to Developer Tools - > Rendering -> Check "Layout Shift Regions" and then load the page a few times, resize it etc.
The only thing I could see is that your mobile menu has some very strange layout shift regions that are particularly bad at large screen sizes. Other than that there is a massive shift when the page loads but that shouldn't take it over 1.
I know the problem is on desktop but I can't remember if they put tablet data in the desktop or the mobile field data...if it is desktop then you may have your answer!
Related
Under my field data overview, CLS value comes out to be 0.98
whereas when, I look at description for Avoid large layout shifts - CLS contribution is 0.004.
How to figure out the elements that are causing CLS?
Hi Shreya you need to use Chrome click on the 3 dots to the right then go to more tools then developers tools in the screen that appears click on the performance tab click the dot to the left it will turn red when it recording when it finishes you get an orange bar that says Layout shift double click on that bar and it should give you more infomation in the Summery tab in this example it gives the following
Layout Shift Warning Cumulative Layout Shifts can result in poor user
experiences.
Score1.000
Cumulative Score1.000
Had recent input No
Moved fromLocation: [0,0], Size: [360x640]
Moved toLocation: [0,0], Size: [360x640]
Related Node li.velocity-animating::before
Openseadragon newbbie here !
I'm trying to display images by group of 2 AND keeping sequence mode activated, so I can "turn pages".
I managed to display 2 pages, I managed to read pages 1 by 1 in sequence mode, ...
But I just didn't find a way to do both.
To display 2 pages, I loaded 2 tiles sets and configured "sequenceMode=false". Then I set coordinates, to display visuals aside.
To read pages 1 by 1, I loaded several tiles and configured "sequenceMode = true".
What I would like to do is display two visuals (= tiles sets) aside (like an open book). And then, on "next" button click, display the two next visuals from my "tilesSources" array... and so on !
Thank you for your help !
I recommend keeping sequence mode off, like you did for the two pages, and lay out the entire sequence (in pairs) that way. You should then create your own next/previous buttons and use viewer.viewport.fitBounds to animate the viewer to each pair as needed.
Here's an example of a system that does something like that (plus a lot more):
https://iangilman.com/osd/test/demo/m2/
Press the "book" button at the top to see the "two-page" mode. The code for this is here:
https://github.com/openseadragon/openseadragon/tree/master/test/demo/m2
Of course you don't need all of that code, but hopefully it can be a helpful reference.
If I do a search on Google, by my understanding, it will affect the ordering of results both for me, and the rest of the world, very slightly, depending on the results I click on. This is to adjust to the 'feedback' - me scrolling down to the third result vs. clicking on the first one.
However, if this single click is enough to tip the balance, or I keep a search result page open during a major algorithm change, how does Google know what results to show when I click to change the page? E.g if the algorithm shift means that a result previously on the bottom of the first page has now moved to the top of the second page, if I click to move onto the second page, will Google just reload the results and show the result again, even though I've just seen it?
In general, what is the best practice for this? Is this even something that needs to be accounted for?
I have a system where if you walk by a sign it will create a popup dialogue which is fine (just the popup part) but when I try to make it to where it can be adjusted based on how much text is displayed (Content Size Fitter) then I get something that literally does not make any sense to me whatsoever. When using World Space my font on Text components has to be 0 (also makes no sense) so that 1 letter isn't the size of 100 units and the combination of these 2 issues has almost made me go mad but that is the reason why I am here so you all can save me!
My setup for my sign :
Now this is the dialogue that is spawned viewed from the inspector (Not shown in the scene/game view yet) :
Now this is when the player walks near the sign with all the components you see in the screenshots :
As you can see the height of my dialoguePanel for some reason keeps going to 321 and New Years isn't close so this countdown I am not happy with. It should be adjusting to how much text is in it. I mean I just did a tooltip almost 100% identical except that the Canvas isn't World Space but Screen Space - Overlay. On top of all this it seems any text I use in World Space HAS to be font 0. Please help I am about to lose my mind.
World space canvas is a bit tricky. And guess what is even more tricky: content size fitter. One of solutions is that you add your dialog UI element manually in the scene at desired location and tweak its RectTransform values in inspector to get what you want to see in scene view and then save it as prefab.
Read more about How Content Size Fitter works and there is one more thing about UI when working with world space canvas. UI is way too bigger than your other scene elements. To solve this problem you have to scale it down as instructed in section Specify the size of the Canvas in the world.
Hope it helps :)
I am using MVC3, ASP.NET4.5
Love Glimpse, but finding the bottom right location frustrating, as it can disappear, and only by resizing the browser window, does it reappear again. May be to do with my master page and layers, not sure
So can one have the HUD appear top left.
Probably a simple html/ config issue.
Many thanks,
EDIT
Perhaps, on reflection this is not possible, as the detailed panes pop upwards, so no room. Would have to be a Heads Down Display :)
Currently its not really possible because of the design (as per your edit). But v2 of Glimpse should allow for such changes to occur as the design is different and should allow for this flexibility.