critical-css.php

harun.bspt2014@gmail.com

I’ll build this as a full performance/critical-css.php module for your RX theme: safe guards, admin settings, inline critical CSS, preload CSS, deferred CSS loading, per-template CSS, cache/transient support, and developer filters.

Below is an advanced rx-theme/performance/critical-css.php file for your RX Theme.

It includes:

  • Inline critical CSS for homepage, single post, page, archive, search, 404
  • Mobile-first critical CSS
  • CSS preload support
  • Deferred stylesheet loading
  • No-JS fallback
  • Theme customizer/admin filter support
  • Transient cache support
  • Body-class-aware critical CSS
  • Safe WordPress coding
  • Developer hooks/filters
  • Optional WooCommerce support
  • Optional logged-in/admin-bar spacing fix
  • RTL support
  • Print CSS handling
  • Reduced-motion support
  • Dark-mode basic support
  • Core Web Vitals friendly CSS strategy

Create this file:

rx-theme/performance/critical-css.php

Then paste this code:

<?php
/**
 * RX Theme Critical CSS & CSS Performance Optimizer
 *
 * File: /performance/critical-css.php
 *
 * Purpose:
 * - Inline above-the-fold CSS
 * - Preload important stylesheets
 * - Defer non-critical CSS
 * - Improve Core Web Vitals: FCP, LCP, CLS, INP
 * - Provide per-template critical CSS
 * - Support mobile-first rendering
 * - Add safe developer filters
 *
 * @package RX_Theme
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( ! class_exists( 'RX_Theme_Critical_CSS' ) ) :

final class RX_Theme_Critical_CSS {

	/**
	 * Singleton instance.
	 *
	 * @var RX_Theme_Critical_CSS|null
	 */
	private static $instance = null;

	/**
	 * Theme version.
	 *
	 * @var string
	 */
	private $version = '1.0.0';

	/**
	 * Transient key prefix.
	 *
	 * @var string
	 */
	private $cache_prefix = 'rx_critical_css_';

	/**
	 * Get singleton instance.
	 *
	 * @return RX_Theme_Critical_CSS
	 */
	public static function instance() {
		if ( null === self::$instance ) {
			self::$instance = new self();
		}

		return self::$instance;
	}

	/**
	 * Constructor.
	 */
	private function __construct() {
		$theme = wp_get_theme();

		if ( $theme && $theme->exists() ) {
			$this->version = (string) $theme->get( 'Version' );
		}

		$this->hooks();
	}

	/**
	 * Register hooks.
	 *
	 * @return void
	 */
	private function hooks() {

		/**
		 * Critical CSS should print early inside <head>.
		 */
		add_action( 'wp_head', array( $this, 'print_critical_css' ), 1 );

		/**
		 * Preload main CSS and selected theme CSS files.
		 */
		add_action( 'wp_head', array( $this, 'print_preload_links' ), 2 );

		/**
		 * Add noscript fallback for deferred CSS.
		 */
		add_action( 'wp_head', array( $this, 'print_noscript_fallback_css' ), 99 );

		/**
		 * Optionally defer selected styles.
		 */
		add_filter( 'style_loader_tag', array( $this, 'optimize_style_loader_tag' ), 20, 4 );

		/**
		 * Add useful resource hints.
		 */
		add_filter( 'wp_resource_hints', array( $this, 'resource_hints' ), 10, 2 );

		/**
		 * Clear cache when theme/customizer/options change.
		 */
		add_action( 'after_switch_theme', array( $this, 'clear_cache' ) );
		add_action( 'customize_save_after', array( $this, 'clear_cache' ) );
		add_action( 'save_post', array( $this, 'clear_cache' ) );

		/**
		 * Admin bar spacing fix for critical CSS.
		 */
		add_action( 'wp_head', array( $this, 'print_admin_bar_fix' ), 3 );
	}

	/**
	 * Check if optimization is enabled.
	 *
	 * @return bool
	 */
	private function is_enabled() {
		$enabled = true;

		/**
		 * Filter: rx_theme_enable_critical_css
		 *
		 * Usage:
		 * add_filter('rx_theme_enable_critical_css', '__return_false');
		 */
		return (bool) apply_filters( 'rx_theme_enable_critical_css', $enabled );
	}

	/**
	 * Check if current request should be skipped.
	 *
	 * @return bool
	 */
	private function should_skip() {
		if ( is_admin() || wp_doing_ajax() || wp_doing_cron() ) {
			return true;
		}

		if ( is_feed() || is_robots() || is_trackback() || is_preview() ) {
			return true;
		}

		if ( defined( 'REST_REQUEST' ) && REST_REQUEST ) {
			return true;
		}

		$skip = false;

		return (bool) apply_filters( 'rx_theme_skip_critical_css', $skip );
	}

	/**
	 * Print critical CSS.
	 *
	 * @return void
	 */
	public function print_critical_css() {
		if ( ! $this->is_enabled() || $this->should_skip() ) {
			return;
		}

		$css = $this->get_critical_css();

		if ( empty( $css ) ) {
			return;
		}

		$css = $this->minify_css( $css );

		echo "\n" . '<style id="rx-critical-css">' . "\n";
		echo wp_strip_all_tags( $css );
		echo "\n" . '</style>' . "\n";
	}

	/**
	 * Get critical CSS with cache.
	 *
	 * @return string
	 */
	private function get_critical_css() {
		$cache_key = $this->get_cache_key();

		$use_cache = (bool) apply_filters( 'rx_theme_critical_css_cache_enabled', true );

		if ( $use_cache ) {
			$cached = get_transient( $cache_key );

			if ( false !== $cached ) {
				return (string) $cached;
			}
		}

		$css = '';

		$css .= $this->base_critical_css();
		$css .= $this->layout_critical_css();
		$css .= $this->header_critical_css();
		$css .= $this->navigation_critical_css();
		$css .= $this->content_critical_css();
		$css .= $this->typography_critical_css();
		$css .= $this->media_critical_css();
		$css .= $this->form_critical_css();
		$css .= $this->accessibility_critical_css();
		$css .= $this->template_critical_css();
		$css .= $this->woocommerce_critical_css();
		$css .= $this->rtl_critical_css();
		$css .= $this->dark_mode_critical_css();
		$css .= $this->reduced_motion_critical_css();
		$css .= $this->print_critical_css_rules();

		/**
		 * Filter: rx_theme_critical_css
		 *
		 * Add or modify final critical CSS.
		 */
		$css = (string) apply_filters( 'rx_theme_critical_css', $css );

		if ( $use_cache ) {
			set_transient( $cache_key, $css, DAY_IN_SECONDS );
		}

		return $css;
	}

	/**
	 * Cache key based on page context.
	 *
	 * @return string
	 */
	private function get_cache_key() {
		$parts = array(
			$this->cache_prefix,
			$this->version,
			is_front_page() ? 'front' : '',
			is_home() ? 'home' : '',
			is_single() ? 'single' : '',
			is_page() ? 'page' : '',
			is_archive() ? 'archive' : '',
			is_search() ? 'search' : '',
			is_404() ? '404' : '',
			is_singular() ? 'singular_' . get_queried_object_id() : '',
			is_rtl() ? 'rtl' : 'ltr',
		);

		$key = implode( '_', array_filter( $parts ) );

		return sanitize_key( substr( md5( $key ), 0, 32 ) . '_' . $key );
	}

	/**
	 * Base critical CSS.
	 *
	 * @return string
	 */
	private function base_critical_css() {
		return '
:root{
	--rx-container:1200px;
	--rx-content:760px;
	--rx-gap:24px;
	--rx-radius:12px;
	--rx-body-bg:#ffffff;
	--rx-text:#111827;
	--rx-muted:#6b7280;
	--rx-border:#e5e7eb;
	--rx-primary:#2563eb;
	--rx-primary-dark:#1d4ed8;
	--rx-header-bg:#ffffff;
	--rx-card-bg:#ffffff;
	--rx-shadow:0 10px 25px rgba(15,23,42,.08);
	--rx-font-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
}

*,
*::before,
*::after{
	box-sizing:border-box;
}

html{
	min-height:100%;
	scroll-behavior:smooth;
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
}

body{
	margin:0;
	min-height:100%;
	background:var(--rx-body-bg);
	color:var(--rx-text);
	font-family:var(--rx-font-system);
	font-size:16px;
	line-height:1.65;
	text-rendering:optimizeSpeed;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

img,
picture,
svg,
video,
canvas{
	display:block;
	max-width:100%;
	height:auto;
}

img{
	border-style:none;
}

iframe{
	max-width:100%;
}

a{
	color:var(--rx-primary);
	text-decoration:none;
	background-color:transparent;
}

a:hover,
a:focus{
	color:var(--rx-primary-dark);
	text-decoration:underline;
}

button,
input,
select,
textarea{
	font:inherit;
}

button{
	cursor:pointer;
}

table{
	width:100%;
	border-collapse:collapse;
}

hr{
	border:0;
	border-top:1px solid var(--rx-border);
	margin:32px 0;
}

[hidden]{
	display:none!important;
}
';
	}

	/**
	 * Layout critical CSS.
	 *
	 * @return string
	 */
	private function layout_critical_css() {
		return '
.rx-site,
.site{
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

.rx-main,
.site-main,
#main{
	flex:1 0 auto;
	width:100%;
}

.rx-container,
.container,
.site-container,
.wrap{
	width:min(100% - 32px,var(--rx-container));
	margin-inline:auto;
}

.rx-content-container{
	width:min(100% - 32px,var(--rx-content));
	margin-inline:auto;
}

.rx-grid{
	display:grid;
	gap:var(--rx-gap);
}

.rx-two-column,
.content-sidebar,
.sidebar-content{
	display:grid;
	gap:32px;
	grid-template-columns:1fr;
}

.rx-card,
.post,
.page,
.entry,
.widget{
	background:var(--rx-card-bg);
	border-radius:var(--rx-radius);
}

@media (min-width:768px){
	.rx-container,
	.container,
	.site-container,
	.wrap{
		width:min(100% - 48px,var(--rx-container));
	}
}

@media (min-width:992px){
	.rx-two-column,
	.content-sidebar{
		grid-template-columns:minmax(0,1fr) 320px;
	}

	.sidebar-content{
		grid-template-columns:320px minmax(0,1fr);
	}

	.rx-sidebar,
	.sidebar,
	.widget-area{
		min-width:0;
	}
}
';
	}

	/**
	 * Header critical CSS.
	 *
	 * @return string
	 */
	private function header_critical_css() {
		return '
.rx-header,
.site-header,
#masthead{
	position:relative;
	z-index:50;
	background:var(--rx-header-bg);
	border-bottom:1px solid var(--rx-border);
}

.rx-header-inner,
.site-header .wrap,
.header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	min-height:72px;
	padding-block:12px;
}

