Critical rendering path optimization in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to defer loading of a JavaScript file in WordPress.

Wordpress

function defer_scripts($tag, $handle) {
  if ($handle === '[1]') {
    return str_replace(' src', ' defer src', $tag);
  }
  return $tag;
}
add_filter('script_loader_tag', 'defer_scripts', 10, 2);

Drag options to blanks, or click blank then click option'

Amain-js

Bjquery

Cstyle-css

Dheader-js

Attempts:

3 left

💡 Hint

Common Mistakes

Using a CSS handle instead of a JS handle

Forgetting to add the filter hook

The handle 'main-js' is used to target the main JavaScript file to defer its loading, improving the critical rendering path.

2fill in blank

medium

Complete the code to enqueue a stylesheet with media attribute for better rendering performance.

Wordpress

wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom.css', array(), null, '[1]');

Drag options to blanks, or click blank then click option'

Ascreen

Ball

Cprint

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' which disables the stylesheet

Using 'print' for screen styles

Using 'screen' as the media attribute ensures the stylesheet is applied only for screen devices, optimizing rendering.

3fill in blank

hard

Fix the error in the code to asynchronously load a script in WordPress.

Wordpress

function async_scripts($tag, $handle) {
  if ($handle === 'analytics') {
    return str_replace(' src', '[1] src', $tag);
  }
  return $tag;
}
add_filter('script_loader_tag', 'async_scripts', 10, 2);

Drag options to blanks, or click blank then click option'

Aasync=

Bdefer

Casync="async"

Dasync

Attempts:

3 left

💡 Hint

Common Mistakes

Adding just 'async' without quotes

Using 'defer' instead of 'async'

The attribute must be added as async="async" inside the script tag for valid HTML and proper async loading.

4fill in blank

hard

Fill both blanks to conditionally load a script only on single post pages.

Wordpress

function conditional_script_load() {
  if ([1]()) {
    wp_enqueue_script('single-post-js', get_template_directory_uri() . '/js/single-post.js', array(), null, true);
  }
}
add_action('[2]', 'conditional_script_load');

Drag options to blanks, or click blank then click option'

Ais_single

Bwp_enqueue_scripts

Cinit

Dwp_head

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'init' action which is too early

Using 'wp_head' which is for output, not enqueue

Use is_single() to check if the page is a single post, and hook into wp_enqueue_scripts to enqueue scripts properly.

5fill in blank

hard

Fill all three blanks to create a critical CSS inline style and defer the main stylesheet.

Wordpress

function inline_critical_css() {
  if (is_front_page()) {
    wp_add_inline_style('[1]', file_get_contents(get_template_directory() . '/css/critical.css'));
    wp_dequeue_style('[2]');
    wp_enqueue_style('[3]', get_template_directory_uri() . '/css/main.css', array(), null, 'all');
  }
}
add_action('wp_enqueue_scripts', 'inline_critical_css', 20);

Drag options to blanks, or click blank then click option'

Amain-style

Dcustom-style

Attempts:

3 left

💡 Hint

Common Mistakes

Using different handles causing styles not to apply

Not dequeuing before enqueueing

Use the same handle 'main-style' to add inline critical CSS, dequeue, and then re-enqueue the main stylesheet to defer loading.

Practice

1. What is the main goal of critical rendering path optimization in WordPress?

easy

A. To increase the size of images for better quality

B. To add more plugins for extra features

C. To make the site load faster by prioritizing important content

D. To disable caching completely

Solution

1. Step 1: Understand the purpose of critical rendering path optimization

   This optimization focuses on loading the most important parts of a webpage first to improve speed.

2. Step 2: Compare options with this goal

   Adding plugins or increasing image size slows loading, and disabling caching is counterproductive.

3. Final Answer:

   To make the site load faster by prioritizing important content -> Option C

4. Quick Check:

   Optimization = Faster loading important content [OK]

Hint: Focus on speed by loading key content first [OK]

Common Mistakes:

• Thinking more plugins always improve speed
• Confusing image quality with loading speed
• Ignoring caching benefits

2. Which WordPress hook is commonly used to defer JavaScript loading for better critical rendering path optimization?

