preload.php

harun.bspt2014@gmail.com
I’ll build this as a reusable inc/seo/preload.php style file for your RX theme, focused on safe performance: preconnect, dns-prefetch, preload fonts/assets, fetchpriority, image hints, and admin Customizer options.

Yes friend. Create this file:

rx-theme/inc/seo/preload.php

Then include it in functions.php:

require_once get_template_directory() . '/inc/seo/preload.php';

This version uses WordPress-native hooks such as wp_resource_hints, wp_preload_resources, and wp_head, which are the correct places to add DNS prefetch, preconnect, preload, and head performance hints in a theme. WordPress documents wp_resource_hints for resource hints and wp_preload_resources for preload links.

<?php
/**
 * RX Theme Advanced Preload, Preconnect, DNS Prefetch & Performance Hints
 *
 * File: /inc/seo/preload.php
 *
 * Features:
 * - DNS prefetch
 * - Preconnect
 * - Preload fonts
 * - Preload CSS
 * - Preload JS
 * - Preload hero/featured image
 * - Preload site logo
 * - Preload next post image
 * - Preload selected static CDN assets
 * - Fetchpriority support
 * - Responsive image preload support
 * - Crossorigin support
 * - MIME type support
 * - Safe duplicate prevention
 * - Customizer controls
 * - Filter hooks for future extension
 * - Works with child theme
 * - Avoids admin/login pages
 *
 * @package RX_Theme
 */

defined( 'ABSPATH' ) || exit;

if ( ! defined( 'RX_THEME_VERSION' ) ) {
	define( 'RX_THEME_VERSION', wp_get_theme()->get( 'Version' ) ?: '1.0.0' );
}

if ( ! defined( 'RX_THEME_URI' ) ) {
	define( 'RX_THEME_URI', get_template_directory_uri() );
}

if ( ! defined( 'RX_THEME_DIR' ) ) {
	define( 'RX_THEME_DIR', get_template_directory() );
}

/**
 * Main preload class.
 */
