We’ve just completed another really smart Enfold WooCommerce store for a customer in the UK.

The Health Workshop is a health food store and therapy centre based in Ashby De La Zouch, Leicestershire, UK. The shop stocks a wide range of products including high quality supplements, organic & free from food & drink, sports nutrition and natural home & beauty products. They also offer studio classes and holistic therapies in their own private rooms.

The company has had a full rebrand so the website has been designed to closely match the original concepts created by their branding consultant.
The header and menu have been modified for a mobile-first approach and a left hand slide out menu rather than right. The WooCommerce shop look has been separated into categories and products rather than both appearing in the same feed. A new widget area has been added to all shop categories allowing category and attribute filters to be visible on both desktop PCs and Mobiles.

Enfolds default Basket page has been overwritten – So that it includes quantity selectors on mobiles in portrait mode.

You can see the site here: The Health Workshop Ashby De La Zouch

Web vitals pass
The site scores 90+ in Chrome lighthouse testing. Equating to what should be a pass mark over the entire site. The site design lends itself well to speed and has no large banner images – helping keep the scores consistent throughout the site.

A small amount of work left to do here for image size optimisation – See this post: https://kriesi.at/support/topic/media-upload-and-enfolds-thumbnail-sizes/#post-1271808

@Rikard
Correct me if I am wrong
The layout shift is caused by the first Color section on the home page. He needs a solution similar to the one I have suggested to prevent the layout shift.

Something is amiss in the settings for the first color section on the home page. I would suggest that the element either has no min-height or a min-height that is too small meaning that when the content within the color section loads in, it shifts the entire page downwards.

@yigit
The extra <br> tags are only added to pages that have been edited in version 4.8. If you have not opened and updated a page you shouldnt have to revisit it and update it again in 4.8.1
This is the experience I had with my company website prior to updating other sites to the latest 4.8.1.

Essentially I had the same element on two different pages. The one edited in 4.8 showed an extra <br> tag. The one that was not edited did not add the tag.

I hope this helps.

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 5 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 5 years 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.