-
Posts
-
Dear Kriesi team,
as you know, in the upcoming google update, core web vitals become extreme interesting to all of us.
I’ve tried now a lot of things like font-face, img width set to 100% and auto heigth, but i have still big issues with a high CLS.
The highest impact comes from: <div class=”entry-content” itemprop=”text”> which triggers a 0,055 CLS followed by the big preview image <div class=”big-preview single-big” itemprop=”image” itemscope=”itemscope” itemtype=”https://schema.org/ImageObject”> which triggers a 0,015 layout shift.
On the field data of the lighthouse test i have a 0,66 CLS which is way too high.
The problem appears on all of my blogposts…I hope you can help me with that.
Best regards and a happy new year.
Sebastian
Hey Sebastian,
Thank you for the inquiry.
Google treats something as a layout shift when something that is not in DOM or in the document is added to the page dynamically and it moves the existing elements, so it is quite odd that the big-preview container, which is readily available in the document, causes CLS. Unless they treat the shift caused by the image inside the container as the culprit and blame it to the parent container. If that is the case, then applying a minimum height to the featured image container might help.
@media only screen and (min-width: 1024px) { .big-preview.single-big { min-height: 390px; } }Did you add any custom elements in the post content or in the entry-content container? It is possible that those elements are causing the layout shifts inside the entry-content container.
Best regards,
IsmaelHey Ismael,
thank you for your reply.
I’ve tried your custom css, but the problem still exists.– On desktop i’ve still from a huge cls from this: <div class=”entry-content” itemprop=”text”> with 0,05
– On mobile the largest impact on cls occurs from <p> with 0,048.
I had the last modified plugin a few weeks ago, but i’ve deleted it long time ago. Don’t know about more custom elements.
Hope you can help me.Best regards
SebastianHi,
Thank you for the update.
I’ve tried your custom css, but the problem still exists.
The css code above is supposed to take care of the big-preview container CLS. Do you still see a CLS issue on that container after adding the css code?
What happens when you remove the cp-module or the subscription form inside the entry-content container? There are also a lot of video and image elements in the entry-content container which are lazy loaded, and it is possible that this is affecting the CLS score. Have you tried disabling the lazy load option?
Best regards,
IsmaelDear Ismael,
.big-preview.single-big {
height: auto;
width: 100%;}This helps a little bit.
I’ve tried to disabling the lazy load option and removing the subscription form, but both are doing 0 impact on the CLS score.
The main impact factor is still the <div class=”entry-content” itemprop=”text”> on all of my blog posts even with less of images/videos.
I don’t know what the cp-module is, so a test here from me isn’t possible..Sorry.Best regards
SebastianHi,
Thank you for following up.
Is it alright if we have access to the dashboard? We would like to check if lazy loading is actually not affecting the CLS score. And according to the pagespeed insight tool, there are too many elements in the DOM or the page, or that the content is quite long. You may have to consider removing some of the elements if possible.
Best regards,
IsmaelThe login details are in the private area :)
Hope that you will find something.
I have blogposts from <1k to over >4k words. Not every post is huge. But the high CLS occours on all blog posts….:(Thanks for your support!
Best regards
SebastianFollowing this post.
The same occurs with any easy slider, slider or colour section if a min-height is specified.
If you watch the page load, you can see that the min-height is applied after everything else. Meaning that any element loaded dynamically like this causes a massive CLS shift. The use of a fade in by default also causes CLS as well. Not sure if the team at Enfold have any solutions for either of these issues?If you set an easy slider to display without a min-height for smaller screens the CLS issue does not occur – Because the image does not dynamically re-size in the same way on page load.
The scroll down arrow also affects CLS scores which I have started to remove where it causes problems.It’s something I need to investigate further as I have Jetpack CDN and Photon running. I’ve not tried disabling them yet to see if it resolves the problem as they influence the way images load.
Regarding your initial issue with fonts. Text movement is normally caused by the use of Google fonts. I use SWAP in the performance settings which means the text is loaded with a standard system font and then it changes it to the custom font once it has loaded. Not ideal but efficient. Ideally you need to preload/prefetch fonts. and host them locally. Download your chosen fonts from google, upload them as custom fonts so they are served locally and then add a prefetch to them. You cannot add prefetch naively within Enfold without altering Enfold? Correct me if I am wrong!
I am currently looking into licensing WP Rocket Enterprise edition as this can deal with some of the more challenging aspects of Web Vitals – Like serving Google analytics locally and adding prefetch/preload to fonts. I wouldnt want to pay $40 a year per site though – hence getting an enterprise license to cover all of my customers.
Hey thinkjarvis,
thanks for your reply.
I’m still using wprocket with preloading fonts and font-display:swap (in enfold perfomance settings and/or custom css).
My fonts are still optimized (downloaded and optimized) in the .woff format and hosted locally, so there should not be a load time from google servers.But i still don’t know why i have that huge CLS, but i’m very hopeful, that this great team here will help me, like they did everytime before ;)
Best regards
Its not the fonts that are causing it.
I did a scan of your home page this end. There are 3 elements on the page that are causing a shift.
Elements that I’ve never seen cause a problem before.I’ll leave this with the support team. Create a backup of your entire home page and then remove some of the elements and rerun lighthouse. This may help you narrow down the cause.
Hi,
@thinkjarvis: Thank you for your input.
@Freediver2011: We created a copy of the post (see private field), remove some of the elements including the lazy loaded images and videos and the CLS improves from 0.059 to 0. We also removed the cp-module or the subscription form from the page, but we do not know if this actually helps with the improvement. Please check the screenshot of the lab data.Original post: https://imgur.com/83OPI6S
Copied post without the lazy loaded images and videos: https://imgur.com/gZEX38bThe current CLS score (0.059) is actually good but disabling lazy loading of the WP blocks should help improve it even further.
Best regards,
IsmaelNo problem Ismael,
I’ve got to do some testing with a few customers sites, to try and get them all above 90/100 in Lighthouse. Or at least get the three web vitals passing which is possible without hitting 90/100.
In fact you can hit 99/100 and still fail web vitals on mobiles.
Once I’ve done some more testing I’ll see if I can identify any other causes of CLS shift.
Hey guys,
thank you both very much for all your informations.
You think that the main reason of the high CLS is coming from the lazy loaded images and videos and of course the subscription form(cp-module?)?
I thought that, if they are not above the fold, they will not have any impact in measuring.Am i correct that the cp-module is the subscription form?
But if i disable the lazy load, i get rid in other performance metrics, which causes a higher page size.
What is the right way to go?Best regards
SebastianMy guess is you have not excluded the above the fold images from the lazy load module. Anything you want the user to see straight away should not be lazy loaded. If it is lazy loading the main header image and placeholder then this will cause a flicker and CLS? Try that first it may just be causing everything else below to shift.
This is something that I need to implement as well. A little trickier with Jetpack and Photon and could be the route cause of the CLS we are both experiencing. Not sure if WP Rocket allows you to exclude above the fold content?
As long as the CLS is below the threshold set by Google for web metrics it doesn’t matter whether you have a zero figure or not.
Do some experimenting and see what you come back with.
Just experiment with it first.
Try disabling WP Rocket Lazy load but enabling it in the performance settings in Enfold. Then turn on lazy load for each individual image and video element on a page and see if you still get a pass for lazy load.
The built in Enfold lazy load is just a new tag that instructs modern browsers to delay loading images. The lazy load module in WP Rocket and others is normally js based and adds a script which also can lower the score in other areas.
Good morning guys.
Thanks for your helpful advice.I’ll give it a try to see what helps and what not and let you know soon.
Have a pleasant day :)
Sebastian.
Hi,
No problem. Let us know if you need anything else. We will keep the thread open.
Best regards,
IsmaelI am having the same issues with CLS. My issues seem to come from Grid Rows and columns and also the main image on the page (I am primarily concerned with the portfolio pages here in ALB).
<div class="flex_cell no_margin av_one_half avia-builder-el-3 el_after_av_cell_one_h…" style="vertical-align:middle; padding:30px; ">That is one example – taken from here: https://www.swarez.co.uk/modern-art-paintings-for-sale/rangwali-holi/
Any suggestions? Is Kreisi working on improving code with this or any other general code improvements? Things are moving fast in the world of search and Core Web Vitals are here to stay. We all want clean code and fast sites. What can you update us with please?
Thanks
EdHi,
@Swarez: On opening the page, I noticed a shift once the first image is loaded, maybe because it is lazy loaded. Are you using lazy loading and/or animations for the columns or sections? Either of the two could contribute to layout shifts, so disabling these options should improve the CLS score.Best regards,
IsmaelHi Ismael,
Thank you for this. I have also noticed a jump with Jetpack Lazy Load.
The Real Question is:
If a lazy load script like jetpack or WP Rocket is turned off – But enfold settings for lazy load are turned on (browser based lazy load).Does this still constitute a pass for this in Google Web Vitals? If the answer is YES, then I can disable the jetpack lazy load without impacting the performance score negatively.
It may even improve web vitals as the JS script for lazy load wont be required anymore.
I am currently waiting for the new release of Enfold to apply further optimisation/testing.
@ismael thanks for the response.
I am using WP Rocket Lazy Loading yes. No animations though.
The issue with disabling Lazy Loading is the impact it has on page load – so you cure one problem but introduce a huge new one!! In fact, disabling lazy loading only reducing CLS by a third so no real solution.
What we need is a Lazy Load script that recognizes the correct responsive image dimensions and create the corresponding placeholder so that there is no CLS. Would that not seem logical?
I cannot achieve this with WP Rocket or the inbuilt Enfold option. Have tested one or two other plugins but they don’t resolve the problem either.
Any other suggestions?
Hi,
@swarez: We checked the performance of the above page in the pagespeed insight tool and according to it, the CLS score in the past 28 days is already 0.1, which is very high, given that lazy loading is probably still enabled during those periods. The lab data however, shows that the CLS score is 0.24, but this might be due to the server location against ours, and unless the site is on a CDN, the distance between the server and the client could really affect the site performance or how fast it displays on our browser. But we will look into using placeholders for images while the page is still loading.
Score: https://imgur.com/0VERHZq
Best regards,
IsmaelHi,
@thinkjarvis: We are not really sure about that, but according to the web vitals’ documentation, providing width and height attributes to the images should be enough to decrease the impact cause by any lazy loading scripts to the CLS score. It is also mentioned in the documentation that any images that are above the fold should not be lazy loaded.
Best regards,
IsmaelThanks Ismael,
I’ll do some more research on this once the new release of Enfold comes out.I need to check the documentation for Jetpack Lazy Load to see if it excludes above the fold content (I dont think it does) This could be the route cause of the CLS shift I am seeing.
A quick google shows almost all lazy load plugins apply to all images regardless of position
You have to add the skip-lazy css class to above the fold elements. Otherwise it applies to everything by default.
So perhaps the above the fold needs this class adding on a case by case basis to avoid the layout shift.I’ll trial this when I do my next performance roll out. I’ve come up with a novel way to reduce the FCP score for sites with a ALB Color Section background image which I need to test.
Hey!
If you are using the native lazy loading option, you should be able to prevent the browser from lazy loading a specific image element (slider, gallery, image etc) by selecting the appropriate option in the Advanced > Performance > Lazy Loading Of Images settings,
Regards,
IsmaelHi @ismael
Thanks for the reply.
The Lab Data is the one that Google use in the Search Console so I am currently red in terms of performance. FYI all image and data files are served via CDN (KeyCDN) so there shouldn’t be any significant latency serving scripts or images.
An inspection of the CLS problems seems to point to code that manages the grid elements. Just worth noting that.
Regards
EdHi,
@Swarez: If the layout shift points to the Portfolio Grid element, then this css code might help..isotope { -webkit-transition: none !important; transition: none !important; } .grid-image { opacity: 1 !important; }This will disable the grid transition and make sure that the portfolio images are visible immediately without animating.
Best regards,
IsmaelThanks @ismael – that’s very kind of you.
Sadly, it doesn’t yet seem to have made any difference to the CLS issues. My temporary workaround was to swap the image to below the fold but that isn’t how I want things to be. I really hope we can get a solution on this soon – you have flagged it with Kreisi yes? With Gutenberg and blocks making more progress the need for a slicker and faster theme could prove commercially smart for any developer. Just my thoughts.
Thanks for you help as always.
EdHey guys,
the CLS is still getting me in trouble.
Since my last inquiry, i haven’t changed anything to my posts, because in lack of time…but the CLS score is getting worse and worse.It’s really annoying to fight with that score.
Main factor for the high CLS is now the cookie consent bar…..i don’t know why, because i haven’t made any change. It’s impact is over 0,2 (only the cookie consent message).
Can someone explain and help me with this mystery?
Thanks and best regards
Sebastian@Freediver2011
Something doesnt look right with the first headline. Yes the consent bar is causing a shift for some reason however, the first colour section and heading are causing a greater shift. Perhaps start there.Try Reducing the font size and button size within the cookie consent bar. If it has no fixed height it re-sized dynamically based on the content? Therefore causing a small layout shift?
The heading appears to be served with a post class. Not as a special heading?
LASS MICH DIR HELFEN APNOETAUCHEN ZU LERNEN
Wie Du in nur 3 Tagen satte 3 Minuten deine Luft anhalten kannst!If I am not mistaken – Perhaps try changing it to a special header element?
Try changing the settings for the min-height of the Colour Section background element behind the heading as well.
- You must be logged in to reply to this topic.