JS and CSS should load only on the pages where donations form appear

[aurelienpierre]

Details

Google Page Speed really doesn't like the 250 kB or so of JS, CSS, Polyfill.js etc. (not counting addons) that load on every page of the website as soon as you enable Give, even on pages where no forms are present. Right now, scripts are loaded in a flat way through Give_Scripts::init().

Additional Context

https://developers.google.com/web/updates/2018/07/search-ads-speed

Acceptance Criteria

• The statics should load only where relevant.

Hints

There are 2 ways it can be done :

• calling Give_Scripts::public_enqueue_styles() and Give_Scripts::public_enqueue_scripts() inside the shortcodes and widget functions, rather than in Give_Script::init(),
• filter the page content after shortcodes have rendered, to search for Give objects, like :

add_filter('the_content', 'enqueue_give_statics', 20); // shortcodes render at priority 8
function enqueue_give_statics( $content ) {
  if(preg_match('/class=(\").*?wp-give-form.*?\1/s', $content))
  {
    Give_Scripts::public_enqueue_scripts();
    Give_Scripts::public_enqueue_styles()
  }
  return $content;
}

[github-actions]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 14 additional days.

[aurelienpierre]

I guess nobody cares about perf

[kjohnson]

Hello @aurelienpierre, we are working through our backlog of issues - the stale bot is helping us to highlight what is important and what is now stale. Thank you for responding and keeping this issue fresh.

We are currently in the process of overhauling how/where scripts and styles are enqueued, so this is a timely response.

[RayHollister]

This is still a terrible problem that is making us strongly reconsider whether to continue using Give as our donation platform.