Forum Replies Created
-
Posts
-
This project was a conversion from an existing DIVI website.
Feel Positive Coaching ran by Fay Petcher is a holistic divorce and relationship coaching service. Fay is also an established Podcaster, Author and EFT Practitioner helping couples and individuals cope with narcissistic abuse, relationship trauma and infidelity.
The site was rebuilt in Enfold for ongoing support and performance features.
As part of the process the site was turned into a multi-page website from a one page design. Large padding and margins help give the site a modern – easy to scroll feel.
The logo and colour scheme were revised and entered into the Enfold theme control panel.https://www.feelpositivecoaching.com/
The site scores 95/100 on mobiles in web vitals helping the site load quickly on all devices.
Performance stack:
Bespoke functions.php settings
WP-Optimize – Caching and HTML minification
EWWW WebP Conversion
Short Pixel thumbnail regenerator
Enfold Performance settings on
Bespoke .htaccess settingsLogo and Website designed by Think Jarvis Design and Marketing based in Swadlincote UK.
Another project to share with you.
https://www.mavericksecurityltd.co.uk/
Maverick Security Ltd
Maverick Security is a new startup Manned guarding (security guard) provider based in Derbyshire UK. They specialise in providing reliable security guards for business premises and events throughout the UK.
We were tasked with creating a simple recognisable logo that can be embroided and printed on clothing easily. The colour scheme was then transfered into Enfold for consistency.The site has some bespoke performance settings including font preload and serving a different background image depending on the screen size. The site currently scores between 95/100 and 97/100 depending on the test run.
Performance stack:
Bespoke functions.php settings
WP-Optimize – Caching and HTML minification
EWWW WebP Conversion
Short Pixel thumbnail regenerator
Enfold Performance settings onLogo and Website designed by Think Jarvis Design and Marketing based in Swadlincote UK.
I have updated this post to include newer performance figures – The cause and fix of the LCP score being high are here:
https://kriesi.at/support/topic/lcp-issue-and-font-file-sizes/
EDIT:
We had some issues getting Google to crawl the whole site (unrelated to rest of post). I have added links below to try and encourage Google to Index the entire site. I hope support do not mind! :) I will remove if it is successful.Maverick Security – Manned Guarding Services
Gatehouse Duty – Security Guards
Festival Stewards and Event Security Staff
Door Supervisors for Pubs and NightclubsHi Steve,
I was about to open a new thread about this.
When you set the header to a custom height since 4.8.6.4 it is no longer applying a fixed height on mobile devices below 989px wide.I.e. I have a couple of sites with a 160px header and I can confirm they are now 160px on mobile devices instead of 90px on tablets and 80px on mobiles.
Add the following to Quick CSS to restore the usual heights on mobiles. This is a temporary fix.
@media only screen and (min-width: 768px) and (max-width: 989px) { .responsive .logo a { height:90px !important; } } @media only screen and (max-width: 767px) { .responsive .logo a { height:80px !important; } }@marcie73 @jay
There are multiple issues mentioned in your last posts and the solution will depend on your host and setup. It will be hard for the support team to advise further without looking at your actual setup in detail. Web vitals optimisation is bespoke and depends on any extra plugins and your server setup.
Without knowning your hosting setup it is difficult to advise on the best plugins to resolve the issue.
I tend to recommend Wp-Optimize as a free caching and html compression plugin. I let Enfold process the CSS and JS files from the performance panel. If you combine this with EWWW image compression plugin and Jetpack Boost. You have effectively added everything premium plugins can do without any extra costs.
Free critical CSS generator
Jetpack Boost includes a free critical CSS generator. This will remove the render blocking warning from Web Vitals but in most situations makes little difference to the performance scores. It can also cause some CLS issues because the CSS load order is altered by the inline critical CSS. So you will need to try it and see if it works for you without custom code in addition to the critical CSS.Please see below to give you a better understanding of how web vitals works.
Most of the time a perfect score is impossible. This is because of the way elements load on the page.
Enfold is capable of a 90+ score. This is without critical CSS and without a CDN.A CDN is only really needed if you have customers in multiple countries, or the actual server you have isnt very powerful so it uses the CDN to compensate for poor response times. Really, a CDN is designed to serve content from local servers to reduce server response times for global customers.
Critical CSS generators remove the render blocking warning and improve FCP and LCP in web vitals but can affect TBT scores negatively due to extra processing.
If you have added plugins that add extra front end elements then this will lower the performance score unless optimisation has been applied.
Hosting
The type of host you have will also depend on the plugins you need. If your host includes server side caching then you probably do not need a caching plugin at all. If your host has its own CDN like a dedicated wordpress host then this will also be cached serverside in most cases – So probably do not need a caching plugin.Enfold on its own includes its own script merge function and some extra features that optimise wordpress itself (all in the performance panel) so the only things missing from the performance stack are Caching, Critical CSS and CDN.
If your server is a apache linux server you will need to add Gzip compression and cache control headers to the .htaccess file to remove these warnings. Most optimisation plugins can do this with one click setup.
If you want to reduce the size of your images you can use EWWW plugin to convert them to WebP. HOWEVER if your CDN uses Polish like Cloud Flares premium system it can be set to automatically convert and compress images. So depends on your setup and if your CDN includes image compression.
CDN and Font serving
A host like WPEngine automatically replaces URLs with the CDN URL once it is set up correctly. This includes fonts loaded via html/head.If you added a third party CDN not provided by your web host – you will need to ensure that your DNS settings, any caching plugin and any CDN intergration plugin is configured properly to serve content via the CDN. So make sure you check the settings are correct.
Doing these last bits isn’t easy. You may find that removing the render blocking warning makes some of the other metrics worse.
I hope this helps!
THP Studio
As long as your site scores above 90 – Generally speaking the field data will show a pass in web vitals / page speed insights. But if it doesnt try adding WebP support to reduce the size of your images.
WARNING BACK UP YOUR WHOLE INSTALL and DATABASE BEFORE USING THIS PLUGIN. Or set it to skip compression of existing files and just generate WebP so your original images are not affected.
I now add EWWW WEBP plugin if required. It makes the TBT score get worse but helps improve the LCP score.
Use expert mode and exclude the following before running:
/wp-content/themes/YOUR CHILD THEME/
/wp-content/themes/enfold/
/wp-content/themes/
/wp-content/cache/
/wp-content/languages/
/wp-content/plugins/
/wp-content/upgrade/
/wp-content/uploads/avia_instagram_cache/
/wp-includes/
/wp-admin/Set the WebP Compression to 65/100
Turn on both JS method and Picture method. Then enable lazy load and SVG placeholders. Should help keep the LCP score consistent.Jetpack Boost for Critical CSS
You can also try adding JetPack Boost and using it to generate critical CSS. This is a free service from the creators of WordPress.Thank you both for your input.
Really pleased with the results. I will selectively use Critical CSS generation depending on the site design.CDN
I’ll be doing a trial of Cloudflare CDN with my servers at some point soon. I have a customer who operates in more than one country coming online in the next few months so they will have Cloudflare added to their site once it is finished.My web host offers Cloudflare with Railgun but it is on a per site basis – Effectively doubly my hosting charges to the customer if they want it. This is a limitation with my current hosting offering. So Cloud Flare FREE will be the starting point for now or Jetpack CDN.
I would say I have a ‘complete’ performance stack for Enfold now. Taken a few years to get there with each new version of Lighthouse adding complications. I doubt Google will make major changes to Web Vitals for V9 and V10 now that it is live as a search engine metric.
I’d like to do some work to help Market Enfold in the future. I did write a post about it a while back. So will be in touch once my workload quietens down.
I’ve got another 14 Enfold Sites in progress (reminds me I need to buy some more licenses….)
@PabloCirre
Nice job on the site.
I see you have put in a workaround to prevent the background image loading on mobiles until the user interacts with the page.
I’d be really interested in a conversation with you about this.The LCP score is the only part of Enfold that I have struggled to improve in Web Vitals. Currently between 0.1 and 2 seconds too high.
If you are able to share your solution in the forum and post a link here I’d really appreciate it.
Thanks,
Tom
Thanks Gunter,
I have just had a play around with the animations and added the following to the manually added critical CSS and to dynamic Avia via the quick CSS box.
Slight improvement but nothing drastic. The score fluxuates a lot. I have noticed that since I added EWWW to my performance stack that the blocking time has increased due to additional processing to determine which images to serve.
.avia-image-container .avia-image-overlay-wrap { -webkit-transition: all 0s !important; transition: all 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } .avia-image-container .avia_image, .avia-image-container .avia-image-overlay-wrap { -webkit-transition: all 0s !important; transition: all 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } .js_active { visibility: visible !important; }See private below:
Hi Thilo,
How long ago did you make your last round of changes.
Web vitals scores update every 28 days. So you probably need to leave things in their most optimised state for a while and see if you get a pass.I just ran your site in chrome dev tools which is more consistent and saw a score of 97/100 for your site.
Do you use the built in Google fonts?
You could always download them and load them locally. You can then add pre-load rather than relying on Googles Font servers.
You could also try reducing the size of your background image it is over 4000px wide!
You could also try making your first element smaller.
I have a simillar issue on https://www.hemppureoils.co.uk. The design calls for a tall element above the fold. Meaning the LCP score is a little high.
This site has a slightly different setup which has lowered some of the other metrics in the process. Its a balancing act!Difficult for me to comment further without knowing the state of the site without your optimisation plugins enabled.
Autoptimize and WP-Super Cache Disabled.I was waiting for the inevitable – have you tried WP-Rocket message!
I’ve used WP-Rocket on an NGINX hosted server before but never on my own Apache servers.Its been on my – to trial list for a while.
I had been trialing Jetpack Boost – A free plugin specifically adding critical CSS and defering scripts. It removes the web vitals recommendation but makes no difference to the LCP score.
Hi Nancy,
If you set a site icon from Themes > Customize > Site Identity it overwrites the Enfold Favicon.
The WordPress site identity icon is 512pxx512px but if you set it – It is also used as the Favicon.
Can you check those settings?
I normally use a PNG 64×64 for the favicon upload via WordPress and then upload a 512×512 version in the site identiy panel.
Thanks Gunter,
I’ll run a test using the filter.
It more to do with the background images getting loaded late for ALB color sections.
I use this element above the fold on a lot of websites. So having the background image called last in Post CSS causes a flicker. It also makes any font size changes flicker. as the page loads in.If moving the rules back to inline tags works I’ll do that
or
I will continue to add the background image css inline as critical css in the header.Regarding critical CSS
It would be great if Enfold came with a critical CSS generator but this would be a major feature request
However Avada now comes with its own critical CSS generator – probably to guarantee compatibility.Do you have a recommendation for a critical CSS generator for Enfold? This removes the render blocking resources warning from Chrome.
Following this thread to see if support reveals anything or you come up with anything useful for minimizing the thread.
@thilo
Do you have script merging turned on? This will reduce the length of the thread because there are then less requests to the server?
Do you have any plugins installed to add extra front end features to the site?
what kind of hosting do you use:
Is it NGINX/dedicated wordpress or just a standard Apache server?Regarding the length of the main threadwork question – Have you got any other warnings or recommendations in web vitals?
I have just short of 50 Enfold Installs running – All of which will pass web vitals with a score of 90+ with some updates I am rolling out at the moment.Recent example: https://www.harrisongardenservices.co.uk/
Just remember that web vitals uses realworld data to determine a pass/fail score. Generally speaking – a site with a score as low as 50/100 can still pass – Depending on what kind of devices the site visitors use.
So at between 70 – 80 out of 100 you may already be achieving a pass mark for a majority of users.
I tend to find the LCP score for Enfold sites is about 0.1 – 0.5 seconds above a green score but the real world data shows a pass.Thanks Gunter.
Really useful I get it now. Thankyou.
I think I have found the cause of the problem.
In the performance panel I had remove query strings turned on. This breaks the version numbering for the post-xxx.css file – But does not appear to break other files (probably because dynamic avia gets its own unique name when generated rather than just version numbers).I am making sure I leave query strings enabled from now on accross all sites.
Hope this helps anyone else experiencing caching issues with Post CSS :)
Thanks Gunter,
I wouldnt rush to do it. The current implimentation is solid.It was more an observation.
The way it works now – If I upload a massive logo. As long as there is a 360 wide thumbnail generated that should be the smallest image it displays?
This is more than good enough for the average Enfold user. It is also the default way WordPress handles things.I was just trying to force it to serve the smallest image possible but this will depend on the uploaded size of the original image. So really difficult for you to code filters that the average user can work with.
I’d be happy to try a filter and see if it does serve a smaller image. But if not its not broken so dont fix it ;)
No Problem, Hope it helps.
My understanding is that the srcset sizes issue is just the default way WordPress handles Srcset.
It specifies one image per screensize and makes the assumption that each image is full width.So the smallest image it will display in the logo area is 360 wide. Unless now we have specified a width and height of the logo explicitly it can figure things out.
As it stands the 4.8.6 implimentation seems to work pretty well. So I am happy :)Can you try creating a new slider on a test page to see if there is an error with the current element?
Use the same images and see if it works?Make sure you have cleared your cache. It doesnt look like Responsive images is turned on in your performance panel in the screenshot you sent.
If it doesnt work wait and see if one of the forum mods picks up your request for help.
I appologise I have given you wrong information.
I was refering to Lazy load I forgot that Srcset is controlled globally.
You only need to turn on the setting in the theme control panel.
Enfold > Performance >
Note that it will only work if you have appropriate image sizes for it to downsize to.
Hi @Emazing
I’ve solved it. Thank you for your input.
You are right. The script merge will remove the annotations and therefore the custom.css and style.css if they are not used.This is because of a specific problem. Enfold’s built in script merge wont work on a WPEngine site I am working on. It just ignores it no matter how many times the NGINX cache is cleared.
We are using WP-Rocket instead. I wanted to prevent the custom.css script loading fullstop because script merging is currently disabled – Pending testing.
I have used the following code which works:
// Dequeue and Reregister custom.css from parent theme add_action( 'wp_enqueue_scripts', 'enfold_remove_scripts', 9999 ); function enfold_remove_scripts() { wp_dequeue_style( 'avia-custom' ); wp_deregister_style( 'avia-custom' ); }Thanks Rikard,
I’ll get it installed! I wasn’t sure if we would be waiting until the next major release for the bug fixes.Really appreciate the quick fix!
Hope you manage to sort t anyway mate.
Following this post to see if there is a problem with post creation.
I have a couple of sites where the database has become quite large. So interested to see if the enfold team find anything.
I was just trying to help out mate, I use Enfold daily and I check the forums every few days. If I see something I can provide input on I will comment.
Take a backup of your database and Give wp-optimize a try. I use it will all of my enfold sites including those that are just enfold, yoast and a few performance plugins.
Were the 250 posts imported from another system or wp install or were they created within the current installation?
Hi Chris,
I have assumed that you are using a FULL WIDTH slider and not the FULL SCREEN slider. The Full screen slider uses background css images and requires a different solution to below. I’ll send you some css if you need it.
Unofficial response but something I have been working on for a while and have the following solution:
Turn on Responsive images in the Enfold performance panel – This activates Srcset. The full width slider uses this function. As long as you have the right size thumbnails set up it will serve the smaller size images on different screensizes. Make sure you clear your cache.
The default WordPress Srcset implimentation serves images per screen size width – So for a full width element – Fully optimised requires the thumbnail sizes below.
On a 360px wide screen it will serve a 360px wide image.I personally use the Shortpixel Regenerate Thumbnails Advanced Plugin to add some extra sizes. It is free and compatible with Enfold.
Please be CAREFUL if you remove other thumbnails as it may affect your site design depending on the other Enfold default sizes used throughout the site.I personally recommend adding or making sure the following sizes are covered:
360px wide – Google speed testing – Small Mobiles
450px wide – All other mobiles
768px wide – Ipad Portrait
1024px wide – Ipad landscape
1440px wide – macbook pro/720p screens
Upload size 1920px wide Native size – 1080p – (4K screens normally apply a zoom by default)If your slider has no minimum height set then this should automatically work as the image will scale in uniform.
If you set a minimum height then you may need to upload a taller image to compensate as Srcset uses the screen width not the height to determine which image to serve. The image may become blurred on smaller screens as the image will be stretched to the min-height.
