Palasthotel GmbH

greatestview

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 <code><script></code> tag. This is where this plugin comes in: It provides a filter <code>embed_javascript_file_content_handles</code>, 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.
<h4>Example</h4>
<pre><code>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 );
}
</code></pre>

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  …

Panagiotis (Panos) Anastasiadis

Enqueueror empowers WordPress developers to manage and develop their CSS & JavaScript files efficiently. It facilitates conditional CSS & JavaScript loading through the use of naming conventions and provides numerous features to enhance the code development workflow.
<h4>Quick Start Examples</h4>
<ul>
<li>
Load a stylesheet globally 
Code a CSS file named global.css in the stylesheets directory.
</li>
<li>
Load a stylesheet only when viewing the page with id = 1 
Code a CSS file named type-page-id-1.css or type-id-1.css in the stylesheets directory.
</li>
<li>
Load a stylesheet only when viewing the page with slug = ‘example-page’ 
Code a CSS file named type-page-slug-example-page.css or type-slug-example-page.css in the stylesheets directory.
</li>
<li>
Load a stylesheet only when viewing the category term with id = 1 
Code a CSS file named tax-category-term-id-1.css or term-id-1.css in the stylesheets directory.
</li>
<li>
Load a stylesheet only when viewing the category term with slug = ‘category1’ 
Code a CSS file named tax-category-term-slug-category1.css or term-slug-category1.css in the stylesheets directory.
</li>
</ul>
<h4>Guide</h4>
You may read the guide at <a href="https://panastasiadist.github.io/Enqueueror/" rel="nofollow ugc">GitHub</a>.
<h4>Usage</h4>
<ul>
<li>Install Enqueueror.</li>
<li>Create the scripts and stylesheets directories under the active theme’s root directory.</li>
<li>Consult the guide at <a href="https://panastasiadist.github.io/Enqueueror/" rel="nofollow ugc">GitHub</a>.</li>
</ul>

Enqueueror

Supercharged CSS & JS Coding for WordPress

Embed JavaScript File Content vs Enqueueror