easy

A. wp_footer

B. wp_enqueue_scripts

C. wp_head

D. init

Solution

1. Step 1: Identify the hook for managing scripts

   wp_enqueue_scripts is the standard hook to add or modify scripts and styles in WordPress.

2. Step 2: Understand deferring JavaScript

   Using wp_enqueue_scripts allows adding attributes like 'defer' to scripts to delay loading.

3. Final Answer:

   wp_enqueue_scripts -> Option B

4. Quick Check:

   Defer scripts with wp_enqueue_scripts [OK]

Hint: Use wp_enqueue_scripts to manage scripts loading [OK]

Common Mistakes:

• Using wp_head which runs too early for deferring scripts
• Using wp_footer without enqueuing scripts properly
• Confusing init hook with script loading

3. Consider this WordPress code snippet to inline critical CSS:

function inline_critical_css() {
  echo '<style>.header { color: blue; }</style>';
}
add_action('wp_head', 'inline_critical_css');

What will this code do when the page loads?

medium

A. It adds the CSS inside the page header to style the header text blue immediately

B. It loads an external CSS file named 'header.css'

C. It defers the CSS loading until after the page is fully loaded

D. It causes a syntax error and breaks the page

Solution

1. Step 1: Analyze the function output

   The function prints a <style> block with CSS for '.header' inside the <head> section.

2. Step 2: Understand the effect on page load

   Inline CSS in the head applies styles immediately, so header text will be blue on load.

3. Final Answer:

   It adds the CSS inside the page header to style the header text blue immediately -> Option A

4. Quick Check:

   Inline CSS in head = immediate style [OK]

Hint: Inline CSS in head applies styles immediately [OK]

Common Mistakes:

• Thinking it loads external CSS file
• Assuming CSS is deferred or delayed
• Confusing echo output with syntax error

4. This WordPress snippet aims to defer JavaScript but causes a problem:

function defer_scripts($tag, $handle) {
  return str_replace(' src', ' defer src', $tag);
}
add_filter('script_loader_tag', 'defer_scripts', 10, 2);

What is the main issue with this code?

medium

A. It removes the 'src' attribute from scripts

B. It causes a syntax error due to missing semicolons

C. It does not add 'defer' attribute at all

D. It adds 'defer' to all scripts, including those that must load early

Solution

1. Step 1: Understand the filter's effect

   The code adds 'defer' to every script tag by replacing ' src' with ' defer src'.

2. Step 2: Identify the problem with deferring all scripts

   Some scripts must load early (like jQuery), deferring them breaks functionality.

3. Final Answer:

   It adds 'defer' to all scripts, including those that must load early -> Option D

4. Quick Check:

   Deferring all scripts = breaks early-loading scripts [OK]

Hint: Don't defer all scripts blindly; exclude critical ones [OK]

Common Mistakes:

• Thinking it's a syntax error
• Assuming defer is never added
• Believing src attribute is removed

5. You want to optimize your WordPress site's critical rendering path by inlining small CSS and deferring non-critical JavaScript. Which approach best combines these techniques?

hard

A. Inline critical CSS in the <head> using a hook and add 'defer' attribute only to non-essential scripts via wp_enqueue_scripts

B. Load all CSS and JavaScript files normally without changes

C. Defer all JavaScript and load CSS files externally without inlining

D. Remove all CSS and JavaScript to speed up loading

Solution

1. Step 1: Combine inlining CSS and deferring JS properly

   Inlining critical CSS in the head ensures fast style application; deferring only non-essential JS avoids blocking rendering.

2. Step 2: Evaluate other options

   Loading all files normally misses optimization; deferring all JS or removing files breaks functionality or style.

3. Final Answer:

   Inline critical CSS in the <head> using a hook and add 'defer' attribute only to non-essential scripts via wp_enqueue_scripts -> Option A

4. Quick Check:

   Inline CSS + defer non-critical JS = best practice [OK]

Hint: Inline CSS early, defer only non-critical JS [OK]

Common Mistakes:

• Deferring all scripts causing errors
• Not inlining critical CSS
• Removing essential files