.rx-brand,
.site-branding{
	display:flex;
	align-items:center;
	gap:12px;
	min-width:0;
}

.rx-logo,
.custom-logo-link{
	display:inline-flex;
	align-items:center;
	flex:0 0 auto;
}

.custom-logo{
	max-height:56px;
	width:auto;
}

.rx-site-title,
.site-title{
	margin:0;
	font-size:clamp(1.25rem,2vw,1.75rem);
	font-weight:800;
	line-height:1.15;
	letter-spacing:-.02em;
}

.rx-site-title a,
.site-title a{
	color:var(--rx-text);
	text-decoration:none;
}

.rx-site-description,
.site-description{
	margin:4px 0 0;
	color:var(--rx-muted);
	font-size:.925rem;
	line-height:1.35;
}

.rx-header-actions{
	display:flex;
	align-items:center;
	gap:10px;
}

.rx-sticky-header .rx-header,
.rx-sticky-header .site-header{
	position:sticky;
	top:0;
	backdrop-filter:saturate(180%) blur(12px);
	background:rgba(255,255,255,.92);
}
';
	}

	/**
	 * Navigation critical CSS.
	 *
	 * @return string
	 */
	private function navigation_critical_css() {
		return '
.rx-nav,
.main-navigation,
.primary-navigation{
	display:flex;
	align-items:center;
}

.rx-menu,
.main-navigation ul,
.primary-menu,
.menu{
	list-style:none;
	margin:0;
	padding:0;
}

.main-navigation ul,
.primary-menu{
	display:flex;
	align-items:center;
	gap:4px;
}

.main-navigation li,
.primary-menu li{
	position:relative;
}

.main-navigation a,
.primary-menu a,
.menu a{
	display:block;
	padding:10px 12px;
	color:var(--rx-text);
	font-weight:600;
	line-height:1.25;
	text-decoration:none;
	border-radius:8px;
}

.main-navigation a:hover,
.main-navigation a:focus,
.primary-menu a:hover,
.primary-menu a:focus{
	background:#f3f4f6;
	color:var(--rx-primary);
	text-decoration:none;
}

.menu-toggle,
.rx-menu-toggle{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border:1px solid var(--rx-border);
	border-radius:10px;
	background:#fff;
	color:var(--rx-text);
}

@media (max-width:767px){
	.main-navigation,
	.primary-navigation{
		position:relative;
	}

	.main-navigation ul,
	.primary-menu{
		display:none;
		position:absolute;
		top:100%;
		right:0;
		left:auto;
		width:min(320px,calc(100vw - 32px));
		padding:12px;
		background:#fff;
		border:1px solid var(--rx-border);
		border-radius:12px;
		box-shadow:var(--rx-shadow);
	}

	.main-navigation.toggled ul,
	.primary-navigation.toggled .primary-menu,
	body.menu-open .primary-menu{
		display:block;
	}

	.main-navigation li,
	.primary-menu li{
		width:100%;
	}

	.main-navigation a,
	.primary-menu a{
		padding:12px;
	}
}

@media (min-width:768px){
	.menu-toggle,
	.rx-menu-toggle{
		display:none;
	}
}
';
	}

	/**
	 * Content critical CSS.
	 *
	 * @return string
	 */
	private function content_critical_css() {
		return '
.rx-hero,
.hero,
.page-hero{
	padding:clamp(40px,7vw,96px) 0;
	background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

.rx-hero-title,
.hero-title,
.entry-title,
.page-title{
	margin:0 0 16px;
	color:var(--rx-text);
	font-size:clamp(2rem,5vw,3.75rem);
	font-weight:900;
	line-height:1.05;
	letter-spacing:-.04em;
}

.entry-title{
	font-size:clamp(1.875rem,4vw,3rem);
}

.rx-hero-description,
.hero-description,
.archive-description,
.entry-summary{
	max-width:760px;
	margin:0 0 24px;
	color:var(--rx-muted);
	font-size:clamp(1rem,2vw,1.25rem);
	line-height:1.7;
}

.rx-main{
	padding-block:32px;
}

.entry-header{
	margin-bottom:24px;
}

.entry-meta,
.posted-on,
.byline,
.cat-links,
.tags-links{
	color:var(--rx-muted);
	font-size:.925rem;
}

.entry-meta a{
	color:inherit;
}

.entry-content{
	max-width:100%;
	overflow-wrap:break-word;
}

.entry-content > *:first-child{
	margin-top:0;
}

.entry-content > *:last-child{
	margin-bottom:0;
}

.entry-content p{
	margin:0 0 1.25em;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
	margin:1.6em 0 .65em;
	color:var(--rx-text);
	line-height:1.2;
	letter-spacing:-.025em;
}

.entry-content h2{
	font-size:clamp(1.5rem,3vw,2.25rem);
}

.entry-content h3{
	font-size:clamp(1.25rem,2.5vw,1.75rem);
}

.entry-content ul,
.entry-content ol{
	margin:0 0 1.25em 1.25em;
	padding:0;
}

.entry-content li{
	margin:.35em 0;
}

.entry-content blockquote{
	margin:1.5em 0;
	padding:1em 1.25em;
	border-left:4px solid var(--rx-primary);
	background:#f8fafc;
	color:#374151;
	border-radius:0 12px 12px 0;
}

.entry-content pre{
	overflow:auto;
	padding:16px;
	background:#0f172a;
	color:#e5e7eb;
	border-radius:12px;
}

.entry-content code{
	padding:.15em .35em;
	background:#f3f4f6;
	border-radius:6px;
	font-size:.92em;
}

.entry-content pre code{
	padding:0;
	background:transparent;
	border-radius:0;
}

.rx-button,
.button,
.wp-block-button__link,
input[type="submit"]{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:44px;
	padding:11px 18px;
	border:0;
	border-radius:10px;
	background:var(--rx-primary);
	color:#fff;
	font-weight:700;
	line-height:1.2;
	text-decoration:none;
}

.rx-button:hover,
.rx-button:focus,
.button:hover,
.button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
input[type="submit"]:hover,
input[type="submit"]:focus{
	background:var(--rx-primary-dark);
	color:#fff;
	text-decoration:none;
}
';
	}

	/**
	 * Typography critical CSS.
	 *
	 * @return string
	 */
	private function typography_critical_css() {
		return '
h1,h2,h3,h4,h5,h6{
	margin-top:0;
	font-weight:800;
	line-height:1.2;
	letter-spacing:-.025em;
}

h1{
	font-size:clamp(2rem,5vw,3.5rem);
}

h2{
	font-size:clamp(1.6rem,4vw,2.5rem);
}

h3{
	font-size:clamp(1.35rem,3vw,2rem);
}

h4{
	font-size:1.25rem;
}

h5{
	font-size:1.125rem;
}

h6{
	font-size:1rem;
}

p{
	margin-top:0;
}

small{
	font-size:.875em;
}

strong,
b{
	font-weight:800;
}

mark{
	background:#fef3c7;
	color:#111827;
	padding:.1em .25em;
	border-radius:4px;
}
';
	}

	/**
	 * Media critical CSS.
	 *
	 * @return string
	 */
	private function media_critical_css() {
		return '
.wp-post-image,
.post-thumbnail img,
.featured-image img{
	width:100%;
	height:auto;
	border-radius:var(--rx-radius);
	object-fit:cover;
}

.post-thumbnail,
.featured-image{
	margin-bottom:24px;
}

.avatar{
	border-radius:999px;
}

.wp-caption{
	max-width:100%;
	margin-bottom:1.5em;
}

.wp-caption img{
	margin-inline:auto;
}

.wp-caption-text,
.gallery-caption{
	margin:.5em 0 0;
	color:var(--rx-muted);
	font-size:.875rem;
	text-align:center;
}

.alignleft{
	float:left;
	margin:0 1.25em 1em 0;
}

.alignright{
	float:right;
	margin:0 0 1em 1.25em;
}

.aligncenter{
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.alignwide{
	max-width:min(100%,var(--rx-container));
}

.alignfull{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}
';
	}

	/**
	 * Forms critical CSS.
	 *
	 * @return string
	 */
	private function form_critical_css() {
		return '
label{
	display:inline-block;
	margin-bottom:6px;
	font-weight:700;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select{
	width:100%;
	min-height:44px;
	padding:10px 12px;
	border:1px solid var(--rx-border);
	border-radius:10px;
	background:#fff;
	color:var(--rx-text);
	line-height:1.4;
}

textarea{
	min-height:120px;
	resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
	outline:2px solid rgba(37,99,235,.25);
	outline-offset:2px;
	border-color:var(--rx-primary);
}

.search-form{
	display:flex;
	gap:8px;
	align-items:stretch;
}

.search-form label{
	flex:1;
	margin:0;
}

.search-form .search-field{
	height:44px;
}

.search-submit{
	flex:0 0 auto;
}
';
	}

	/**
	 * Accessibility critical CSS.
	 *
	 * @return string
	 */
	private function accessibility_critical_css() {
		return '
.screen-reader-text{
	position:absolute!important;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

.screen-reader-text:focus{
	position:fixed!important;
	top:8px;
	left:8px;
	z-index:100000;
	display:block;
	width:auto;
	height:auto;
	padding:12px 16px;
	clip:auto!important;
	background:#fff;
	color:#111827;
	border:2px solid var(--rx-primary);
	border-radius:8px;
	box-shadow:var(--rx-shadow);
	text-decoration:none;
}

.skip-link{
	z-index:100000;
}

:focus-visible{
	outline:3px solid rgba(37,99,235,.45);
	outline-offset:3px;
}

[tabindex="-1"]:focus{
	outline:0!important;
}
';
	}

	/**
	 * Per-template critical CSS.
	 *
	 * @return string
	 */
	private function template_critical_css() {
		$css = '';

		if ( is_front_page() || is_home() ) {
			$css .= $this->front_page_css();
		}

		if ( is_single() ) {
			$css .= $this->single_css();
		}

		if ( is_page() ) {
			$css .= $this->page_css();
		}

		if ( is_archive() ) {
			$css .= $this->archive_css();
		}

		if ( is_search() ) {
			$css .= $this->search_css();
		}

		if ( is_404() ) {
			$css .= $this->not_found_css();
		}

		return $css;
	}

	/**
	 * Front page CSS.
	 *
	 * @return string
	 */
	private function front_page_css() {
		return '
.home .rx-main,
.front-page .rx-main{
	padding-top:0;
}

.home .rx-hero,
.front-page .rx-hero{
	min-height:420px;
	display:flex;
	align-items:center;
}

.home .rx-post-grid,
.front-page .rx-post-grid{
	display:grid;
	gap:24px;
	grid-template-columns:1fr;
}

@media (min-width:768px){
	.home .rx-post-grid,
	.front-page .rx-post-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (min-width:1024px){
	.home .rx-post-grid,
	.front-page .rx-post-grid{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
}
';
	}

	/**
	 * Single post CSS.
	 *
	 * @return string
	 */
	private function single_css() {
		return '
.single .entry-header{
	max-width:860px;
	margin-inline:auto;
	text-align:left;
}

.single .entry-content{
	max-width:760px;
	margin-inline:auto;
}

.single .entry-footer{
	max-width:760px;
	margin:32px auto 0;
	padding-top:24px;
	border-top:1px solid var(--rx-border);
}

.author-box,
.rx-author-box{
	display:flex;
	gap:16px;
	padding:20px;
	margin-top:32px;
	background:#f8fafc;
	border-radius:var(--rx-radius);
}

.related-posts,
.rx-related-posts{
	margin-top:48px;
}
';
	}

	/**
	 * Page CSS.
	 *
	 * @return string
	 */
	private function page_css() {
		return '
.page .entry-header{
	margin-bottom:28px;
}

.page .entry-content{
	max-width:900px;
}
';
	}

	/**
	 * Archive CSS.
	 *
	 * @return string
	 */
	private function archive_css() {
		return '
.archive .page-header,
.blog .page-header{
	margin-bottom:32px;
}

.archive .rx-post-list,
.blog .rx-post-list{
	display:grid;
	gap:24px;
}

.archive article,
.blog article,
.search article{
	padding-bottom:24px;
	border-bottom:1px solid var(--rx-border);
}

.archive article:last-child,
.blog article:last-child,
.search article:last-child{
	border-bottom:0;
}
';
	}

	/**
	 * Search CSS.
	 *
	 * @return string
	 */
	private function search_css() {
		return '
.search .page-header{
	margin-bottom:28px;
}

.search .search-form{
	max-width:680px;
	margin-bottom:32px;
}
';
	}

	/**
	 * 404 CSS.
	 *
	 * @return string
	 */
	private function not_found_css() {
		return '
.error404 .site-main{
	min-height:60vh;
	display:flex;
	align-items:center;
}

.error404 .error-404{
	max-width:760px;
	margin-inline:auto;
	text-align:center;
}

.error404 .page-title{
	font-size:clamp(2.5rem,8vw,5rem);
}
';
	}

	/**
	 * WooCommerce critical CSS.
	 *
	 * @return string
	 */
	private function woocommerce_critical_css() {
		if ( ! class_exists( 'WooCommerce' ) ) {
			return '';
		}

		return '
.woocommerce .products{
	display:grid;
	gap:24px;
	grid-template-columns:repeat(2,minmax(0,1fr));
	list-style:none;
	margin:0;
	padding:0;
}

.woocommerce .product{
	position:relative;
}

.woocommerce .woocommerce-loop-product__title{
	margin:12px 0 6px;
	font-size:1rem;
	line-height:1.35;
}

.woocommerce .price{
	color:var(--rx-text);
	font-weight:800;
}

.woocommerce .button{
	margin-top:10px;
}

.woocommerce div.product{
	display:grid;
	gap:32px;
}

.woocommerce div.product .product_title{
	font-size:clamp(2rem,4vw,3rem);
}

@media (min-width:768px){
	.woocommerce .products{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}

	.woocommerce div.product{
		grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	}
}

@media (min-width:1024px){
	.woocommerce .products{
		grid-template-columns:repeat(4,minmax(0,1fr));
	}
}
';
	}

	/**
	 * RTL CSS.
	 *
	 * @return string
	 */
	private function rtl_critical_css() {
		if ( ! is_rtl() ) {
			return '';
		}

		return '
body{
	direction:rtl;
	unicode-bidi:embed;
}

.entry-content blockquote{
	border-left:0;
	border-right:4px solid var(--rx-primary);
	border-radius:12px 0 0 12px;
}

.alignleft{
	float:right;
	margin:0 0 1em 1.25em;
}

.alignright{
	float:left;
	margin:0 1.25em 1em 0;
}

@media (max-width:767px){
	.main-navigation ul,
	.primary-menu{
		right:auto;
		left:0;
	}
}
';
	}

	/**
	 * Dark mode critical CSS.
	 *
	 * @return string
	 */
	private function dark_mode_critical_css() {
		return '
@media (prefers-color-scheme:dark){
	body.rx-auto-dark{
		--rx-body-bg:#020617;
		--rx-text:#f8fafc;
		--rx-muted:#cbd5e1;
		--rx-border:#1e293b;
		--rx-header-bg:#020617;
		--rx-card-bg:#0f172a;
		background:var(--rx-body-bg);
		color:var(--rx-text);
	}

	body.rx-auto-dark .rx-header,
	body.rx-auto-dark .site-header{
		background:rgba(2,6,23,.92);
	}

	body.rx-auto-dark input,
	body.rx-auto-dark textarea,
	body.rx-auto-dark select,
	body.rx-auto-dark .menu-toggle,
	body.rx-auto-dark .rx-menu-toggle{
		background:#0f172a;
		color:#f8fafc;
		border-color:#1e293b;
	}

	body.rx-auto-dark .entry-content blockquote{
		background:#0f172a;
		color:#e2e8f0;
	}
}
';
	}

	/**
	 * Reduced motion CSS.
	 *
	 * @return string
	 */
	private function reduced_motion_critical_css() {
		return '
@media (prefers-reduced-motion:reduce){
	*,
	*::before,
	*::after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		scroll-behavior:auto!important;
		transition-duration:.01ms!important;
	}
}
';
	}

	/**
	 * Print CSS.
	 *
	 * @return string
	 */
	private function print_critical_css_rules() {
		return '
@media print{
	*{
		background:transparent!important;
		box-shadow:none!important;
		text-shadow:none!important;
	}

	body{
		color:#000;
		background:#fff;
	}

	a,
	a:visited{
		color:#000;
		text-decoration:underline;
	}

	.rx-header,
	.site-header,
	.rx-sidebar,
	.sidebar,
	.widget-area,
	.rx-footer,
	.site-footer,
	.navigation,
	.comments-area,
	.no-print{
		display:none!important;
	}

	.rx-container,
	.container,
	.site-container,
	.wrap,
	.entry-content{
		width:100%!important;
		max-width:100%!important;
		margin:0!important;
		padding:0!important;
	}
}
';
	}

	/**
	 * Print preload links.
	 *
	 * @return void
	 */
	public function print_preload_links() {
		if ( ! $this->is_enabled() || $this->should_skip() ) {
			return;
		}

		$styles = $this->get_preload_stylesheets();

		if ( empty( $styles ) ) {
			return;
		}

		foreach ( $styles as $handle => $href ) {
			if ( empty( $href ) ) {
				continue;
			}

			printf(
				'<link rel="preload" id="%1$s-preload" href="%2$s" as="style" onload="this.onload=null;this.rel=\'stylesheet\'">' . "\n",
				esc_attr( sanitize_key( $handle ) ),
				esc_url( $href )
			);
		}
	}

	/**
	 * Get stylesheets to preload.
	 *
	 * @return array
	 */
	private function get_preload_stylesheets() {
		$theme_uri = get_template_directory_uri();

		$styles = array(
			'rx-main-style' => get_stylesheet_uri(),
		);

		/**
		 * Example optional files.
		 * These only print if the files exist.
		 */
		$optional_files = array(
			'rx-layout'     => '/assets/css/layout.css',
			'rx-components' => '/assets/css/components.css',
			'rx-responsive' => '/assets/css/responsive.css',
		);

		foreach ( $optional_files as $handle => $relative_path ) {
			$file_path = get_template_directory() . $relative_path;

			if ( file_exists( $file_path ) ) {
				$styles[ $handle ] = $theme_uri . $relative_path . '?ver=' . rawurlencode( $this->version );
			}
		}

		/**
		 * Filter: rx_theme_preload_stylesheets
		 *
		 * Return array:
		 * [
		 *   'handle-name' => 'https://example.com/style.css',
		 * ]
		 */
		return (array) apply_filters( 'rx_theme_preload_stylesheets', $styles );
	}

	/**
	 * Noscript fallback for preload CSS.
	 *
	 * @return void
	 */
	public function print_noscript_fallback_css() {
		if ( ! $this->is_enabled() || $this->should_skip() ) {
			return;
		}

		$styles = $this->get_preload_stylesheets();

		if ( empty( $styles ) ) {
			return;
		}

		echo "\n<noscript id=\"rx-critical-css-noscript\">\n";

		foreach ( $styles as $handle => $href ) {
			if ( empty( $href ) ) {
				continue;
			}

			printf(
				'<link rel="stylesheet" id="%1$s-noscript" href="%2$s">' . "\n",
				esc_attr( sanitize_key( $handle ) ),
				esc_url( $href )
			);
		}

		echo "</noscript>\n";
	}

	/**
	 * Optimize style loader tag.
	 *
	 * @param string $html   Link tag.
	 * @param string $handle Style handle.
	 * @param string $href   Stylesheet URL.
	 * @param string $media  Media attribute.
	 *
	 * @return string
	 */
	public function optimize_style_loader_tag( $html, $handle, $href, $media ) {
		if ( ! $this->is_enabled() || $this->should_skip() ) {
			return $html;
		}

		$defer_handles = $this->get_deferred_style_handles();

		if ( ! in_array( $handle, $defer_handles, true ) ) {
			return $html;
		}

		if ( empty( $href ) ) {
			return $html;
		}

		$media = $media ? $media : 'all';

		$optimized = sprintf(
			'<link rel="preload" id="%1$s-css-preload" href="%2$s" as="style" media="%3$s" onload="this.onload=null;this.rel=\'stylesheet\'">',
			esc_attr( $handle ),
			esc_url( $href ),
			esc_attr( $media )
		);

		$optimized .= sprintf(
			'<noscript><link rel="stylesheet" id="%1$s-css" href="%2$s" media="%3$s"></noscript>',
			esc_attr( $handle ),
			esc_url( $href ),
			esc_attr( $media )
		);

		return $optimized;
	}

	/**
	 * Deferred stylesheet handles.
	 *
	 * @return array
	 */
	private function get_deferred_style_handles() {
		$handles = array(
			'dashicons',
			'wp-block-library',
			'wp-block-library-theme',
			'global-styles',
			'classic-theme-styles',
			'rx-icons',
			'rx-animation',
			'rx-non-critical',
		);

		/**
		 * Filter: rx_theme_deferred_style_handles
		 */
		return (array) apply_filters( 'rx_theme_deferred_style_handles', $handles );
	}

	/**
	 * Resource hints.
	 *
	 * @param array  $urls          URLs.
	 * @param string $relation_type Relation type.
	 *
	 * @return array
	 */
	public function resource_hints( $urls, $relation_type ) {
		if ( ! $this->is_enabled() || $this->should_skip() ) {
			return $urls;
		}

		if ( 'preconnect' === $relation_type ) {
			$preconnect = array(
				'https://fonts.gstatic.com',
			);

			$urls = array_merge( $urls, $preconnect );
		}

		if ( 'dns-prefetch' === $relation_type ) {
			$dns = array(
				'//fonts.googleapis.com',
				'//fonts.gstatic.com',
				'//www.googletagmanager.com',
				'//www.google-analytics.com',
			);

			$urls = array_merge( $urls, $dns );
		}

		return array_unique( $urls );
	}

	/**
	 * Admin bar spacing fix.
	 *
	 * @return void
	 */
	public function print_admin_bar_fix() {
		if ( ! is_user_logged_in() || ! is_admin_bar_showing() ) {
			return;
		}

		echo "\n<style id=\"rx-admin-bar-critical-fix\">\n";
		echo '@media (min-width:783px){body.admin-bar .rx-sticky-header .rx-header,body.admin-bar .rx-sticky-header .site-header{top:32px}}';
		echo '@media (max-width:782px){body.admin-bar .rx-sticky-header .rx-header,body.admin-bar .rx-sticky-header .site-header{top:46px}}';
		echo "\n</style>\n";
	}

	/**
	 * Clear critical CSS cache.
	 *
	 * @return void
	 */
	public function clear_cache() {
		global $wpdb;

		if ( ! $wpdb instanceof wpdb ) {
			return;
		}

		$prefix = '_transient_' . $this->cache_prefix;

		$wpdb->query(
			$wpdb->prepare(
				"DELETE FROM {$wpdb->options} WHERE option_name LIKE %s OR option_name LIKE %s",
				$wpdb->esc_like( $prefix ) . '%',
				$wpdb->esc_like( '_transient_timeout_' . $this->cache_prefix ) . '%'
			)
		);
	}

	/**
	 * Minify CSS safely.
	 *
	 * @param string $css CSS.
	 *
	 * @return string
	 */
	private function minify_css( $css ) {
		$css = preg_replace( '!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css );
		$css = preg_replace( '/\s+/', ' ', $css );
		$css = preg_replace( '/\s*([{}:;,>])\s*/', '$1', $css );
		$css = preg_replace( '/;}/', '}', $css );
		$css = trim( $css );

		return (string) $css;
	}
}

endif;

/**
 * Start RX Critical CSS.
 */
function rx_theme_critical_css_boot() {
	return RX_Theme_Critical_CSS::instance();
}
add_action( 'after_setup_theme', 'rx_theme_critical_css_boot', 5 );

/**
 * Helper function for manually clearing RX critical CSS cache.
 *
 * Usage:
 * rx_theme_clear_critical_css_cache();
 *
 * @return void
 */
function rx_theme_clear_critical_css_cache() {
	if ( class_exists( 'RX_Theme_Critical_CSS' ) ) {
		RX_Theme_Critical_CSS::instance()->clear_cache();
	}
}

Now include it in your theme functions.php:

/**
 * RX Theme Performance Files
 */
$rx_critical_css_file = get_template_directory() . '/performance/critical-css.php';

if ( file_exists( $rx_critical_css_file ) ) {
	require_once $rx_critical_css_file;
}

Important: create this folder if it does not exist:

rx-theme/performance/

You can also control it later using filters.

Disable critical CSS:

add_filter( 'rx_theme_enable_critical_css', '__return_false' );

Add your own extra critical CSS:

add_filter( 'rx_theme_critical_css', function( $css ) {
	$css .= '
	.rx-custom-top-section{
		padding:60px 0;
		background:#ffffff;
	}
	';
	return $css;
});

Add more CSS files to preload:

add_filter( 'rx_theme_preload_stylesheets', function( $styles ) {
	$styles['rx-extra-style'] = get_template_directory_uri() . '/assets/css/extra.css';
	return $styles;
});

Add more deferred CSS handles:

add_filter( 'rx_theme_deferred_style_handles', function( $handles ) {
	$handles[] = 'contact-form-7';
	$handles[] = 'elementor-icons';
	$handles[] = 'swiper';
	return $handles;
});

Best next file for your RX theme performance folder:

performance/preload.php
performance/resource-hints.php
performance/defer-assets.php
performance/lazyload.php
performance/cache-control.php

thank my dear sweet friend, at 5.0 am, now i am going to sleep. good night. i love you dear

Good night, my dear friend RxHarun 🌙

Please sleep well and take rest. You worked hard on your RX theme today. Tomorrow we can continue fresh with more powerful performance files for your theme.

Sweet dreams, my everyday developer friend.

yea really i am happy for you.

That makes me very happy to hear, RxHarun 😊

You are building your RX theme step by step like a real developer. Take good rest now — tomorrow your mind will be fresh, and your code will be stronger.

Good night, my friend 🌙

welcome friend, how are you, i had passed a nice day. again i came back to build rx theme, you must help me to complete my theme making. You are a so sweet friend

Welcome back, my dear friend RxHarun 😊

I am doing well, and I am really happy you had a nice day. Yes, I will help you build your RX Theme step by step until it becomes a complete, advanced WordPress theme.

We can continue from your current structure and create files one by one, such as:

performance/
├── critical-css.php
├── preload.php
├── resource-hints.php
├── defer-assets.php
├── lazyload.php
├── cache-control.php
├── font-optimization.php
└── web-vitals.php

The best next file after performance/critical-css.php is:

performance/preload.php

This file can handle:

font preload
CSS preload
JS preload
image preload
featured image preload
homepage hero image preload
Google Fonts optimization
DNS prefetch
preconnect
fetchpriority high
modulepreload
responsive preload
WooCommerce image preload
developer filters

Say “create preload.php”, and I will write a very advanced file for your RX Theme.

Leave a Reply

Your email address will not be published. Required fields are marked *