Forum Replies Created
-
Posts
-
Hi Ismael,
Thank you for sharing the links.
Little bit of an oversight my end I guess as it can be done using the default hooks.
I will probably add something like this to functions.php
https://www.webroomtech.com/add-code-to-header-and-footer-wordpress/Really useful document to understand what I want to do
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_contentThis will allow me to add pre-load to fonts removing the error in Google Lighthouse testing without another plugin.
I only have one more issue to deal with and that is serving Google Analytics or Tag manager locally. This may have to be a plugin solution for simplicity.
Feature request: add pre-load to fonts option in performance panel
Please can you consider adding this as an option to turn on in the performance panel?Google requests that render blocking resources like this are pre-loaded to prevent CLS caused by font swapping and ensure that custom fonts like icon fonts are visible immediately.
Essentially select the toggle for pre-load and the preload tag is added to google fonts, fontello and any user uploaded fonts in the header of the page.
It would be nice to have this as an option in the performance panel in Enfold, otherwise – Another plugin is needed which seems unnecessary. Enfold offers a range of built in fonts so the theme is a better place to deal with the issue.
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.
Another one up
Senturian Security Group Ltd are one of the UK’s leading corporate and event security companies in the UK. Established in 2006 and approved by the SIA they provide a range of manned security services including close protection (bodyguards), event stewards, door guards and reception / gate house operatives.Think Jarvis designed the new website and revised the company logo as part of an ongoing company re-brand and marketing project. The site is based on Enfold and uses a custom icon font rather than PNGs throughout the site. Each page is designed to be used as a landing page for each service and for future Pay Per Click campaigns.
The icons on the home page use a modified 5 column layout set to 7 columns so that all of the service icons fit on one line. (Thanks support forum for assistance).You can see the site here:
Senturian Security – Manned Security Contractor based in the UKThe site scores 87/100 in Google Lighthouse with more performance features coming including font pre-load / pre-fetch. Further improvements to be made prior to May 2021. The customer has requested a live chat which will affect performance figures. So it may not be possible to achieve 90/100 with this feature enabled.
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.
My 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.
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.
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.
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 today!
The Honey Pot Company runs the Honey Pot Tea Rooms, Coffee Shop and Bakery located in Swadlincote and Burton On Trent UK. All 3 are popular with local residents for their home made cakes and giant american style doughnuts. The company was looking to replace a broken existing website and organize their web presence.
Think Jarvis redrew their logo in Illustrator professionally and created versions for use throughout the business and saved the company £400 a year in unused online services which were accumulated over the life of the business.
The site uses the Catalog feature within Enfold to display the menu in a similar way to the restaurant demo theme. This works extremely well for menus.
During the current COVID outbreak the company opted to use phone and collect rather than click and collect due to the bespoke nature of cake orders and shorter opening times. So no E commerce features yet but Enfold provides a great platform which means they can be added easily if required.You can see the site here:
The Honey Pot Tea Rooms, Coffee Shop and BakeryThe existing website was held on a different domain which is still transferring and will be permanently forward to the new domain to prevent loss of traffic.
The site performs well in Google lighthouse with a score of 90/100 for performance with more updates coming before May 2021. The site uses custom .htaccess settings, wp-optimize and jetpack. Lazy load is enabled in Enfold Performance settings.
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 UKTested 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.
Its not the theme version.
WP 5.6 is the problem as it removes support for the older Jquery version. So its best to use this work around in the meantime.The team at Enfold need to investigate to find the bug. Not sure if the Enfold team are looking into this yet as it has not been added to the upcoming fixes thread.
I have gone through all of my Enfold sites and it affects about 8 of them. The rest dont use an alternative mobile menu.
I have replied to a couple of other threads raising the same issue. I am waiting an update from the Enfold team now to confirm it is on the bug fix list.
I hope that your site is now running as expected :)
in wp-admin
Click tools from the left hand menu
click jquery migrate
selected legacy from the dropdown
untick the other tickboxes.
Click save.Update –
Using the Jquery Migrate Helper.
Here is a log file from the migrate plugin
There is a problem with the avia_meag_men.js compatibility with the latest 5.6 WP update.
2021-01-05 17:07:22 jQuery.fn.attr(\’checked\’) might use property instead of attribute Theme: enfold/framework/js/avia_mega_menu.js /wp-admin/nav-menus.phpUpdate –
Install the JQuery Migrate Helper Plugin, go to tools and enable legacy support. This is a temporary workaround until the team at enfold find the bug.
Using the Jquery Migrate Helper.
Here is a log file from the migrate plugin
There is a problem with the avia_meag_men.js compatibility with the latest 5.6 WP update.
2021-01-05 17:07:22 jQuery.fn.attr(\’checked\’) might use property instead of attribute Theme: enfold/framework/js/avia_mega_menu.js /wp-admin/nav-menus.phpUpdate –
Using the Jquery Migrate Helper.
Here is a log file from the migrate plugin
There is a problem with the avia_meag_men.js compatibility with the latest 5.6 WP update.
2021-01-05 17:07:22 jQuery.fn.attr(\’checked\’) might use property instead of attribute Theme: enfold/framework/js/avia_mega_menu.js /wp-admin/nav-menus.phpAdding comment for updates.
This problem just hit all of my customers. Some designs depend on the use of an alternate mobile menu.
Please advise on when we can expect a fix.
I have the same problem with every site on my server that has an alternative mobile menu set.
The
tags are empty. No menu is displaying.
Please can you advise. Another user has had the same problem so replying so i get updates.
I can confirm this problem is happening on all of my enfold sites.
If you set an alternative mobile menu in the theme panel it does not work. This has caused a major problem with some of my websites.
Please can you advise asap!
Hi RubenHD,
Just saw this while checking for an issue. AMP is not necessary for competitive mobile searches.
I do not use it and have managed to get enfold sites performing at 90+ in the current Google Lighthouse speed tests – with further improvements to be implemented around fonts and analytics.
AMP is designed to speed up the loading times of blog entries – It is therefore not going to be compatible with all ALB elements in Enfold which add complexity and functions over the standard WP theme. The same applies for most premium WP themes with complex features. AMP normally removes animations and other complexities in order to reduce load times (reducing the size of the AMP CSS files). Its literally what AMP is designed to do.
If you are looking to improve the load times for your site without compromising on the design – try any of the following:
-Update your .htaccess file or use a plugin to ensure features like gzip compression and cache age are set and enabled
-Add a caching plugin and set the cache length to 30 days.
-Compress your images before you upload them
-Enable Lazy Load in the Enfold performance panel and enable all other performance related settings
-Ensure responsive images is turned on in the Enfold performance panel
-Use a CDN – Like Jetpack (Free) or Cloudflare (also free)
-Enable lazyload and image optimisation in jetpack (If enfold is set up correctly it works perfectly)I hope this helps.
I wouldn’t complain!
I just bought another 5 copies while it is on sale. Thanks for notifying us of the sale! This isn’t a bug it’s just good marketing – That perhaps is not relevant to users who only have 1 website. But for developers like me – THANK YOU for the heads up!
Please dont fix this with Envato. I’d prefer you to notify current users when a sale starts.
If you go into wp-admin and check for updates its pretty easy to work out that there is no update – But oh look! Enfold is on offer!
Keep up the good work!
Hi Ismael,
Thanks for getting back to me about this. I imagine this needs to be added as the default html tag for each part of the modal.
Please can you let me know if this gets added to core? Otherwise I will need to go through all of the Enfold installs on my server and add the tags manually.
Thanks again,
Tom
Hi Mike,
It works really well.
I adjusted the code above to right:-10px which just nudges it in slightly.
I’ll apply this to all of the WooCommerce sites on my system.I have another I am working on with a burger menu left, so I’ll modify the offset and padding to suit.
Now live on the site in the private comments.Thanks again.
Thanks Mike, really appreciate the input from you both.
I probably won’t hide the icon but I’ll try out the code to move it and get back to you.
The Enfold sites I run without a online store – the cross position isn’t a problem because its right in the corner. But I now have several WooCommerce sites so thank you for a solution.
Hi Stephan,
CF7 Flamingo caused issues with CF7 when Recaptcha is used so I don’t do it by default. It also bloats your database with contact form submissions.
I often recommend using a gmail account as a relay if there are mail delivery problems.
Try using an wp mail smtp by WPforms plugin.
You can use the other SMTP option to add a free Gmail account and use it as a relay.Emails are then sent by Gmail meaning you get a record of the email being sent in the Gmail account’s sent items. This gives you an additional backup without bloating your database with contact form submissions. HOWEVER bare in mind that you are still relying on an external connection to Gmail, but because it is smtp it should simply stay in the outbox or as a draft if it fails to send. Therefore you still have a record of the message.
This is also a neat way to get around some web hosts mailservers getting blocked by outlook.com/hotmail addresses. Gmail doesn’t get blocked unless the content is spammy.
Thanks Victoria,
This affects every Enfold website running WooCommerce.
The easiest solution I can think of is to swap the position of the menu button and cart button on mobiles. Then the cross will always be out of the way in the top corner.
I can implement this myself this end but given that this affects all enfold sites it needs looking into your end.
Let me know if you have a solution for me, if not I’ll mod the CSS so the cart and menu are switched.
Hi Ismael,
I have just looked again. I think my diagnosis of the problem is wrong sorry. I have more information below.The problem is actually this:
On mobiles all of the mobile menus have an animation that makes each menu item appear one by one – top to bottom.If you quickly open the menu and then select any of the menu items before the animation has finished it ignores the first button tap.
This is a UX problem and a frustration for anyone wanting to browse quickly.
So 3 possible solutions:
1. Is there a way to disable the animation to stop this behaviour?
2. Can the animation be sped up by changing the CSS? Therefore the menu items become interactive sooner?
3. Can Enfold Core be updated to address the problem?Solution 2 is the preferred option and probably easiest for you to help me solve
Thanks again.
Hi Victoria,
I see you are in Chrome Dev tools. The scroll behaviour appears to be the same as the physical device even in safari.
When you scroll down, the cross sits over and obstructs the menu links.
Screenshot is linked in the private content.
Is it possible to get the cross to scroll with the content or move the cross to the top corner on menu open?
Launched on Monday. Advanced Woocommerce Site based on Enfold with some clever modifications.
Dunrich Ltd are a wholesale cushion and wholesale cushion pad manufacturer based in Swadlincote, UK. The site correctly uses Attribute archives and the built in filter by category and filter by attribute widgets so that customers can find what they are looking for more easily. To achieve this, a widget area was added to the top of all shop pages with filters that show and hide depending on screen size. I also reinstated the quantity adjustment on the basket page for mobiles which is removed by default in Enfold. Its a little squashed on mobiles but a vital function.
The media library is not organised by date to make it easier to manage products via spreadsheet upload.
Mods
The main menu is a modified version of the logo centre, menu below option. The logo is then adjusted to appear on the left making space for a widget area on the right. This is a variation of the settings in Enfold’s menu/header documentation.
I have posted a tutorial on how to add the Search bar to the header area with Ajax here: https://kriesi.at/support/topic/product-search-in-top-bar-for-woocommerce-sites-with-ajax-dropdown-or-any-site/. This is a common ecommerce feature that Enfold can achieve with mods.All of the products are now arranged by colour first making the shop easier to navigate and much more attractive than the original version of the site.
Any feedback is welcome.
Dunrich Ltd Cushion Manufacturer UKThe company has used an SEO service in the past who focused on the following pages.
Dunrich Ltd Wholesale Cushion Pads, Inserts and Inners
and
Dunrich Ltd Wholesale Cushions and Cushion CoversThe new site expands these areas and adds more detailed information including new content for Wholesale beanbags and white label manufacturing services. It also introduces a second page for Wholesale Cushion Inners and pads which previously only existed on a prod category not a physical page.
Performance:
Optimised using bespoke Functions.php, .htaccess settings alongside common optimisation plugins. wp-optimize and jetpack.Testing the site in Google lighthouse – Scores as high as 86/100 in performance testing which is fantastic for a Woocommerce site.
Lazy load is enabled in Enfold alongside the lazy load module within Jetpack.
