Forum Replies Created
-
Posts
-
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.
@NIXHALBES
Just looked at the plugin source code LOL yep definitely will be entering the filters manually into functions.php! Thanks for sharing this one!
The plugin is literally two lines of code with a load of annotations and a readme file.
Cheers @NIXHALBES
If Kriesi and team are not planning on integrating Gutenberg Footers then the code above should be considered for the core theme to avoid confusion.I’ve not tested the code yet but looks right to me.
@Yigit
I have sent you three emails – Email 3 sums up the two issues with Srcset and a possible fix.In The Beta release for 4.8.4
I modified $dimension on line 710 in function-set-avia-frontend.php so the dimension matches the uploaded size of the image.$dimension = apply_filters( ‘avf_logo_dimension’, ‘height=”116″ width=”450″‘ );
This removes the warning from Chrome.
All ALB image elements state the height and width automatically based on the chosen image size. This logic needs to be applied to the logo.
The size of the logo is about 68% the width of the viewport. So to get it to serve the right size image for the space I think the size attriute on the logo should be:
sizes=”(max-width: 450px) 68vw, 450px”
NOT
sizes=”(max-width: 450px) 100vw, 450px”Hope this helps.
A link to your website will allow the support team to see what plugins and setup you have.
They can’t help you without it.
Some plugins create their own tables in the database which can bloat the database. Sometimes the way post data is stored can also increase the size of the database.
@kommo
Thanks. Quite a bit went in to this one from an optimisation perspective for looks and speed.The above the fold section is an ALB color section with background image. I have set a minimum height depending on the image requirements for each screen size (Either 350px or 600px). I then applied a custom class and custom ID to each to set the height depending on the screen size. This removes issued with CLS in Google Web Vitals because the sizes are explicitly stated early.
If you view source in Google Chrome you can see the code added as critical CSS into the header. I used wp_head to add code directly into the header from functions.php.Most of the mods come from a performance perspective:
The logo and srcset images are pre-loaded so the logo is available as early as possible.
Self hosting fonts and Adding font preload manually from functions.php just like the other critical CSS. This prevents Font Swap (Flicker) from occuring as the fonts are available right away.To improve LCP and FCP scores you can either pre-load the background color section image in the same way as the fonts so it is available right away or add critical css in the way that I have – serving a different image size per screen size.
I use critical CSS on Burden Basket because of the minimum height applied to the ALB colour section.
To ensure the images look right on all screen sizes I have used media queries to load a different banner image per screen size on every page.
I have enfold setup to have mobile break points at 989px instead of 767px. I do this in the Enfold control panel and every column element on every page .
As the page scales down (if you resize the browser window) I have used media queries to change the menu font size and padding so that it works on screens all the way down to 989px. You can adjust the mobile breakpoint if required to lets say 1024px (for ipads) with some custom CSS. If you search the forum you’ll find this one.
Although most sites read Left to Right from a mobile design perspective – Put the first image on the left – This will mean users see picture content first in the same way people are familliar with on social media. Its good UX design to do it this way but looks a little unusual on desktops. You could always set two images and hide the first one on desktops if you prefer them the other way around on different platforms.
I hope this helps.
@justin
The menu design for Burden Basket used a combination of features from the Enfold Documentation.Sorry for the late reply.
I used a combination of settings from the Enfold Documentation.
The logo layout is set to Logo Center, Menu Below
The logo is then re-positioned to the left using Quick CSSCustom Widget added to header
The widget is then re-positioned to the right with Quick CSS
Bonus Points
If you add a search widget into the customer widget area – the Ajax dropdowns still work because it is within the header area. Great for Ecommerce sites.Justified Menu (equal spaced menu)
Colours and menu break point adjusted with Quick CSS.
Hope this helps. It took a bit of fiddling but I have a simillar design running on most of my ecommerce sites becuase it makes them look and function more like a typical ecommerce site.
Unoffocial response:
Have you tried using something like WP-Optimize to clean the database?Please use with caution. It will delete all post revisions and posts from the bin and spam folders.
I use this with every website I design. Helps lean up the database and keep things running smoothly.250 posts is quite a lot. I have a couple of Ecommerce sites that have breached a 200mb database but these have a few thousand products.
Hi ismael,
Sorry yes the script is working but the cookie modal was not. When a new G4 code is entered into the Google services box, it no longer provides the option to turn off the cookie in the cookie modal.I have just managed to get it to display and function by doing the following:
I had to turn on the custom Modal Window Custom Content setting.
Then save. This makes the Google Analyitcs box appear in the Cookie Modal again.Not sure why it wasn’t working.
Thanks anyway you can close this issue.
THP thanks for the suggestion.
If the text is the LCP element try serving your fonts locally and adding preload to the header file (you can do this from functions.php). This will help prevent CLS shift and improve LCP and FCP scores in most cases. If you download the fonts you can use cloud convert to convert a .ttf font to a .woff2 which is much smaller.
I think one of the issues is that when CSS is merged into one file, the page layout is unavailable until this loads – Meaning that any calculated image sizes like the logo with Srcset wont render until the browser gets the size info from the CSS file. The only way around this is to generate critical CSS.
I have tried Jetpack Boost to add critical CSS (new plugin from the official WordPress team). This should fix the problem but I need to experiment more with it yet. Ironically I also tried inlining all of the CSS so there were NO CSS FILES and this actually reduced LCP to a pass score of under 2.5 seconds! But not best practice given the 100kb of CSS in the theme! The TTI score got a lot worse!
Try using Jetpack Boost if you are not already using a plugin that generates critical CSS.
Regarding Doodles Of Art – When you open Chrome it will always load in desktop mode. Even when using dev tools. So it will already have the larger image saved in cache when using dev tools to change screen sizes. If you run Lighthouse in mobile mode – It does render a smaller logo image.
Will wait to see if team Kriesi have any advice on the LCP issue – specifically regarding the logo as the LCP.
