Forum Replies Created
-
Posts
-
Project update.
After successfully launching a new website for The Honeypot Tearooms in Rosliston, Swadlincote, UK – I was asked to add eCommerce functionality. You can now order fresh brownies delivered to your door straight from the Honeypot Bakery.You can see the site here:
The Honeypot Tea Rooms, Order Brownies OnlineWeb Vitals Pass 95/100
The site passes Google Web Vitals when tested in Lighthouse 95/100 without a CDN or Lazy Load Module. I am looking into using Cloudflare with Railgun but testing is required yet. Browser Side Lazy Load is enabled in Enfolds performance settings instead.Image optimization has been applied along with Font Pre-Load since launch.
A small amount of work left to do as always. But this is a good example of a pass mark without any kind of paid optimization plugin.
Note that using page speed insights generates a slightly lower score. But nothing I am overly concerned about. This seems to be a common problem with Page speed insights.
Its a CSS 4 standard so not commonly used yet. You are right.
Do you have an example of the avf_section_container_add filter in use?
I’ll create a workaround and see how well it functions. I have several sites that use this feature. It might be better to just use an image and remove the padding/margins so it becomes full width, then alter the z-index. This will enable Srcset but will still require additional image sizes for mobiles.
If not I think Media queries for the background image class will be easy enough to implement. I’ll need to introduce some new image sizes to fully optimise. Essentially a mobile width cropped image so it matches the current design. This will mean every background image requires a bespoke rule.
Once I have a working solution I’ll share it here. Its on my to do list!
You would need to modify the rules so it remains on mobiles and also alter its position. The search bar is set to appear in front of the main menu so you would need to alter the height of the main menu to do this on mobiles. If I get time I’ll create a solution, but will be a while!
Take a look at https://www.simplyneedlecraft.com and https://www.thehealthworkshop.co.uk and https://www.dunrichsoftfurnishings.co.uk
My preferred mobile solution:
I normally just add it to the top of the mobile menu (In the theme settings set a different menu for mobiles, add link to search page).
Follow the instructions here for a working example of search added to the mobile menu:
https://kriesi.at/support/topic/how-to-add-the-search-function-to-mobile-menus/You can always add the mobile menu to the top of the actual shop page by adding an extra widget area (see the three shop examples above). The UX experience tends to be better if you can get someone to go to the shop page first so you know their intent.
Looking at lighthouse. Its picking up the non CDN version of the font as the one to load instead of the CDN version. This is why you are still seeing the error. Not entirely sure how to fix that without looking in to it in detail.
Try clearing your cache first and clearing the merged Stylesheets and JS cache as well.
If your CDN provider allows it. Clear the CDN cache as well and let it re-build.As for not passing web vitals lowing the remaining figures could have something to do with your server setup or page layout. I cannot tell without checking the settings.
I always recommend using the built in script merging function in Enfold. Rather than using a third party. I wonder if the issues are actually caused by third party plugins rather than Enfold itself?
Sorry I cannot help further – But it appears to be an issue with the CDN and Enfold rather than a problem with Enfold itself.
I’ve just implemented the following in functions.php to preload the font and prevent font swap.
Add the following to functions.php to preload fontello
add_action('wp_head', 'tj_preloadfonts'); function tj_preloadfonts(){ echo '<link rel="preload" as="font" href="https://yourdomainnamehere.co.uk/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello.woff2" crossorigin>'; }You can also upload your chosen Google font and preload it from local to remove the warning. Complete code below for a font I use on my website:
add_action('wp_head', 'tj_preloadfonts'); function tj_preloadfonts(){ echo '<link rel="preload" as="font" href="https://yourdomainhere.co.uk/wp-content/uploads/avia_fonts/type_fonts/varela-round/varelaround-regular.ttf" crossorigin> <link rel="preload" as="font" href="https://yourdomainhere.co.uk/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello.woff2" crossorigin>'; }Don’t forget to change the domain to your own! If you are pre-loading Google fonts make sure you change/tweak it to the ones you are using!
@mike – This seems to work on my company website https://www.thinkjarvis.co.uk – Although I have mostly focused on the home page so far.I’ve had a look, I cannot see any changes of note. I have removed the files and it has resolved the problem.
I had also edited the error 404 file which isnt really required.
This will affect all of my enfold sites so I’ll go through and fix the child themes.I think I’ve found it.
Includes > helper-main-menu.php is in my child theme.99% sure this is it. But I still need to do some tests to check.
In all honesty I cannot remember why I copied this into the child theme. So I need to do some digging!Cheers for the suggestion Yigit!
Will comment again here if that doesn’t fix the problem.
Hi Yigit,
I tried totally disabling all performance settings, caching plugins, CDN etc.
I also manually emptied Dynamic_Avia to make sure that it wasnt caused in there.The code for alternative menu is there. But its just not displaying so I am wondering if something else is amiss in the settings.
I am going to make a copy of the site on my test server so I can investigate. I cannot leave the customer without a website.If you dont mind I’ll send over some login details so you can see the issue if I cannot resolve it?
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
Sorry I missunderstood your question.
However – Run Lighthouse on your home page. The first element is causing a massive CLS on mobiles.Sorry I’ve possibly given you more work to do!
@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.
Hoping others have noticed that they dont need to re-visit every page if they have not updated the design in 4.8!
No problem this end. I delayed roll out until bugs were fixed :) So only just starting to apply it to other sites. :)
@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.
I’ve noticed this as well! It used to be easier to score highly in GT Metrix but now it is harder than using other Google approved methods.
I’ve found: Mobile Testing:
Lighthouse – Gives higher scores than the others
Page Speed Insights – Lower
Web.vitals – Same test as page speed – Lower
GT Metrix – Latest version – LowestDo 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?
@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-removeRemoves 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!I have found the reason why
The new Google Tracking Tags do not contain a UA number. The Enfold Privacy and Cookie system does not recognise it as a Tracking code – Therefore it doesnt load it.
Please can you forward this to the team. This requires an urgent fix. In the meantime. I will add a function that inserts the track code on all pages but this means the Privacy Modal Cookies on and off settings simply wont work.
Please can you report this as a bug for urgent quick fix.
The sites which I created towards the end of 2020 and into 2021 have all been affected.
Thinking about it and reading to documentation about CLS shift.
If the text and newsletter sign up boxes are taller than the min-height set in the colour section background element then the box will re-size to suit as the elements load. This will cause a perceived layout shift.
You can set a min-height for mobiles in the Colour Section Element. Try increasing it and see if that makes a difference.Otherwise:
Try using @media queries to change the min-height of the Colour Section behind your header for different screen size. This may reduce the layout shift.You can also serve a different sized background image depending on the device using CSS. Serving a different sized image will improve the FCP score as a smaller image can be served to suit the screen size.
Once the new version of Enfold arrives I’ll be experimenting and implementing a full solution to this across all of my customers sites. I use the background element ALOT in Enfold header sections.
@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.Hi Rikard,
No need to apologize Rikard. These things happen – I’d rather have a fully working version with as few bugs as possible than something that has known issues in it.
Hope to see the new version soon.
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.
Hi 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.
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
No problem, Enfold is my Go-To system.
Out of the box it is extremely efficient compared to other WordPress builder platforms. Both in terms of working with it and speed and performance.
Looking forward to the next release!
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 :)
Are all of the images different heights?
If you have original size set then they may jump if they are different heights.
They may also jump if you have lazy loading turned on for that element.
They may also jump if you have not compressed them. Large images take time to load which may cause a visible jump.Try setting the image size in the settings for the element to a fixed size.
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.
