Critical rendering path optimization in Wordpress

Introduction

The critical rendering path is how a browser shows your webpage on screen. Optimizing it helps your site load faster and look good quickly.

When your WordPress site feels slow to load on phones or slow internet.

When you want visitors to see your content quickly without waiting.

When you add many images, styles, or scripts that might slow down page display.

When improving your site’s performance score in tools like Google PageSpeed Insights.

When you want to reduce visitors leaving because your site takes too long to appear.

Syntax

Wordpress

/* Example: Defer non-critical JavaScript in WordPress */
function defer_parsing_of_js($url) {
  if (is_user_logged_in()) return $url; // Don't defer for logged in users
  if (FALSE === strpos($url, '.js')) return $url;
  if (strpos($url, 'jquery.js')) return $url; // Don't defer jQuery
  return "$url' defer='defer";
}
add_filter('script_loader_tag', 'defer_parsing_of_js', 10, 1);

This example shows how to add defer to JavaScript files to delay their loading until after the page shows.

Optimizing the critical rendering path often means loading only what is needed first, then loading other parts later.

Examples

Inline small CSS needed immediately to avoid waiting for full CSS files to load.

Wordpress

/* Inline critical CSS in header.php */
<style>
  /* Only styles needed to show above-the-fold content */
  body { margin: 0; font-family: Arial, sans-serif; }
  header { background: #333; color: white; padding: 1rem; }
</style>

This loads the main CSS file without blocking page rendering, improving speed.

Wordpress

/* Load main stylesheet asynchronously */
function load_css_async() {
  echo "<link rel='preload' href='style.css' as='style' onload='this.rel=\'stylesheet\''>
  <noscript><link rel='stylesheet' href='style.css'></noscript>";
}
add_action('wp_head', 'load_css_async');

Loading scripts at the bottom lets the page content appear first.

Wordpress

/* Move scripts to footer in functions.php */
function move_scripts_to_footer() {
  remove_action('wp_head', 'wp_print_scripts');
  add_action('wp_footer', 'wp_print_scripts');
}
add_action('wp_enqueue_scripts', 'move_scripts_to_footer');

Sample Program

This WordPress plugin code does three things: it defers JavaScript loading except jQuery, inlines small critical CSS in the header, and loads the main stylesheet asynchronously. This helps the page show content faster.

Wordpress

<?php
/* Plugin to optimize critical rendering path */
function crp_optimize_scripts($tag, $handle, $src) {
  // Defer all scripts except jQuery
  if (strpos($src, 'jquery.js') === false) {
    return '<script src="' . $src . '" defer></script>';
  }
  return $tag;
}
add_filter('script_loader_tag', 'crp_optimize_scripts', 10, 3);

function crp_inline_critical_css() {
  echo "<style>body{margin:0;font-family:sans-serif;}header{background:#222;color:#fff;padding:1rem;}</style>";
}
add_action('wp_head', 'crp_inline_critical_css');

function crp_load_css_async() {
  echo "<link rel='preload' href='" . get_stylesheet_uri() . "' as='style' onload='this.rel=\'stylesheet\''>
  <noscript><link rel='stylesheet' href='" . get_stylesheet_uri() . "'></noscript>";
}
add_action('wp_head', 'crp_load_css_async');
?>

Important Notes

Always test your site after optimization to make sure scripts and styles still work correctly.

Inlining too much CSS can make your HTML heavy; keep it small and only for above-the-fold content.

Defer or async scripts carefully; some scripts need to load early to work properly.

Summary

Critical rendering path optimization helps your site load and display faster.

Load only essential CSS and scripts first, defer others.

Use WordPress hooks to control how and when styles and scripts load.