Eliminate render-blocking resources - chart.js

When running Google's PageSpeed Insights against a WordPress website you often get told about the following opportunity to improve the website's performance.

Eliminate render-blocking resources

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more

WordPress There are a number of WordPress plugins that can help you inline critical assets or defer less important resources.

Beware that optimizations provided by these plugins may break features of your theme or plugins, so you will likely need to make code changes.

Requirement

Front end - Only enqueue the chart.js script when it's needed
Front end - Enqueue in the footer
Front end - Run the Chart.js script when the page has loaded.
Editor - doesn't matter so much

Proposed solution

Wrap the inline JavaScript written by the server side rendering with:

$script .= 'document.addEventListener( "DOMContentLoaded", function() {';

and

$script .= '}, false );';

This part of the solution uses JavaScript that is identical to the code used by people fiddling with Gravity forms JavaScript. It's a lot easier to implement though.

The other change is to ensure the script is enqueued in the footer.

wp_register_script( "chartjs-script", 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js', null, null, true );

simplify the enqueue_script call

wp_enqueue_script( "chartjs-script" );
//'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js', null, null, true );

and to remove the hook that enqueues the script willy-nilly.

//add_action( 'wp_enqueue_scripts', 'sb_chart_block_enqueue_scripts' );

In this explanation I've just commented out the code that's not necessary any more.

bobbingwide / sb-chart-block

Eliminate render-blocking resources - chart.js #9

Requirement

Proposed solution