-
Posts
-
Hi Guys,
Now that Post CSS is a seperate file instead of inline.
Is it possible to change the load order so that Post CSS loads before all other CSS files?
The Post CSS file is extremely useful as critical CSS in some situations – Especially for novice users.
I.e. If you use an ALB color section with a background image above the fold – The background image CSS is now in the Post CSS file – So needs to load first.
This helps reduce the flicker on load that occurs (Or grey screen before the image loads) and improves the overal user experience.Let me know your thoughts.
To help with LCP scores I have started adding inline critical css manually via functions.php. The background image CSS is one of the things I add to the header above all CSS files. But because post CSS is always a small file, as long as it loads before the larger merged dynamic CSS file it should load quick enough for me not to add this as inline CSS.
Cheers,
Tom
Hey Thomas,
Thanks for the ideas.
The decision to load the post css files late are that the CSS rules set in an element and placed in this file must override default CSS rules and we tried to use weakest selectors wherever possible to allow custom CSS rules (if necessary).
If you use filter ‘avf_post_css_create_file’ (return false) the CSS rules are placed inline in style tags right before the elements instead of the post css file.
Question is, what are “critical” CSS rules. We could consider to add those to a second post css file that is loaded first (or add them inline in header).
Best regards,
GünterThanks 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.
Hi,
Thank you for this feedback.
I started digging a bit with google and now got a better understanding for the problem.
I found this article (you probably might know already): https://wp-rocket.me/blog/critical-css/
“Eliminate Render-Blocking Resources: WP Rocket Fixes It”
I add this topic to our dev repo so we keep an eye on it in future.
Best regards,
GünterI 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,
No, I did not test it – and I did not have this on my radar up to now.
If you find time to test it and want to share your experience with us, we would appreciate it.
Thank you once again for your input to improve Enfold.
Best regards,
GünterThanks 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:
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….)
- You must be logged in to reply to this topic.