Enqueuing styles and scripts in Wordpress - Performance & Optimization

Performance: Enqueuing styles and scripts

HIGH IMPACT

This affects page load speed by controlling when and how CSS and JavaScript files load, impacting render blocking and bundle size.

Adding CSS and JS files to a WordPress theme or plugin

Wordpress

<?php
function theme_enqueue_assets() {
  wp_enqueue_style('theme-style', get_stylesheet_uri());
  wp_enqueue_script('theme-script', get_template_directory_uri() . '/script.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_assets');

Loads scripts in footer asynchronously, manages dependencies, and allows caching.

📈 Performance GainReduces render-blocking; scripts load after content; better caching

Adding CSS and JS files to a WordPress theme or plugin

Wordpress

<?php
// Directly adding styles and scripts in header.php
?><link rel="stylesheet" href="style.css">
<script src="script.js"></script>

Directly adding files in header blocks rendering and bypasses WordPress dependency management.

📉 Performance CostBlocks rendering until files load; no caching or dependency control

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Directly adding <link> and <script> tags in header	Minimal DOM nodes added	Multiple reflows due to blocking	High paint cost due to delayed styles	[X] Bad
Using wp_enqueue_style and wp_enqueue_script with footer loading	Minimal DOM nodes added	Single reflow after styles load	Lower paint cost, faster LCP	[OK] Good

Rendering Pipeline

Enqueued styles and scripts are registered and loaded by WordPress at the right time, minimizing blocking during the critical rendering path.

→Critical Rendering Path

→Network Loading

→Style Calculation

→Layout

⚠️ BottleneckRender-blocking caused by styles/scripts loaded too early or synchronously

Core Web Vital Affected

LCP

This affects page load speed by controlling when and how CSS and JavaScript files load, impacting render blocking and bundle size.

Optimization Tips

1Always enqueue styles and scripts using WordPress functions, never hardcode tags.

2Load JavaScript in the footer by setting 'in_footer' to true to avoid blocking rendering.

3Use dependencies in enqueue functions to load only necessary files and avoid duplicates.

Performance Quiz - 3 Questions

Why is it better to enqueue scripts with wp_enqueue_script using the 'in_footer' parameter set to true?

A It loads scripts before styles, improving style calculation

B It loads scripts after the main content, reducing render-blocking

C It bundles all scripts into one file automatically

D It disables caching for scripts

DevTools: Performance

How to check: Open DevTools > Performance tab > Record page load > Look for long tasks blocking main thread and render-blocking resources

What to look for: Check if CSS and JS files block rendering; scripts loading in footer reduce blocking time

Practice

1. What is the main purpose of using wp_enqueue_style and wp_enqueue_script in WordPress?

easy

A. To remove styles and scripts from WordPress pages

B. To directly print CSS and JavaScript code inside HTML files

C. To safely add CSS and JavaScript files to a WordPress theme or plugin

D. To create new CSS and JavaScript files automatically

Solution

1. Step 1: Understand the function purpose

   wp_enqueue_style and wp_enqueue_script are designed to add CSS and JS files safely to WordPress pages.

2. Step 2: Compare options

   Options B, C, and D describe incorrect uses: printing code directly, removing files, or creating files automatically, which these functions do not do.

3. Final Answer:

   To safely add CSS and JavaScript files to a WordPress theme or plugin -> Option C

4. Quick Check:

   Enqueuing = Safe adding of styles/scripts [OK]

Hint: Enqueue means safely add files, not print or remove [OK]

Common Mistakes:

• Thinking enqueue prints code directly
• Confusing enqueue with file creation
• Using enqueue to remove scripts

2. Which of the following is the correct way to enqueue a CSS file named style.css located in your theme folder?

easy

A. wp_enqueue_script('my-style', get_stylesheet_directory() . '/style.css');

B. wp_enqueue_style('my-style', get_template_directory_uri() . '/style.css');

C. enqueue_style('my-style', '/style.css');

D. wp_add_style('my-style', get_template_directory_uri() . '/style.css');

Solution

1. Step 1: Identify correct function and parameters

   The correct function to enqueue CSS is wp_enqueue_style. The URL should be built with get_template_directory_uri() plus the file path.

2. Step 2: Check each option

   wp_enqueue_style('my-style', get_template_directory_uri() . '/style.css'); uses the correct function and URL. enqueue_style('my-style', '/style.css'); uses a wrong function name. wp_enqueue_script('my-style', get_stylesheet_directory() . '/style.css'); uses wp_enqueue_script which is for JS, not CSS. wp_add_style('my-style', get_template_directory_uri() . '/style.css'); uses a non-existent function wp_add_style.

3. Final Answer:

   wp_enqueue_style('my-style', get_template_directory_uri() . '/style.css'); -> Option B

4. Quick Check:

   Correct function and URL = wp_enqueue_style('my-style', get_template_directory_uri() . '/style.css'); [OK]

Hint: Use wp_enqueue_style with get_template_directory_uri() for theme CSS [OK]

Common Mistakes:

• Using wp_enqueue_script for CSS files
• Wrong function names like enqueue_style
• Using get_stylesheet_directory() without URI

3. What will happen if you run this code in your theme's functions.php?

function load_custom_scripts() {
  wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_custom_scripts');

medium

A. The custom.js script will be loaded in the footer after jQuery

B. The custom.js script will load in the header before jQuery

C. The script will not load because of a missing hook

D. The script will load but without jQuery dependency

Solution

1. Step 1: Analyze the enqueue parameters

   The function enqueues 'custom-js' with dependency on 'jquery', version '1.0', and last parameter true means load in footer.

2. Step 2: Understand the hook and dependencies

   The function is hooked to 'wp_enqueue_scripts', so it runs properly. jQuery will load before custom.js because of the dependency.

3. Final Answer:

   The custom.js script will be loaded in the footer after jQuery -> Option A

4. Quick Check:

   Dependency + footer true = load after jQuery in footer [OK]

Hint: Footer loading = last parameter true; dependencies load first [OK]

Common Mistakes:

• Confusing footer true with header loading
• Forgetting to hook function to wp_enqueue_scripts
• Ignoring script dependencies

4. Identify the error in this code snippet that tries to enqueue a JavaScript file:

function add_my_script() {
  wp_enqueue_script('my-script', get_template_directory() . '/js/script.js');
}
add_action('wp_enqueue_scripts', 'add_my_script');

medium

A. Using wrong function name add_action instead of add_script

B. Missing the version parameter in wp_enqueue_script

C. Not hooking to wp_head action

D. Using get_template_directory() instead of get_template_directory_uri() for URL

Solution

1. Step 1: Check the URL function used

   get_template_directory() returns a server path, not a URL. For enqueuing scripts, a URL is needed, so get_template_directory_uri() should be used.

2. Step 2: Verify other parts

   The version parameter is optional, so missing it is not an error. Hooking to wp_enqueue_scripts is correct. add_action is the right function to hook.

3. Final Answer:

   Using get_template_directory() instead of get_template_directory_uri() for URL -> Option D

4. Quick Check:

   Use URI function for URLs, not directory path [OK]

Hint: Use get_template_directory_uri() for URLs, not get_template_directory() [OK]

Common Mistakes:

• Using server path instead of URL for script source
• Confusing hooks like wp_head vs wp_enqueue_scripts
• Thinking version parameter is mandatory

5. You want to enqueue two CSS files: main.css and theme.css. theme.css depends on main.css. Which code correctly enqueues both with dependency and versioning?

hard

A. wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css', array(), '1.0');
wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css', array('main-style'), '1.1');

B. wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css', array(), '1.1');
wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css', array('theme-style'), '1.0');

C. wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css', array('theme-style'), '1.0');
wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css', array(), '1.1');

D. wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css');
wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css');

Solution

1. Step 1: Understand dependency order

   theme.css depends on main.css, so theme-style must list main-style as a dependency.

2. Step 2: Check versioning and parameters

   wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css', array(), '1.0'); wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css', array('main-style'), '1.1'); correctly enqueues main-style first with no dependencies, then theme-style with main-style as dependency and proper versions. Other options reverse dependencies or omit them.

3. Final Answer:

   wp_enqueue_style('main-style', get_template_directory_uri() . '/main.css', array(), '1.0'); wp_enqueue_style('theme-style', get_template_directory_uri() . '/theme.css', array('main-style'), '1.1'); -> Option A

4. Quick Check:

   Dependency array lists main-style for theme-style [OK]

Hint: List dependencies in array for dependent styles [OK]

Common Mistakes:

• Reversing dependency order
• Omitting dependency array
• Not specifying versions when needed