Forum Replies Created
-
Posts
-
More info:
The issue is caused by the cart icon position. The cart icon pushes the mobile menu icon over meaning it sits over the menu text rather than in the corner.Is it possible to move the location to the top corner on click? So the close icon is in the top corner?
Hi All,
Another two Fantastic Enfold Sites for you from Think Jarvis Design and Marketing
Blossom Branch Florist
Blossom Branch Florists is a local florist specialising in wedding flower packages and bespoke gift bouquets. The owner Hayley recently opened a shop at Craythorne Court in Stretton near Burton On Trent, UK.
The new website was designed using a custom version of Enfold and a couple of plugins from Code Canyon to add extra functions like delivery dates and a message to go inside the gift card attached to their bouquets.
The site uses WooCommerce and Paypal with deliveries limited to specific postcode regions of the UK. It also has several modifications to Enfolds stock WooCommerce add-on including tweaks to the basket for easier use on mobiles.
To see the site please visit: https://www.blossombranch.co.ukWild Heart Yoga and Fitness
Wild Heart Yoga and Fitness is ran by Nicky, a Yoga and Aerial Yoga Specialist and personal trainer. The business is based in Christchurch, UK and operates throughout the local area including Bournemouth, Poole and Boscombe.
The new website is designed using a custom version of Enfold and has been set up to use Jetpack Lazy Load and Image Optimisation.
To see the site please visit: https://www.wildheartyogaandfitness.co.ukI hope these prove useful to anyone else looking to set up an optimised website using Enfold.
Kind regards,
Tom(More sites on their way – Another 11 enfold sites still in progress!)
Cheers Rikard,
I’ve only encountered this problem once when copy and pasting testimonials into the testimonial grid ALB element.
Emojis and creating hearts like this <3 in comments threw it out.Thanks Nikko,
I have a plugin called Archive control which I use to add content to both categories and Attribute Categories.
I’ve also added a widget area in the same way – Just above the product grid on archive pages.But it would be great to have the banner images on attribute pages as standard – Its something a lot of non techie WordPress Users ask for on forums.
I have a few other bits that I’d like added to core for WooCommerce compatibility. I’m working on something special at the moment – A big Ecommerce for a local manufacturer.
When I get a minute I’ll share the mods I’ve made.
Another launch last week.
This time for Swadlincote Aerials and Home Security Ltd
Swadlincote Aerials is a local business based in Swadlincote, Derbyshire UK. The brief was to modernise the design, add a bespoke booking form and make it so the owners could easily update their gallery of works and social media.
The site uses smash balloon instagram feed allowing the customer to update their website, instagram and facebook pages all from the app on their phones.Because animations are used it appears that Srcset isn’t working on some of the images on the home page. So GTMetrix scores are a little low at the moment but this has little impact on the Google Web Vitals scores.
Nice project for a local business looking to get their website working in the right way for their business.
Key performance plugins: wp-optimize, jetpack CDN and Photon, bespoke .htaccess settings. I also use the stop generating image sizes plugin to remove a majority of enfolds auto generated image sizes.Hi Victoria,
Thanks for confirming. I’ll crack on as usual!
I’ve just purchased another 5 copies of Enfold to cover my new customers sites. More to be added to the showcase in the next few months.I am re-sharing a project I completed a few years ago.
I have just updated Enfold to the latest build and applied some speed and performance updates.
https://www.albionbke.co.uk is the first site I have managed to get to a record 94/100 in Google lighthouse/web vitals testing ready for the roll out at the end of the year.
It is easy to get enfold to score 90+ in gtmetrix but much harder to meet Googles strict testing. Still working out how I am going to get my entire portfolio of Enfold sites above 90/100 in Web vitals but they are all getting close now!
For this site I have disabled Jetpack Lazy load as it actually slowed the site down too much. It depends on the design as to how effective this is.
Had the same issue on one of my site, not entirely sure why you need a Masonry gallery all of the images have the same proportions.
I changed the gallery from masonry to just a standard gallery instead to get around the problem on one of my customer sites.
Example below:
https://www.scspm.co.uk/examples-of-our-work/The shake is caused by the size of the image files and the way that ajax loads the page
Try uploading smaller images or selecting smaller thumbnail images in the gallery or switch to a standard gallery as only one of your images is a different size!
Hi All,
Some more websites designed using Enfold launched over the past 2 weeks by Think Jarvis Design & Marketing.
Simply Needlecraft Haberdashery & Sewing Studio is an ecommerce store with over 1700 products all uploaded using CSV files to save time. The site has some unique modifications like adding a search bar with Ajax support to the header area rather than appending it to the main menu. I also added the category control plugin so that text can be added to product categories for SEO purposes.
Optimisation – Difficult to improve further given the weight of Woocommerce – Square payments plugin contains performance bugs which have not been fixed yet by the developers. Scaled images not yet implemented fully as update to latest enfold version needs a quick test before roll out.
Caching using WP-Optimize.
Jetpack CDN
Bespoke .htaccess server settingsDerbyshire Artificial Lawns is a small business specialising in artificial grass, resin bound driveways and outdoor garden buildings. This is a simply site with an instagram feed integrated so that the customer can update their portfolio, instagram and facebook pages all from the instagram app on their phone.
Scores 98% and 90% in GTMetrix
Currently at 70/100 in Lighthouse due to use of animations rather than lazy load and use of full screen image above the fold on the home page. Max pos score of around 81 without adjusting the full screen image design.Caching using WP-Optimize.
Jetpack CDN
Bespoke .htaccess server settingsSpecialist Tradesmen Ltd is a local bathroom and kitchen installer specialising in bathrooms and kitchen adaptations for age related mobility issues and disabilities. Another simple site with an instagram feed so the customer can update his social profiles and portfolio from the instagram app.
Currently waiting for update to the latest Enfold build and WP 5.5.
Scores 98% and 93% in GTMetrixCaching using WP-Optimize.
Jetpack CDN
Bespoke .htaccess server settingsHope you manage to resolve this.
I have successfully updated 3 sites to 5.5 and the latest Enfold build with no issues.Have you tried flushing the merged stylesheets in the performance panel, then clearing the cache and then using an incognito window to see if the problem persists?
I cannot seem to reproduce it since upgrading to the last release. Really annoying! Sorry.
To clarify, the issue was happening before the introduction of WP 5.5 lazy load to Enfold (the previous release).
Since then there has also been an update to jetpack, so I wonder if they have picked it up.
Close the issue, I’ll let you know if I have any more issues when I roll it out to my customers.
But looking good for a version of enfold that seems to work well with Jetpack lazy load!
The only issues remaining to resolve to get to the magical 90/100 in web vitals is LCP. I have raised a seperate post about a potential improvement.
Getting 81/100 at the moment so almost there.
Hi Nikko,
Sorry to ask for clarification.
Outside of changing the design, the CSS always seems to be around 80kb no matter what elements are used on the page.
All of my enfold websites use the default performance setting – load only used elements (recommended).
When I check web vitals for any of my sites the CSS file and JS file is always the same size.Can you double check with the other Devs that the css merging and js merging feature only merges the css files for elements that have been used on the site? and not all of them?
If not can I feature request that the merge function is updated so the css/js from used elements only is added to the merge files?
Thanks in advance,
TomThanks Gunter,
Much appreciated, one of those bugs which wont bother me too much as a professional but for individuals I imagine it causing some confusion.Enjoying the current release of Enfold. I’ve got a couple of sites running with it now. About to roll it out to the rest of my server!
Just to point out, it also appears to bypass the ‘discourage search engines from indexing this site’ feature built in to WP.
Hi Ismael,
Thank you for clarifying. Appreciate this new feature its a good idea.
I have a couple of sites due to launch soon so I am using them as a testbed for the latest version of Enfold before I role out the updates to my other sites.
@Barry,
Love the use of the full width elements on the Harefield Church Website.
I have noticed that the the mobile menu flyout isn’t wide to display each menu item fully. I would recommend increasing the width or using the full screen flyout for a better user experience :)Glad to hear you fixed it.
I was about to say the features you mentioned are all included in the free version of the plugin so I am surprised you had an issue.
I’ll play around with the default settings for this one.
I assumed that if Yoast was installed it would override the default enfold settings anyway?
Hi Rikard – As I thought. Others will ask!
@Francemedics – have you set let the SEO plugin set this tag?Which features specifically are not working?
Have you checked that they are enabled in Yoast Premium’s general settings?Thanks Nikko,
That’s good news.
Noticed yesterday that the new Enfold release is out. I’ll run some tests with it after I have checked it for compatibility with my current setup.Hi Ismael,
Probably not explained this very well and you raise a very good point and I can understand the logic behind that – It makes no sense to lazy load it and actually using a CDN for this component is a little daft. I was just highlighting the plugins that currently cannot ‘optimise’ the logo. It looks like the caching engine can see the logo afterall.
It would be great if it was not ignored by the CDN – But I imagine changing the settings for this will also mean Lazy load picks it up by default which is silly and a bad idea.
GTMetrix counts it as an item that should be loaded from CDN. So it makes a small difference to the performance score. But you are right, there isn’t really much difference assuming the image is compressed properly prior to upload.
Web Vitals
After making some changes to the size of the logo (pixel size) to match the recommended size in the Web Vitals results, it is no longer an issue in web vitals. Web Vitals recommended a much larger sized image than the actual required size, so I just matched it. Actual size is 88px tall, Vitals asked for 240px tall for some reason.Sorry to have wasted your time on this and thank you for your response. Just going through the process of optimising for Web Vitals. Currently getting 79/100 for performance provided the server response time is at its best. Other enfold sites are scoring high 80s with a different above the fold design, but the latest round of improvements is being tested on my company site which I expect will allow most designs to score 90+
The Largest Contentful Paint LCP is the lowest score.
I have a full screen ALB color section with full screen background image which is the main cause for the LCP being high.
I have also raised a second Forum post relating to CSS and JS merging which also adds weight to LCP.Happy for this post to be deleted if necessary.
Ok UPDATE:
Lazy Load from jetpack works with Portfolio grid – Provided that you specify the size of image to be used.
So I now have it running on my company site as a test.
Jetpack image optimisation also deals with Srcs Set as well to some extent.looking good!
I will now be looking at CSS tree shaking to and a few caching issues in my relentless efforts to score 90/100 in Web Vitals!
Cheers Mike,
The site I have this setup on is due to go live on Thursday/Friday. So I will post a link to it on here and the showcase once it is done.
Adding the search bar to mobile menus
Forgot to add – If you don’t set the Search bar to hide on mobiles, you can use CSS to have it on and working on mobiles as well, although I have not checked to see if the ajax search results work in this configuration. Likely be controlled and turned back on using CSS.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/Hi Gunter, Thanks for the update,
Sorry the thread has developed a bit since my original post.
The Jetpack option was just an idea and as Jetpack includes a free CDN it seems like a good option for most Enfold users without add extra plugins to handle lazy load specifically.
The announcement that WordPress 5.5 will include Browser Side Lazy load by default will resolve the issue in modern browsers (excluding Safari to date).
So if you can add compatibility for Enfold with WordPress 5.5 Lazy Load to the Dev Repo that would be great.
As above, the announcement for 5.5 is below:
https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/Thanks again,
TomHi Victoria,
I received this today from the WP community:
https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/Browser side Lazy Load is definitely being incorporated in WordPress 5.5 by default.
Can this be added to the list of features in development?
I think its great that the Core team are adding things which resolve the last optimisation issues with Enfold.
Once Image Sourceset and lazy load are working fully with Enfold then I expect that the sites I produce will score close to or over 90% in Googles new Web Vitals Metric with Enfold.
Performance for most sites sits at about 71/100 at the moment, however I have a couple of sites reaching 90/100 depending on the design.
I am going to play around with some of the tools that can trim the merged stylesheet down like AMP when I get the chance.
Hi Victoria,
Did you hear back from the Devs?
Would be good to see client side lazy load and plugin lazy load exclusions added as above added at the same time as srcset support for ALB elements.
Just an FYI srcset works on woocommerce pages within Enfold just not with ALB elements.
You can see this in action on the shop page of one of my recently launched sites.
https://www.simplysewingboxes.com/shop/No it was just a solution that didnt require modifying the CSS.
I am using your method. Not entirely sure of the purpose of adding 50px as default. Looks like a mistake to me!
The problem is something to do with the default margins on the paragraph ALB element.
If you insert a paragraph and tick the box for custom margins and set the top to 0px it solves the problem.
Enfold – Can you look into this and why it is applying itself after the update to the latest version?
Now that fonts can be controlled on page load, this is the last major item on my Google Page Speed insights tests to fix with Enfold.
I follow this exact same process – focusing on the total downloadable packet size rather than re-sizing images to suit a space. Ultimately this helps a website load more quickly and is best practise to keep the server uncluttered.
Download this plugin: https://wordpress.org/plugins/image-sizes/ it doesnt load in the front end and allows you to disable whichever images you like.
Pro Tip – If you are starting a new site, disable the date archives in the media library. It helps make things easier to manage in the future. If you have already got date archives enabled leave them on.
Auto image optimisation tools have been added to WordPress Core recently but Enfold have not finished integrating them into the theme yet. This includes client size lazy load and choosing the most appropriate image from those autogenerated by enfold (img sourceset)
