Hi Mike
Thanks for your reply and for testing as you have.

The results are curious for sure. Why on earth would serving images from a single point of origin reduce CLS scores like this? It makes no sense to me. Is it the way WP-Rocket is handling image routing or their Lazy Load palceholder coding?

I tested as you asked for and the results match yours – exactly zero for CLS on Desktop. I tested with WP-Rocket and CDN disabled (all the other metrics however, are shot to pieces as a result). That issue aside for now, why would the same image, served from a single location change the way the grids are behaving? What actually is happening here Mike – do you have an understanding of why we see this behaviour? I would love to know.

Your wisdom is required!

All the best
Ed

Hi Mike
Thank you for responding.
I need to draw your attention to a couple of important things.
First – the CLS score for each of the pages I gave you are correct. The results you have highlighted at the top of the Insights page are the site averages, not the actual result for that individual page – hence the word ‘cumulative’ : these are drawn as averages. If you select desktop and scroll down you will see the actual result for that page. Yes, these are live results unless the Google engineer I was speaking to is lying. He is on the dev team for this exact metric.
Each of the failing pages (I have 200 of them) carries a red score for CLS and every single one of them has the grid layouts. Insights gives the top three offending CLS issues and they are all grid related for desktop tests.
So that has to mean that every Enfold user has a potential issue with their grid layouts altering positions of DOM elements on each page they appear on yes?
If you believe that to be a ‘no’ then explain why every page I test on, with grids, carries a 0.337 CLS score under Desktop. I am not making this up Mike – the results are on the screen.
And I understand you supplying results from another testing tools but that is unimportant for Google. It is Insights telling me the grid elements cause layout shifts – end of story.
So this needs to be corrected. Everything else is arbitrary to the issue. You can test with as many other tools as you like but the errors remain. The human eye is irrelevant because Google is not measuring that – it has a benchmark and that has a cut off point – one that Enfold grids are failing on.
If I have cause this then I would love to know. I have never made any code changes to any of the grids. FYI Lazy Loading makes no difference.
I get there are other things that cause issues like menus but that isn’t a priority as it doesn’t have the greatest impact – grids do! it’s there in black and white Mike.
Would appreciate your feedback or if anyone else want’s to weigh in on the issue which I happen to think is extremely important – I have data to prove that since this metric began to fail I have lost 60% of traffic to these pages (cumulative) since Google lowered it’s tolerance level for CLS.
Many thanks
Ed

Hi Mike
Thank you for that.It seems to be working now!!!

One final thing if I may – if i wanted to recolour that whole phone info space, what CSS would I need?

Many thanks
Ed

• This reply was modified 3 years, 3 months ago by Swarez.

Hi Ismael

Thank you for that.
I’m referring to the top bar, sorry – should have made that clear! Apologies.
Ed

Hi Ismael
Thanks for replying.
I have no idea what’s going on as you’re right, it all came back! So sorry to have wasted your time.
My only issue is the backwards arrow on the left – it should point the other way – any ideas?
Thanks
Ed

HI Rikard

The code is what you get from opensea.io – it’s an NFT trading site (crypto art). I have 80 listings and want to embed a selection on a web page. That code is what you get when you select their ’embed’ option.

My collection is here: https://opensea.io/collection/abstract-art-by-swarez

Click any listing and click ‘share’. That’s the embed code you get. Nothing more. I was hoping to display it here: https://www.swarez.co.uk/nft-and-crypto-art/

Logins in private section.
Thanks in advance.
Ed

Hi Rikard
My humble apologies – I was recycling a previous user (actually the guy at WP-Rocket called Remy!) and omitted to tell you that the username cannot be amended!

So, the password is correct but your username is remy (was easier than setting up another user!)

I have temporarily removed Google Authenticator
Thanks again and sorry for the delay!
Ed

Hi Rikard
Sorry for the delay
I get what you mean regarding the CSS being generated for the whole site in the dynamic stylesheet and that the theme only produce one version to cover everything. Now that kind of makes the point of my reply redundant but I’d like to check a few things if I may?

I have the following UNLOADED everywhere (according to Asset Cleaner Pro):

CSS>
avia-module-catalogue
avia-module-postslider
avia-module-rotator
avia-module-slideshow
avia-module-slideshow-fullsize
avia-siteloader

JS>
avia-module-slideshow
avia-module-slideshow-video

I guess until I change pother features on other pages I cannot strip out more as I will still require some elements for other features – even if only for ne page.

So, can you check to see if the CSS is rendering without the above?

And also if I were to un-compress everything (uncheck your ‘Enable’ option) I would go back to serving individual JS and CSS files on a per-page basis right? So would that mean I then only serve what each page calls for, rather than the same dynamic files when compression is enabled?

Your help would be greatly appreciated.
Thanks
Ed

Hi Rikard
So even if I unload CSS and JS as a sitewide rule, the theme will not recognize that?
Why do you create a theme option in ‘Performance’ that allows you to only load the elements you want but then generate a CSS file with EVERYTHING put back in it!
It’s a contradiction and is ridiculous – would you not agree? None of this makes sense.
How difficult would it be to add code to let you remove what you need ands then generate a CSS file with reduced bloat? I thought you guys were passionate about performance?
Thanks
Ed

screenshot

The red bars indicate the amount of unused CSS for the portfolio pages (the bulk of my site). I would have hoped that Asset Manager pro would have been able to unload all the relative js and css from the pages as I check the boxes. I know that to be the case as the individual assets are removed in the code. But for some reason the dynamic files do not reflect those changes… is it to do with the way that Enfold caches assets and files? I have WP Rocket installed.

The developer of the plugin says that it does remove the files I ask it to so i don’t think that is the problem here.
Thanks
Ed

• This reply was modified 4 years, 6 months ago by Swarez.

Hi Ismael

Thank you for the update – no, I haven’t’ used any filters as you mention.
Not sure how I even do that to be honest!
Shall I just cut and paste your code in place of the code i posted?
Many thanks
Ed

Hi Victoria

I have rolled back my whole website and database to a backup from Monday and it has returned back to how it should be.

If you had any ideas I would to hear them but don’t worry of not – I have resolved it but it’s very strange that the theme is behaving like this?

Thanks again
Ed

Hi Nikko
The code works! I can now resize and save a Portfolio image of 402x325px!
Thank you so much!
Best wishes
Ed