Do you mean between elements up and down the page or left and right of the elements?

I have found some random <br> tags have been added between elements of the page builder.

take a look at https://www.thinkjarvis.co.uk and look between the icons as per screenshot below:

https://www.thinkjarvis.co.uk/wp-content/uploads/2021/03/br-screenshot-1.jpg

Is this what you mean?

I’ve just seen that Yigit has posted a link to a temporary workaround on a couple of other posts however the link has expired (404). Looks like Enfold are aware of the problem if is the same problem I have?

• This reply was modified 4 years ago by thinkjarvis. Reason: more info added

@freediver2011
I’ve just cracked this on my website. https://www.thinkjarvis.co.uk Full pass on Lighthouse in Chrome 93/100. (just depending on server response time).

Right where to start. Please read the following very carefully.

@Ismael – Please can you use this as a basis for a fix for @freediver2011
The background element needs a fixed height on mobiles to reduce the CLS to an acceptable level.

The min-height box for ALB elements is controlled by data classes – JS not CSS.
The opacity layer, and all of the containers within the slideshow or ALB colour section therefore have no fixed height.
The JS is applied after the CSS therefore causing a layout shift. So as a workaround you have to specify heights and widths of the elements that make up the box.

The background images in colour sections and slider images, captions and everything else have no set height and width. They have min-height and min-width. Therefore they shift when it renders the page.

Note – ALB sliders are currently more efficient than Background images – This is because it serves scaled images. You have to add some extra @media queries manually to optimise ALB colour section background images. Tutorial to follow when I get time.

For my site the appropriate min-height for mobiles is 351px So I entered this into the box in the style section.

I then added the following code.

This workaround is for full width easy sliders as per my website. But can be adapted for background colour sections using the same logic. I will share a solution once I have applied it to another site on my server for testing

Set a custom ID for the first element on the page.

#tj-fade-remove

Removes animations on mobiles (note there is some overlap in these bits. I need to refine it a bit more).
This drastically improves LCP by 5 seconds and a pass mark in lighthouse.

/* Removes animations on first element/ Slider on mobiles only */

/* Removes animations on slider titles and caption */
@media only screen and (max-width: 767px) {
#tj-fade-remove .avia-caption-title, .avia-caption-content, .avia-slideshow-button {
	-webkit-animation: 0s ease 0s normal none 1 running none !important;
	animation: 0s ease 0s normal none 1 running none !important;
	visibility: visible !important;
}
/* Removes animations on slider titles and caption */
#tj-fade-remove .container {
    -webkit-transition: opacity 0s;
    transition: opacity 0s;
}
#tj-fade-remove .avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title {
	-webkit-animation: 0s ease 0s normal none 1 running none !important;
	animation: 0s ease 0s normal none 1 running none !important;
	visibility: visible !important;
        transform: none !important;
       -webkit-transition: opacity 0s;
       transition: opacity 0s;
}
/* Disables some JS use with caution this will remove buttons and the main header from slideshow captions */
.js_active .avia-slideshow li:first-child {
  visibility: visible!important;
  transform: translateZ(0px) !important;
-webkit-transition: none !important;
}
}

Note – I removed the opacity settings and just applied opacity to the image directly. Therefore reducing render time.

/* Applies fixed height for mobiles based on content */
@media only screen and (max-width: 767px) {
#tj-fade-remove {
height:351px !important;
}
/* Applies fixed height and width to image based on enfold min values and offset */
#tj-fade-remove img {
height:351px !important;
min-width: 762px;
left: -201px;
}
}

I hope this helps others. I have one last bit to add to my setup which is serving Google Analytics locally.
I have actually disabled Jetpack Lazy Load and Photon as this seems to have improved the score rather than reducing it!

• This reply was modified 4 years, 1 month ago by thinkjarvis. Reason: spelling error

@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.

Thanks 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.

If you are using WP Rocket, try this. Arno has come up with a full guide for WP Rocket setup with Enfold. There a couple of bits on here I would have done differently but you could always check your settings against this as a good benchmark

https://www.arnoweterings.nl/optimal-wordpress-wp-rocket-settings-with-cloudflare-cdn-and-enfold-theme-which-got-us-100-98-on-gtmetrix-last-update-10-2020/

Have you seen the list of features and fixes? A lot of work is going into the new release. Which is why it has taken a while.

I’m really looking forward to giving it a test drive :)

Its on the list for the next release of Enfold.
https://kriesi.at/support/topic/enfold-upcoming-fixes/

I have also raised an issue in another post where all dropdown functions in Enfold widgets do not work – Same Jquery Migrate issue.

Just use the workaround plugin for now. I have 9 sites that are affected. The other 25 are OK so it is only sites that rely on an alternative mobile menu in the settings.

If you password protected private content then the page is still visible in google and on the sitemap, just that the page content is set to private with a password? Is this what you mean?

If the page is not supposed to be live on the website at all. Set it to draft instead of private. This will remove it from the sitemap and make it so no one can publicly access it.

I have assumed you are using a sitemap generator of some sorts.

If you have the site registered with Google webmaster tools (Google Search Console) you could remove the page from the index manually using the removals tool. This would prevent the page showing in Google searches assuming google accepts the removal request.

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.

No 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.

Following 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.

Launched just before Christmas.
Enfold based website for AMR Deliveries, a local / national courier service based in Swadlincote, UK.

This site includes Trust Index Integration – which aggregates reviews from Trust Pilot, Google and Facebook into one feed – Without paying trust pilots extortionate widget prices. It also uses a combination of free optimisation plugins including WP-Optimize and Jetpack.

To view it please click the link below:
https://www.amrdeliveries.co.uk Local Courier Service UK

Tested in Lighthouse scoring 77/100 with more improvements to follow before May 2021. This is due to the chat widget and use of Trust Index which slow the site slightly. Hard to avoid a performance dip when the feeds are live. Overall a strong performance for a site with external features.

in wp-admin
Click tools from the left hand menu
click jquery migrate
selected legacy from the dropdown
untick the other tickboxes.
Click save.