Embed JavaScript File Content

Boosts performance of critical short JavaScript files by allowing to embed their code instead of linking to files. Script positions and extra scripts …

Author:	Palasthotel (Kim Meyer) (profile at wordpress.org)
WordPress version required:	4.1
WordPress version tested:	5.4.6
Plugin version:	1.0
Added to WordPress repository:	29-04-2020
Last updated:	29-04-2020 Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:	0
Rated by:	0
Plugin URI:
Total downloads:	529
Active installs:	10+
Click to start download

In some critical cases you cannot wait for a JavaScript file to load. Then you can benefit from better performance, if you embed the JavaScript code directly into the <script> tag. This is where this plugin comes in: It provides a filter embed_javascript_file_content_handles, which takes JavaScript handles and echos their code content into the DOM instead of linking to a file.

Please beware that placing lots of embedded JavaScript code can be critical! First you lose caching benefits and second the document size can increase easily. A general rule of thumb is that you should only consider JavaScript files for inline placement, which are critical and which have a file size lower than ~500 Bytes.

Example

add_action( 'wp_enqueue_scripts', 'my_scripts' );
function my_scripts() {
    // Some critical script is enqueued
    wp_enqueue_script( 'js-detection', get_template_directory_uri() . '/js/js-detection.js' );
}

/**
 * Define JavaScript handles to be echoed inline in the html head section.
 */
add_filter( 'embed_javascript_file_content_handles', 'my_embed_javascript_file_content_handles' );
function my_embed_javascript_file_content_handles( $handles ) {
    $scripts = [ 'js-detection' ];

    return array_merge( $handles, $scripts );
}