if ( ! class_exists( 'RX_Theme_Preload' ) ) :

	final class RX_Theme_Preload {

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

		/**
		 * Already printed URLs.
		 *
		 * @var array
		 */
		private $printed = array();

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

			return self::$instance;
		}

		/**
		 * Constructor.
		 */
		private function __construct() {
			add_action( 'after_setup_theme', array( $this, 'theme_supports' ), 20 );

			add_filter( 'wp_resource_hints', array( $this, 'add_dns_prefetch' ), 10, 2 );
			add_filter( 'wp_resource_hints', array( $this, 'add_preconnect' ), 11, 2 );
			add_filter( 'wp_preload_resources', array( $this, 'add_wp_preload_resources' ), 10 );

			add_action( 'wp_head', array( $this, 'print_manual_preloads' ), 1 );
			add_action( 'wp_head', array( $this, 'print_early_performance_meta' ), 2 );
			add_action( 'wp_head', array( $this, 'print_preload_comments' ), 99 );

			add_filter( 'wp_get_attachment_image_attributes', array( $this, 'add_image_fetchpriority' ), 10, 3 );

			add_action( 'customize_register', array( $this, 'register_customizer_settings' ) );
		}

		/**
		 * Theme supports.
		 *
		 * @return void
		 */
		public function theme_supports() {
			add_theme_support( 'html5', array( 'script', 'style' ) );
		}

		/**
		 * Whether preload system should run.
		 *
		 * @return bool
		 */
		private function enabled() {
			if ( is_admin() || is_feed() || is_robots() || is_trackback() || wp_doing_ajax() ) {
				return false;
			}

			if ( function_exists( 'is_user_logged_in' ) && is_user_logged_in() && is_customize_preview() ) {
				return true;
			}

			return (bool) get_theme_mod( 'rx_preload_enable', true );
		}

		/**
		 * Clean URL.
		 *
		 * @param string $url URL.
		 * @return string
		 */
		private function clean_url( $url ) {
			$url = trim( (string) $url );

			if ( '' === $url ) {
				return '';
			}

			if ( 0 === strpos( $url, '//' ) ) {
				$url = is_ssl() ? 'https:' . $url : 'http:' . $url;
			}

			return esc_url_raw( $url );
		}

		/**
		 * Get list from textarea setting.
		 *
		 * @param string $setting Theme mod key.
		 * @return array
		 */
		private function get_textarea_urls( $setting ) {
			$value = get_theme_mod( $setting, '' );

			if ( empty( $value ) ) {
				return array();
			}

			$lines = preg_split( '/\r\n|\r|\n/', $value );
			$urls  = array();

			foreach ( $lines as $line ) {
				$url = $this->clean_url( $line );

				if ( $url ) {
					$urls[] = $url;
				}
			}

			return array_values( array_unique( $urls ) );
		}

		/**
		 * Get default DNS prefetch domains.
		 *
		 * @return array
		 */
		private function default_dns_prefetch_domains() {
			$domains = array(
				'https://fonts.googleapis.com',
				'https://fonts.gstatic.com',
				'https://www.googletagmanager.com',
				'https://www.google-analytics.com',
				'https://www.google.com',
				'https://www.gstatic.com',
				'https://cdn.jsdelivr.net',
				'https://cdnjs.cloudflare.com',
				'https://unpkg.com',
			);

			/**
			 * Filter RX default DNS prefetch domains.
			 *
			 * @param array $domains Domains.
			 */
			return apply_filters( 'rx_theme_default_dns_prefetch_domains', $domains );
		}

		/**
		 * Get default preconnect domains.
		 *
		 * @return array
		 */
		private function default_preconnect_domains() {
			$domains = array(
				array(
					'href'        => 'https://fonts.gstatic.com',
					'crossorigin' => 'anonymous',
				),
				array(
					'href' => 'https://fonts.googleapis.com',
				),
			);

			/**
			 * Filter RX default preconnect domains.
			 *
			 * @param array $domains Domains.
			 */
			return apply_filters( 'rx_theme_default_preconnect_domains', $domains );
		}

		/**
		 * Add DNS prefetch.
		 *
		 * WordPress calls this through wp_resource_hints.
		 *
		 * @param array  $urls          URLs.
		 * @param string $relation_type Relation type.
		 * @return array
		 */
		public function add_dns_prefetch( $urls, $relation_type ) {
			if ( ! $this->enabled() || 'dns-prefetch' !== $relation_type ) {
				return $urls;
			}

			$custom = $this->get_textarea_urls( 'rx_preload_dns_prefetch_urls' );
			$items  = array_merge( $this->default_dns_prefetch_domains(), $custom );

			foreach ( $items as $url ) {
				$url = $this->clean_url( $url );

				if ( $url ) {
					$urls[] = $url;
				}
			}

			return $this->unique_resource_hints( $urls );
		}

		/**
		 * Add preconnect.
		 *
		 * @param array  $urls          URLs.
		 * @param string $relation_type Relation type.
		 * @return array
		 */
		public function add_preconnect( $urls, $relation_type ) {
			if ( ! $this->enabled() || 'preconnect' !== $relation_type ) {
				return $urls;
			}

			$defaults = $this->default_preconnect_domains();
			$custom   = $this->get_textarea_urls( 'rx_preload_preconnect_urls' );

			foreach ( $defaults as $item ) {
				if ( is_array( $item ) && ! empty( $item['href'] ) ) {
					$urls[] = array_filter(
						array(
							'href'        => $this->clean_url( $item['href'] ),
							'crossorigin' => ! empty( $item['crossorigin'] ) ? sanitize_key( $item['crossorigin'] ) : '',
						)
					);
				}
			}

			foreach ( $custom as $url ) {
				$urls[] = array(
					'href'        => $url,
					'crossorigin' => 'anonymous',
				);
			}

			return $this->unique_resource_hints( $urls );
		}

		/**
		 * Remove duplicate hints.
		 *
		 * @param array $urls URLs.
		 * @return array
		 */
		private function unique_resource_hints( $urls ) {
			$seen = array();
			$out  = array();

			foreach ( $urls as $item ) {
				$key = '';

				if ( is_array( $item ) && ! empty( $item['href'] ) ) {
					$key = $item['href'];
				} elseif ( is_string( $item ) ) {
					$key = $item;
				}

				if ( ! $key || isset( $seen[ $key ] ) ) {
					continue;
				}

				$seen[ $key ] = true;
				$out[]        = $item;
			}

			return $out;
		}

		/**
		 * Add resources through WordPress preload API.
		 *
		 * @param array $preload_resources Preload resources.
		 * @return array
		 */
		public function add_wp_preload_resources( $preload_resources ) {
			if ( ! $this->enabled() ) {
				return $preload_resources;
			}

			$resources = array();

			$resources = array_merge( $resources, $this->get_font_preloads() );
			$resources = array_merge( $resources, $this->get_css_preloads() );
			$resources = array_merge( $resources, $this->get_js_preloads() );
			$resources = array_merge( $resources, $this->get_custom_preloads() );

			if ( get_theme_mod( 'rx_preload_featured_image', true ) ) {
				$hero = $this->get_featured_image_preload();

				if ( $hero ) {
					$resources[] = $hero;
				}
			}

			if ( get_theme_mod( 'rx_preload_site_logo', false ) ) {
				$logo = $this->get_site_logo_preload();

				if ( $logo ) {
					$resources[] = $logo;
				}
			}

			$resources = $this->unique_preload_resources( $resources );

			foreach ( $resources as $resource ) {
				if ( ! empty( $resource['href'] ) && ! empty( $resource['as'] ) ) {
					$preload_resources[] = $resource;
				}
			}

			return $this->unique_preload_resources( $preload_resources );
		}

		/**
		 * Font preloads.
		 *
		 * @return array
		 */
		private function get_font_preloads() {
			$fonts = array();

			$default_fonts = array(
				RX_THEME_URI . '/assets/fonts/inter-var.woff2',
			);

			$default_fonts = apply_filters( 'rx_theme_default_preload_fonts', $default_fonts );

			if ( get_theme_mod( 'rx_preload_default_fonts', false ) ) {
				foreach ( $default_fonts as $font ) {
					$font = $this->clean_url( $font );

					if ( $font ) {
						$fonts[] = array(
							'href'        => $font,
							'as'          => 'font',
							'type'        => 'font/woff2',
							'crossorigin' => 'anonymous',
						);
					}
				}
			}

			$custom_fonts = $this->get_textarea_urls( 'rx_preload_font_urls' );

			foreach ( $custom_fonts as $font ) {
				$fonts[] = array(
					'href'        => $font,
					'as'          => 'font',
					'type'        => $this->guess_mime_type( $font, 'font/woff2' ),
					'crossorigin' => 'anonymous',
				);
			}

			return $fonts;
		}

		/**
		 * CSS preloads.
		 *
		 * @return array
		 */
		private function get_css_preloads() {
			$items = array();

			if ( get_theme_mod( 'rx_preload_main_stylesheet', true ) ) {
				$items[] = array(
					'href' => get_stylesheet_uri(),
					'as'   => 'style',
					'type' => 'text/css',
				);
			}

			$custom = $this->get_textarea_urls( 'rx_preload_css_urls' );

			foreach ( $custom as $url ) {
				$items[] = array(
					'href' => $url,
					'as'   => 'style',
					'type' => 'text/css',
				);
			}

			return $items;
		}

		/**
		 * JS preloads.
		 *
		 * @return array
		 */
		private function get_js_preloads() {
			$items = array();

			$custom = $this->get_textarea_urls( 'rx_preload_js_urls' );

			foreach ( $custom as $url ) {
				$items[] = array(
					'href' => $url,
					'as'   => 'script',
					'type' => 'text/javascript',
				);
			}

			return $items;
		}

		/**
		 * Custom preload resources.
		 *
		 * Format per line:
		 * URL|as|type|crossorigin
		 *
		 * Example:
		 * https://example.com/app.css|style|text/css|
		 * https://example.com/font.woff2|font|font/woff2|anonymous
		 *
		 * @return array
		 */
		private function get_custom_preloads() {
			$value = get_theme_mod( 'rx_preload_custom_resources', '' );

			if ( empty( $value ) ) {
				return array();
			}

			$lines = preg_split( '/\r\n|\r|\n/', $value );
			$out   = array();

			foreach ( $lines as $line ) {
				$line = trim( $line );

				if ( '' === $line ) {
					continue;
				}

				$parts = array_map( 'trim', explode( '|', $line ) );

				$url         = isset( $parts[0] ) ? $this->clean_url( $parts[0] ) : '';
				$as          = isset( $parts[1] ) ? sanitize_key( $parts[1] ) : '';
				$type        = isset( $parts[2] ) ? sanitize_text_field( $parts[2] ) : '';
				$crossorigin = isset( $parts[3] ) ? sanitize_key( $parts[3] ) : '';

				if ( ! $url || ! $as ) {
					continue;
				}

				$item = array(
					'href' => $url,
					'as'   => $as,
				);

				if ( $type ) {
					$item['type'] = $type;
				}

				if ( $crossorigin ) {
					$item['crossorigin'] = $crossorigin;
				}

				$out[] = $item;
			}

			return $out;
		}

		/**
		 * Featured image preload.
		 *
		 * @return array|null
		 */
		private function get_featured_image_preload() {
			if ( ! is_singular() || ! has_post_thumbnail() ) {
				return null;
			}

			$post_id = get_queried_object_id();

			if ( ! $post_id ) {
				return null;
			}

			$thumb_id = get_post_thumbnail_id( $post_id );

			if ( ! $thumb_id ) {
				return null;
			}

			$src = wp_get_attachment_image_src( $thumb_id, 'full' );

			if ( empty( $src[0] ) ) {
				return null;
			}

			$srcset = wp_get_attachment_image_srcset( $thumb_id, 'full' );
			$sizes  = wp_get_attachment_image_sizes( $thumb_id, 'full' );

			$item = array(
				'href'          => esc_url_raw( $src[0] ),
				'as'            => 'image',
				'fetchpriority' => 'high',
			);

			if ( $srcset ) {
				$item['imagesrcset'] = $srcset;
			}

			if ( $sizes ) {
				$item['imagesizes'] = $sizes;
			}

			return $item;
		}

		/**
		 * Site logo preload.
		 *
		 * @return array|null
		 */
		private function get_site_logo_preload() {
			$custom_logo_id = get_theme_mod( 'custom_logo' );

			if ( ! $custom_logo_id ) {
				return null;
			}

			$src = wp_get_attachment_image_src( $custom_logo_id, 'full' );

			if ( empty( $src[0] ) ) {
				return null;
			}

			return array(
				'href' => esc_url_raw( $src[0] ),
				'as'   => 'image',
			);
		}

		/**
		 * Unique preload resources.
		 *
		 * @param array $resources Resources.
		 * @return array
		 */
		private function unique_preload_resources( $resources ) {
			$seen = array();
			$out  = array();

			foreach ( $resources as $resource ) {
				if ( ! is_array( $resource ) || empty( $resource['href'] ) ) {
					continue;
				}

				$key = $resource['href'] . '|' . ( $resource['as'] ?? '' );

				if ( isset( $seen[ $key ] ) ) {
					continue;
				}

				$seen[ $key ] = true;
				$out[]        = $resource;
			}

			return $out;
		}

		/**
		 * Manual preloads for extra attributes and backward compatibility.
		 *
		 * @return void
		 */
		public function print_manual_preloads() {
			if ( ! $this->enabled() ) {
				return;
			}

			if ( get_theme_mod( 'rx_preload_print_manual_head', false ) ) {
				$resources = array_merge(
					$this->get_font_preloads(),
					$this->get_css_preloads(),
					$this->get_js_preloads(),
					$this->get_custom_preloads()
				);

				if ( get_theme_mod( 'rx_preload_featured_image', true ) ) {
					$hero = $this->get_featured_image_preload();

					if ( $hero ) {
						$resources[] = $hero;
					}
				}

				$resources = apply_filters( 'rx_theme_manual_preload_resources', $resources );
				$resources = $this->unique_preload_resources( $resources );

				foreach ( $resources as $resource ) {
					$this->print_preload_link( $resource );
				}
			}
		}

		/**
		 * Print single preload link.
		 *
		 * @param array $resource Resource.
		 * @return void
		 */
		private function print_preload_link( $resource ) {
			if ( empty( $resource['href'] ) || empty( $resource['as'] ) ) {
				return;
			}

			$href = $this->clean_url( $resource['href'] );

			if ( ! $href || isset( $this->printed[ $href ] ) ) {
				return;
			}

			$this->printed[ $href ] = true;

			$attrs = array(
				'rel'  => 'preload',
				'href' => $href,
				'as'   => sanitize_key( $resource['as'] ),
			);

			$allowed = array(
				'type',
				'crossorigin',
				'media',
				'fetchpriority',
				'imagesrcset',
				'imagesizes',
				'integrity',
				'referrerpolicy',
			);

			foreach ( $allowed as $key ) {
				if ( ! empty( $resource[ $key ] ) ) {
					$attrs[ $key ] = $resource[ $key ];
				}
			}

			echo '<link';

			foreach ( $attrs as $key => $value ) {
				echo ' ' . esc_attr( $key ) . '="' . esc_attr( $value ) . '"';
			}

			echo ' />' . "\n";
		}

		/**
		 * Early performance meta.
		 *
		 * @return void
		 */
		public function print_early_performance_meta() {
			if ( ! $this->enabled() ) {
				return;
			}

			if ( get_theme_mod( 'rx_preload_theme_color_enable', false ) ) {
				$color = get_theme_mod( 'rx_preload_theme_color', '#ffffff' );

				if ( preg_match( '/^#[a-f0-9]{6}$/i', $color ) ) {
					echo '<meta name="theme-color" content="' . esc_attr( $color ) . '">' . "\n";
				}
			}

			if ( get_theme_mod( 'rx_preload_mobile_web_app_capable', false ) ) {
				echo '<meta name="mobile-web-app-capable" content="yes">' . "\n";
			}

			if ( get_theme_mod( 'rx_preload_referrer_policy', false ) ) {
				echo '<meta name="referrer" content="strict-origin-when-cross-origin">' . "\n";
			}
		}

		/**
		 * Add fetchpriority to first important image.
		 *
		 * @param array        $attr       Attributes.
		 * @param WP_Post     $attachment Attachment.
		 * @param string|array $size       Size.
		 * @return array
		 */
		public function add_image_fetchpriority( $attr, $attachment, $size ) {
			if ( ! $this->enabled() || ! get_theme_mod( 'rx_preload_auto_fetchpriority', true ) ) {
				return $attr;
			}

			if ( is_singular() && has_post_thumbnail() ) {
				$post_id  = get_queried_object_id();
				$thumb_id = get_post_thumbnail_id( $post_id );

				if ( $thumb_id && isset( $attachment->ID ) && (int) $attachment->ID === (int) $thumb_id ) {
					$attr['fetchpriority'] = 'high';

					if ( empty( $attr['loading'] ) || 'lazy' === $attr['loading'] ) {
						$attr['loading'] = 'eager';
					}

					$attr['decoding'] = 'async';
				}
			}

			return $attr;
		}

		/**
		 * Guess MIME type.
		 *
		 * @param string $url      URL.
		 * @param string $fallback Fallback.
		 * @return string
		 */
		private function guess_mime_type( $url, $fallback = '' ) {
			$path = wp_parse_url( $url, PHP_URL_PATH );
			$ext  = strtolower( pathinfo( $path, PATHINFO_EXTENSION ) );

			$map = array(
				'woff2' => 'font/woff2',
				'woff'  => 'font/woff',
				'ttf'   => 'font/ttf',
				'otf'   => 'font/otf',
				'css'   => 'text/css',
				'js'    => 'text/javascript',
				'mjs'   => 'text/javascript',
				'png'   => 'image/png',
				'jpg'   => 'image/jpeg',
				'jpeg'  => 'image/jpeg',
				'webp'  => 'image/webp',
				'avif'  => 'image/avif',
				'svg'   => 'image/svg+xml',
			);

			return $map[ $ext ] ?? $fallback;
		}

		/**
		 * Debug comments.
		 *
		 * @return void
		 */
		public function print_preload_comments() {
			if ( ! $this->enabled() || ! get_theme_mod( 'rx_preload_debug_comment', false ) ) {
				return;
			}

			echo "\n" . '<!-- RX Theme preload system active. Keep preload list small for best performance. -->' . "\n";
		}

		/**
		 * Register Customizer settings.
		 *
		 * @param WP_Customize_Manager $wp_customize Customizer.
		 * @return void
		 */
		public function register_customizer_settings( $wp_customize ) {
			$wp_customize->add_section(
				'rx_preload_section',
				array(
					'title'       => __( 'RX Performance Preload', 'rx-theme' ),
					'description' => __( 'Control preload, preconnect, DNS prefetch, fonts, CSS, JS, and hero image hints.', 'rx-theme' ),
					'priority'    => 160,
				)
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_enable',
				__( 'Enable RX preload system', 'rx-theme' ),
				true
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_featured_image',
				__( 'Preload single post/page featured image', 'rx-theme' ),
				true
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_auto_fetchpriority',
				__( 'Add high fetchpriority to featured image', 'rx-theme' ),
				true
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_site_logo',
				__( 'Preload site logo', 'rx-theme' ),
				false
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_main_stylesheet',
				__( 'Preload main stylesheet', 'rx-theme' ),
				true
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_default_fonts',
				__( 'Preload default RX local fonts', 'rx-theme' ),
				false
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_print_manual_head',
				__( 'Print manual preload links in wp_head', 'rx-theme' ),
				false
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_theme_color_enable',
				__( 'Print browser theme color meta', 'rx-theme' ),
				false
			);

			$wp_customize->add_setting(
				'rx_preload_theme_color',
				array(
					'default'           => '#ffffff',
					'sanitize_callback' => 'sanitize_hex_color',
					'transport'         => 'refresh',
				)
			);

			$wp_customize->add_control(
				new WP_Customize_Color_Control(
					$wp_customize,
					'rx_preload_theme_color',
					array(
						'label'   => __( 'Theme color', 'rx-theme' ),
						'section' => 'rx_preload_section',
					)
				)
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_mobile_web_app_capable',
				__( 'Print mobile web app capable meta', 'rx-theme' ),
				false
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_referrer_policy',
				__( 'Print strict referrer policy meta', 'rx-theme' ),
				false
			);

			$this->add_checkbox_control(
				$wp_customize,
				'rx_preload_debug_comment',
				__( 'Print preload debug comment', 'rx-theme' ),
				false
			);

			$this->add_textarea_control(
				$wp_customize,
				'rx_preload_dns_prefetch_urls',
				__( 'Extra DNS prefetch URLs', 'rx-theme' ),
				__( 'One URL per line. Example: https://cdn.example.com', 'rx-theme' )
			);

			$this->add_textarea_control(
				$wp_customize,
				'rx_preload_preconnect_urls',
				__( 'Extra preconnect URLs', 'rx-theme' ),
				__( 'One URL per line. Use only critical third-party origins.', 'rx-theme' )
			);

			$this->add_textarea_control(
				$wp_customize,
				'rx_preload_font_urls',
				__( 'Font preload URLs', 'rx-theme' ),
				__( 'One font URL per line. Best for WOFF2 fonts used above the fold.', 'rx-theme' )
			);

			$this->add_textarea_control(
				$wp_customize,
				'rx_preload_css_urls',
				__( 'CSS preload URLs', 'rx-theme' ),
				__( 'One CSS URL per line. Add only critical CSS files.', 'rx-theme' )
			);

			$this->add_textarea_control(
				$wp_customize,
				'rx_preload_js_urls',
				__( 'JS preload URLs', 'rx-theme' ),
				__( 'One JS URL per line. Use carefully because too much JS preload can slow pages.', 'rx-theme' )
			);

			$this->add_textarea_control(
				$wp_customize,
				'rx_preload_custom_resources',
				__( 'Advanced custom preload resources', 'rx-theme' ),
				__( 'Format: URL|as|type|crossorigin. Example: https://example.com/font.woff2|font|font/woff2|anonymous', 'rx-theme' )
			);
		}

		/**
		 * Add checkbox control.
		 *
		 * @param WP_Customize_Manager $wp_customize Customizer.
		 * @param string               $id           ID.
		 * @param string               $label        Label.
		 * @param bool                 $default      Default.
		 * @return void
		 */
		private function add_checkbox_control( $wp_customize, $id, $label, $default = false ) {
			$wp_customize->add_setting(
				$id,
				array(
					'default'           => (bool) $default,
					'sanitize_callback' => array( $this, 'sanitize_checkbox' ),
					'transport'         => 'refresh',
				)
			);

			$wp_customize->add_control(
				$id,
				array(
					'type'    => 'checkbox',
					'label'   => $label,
					'section' => 'rx_preload_section',
				)
			);
		}

		/**
		 * Add textarea control.
		 *
		 * @param WP_Customize_Manager $wp_customize Customizer.
		 * @param string               $id           ID.
		 * @param string               $label        Label.
		 * @param string               $description  Description.
		 * @return void
		 */
		private function add_textarea_control( $wp_customize, $id, $label, $description = '' ) {
			$wp_customize->add_setting(
				$id,
				array(
					'default'           => '',
					'sanitize_callback' => array( $this, 'sanitize_textarea_urls' ),
					'transport'         => 'refresh',
				)
			);

			$wp_customize->add_control(
				$id,
				array(
					'type'        => 'textarea',
					'label'       => $label,
					'description' => $description,
					'section'     => 'rx_preload_section',
				)
			);
		}

		/**
		 * Sanitize checkbox.
		 *
		 * @param mixed $checked Value.
		 * @return bool
		 */
		public function sanitize_checkbox( $checked ) {
			return (bool) $checked;
		}

		/**
		 * Sanitize textarea URLs and advanced rows.
		 *
		 * @param string $value Value.
		 * @return string
		 */
		public function sanitize_textarea_urls( $value ) {
			$value = (string) $value;
			$lines = preg_split( '/\r\n|\r|\n/', $value );
			$out   = array();

			foreach ( $lines as $line ) {
				$line = trim( wp_strip_all_tags( $line ) );

				if ( '' === $line ) {
					continue;
				}

				$out[] = sanitize_text_field( $line );
			}

			return implode( "\n", $out );
		}
	}

