Unload unused CSS/JS automatically

For example – i got this check for my contact form 7 element.
I do want to load all css and scripts only if i use the cf7 on my page:

function contactform_dequeue_scripts(){
$load_scripts = false;
$post = get_post();
if(has_shortcode($post->post_content,'contact-form-7')){$load_scripts = true;}
if(!$load_scripts){wp_dequeue_script('contact-form-7');wp_dequeue_style('contact-form-7');}
}
add_action( 'wp_enqueue_scripts', 'contactform_dequeue_scripts', 99 );

I then implemented a similar behavior for Google Recaptcha. Where there are no form fields to be filled in, I do not include the Recaptcha.
over the filter avf_load_google_recaptcha_api_prohibited

This has the similar basic idea of not unnecessarily burdening the performance of the other pages.

But the idea would be worth considering.
To see which enfold shortcodes are used on the page and then only load these scripts/styles.
I don’t know whether there is a performance gain, because this check also takes time.

In the examples mentioned above, it is not a problem because a contact form only needs its scripts after the form has been filled in. The same applies to a ReCaptcha.

here is the code i use for google recaptcha:

function prohibit_google_recaptcha( $prohibited ){
  global $post;
  if( ! $post instanceof WP_Post ){ return $prohibited; }
  
  $content = Avia_Builder()->get_post_content( $post->ID );
  $prohibited = ( false !== strpos( $content, '[contact-form-7 ' ) || false !== strpos( $content, '[av_contact ' ) ) ? false : true;
  
  return $prohibited;
}
add_filter( 'avf_load_google_recaptcha_api_prohibited', 'prohibit_google_recaptcha', 10, 1 );

so – only if contact-form-7 or enfold contact shortcode is found the recaptcha is loaded.

if you do not use google maps – do not enter the google maps api key in enfold options.
i guess that will be enough.

if not you can try this in your child-theme functions.php:

function ava_disable_gmap() {
  add_filter('avf_load_google_map_api', function($load_google_map_api) {
    $load_google_map_api = false;
    return $load_google_map_api;
  },10,1);
  add_filter('avia_google_maps_widget_load_api', function($load_google_map_api) {
    $load_google_map_api = false;
    return $load_google_map_api;
  },10,1);
}
add_action('after_setup_theme', 'ava_disable_gmap');

Going back to your original question and a solution for you:

It would be an excellent feature for Enfold to Automatically do its own version of Remove unused CSS to bring the number of JS and CSS files down per page.

However if you wanted to do this using a plugin WP-Rocket and others come with remove unused CSS or RUCSS as it is known. I have had good results with Enfold and RUCSS in WP-Rocket. Seems to work without specifying any fallback css or exceptions.

RUCSS is not perfect however. So if Enfold could add an option to only load the CSS for used elements per page it would be a 100% compatible way of doing RUCSS without the unreliability of systems that attempts to work it out after css file generation.

I’d be keen to know what Gunter thinks of this idea. It is essentially an extension of the current only load used elements function.

Performance advice and how it works in reality
All of this said – Once a browser has downloaded the files – Assuming you have a long cache life on your CSS and JS files in your HT Access file (Or set this value with a plugin like WP-Rocket or WP Super cache, etc.) then those files wont be re-downloaded by the visitors browser per page visit. So even if they have to download 100kb worth of CSS and JS to view page 1. page 2,3,4,5,6 etc onwards will use the cached css loading instantaneously.

The minimum requirement for this to happen is page caching with a good cache life.

If you want any more advice on this sort of thing let me know.
https://www.hirekaraoke.co.uk/
The site above is one of ours and passes web vitals. They are the UKs largest Karaoke Hire company. So a national business. This site uses our performance stack including page caching and some bespoke settings. The actual booking pages are completely uncached (Which is why the TTFB score is a little higher on desktops – brings the average response time up). The site just serves minified CSS. It is not necessary to RUCSS to pass web vitals if everything else is done correctly.

• This reply was modified 2 months, 2 weeks ago by thinkjarvis.