Forum Replies Created
-
Posts
-
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.
To clarify,
This will affect woocommerce widgets including filter by attribute, category and tag and blog category/tag filters.
You must select display as dropdown to see the problem.
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.
