Print Vs Enqueue: Understanding The Wordpress Asset Pipeline

Loading Assets in WordPress

The asset pipeline in WordPress refers to the functions and processes used to load external resources like CSS, JavaScript, and image files into a WordPress site. The main functions that output assets are print and enqueue. Understanding the difference between print and enqueue is key to optimizing performance.

Defining the Asset Pipeline in WordPress

The asset pipeline manages the loading and execution order of CSS, JavaScript, font, and image assets. Using specialized functions like wp_enqueue_script() and wp_print_styles(), WordPress themes and plugins can register, load, and display external resources.

Enqueue functions allow asset dependencies and loading order to be defined. Print functions output assets immediately without dependency management. Learning how both work is essential for fast, optimized sites.

Table of Contents

Understanding Print vs Enqueue Functions

The print functions output assets instantly within the HTML document flow. Enqueue functions register scripts and styles to be included in the wp_head and wp_footer action hooks. This enables enqueueing JavaScript in the footer for better performance.

For themes and plugins, understanding these differences allows better asset use cases to be identified. Often a combination of both print and enqueue is required for optimal loading.

When to Use Print vs Enqueue

Print for Basic Themes and Functionality

The print functions like wp_print_scripts() and wp_print_styles() are best used with basic WordPress themes and functionality needs. Since assets are loaded instantly, complex dependency mapping is not possible.

Simple parent/child themes can utilize print successfully without performance drawbacks. However advanced functionality requires proper enqueue use.

Enqueue for Performance and Caching

Enqueueing with wp_enqueue_script() and wp_enqueue_style() enables defining dependencies between scripts and stylesheets. This ensures assets load in the necessary sequence.

Enqueueing also allows asset loading in site headers and footers. JavaScript can be placed in the footer for better performance. Caching plugins also utilize enqueued assets more effectively.

Enqueue Function Explained

How Enqueue Works for CSS and JavaScript

Enqueue functions register scripts and styles that will be printed later. wp_enqueue_script() handles JavaScript while wp_enqueue_style() handles CSS.

All enqueued assets are output automatically in wp_head and wp_footer hooks. Dependencies between assets can be specified to guarantee order.

Dependency Management with Enqueue

Complex themes and plugins often have asset dependencies. Certain scripts must load after others, while some CSS relies on other stylesheet rules.

Enqueue enables this with the $deps parameter used during asset registration. Defining dependencies ensures proper loading order throughout the site.

Order of Asset Loading with Enqueue

Enqueued assets load in the order defined by $deps associations. Some core WordPress scripts use this ensure jQuery loads first.

If no dependencies declared, enqueued assets will load in the order registered. Control over execution order is a key benefit of enqueue.

Print Function Explained

How Print Outputs Assets Immediately

Print functions like wp_print_scripts() and wp_print_styles() echo linked assets instantly within page output. This directly inserts CSS and JavaScript with no dependency management.

The assets flow within document body content along with HTML. This behavior differs from enqueue which hooks scripts and styles in later.

Lack of Dependency and Order Management

Printed assets are rendered sequentially based on registration order. There is no dependency mapping or control over sequencing beyond register order.

This limits complexity for loading JavaScript and CSS. Performance can suffer if asset order is improper in certain contexts.

Use Cases Where Print is Preferred

Print makes it easy to quickly insert external resources without managing dependencies. This works for simple sites and admin dashboard CSS/JS.

Print also avoids header bloat issues since assets render in-line within page content instead of wp_head hook.

Print vs. Enqueue Performance Comparison

Page Load Times and Asset Optimization

Ensuring scripts load last by enqueueing in wp_footer improves performance and page load speed. HTTP requests are minimized upfront while HTML loads first.

Print functions can’t guarantee footer placement. This delays rendering while HTML waits on CSS and JS completions.

Caching and CDN Impact

Caching plugins and CDNs optimize delivery of enqueue assets more effectively. Printed assets bypass this logic since they directly output in page content.

Optimized caching of enqueued resources improves performance at scale. This is difficult to achieve with printed assets.

When to Pick Print Over Enqueue

If advanced dependency mapping and optimizations are unnecessary, print gets the job done. Some simple CSS and JS needs are best suited for print functions.

Print also avoids header bloat by putting assets later in document flow. Limiting enqueue overhead in wp_head can help in some cases.

Code Examples

Enqueue Implementation for Scripts and Styles

Here is example code enqueueing jQuery, stylesheets, and custom scripts in themes/plugins:

function theme_assets() {

  // Register jQuery  
  wp_enqueue_script('jquery');

  // Enqueue CSS Files
  wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');  
  wp_enqueue_style('main', get_template_directory_uri() . '/css/main.css');

  // Register and Enqueue Scripts
  wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
  wp_enqueue_script('custom');

}
add_action('wp_enqueue_scripts', 'theme_assets');

Print Basic Usage for Assets

Here is example usage of wp_print_scripts() and wp_print_styles() in themes:

function theme_assets() {

  wp_enqueue_script('jquery');
  
  // Print Scripts
  wp_print_scripts('jquery');

  // Print Styles  
  wp_print_styles('main', get_template_directory_uri() . '/css/main.css');

}

add_action('wp_footer', 'theme_assets');

Combining Both Functions

A best practice approach is using enqueue for site-wide assets while printing admin styles:

// Enqueue site JS
function enqueue_scripts() {
  wp_enqueue_script('main');
} 
add_action('wp_enqueue_scripts', 'enqueue_scripts');

// Print admin CSS 
function print_styles(){
    wp_print_styles('admin', get_template_directory_uri() . '/css/admin.css');
}
add_action('admin_head', 'print_styles');

Key Takeaways and Recommendations

Summarizing the Core Differences

In summary, properly using print and enqueue boils down to a few key differences:

Print outputs assets immediately, enqueue registers assets to load later
Enqueue allows defining dependencies, print has no dependency management
Enqueue enables better caching and optimization capability

Best Practices for Utilizing Each Function

Some rules of thumb to follow when leveraging both print and enqueue:

Use enqueue for site-wide CSS and JavaScript assets
Enqueue JavaScript in the footer for better performance
Print asset functions are good for basic themes
Print admin dashboard scripts/styles to avoid header bloat

Making Decisions Between Print and Enqueue

Understanding asset dependencies and page performance considerations guides the decision between functions.

Simple CSS/JS needs suit print functions well. More complex requirements warrant enqueue for asset optimization.

Print Vs Enqueue: Understanding The WordPress Asset Pipeline