endif;

RX_Theme_Preload::instance();

/**
 * Helper function for adding extra preload resources from other theme files.
 *
 * Example:
 *
 * add_filter( 'rx_theme_manual_preload_resources', function( $resources ) {
 *     $resources[] = array(
 *         'href' => get_template_directory_uri() . '/assets/css/home.css',
 *         'as'   => 'style',
 *         'type' => 'text/css',
 *     );
 *     return $resources;
 * });
 */
if ( ! function_exists( 'rx_theme_preload_resource' ) ) :
	function rx_theme_preload_resource( $href, $as = 'style', $type = '', $crossorigin = '' ) {
		$item = array(
			'href' => esc_url_raw( $href ),
			'as'   => sanitize_key( $as ),
		);

		if ( $type ) {
			$item['type'] = sanitize_text_field( $type );
		}

		if ( $crossorigin ) {
			$item['crossorigin'] = sanitize_key( $crossorigin );
		}

		return $item;
	}
endif;

Use this carefully: preload should be used only for resources needed very early, because WordPress notes that preloading non-critical resources can compete with render-blocking resources and slow loading instead of improving it.

Recommended folder position:

rx-theme/
├── functions.php
└── inc/
    └── seo/
        └── preload.php

Best setup for your RX theme:

// functions.php
require_once get_template_directory() . '/inc/seo/preload.php';

Then go to:

WordPress Dashboard
Appearance
Customize
RX Performance Preload

For your CDN chunk files, add them in Advanced custom preload resources like this:

https://static-assets-cdnrx.rxharun.com/_next/static/chunks/example.js|script|text/javascript|
https://static-assets-cdnrx.rxharun.com/_next/static/css/example.css|style|text/css|
https://static-assets-cdnrx.rxharun.com/fonts/example.woff2|font|font/woff2|anonymous

My advice: do not preload 50–100 chunk JS files at once. For best speed, preload only the first critical app CSS, first critical app JS, main font, logo, and featured image. Too many preload links can break loading priority and make the page slower.

Leave a Reply

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