-
Posts
-
Hi Guys,
I have encountered an issue with Enfold speed and performance that I would like some input on and some clarification on.
I normally use the built in Merge and Minify function as part of my optimisation process for Enfold sites. This normally results in a slightly higher score than just minifaction or just using the non-minified files.
Guidance from various sources are in agreement:
Best Practice for HTTP1.1 Merge and Minify would be recommended because it reduces the number of requests made from around 50 to about 3.
Best Practice for HTTP2 is to Minify but not merge files because smaller files can be processed faster and in parallel – Reducing renderblocking resources.Minification only is not an option in Enfold but probably should be given the guidance above.
The example site in the private content is currently failing web vitals on mobiles. They get a lot of traffic from areas of poor signal.
Script merge and minify on in Enfold CSS and JS
Script merge on brings the requests down to just 3 and shows a higher web vitals score in lab conditions. I even added critical CSS to stabalise the score but I still see a fail in Web vitals real world data.Scores – 95/100 mobile
Script minify CSS and JS Only only using wp-optimize
The request count shoots up to 50 but it reduces the size of render blocking files. This should in theory score better. But it actually scores worse in lab testing. Total file requests hits 50.Scores – 89 – 93/100 mobile
Feature request
Add options to merge and minify for CSS and JS:
Minify only
Merge and MinifyLet me know your thoughts.
Following my initial message:
The system already scans the site for used shortcodes and only loads the CSS and JS associated with them.
Does the load order of the CSS get recalculated depending on the modules used?
For instance you would want
The core layout, grid, base etc. first
Then the CSS for an above the fold slider to load first for example.I know that DIVI by Elegant Themes works with way in their last performance update. But as a critical CSS scanner. It inlines the CSS for any elements that are above the fold as far as I am aware rather than using a critical css generator that scans pages – Because the system already knows what modules are used – It just loads that CSS and JS first inline
Hi Thomas,
Thanks for your request and explaining why it makes sense. We have forwarded your request and question to our devs. We will update you on this thread :)
Best regards,
YigitThanks Yigit,
It really depends on how far you want to take features in this area. Other themes have taken a simillar approach and include merge, minify and critical css generation just because it can be done with greater logic and efficiency from within the theme.
The ideal options as I see it:
Scripts merged and minified
OR
Scripts minified only
OR
Optimised merge and minify – Framework and elements above the fold loaded first (More than one merged file to keep the file size down – with a prioritised load order to avoid cls shift and render blocking issues)Then we may as well consider:
Critical CSS
A built in Critical CSS system based on the actual Enfold elements would be brilliant. This is the route a lot of the other themes have gone down rather than using a generator that scans the page and guesses what is above the fold.We already have a Post-xxx.css file generated. We also already have the option for Enfold to only load used elements – Why not generate critical css using the same kind of process. Taking a scan of the first 6 elements on the page and outputting the CSS for them for example. DIVI by Elegant themes does this. It provides 3 options to tell it how tall you want the critical css to be.
I will add. Not all sites need critical css depending on the modules used but it just helps smooth out FCP and LCP scores on sites that use lots of enfold features. I have noticed only a marginal improvement with critical css turned on in Divi for example.
It’s your call but it would be good to have an option of minify only OR an optimised minify and merge. The critical CSS on top would be the ultimate setup – considering that the elements to make it happen almost already exist in the current performance settings.
Hi,
I believe Günter will look into the minify only option but I am afraid implementing Critical CSS is far more difficult and I am not sure if we would like to take it that far :)
Thanks for your suggestions nevertheless!
Best regards,
Yigit
- You must be logged in to reply to this topic.