I’ll build this as a safe, standalone performance chunk for RX Theme: no dependencies, WordPress-friendly, browser-feature checks, and defensive coding so one error will not break the site.
Dear friend, create this file:
/assets/static-js/static-chunks-js/chunk-047-performance.js
Use this advanced performance-focused code:
/*!
* RX Theme - Chunk 047 Performance
* File: /assets/static-js/static-chunks-js/chunk-047-performance.js
* Purpose: Advanced front-end performance helpers for RX Theme
* Author: RxHarun
*/
(function () {
"use strict";
/**
* RX Performance Chunk
*
* Features:
* 01. Safe namespace
* 02. DOM ready helper
* 03. Idle callback helper
* 04. Passive event detection
* 05. Debounce and throttle
* 06. Lazy image enhancement
* 07. Lazy background image support
* 08. Iframe lazy loading
* 09. Video lazy preload
* 10. Font loading optimization
* 11. External link security
* 12. Prefetch on hover
* 13. Instant page hinting
* 14. Scroll performance optimization
* 15. Header scroll class
* 16. Back-to-top behavior
* 17. Web Vitals helper hooks
* 18. Resource timing collection
* 19. Long task observer
* 20. Layout shift observer
* 21. Reduced motion support
* 22. Save-data support
* 23. Network-aware loading
* 24. Print optimization
* 25. BFCache restore handling
* 26. DOM mutation optimization
* 27. Image decoding
* 28. Priority image detection
* 29. Smart preload cleanup
* 30. Safe public API
*/
var RX = window.RXTheme = window.RXTheme || {};
RX.performance = RX.performance || {};
var doc = document;
var win = window;
var html = doc.documentElement;
var body = doc.body;
var config = {
enableDebug: false,
selectors: {
header: ".site-header, .rx-site-header, header[role='banner']",
backToTop: ".rx-back-to-top, [data-rx-back-to-top]",
lazyImage: "img[data-src], img[data-srcset], img[loading='lazy']",
lazyBackground: "[data-bg], [data-background]",
lazyIframe: "iframe[data-src]",
lazyVideo: "video[data-src], video source[data-src]",
prefetchLink: "a[href]",
externalLink: "a[href^='http']"
},
classes: {
js: "rx-js",
loaded: "rx-loaded",
domReady: "rx-dom-ready",
windowLoaded: "rx-window-loaded",
scrolling: "rx-is-scrolling",
scrolled: "rx-is-scrolled",
scrollUp: "rx-scroll-up",
scrollDown: "rx-scroll-down",
lazyLoaded: "rx-lazy-loaded",
lazyError: "rx-lazy-error",
reducedMotion: "rx-reduced-motion",
saveData: "rx-save-data",
slowNetwork: "rx-slow-network",
bfcacheRestored: "rx-bfcache-restored"
},
scroll: {
scrolledOffset: 24,
backToTopOffset: 400,
scrollEndDelay: 120
},
prefetch: {
enabled: true,
delay: 80,
maxLinks: 20,
allowedSameOriginOnly: true
},
lazy: {
rootMargin: "300px 0px",
threshold: 0.01
},
metrics: {
enabled: true,
maxEntries: 100
}
};
var state = {
initialized: false,
passiveSupported: false,
lastScrollY: 0,
ticking: false,
scrollTimer: null,
prefetched: new Set(),
metrics: {
longTasks: [],
layoutShifts: [],
resources: [],
marks: {}
}
};
function log() {
if (!config.enableDebug || !win.console) return;
try {
console.log.apply(console, ["[RX Performance]"].concat([].slice.call(arguments)));
} catch (e) {}
}
function warn() {
if (!config.enableDebug || !win.console) return;
try {
console.warn.apply(console, ["[RX Performance]"].concat([].slice.call(arguments)));
} catch (e) {}
}
function safeRun(fn, label) {
try {
return fn();
} catch (error) {
warn(label || "Safe run error", error);
return null;
}
}
function ready(fn) {
if (doc.readyState === "loading") {
doc.addEventListener("DOMContentLoaded", fn, { once: true });
} else {
fn();
}
}
function onWindowLoad(fn) {
if (doc.readyState === "complete") {
fn();
} else {
win.addEventListener("load", fn, { once: true });
}
}
function idle(fn, timeout) {
if ("requestIdleCallback" in win) {
return win.requestIdleCallback(fn, { timeout: timeout || 1500 });
}
return win.setTimeout(function () {
fn({
didTimeout: false,
timeRemaining: function () {
return 0;
}
});
}, 1);
}
function raf(fn) {
if ("requestAnimationFrame" in win) {
return win.requestAnimationFrame(fn);
}
return win.setTimeout(fn, 16);
}
function debounce(fn, delay) {
var timer = null;
return function () {
var context = this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
function throttle(fn, limit) {
var waiting = false;
return function () {
if (waiting) return;
var context = this;
var args = arguments;
waiting = true;
setTimeout(function () {
waiting = false;
fn.apply(context, args);
}, limit);
};
}
function detectPassiveSupport() {
safeRun(function () {
var options = Object.defineProperty({}, "passive", {
get: function () {
state.passiveSupported = true;
return true;
}
});
win.addEventListener("rxPassiveTest", null, options);
win.removeEventListener("rxPassiveTest", null, options);
}, "Passive detection failed");
}
function passiveOptions() {
return state.passiveSupported ? { passive: true } : false;
}
function addClass(el, className) {
if (el && className) {
el.classList.add(className);
}
}
function removeClass(el, className) {
if (el && className) {
el.classList.remove(className);
}
}
function toggleClass(el, className, condition) {
if (!el || !className) return;
if (condition) {
el.classList.add(className);
} else {
el.classList.remove(className);
}
}
function queryAll(selector, context) {
return Array.prototype.slice.call((context || doc).querySelectorAll(selector));
}
function isSameOrigin(url) {
try {
return new URL(url, win.location.href).origin === win.location.origin;
} catch (e) {
return false;
}
}
function isValidPrefetchUrl(url) {
if (!url) return false;
try {
var parsed = new URL(url, win.location.href);
if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return false;
if (parsed.hash && parsed.pathname === win.location.pathname) return false;
if (parsed.href === win.location.href) return false;
if (config.prefetch.allowedSameOriginOnly && parsed.origin !== win.location.origin) return false;
return true;
} catch (e) {
return false;
}
}
function getConnection() {
return navigator.connection || navigator.mozConnection || navigator.webkitConnection || null;
}
function isSaveDataEnabled() {
var connection = getConnection();
return !!(connection && connection.saveData);
}
function isSlowNetwork() {
var connection = getConnection();
if (!connection) return false;
var type = connection.effectiveType || "";
return type === "slow-2g" || type === "2g";
}
function applyEnvironmentClasses() {
addClass(html, config.classes.js);
if (isSaveDataEnabled()) {
addClass(html, config.classes.saveData);
}
if (isSlowNetwork()) {
addClass(html, config.classes.slowNetwork);
}
if (win.matchMedia && win.matchMedia("(prefers-reduced-motion: reduce)").matches) {
addClass(html, config.classes.reducedMotion);
}
}
function mark(name) {
if (!name) return;
state.metrics.marks[name] = Date.now();
if (win.performance && typeof win.performance.mark === "function") {
safeRun(function () {
win.performance.mark("rx-" + name);
}, "Performance mark failed");
}
}
function measure(name, startMark, endMark) {
if (!win.performance || typeof win.performance.measure !== "function") return;
safeRun(function () {
win.performance.measure("rx-" + name, "rx-" + startMark, "rx-" + endMark);
}, "Performance measure failed");
}
function enhanceImages(context) {
var images = queryAll(config.selectors.lazyImage, context);
images.forEach(function (img) {
if (!img || img.dataset.rxEnhanced === "1") return;
img.dataset.rxEnhanced = "1";
if (!img.hasAttribute("decoding")) {
img.setAttribute("decoding", "async");
}
if (!img.hasAttribute("loading")) {
img.setAttribute("loading", "lazy");
}
img.addEventListener("load", function () {
addClass(img, config.classes.lazyLoaded);
}, { once: true });
img.addEventListener("error", function () {
addClass(img, config.classes.lazyError);
}, { once: true });
if (img.complete && img.naturalWidth > 0) {
addClass(img, config.classes.lazyLoaded);
}
});
}
function decodeVisibleImages() {
var images = queryAll("img");
images.slice(0, 8).forEach(function (img) {
if (!img || typeof img.decode !== "function") return;
if (img.dataset.rxDecoded === "1") return;
img.dataset.rxDecoded = "1";
safeRun(function () {
img.decode().catch(function () {});
}, "Image decode failed");
});
}
function loadLazyImage(img) {
if (!img || img.dataset.rxLazyLoaded === "1") return;
var src = img.getAttribute("data-src");
var srcset = img.getAttribute("data-srcset");
var sizes = img.getAttribute("data-sizes");
if (srcset) {
img.setAttribute("srcset", srcset);
img.removeAttribute("data-srcset");
}
if (sizes) {
img.setAttribute("sizes", sizes);
img.removeAttribute("data-sizes");
}
if (src) {
img.setAttribute("src", src);
img.removeAttribute("data-src");
}
img.dataset.rxLazyLoaded = "1";
}
function loadLazyBackground(el) {
if (!el || el.dataset.rxBgLoaded === "1") return;
var bg = el.getAttribute("data-bg") || el.getAttribute("data-background");
if (!bg) return;
el.style.backgroundImage = "url('" + bg.replace(/'/g, "\\'") + "')";
el.dataset.rxBgLoaded = "1";
el.removeAttribute("data-bg");
el.removeAttribute("data-background");
addClass(el, config.classes.lazyLoaded);
}
function loadLazyIframe(iframe) {
if (!iframe || iframe.dataset.rxIframeLoaded === "1") return;
var src = iframe.getAttribute("data-src");
if (!src) return;
iframe.setAttribute("src", src);
iframe.removeAttribute("data-src");
iframe.dataset.rxIframeLoaded = "1";
addClass(iframe, config.classes.lazyLoaded);
}
function setupLazyLoading(context) {
var lazyImages = queryAll("img[data-src], img[data-srcset]", context);
var lazyBackgrounds = queryAll(config.selectors.lazyBackground, context);
var lazyIframes = queryAll(config.selectors.lazyIframe, context);
if (!("IntersectionObserver" in win)) {
lazyImages.forEach(loadLazyImage);
lazyBackgrounds.forEach(loadLazyBackground);
lazyIframes.forEach(loadLazyIframe);
return;
}
var observer = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
var target = entry.target;
if (target.tagName === "IMG") {
loadLazyImage(target);
} else if (target.tagName === "IFRAME") {
loadLazyIframe(target);
} else {
loadLazyBackground(target);
}
obs.unobserve(target);
});
}, {
rootMargin: config.lazy.rootMargin,
threshold: config.lazy.threshold
});
lazyImages.forEach(function (img) {
observer.observe(img);
});
lazyBackgrounds.forEach(function (el) {
observer.observe(el);
});
lazyIframes.forEach(function (iframe) {
observer.observe(iframe);
});
}
function setupLazyVideos(context) {
var videos = queryAll("video[data-src]", context);
var sources = queryAll("video source[data-src]", context);
function loadVideo(video) {
if (!video || video.dataset.rxVideoLoaded === "1") return;
var src = video.getAttribute("data-src");
if (src) {
video.setAttribute("src", src);
video.removeAttribute("data-src");
}
queryAll("source[data-src]", video).forEach(function (source) {
source.setAttribute("src", source.getAttribute("data-src"));
source.removeAttribute("data-src");
});
safeRun(function () {
video.load();
}, "Video load failed");
video.dataset.rxVideoLoaded = "1";
}
if (!("IntersectionObserver" in win)) {
videos.forEach(loadVideo);
sources.forEach(function (source) {
if (source.parentNode && source.parentNode.tagName === "VIDEO") {
loadVideo(source.parentNode);
}
});
return;
}
var observer = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
var target = entry.target;
var video = target.tagName === "VIDEO" ? target : target.closest("video");
loadVideo(video);
obs.unobserve(target);
});
}, {
rootMargin: "500px 0px",
threshold: 0.01
});
videos.forEach(function (video) {
observer.observe(video);
});
sources.forEach(function (source) {
if (source.parentNode && source.parentNode.tagName === "VIDEO") {
observer.observe(source.parentNode);
}
});
}
function setupPriorityImages() {
var firstImages = queryAll("main img, .site-main img, article img").slice(0, 2);
firstImages.forEach(function (img, index) {
if (!img) return;
if (index === 0) {
img.setAttribute("fetchpriority", "high");
img.setAttribute("loading", "eager");
} else if (!img.hasAttribute("loading")) {
img.setAttribute("loading", "lazy");
}
if (!img.hasAttribute("decoding")) {
img.setAttribute("decoding", "async");
}
});
}
function setupIframeOptimization() {
var iframes = queryAll("iframe");
iframes.forEach(function (iframe) {
if (!iframe.hasAttribute("loading")) {
iframe.setAttribute("loading", "lazy");
}
if (!iframe.hasAttribute("referrerpolicy")) {
iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
}
});
}
function setupExternalLinks() {
var links = queryAll(config.selectors.externalLink);
links.forEach(function (link) {
if (!link.hostname || link.hostname === win.location.hostname) return;
var rel = (link.getAttribute("rel") || "").split(/\s+/);
if (rel.indexOf("noopener") === -1) rel.push("noopener");
if (rel.indexOf("noreferrer") === -1) rel.push("noreferrer");
link.setAttribute("rel", rel.join(" ").trim());
if (!link.hasAttribute("target")) {
link.setAttribute("target", "_blank");
}
});
}
function prefetchUrl(url) {
if (!config.prefetch.enabled) return;
if (!isValidPrefetchUrl(url)) return;
if (state.prefetched.has(url)) return;
if (state.prefetched.size >= config.prefetch.maxLinks) return;
if (isSaveDataEnabled() || isSlowNetwork()) return;
state.prefetched.add(url);
idle(function () {
var link = doc.createElement("link");
link.rel = "prefetch";
link.href = url;
link.as = "document";
doc.head.appendChild(link);
log("Prefetched:", url);
}, 1000);
}
function setupHoverPrefetch() {
if (!config.prefetch.enabled) return;
var timer = null;
doc.addEventListener("mouseover", function (event) {
var link = event.target.closest && event.target.closest("a[href]");
if (!link) return;
var href = link.href;
clearTimeout(timer);
timer = setTimeout(function () {
prefetchUrl(href);
}, config.prefetch.delay);
}, passiveOptions());
doc.addEventListener("touchstart", function (event) {
var link = event.target.closest && event.target.closest("a[href]");
if (!link) return;
prefetchUrl(link.href);
}, passiveOptions());
}
function handleScroll() {
var currentY = win.pageYOffset || html.scrollTop || 0;
var goingDown = currentY > state.lastScrollY;
toggleClass(html, config.classes.scrolled, currentY > config.scroll.scrolledOffset);
toggleClass(html, config.classes.scrollDown, goingDown && currentY > config.scroll.scrolledOffset);
toggleClass(html, config.classes.scrollUp, !goingDown && currentY > config.scroll.scrolledOffset);
state.lastScrollY = currentY <= 0 ? 0 : currentY;
state.ticking = false;
}
function onScroll() {
addClass(html, config.classes.scrolling);
if (!state.ticking) {
state.ticking = true;
raf(handleScroll);
}
clearTimeout(state.scrollTimer);
state.scrollTimer = setTimeout(function () {
removeClass(html, config.classes.scrolling);
}, config.scroll.scrollEndDelay);
}
function setupScrollOptimization() {
win.addEventListener("scroll", onScroll, passiveOptions());
handleScroll();
}
function setupHeaderPerformance() {
var header = doc.querySelector(config.selectors.header);
if (!header) return;
if (!header.style.willChange) {
header.style.willChange = "transform";
}
}
function setupBackToTop() {
var buttons = queryAll(config.selectors.backToTop);
if (!buttons.length) return;
function updateButtons() {
var y = win.pageYOffset || html.scrollTop || 0;
buttons.forEach(function (button) {
toggleClass(button, "is-visible", y > config.scroll.backToTopOffset);
button.setAttribute("aria-hidden", y > config.scroll.backToTopOffset ? "false" : "true");
});
}
buttons.forEach(function (button) {
button.addEventListener("click", function (event) {
event.preventDefault();
win.scrollTo({
top: 0,
behavior: html.classList.contains(config.classes.reducedMotion) ? "auto" : "smooth"
});
});
});
win.addEventListener("scroll", throttle(updateButtons, 100), passiveOptions());
updateButtons();
}
function setupFontOptimization() {
if (!("fonts" in doc)) return;
safeRun(function () {
doc.fonts.ready.then(function () {
addClass(html, "rx-fonts-loaded");
});
}, "Font loading hook failed");
}
function cleanUnusedPreloads() {
var preloads = queryAll("link[rel='preload']");
preloads.forEach(function (link) {
var href = link.href;
if (!href) return;
link.addEventListener("error", function () {
safeRun(function () {
link.parentNode.removeChild(link);
}, "Preload cleanup failed");
}, { once: true });
});
}
function setupPrintOptimization() {
win.addEventListener("beforeprint", function () {
addClass(html, "rx-before-print");
});
win.addEventListener("afterprint", function () {
removeClass(html, "rx-before-print");
});
}
function observeLongTasks() {
if (!config.metrics.enabled) return;
if (!("PerformanceObserver" in win)) return;
safeRun(function () {
var observer = new PerformanceObserver(function (list) {
list.getEntries().forEach(function (entry) {
state.metrics.longTasks.push({
name: entry.name,
startTime: entry.startTime,
duration: entry.duration
});
if (state.metrics.longTasks.length > config.metrics.maxEntries) {
state.metrics.longTasks.shift();
}
});
});
observer.observe({ entryTypes: ["longtask"] });
}, "Long task observer unavailable");
}
function observeLayoutShifts() {
if (!config.metrics.enabled) return;
if (!("PerformanceObserver" in win)) return;
safeRun(function () {
var observer = new PerformanceObserver(function (list) {
list.getEntries().forEach(function (entry) {
if (entry.hadRecentInput) return;
state.metrics.layoutShifts.push({
value: entry.value,
startTime: entry.startTime,
sources: entry.sources ? entry.sources.length : 0
});
if (state.metrics.layoutShifts.length > config.metrics.maxEntries) {
state.metrics.layoutShifts.shift();
}
});
});
observer.observe({ type: "layout-shift", buffered: true });
}, "Layout shift observer unavailable");
}
function collectResourceTiming() {
if (!config.metrics.enabled) return;
if (!win.performance || typeof win.performance.getEntriesByType !== "function") return;
idle(function () {
safeRun(function () {
state.metrics.resources = win.performance
.getEntriesByType("resource")
.slice(-config.metrics.maxEntries)
.map(function (entry) {
return {
name: entry.name,
type: entry.initiatorType,
duration: Math.round(entry.duration),
transferSize: entry.transferSize || 0
};
});
}, "Resource timing collection failed");
}, 2000);
}
function setupBFCacheHandling() {
win.addEventListener("pageshow", function (event) {
if (event.persisted) {
addClass(html, config.classes.bfcacheRestored);
safeRun(function () {
handleScroll();
decodeVisibleImages();
}, "BFCache restore failed");
}
});
}
function setupMutationOptimization() {
if (!("MutationObserver" in win)) return;
var debouncedEnhance = debounce(function () {
safeRun(function () {
enhanceImages(doc);
setupIframeOptimization();
setupExternalLinks();
}, "Mutation enhancement failed");
}, 250);
var observer = new MutationObserver(function (mutations) {
var shouldRun = false;
mutations.forEach(function (mutation) {
if (mutation.addedNodes && mutation.addedNodes.length) {
shouldRun = true;
}
});
if (shouldRun) {
debouncedEnhance();
}
});
ready(function () {
if (!doc.body) return;
observer.observe(doc.body, {
childList: true,
subtree: true
});
});
}
function setupVisibilityOptimization() {
doc.addEventListener("visibilitychange", function () {
if (doc.hidden) {
addClass(html, "rx-page-hidden");
} else {
removeClass(html, "rx-page-hidden");
collectResourceTiming();
}
});
}
function setupErrorProtection() {
win.addEventListener("error", function (event) {
if (!config.enableDebug) return;
warn("Window error:", event.message);
});
win.addEventListener("unhandledrejection", function (event) {
if (!config.enableDebug) return;
warn("Unhandled promise rejection:", event.reason);
});
}
function getCLS() {
return state.metrics.layoutShifts.reduce(function (sum, item) {
return sum + (item.value || 0);
}, 0);
}
function getLongTaskTotal() {
return state.metrics.longTasks.reduce(function (sum, item) {
return sum + (item.duration || 0);
}, 0);
}
function getReport() {
return {
initialized: state.initialized,
saveData: isSaveDataEnabled(),
slowNetwork: isSlowNetwork(),
prefetchedLinks: state.prefetched.size,
clsApprox: Number(getCLS().toFixed(4)),
longTaskCount: state.metrics.longTasks.length,
longTaskTotal: Math.round(getLongTaskTotal()),
resourceCount: state.metrics.resources.length,
marks: state.metrics.marks
};
}
function init() {
if (state.initialized) return;
state.initialized = true;
mark("performance-init-start");
detectPassiveSupport();
applyEnvironmentClasses();
setupErrorProtection();
setupBFCacheHandling();
setupVisibilityOptimization();
ready(function () {
mark("dom-ready");
addClass(html, config.classes.domReady);
safeRun(function () {
body = doc.body;
setupPriorityImages();
enhanceImages(doc);
setupLazyLoading(doc);
setupLazyVideos(doc);
setupIframeOptimization();
setupExternalLinks();
setupHoverPrefetch();
setupScrollOptimization();
setupHeaderPerformance();
setupBackToTop();
setupFontOptimization();
setupPrintOptimization();
setupMutationOptimization();
cleanUnusedPreloads();
decodeVisibleImages();
observeLongTasks();
observeLayoutShifts();
mark("performance-init-end");
measure("performance-init", "performance-init-start", "performance-init-end");
}, "RX performance DOM init failed");
});
onWindowLoad(function () {
mark("window-loaded");
addClass(html, config.classes.windowLoaded);
idle(function () {
collectResourceTiming();
}, 2500);
});
log("Initialized");
}
RX.performance.config = config;
RX.performance.state = state;
RX.performance.init = init;
RX.performance.ready = ready;
RX.performance.idle = idle;
RX.performance.debounce = debounce;
RX.performance.throttle = throttle;
RX.performance.prefetchUrl = prefetchUrl;
RX.performance.enhanceImages = enhanceImages;
RX.performance.setupLazyLoading = setupLazyLoading;
RX.performance.getReport = getReport;
RX.performance.mark = mark;
RX.performance.measure = measure;
init();
})();
To load it in RX Theme, add this in your enqueue file or functions.php:
wp_enqueue_script(
'rx-chunk-047-performance',
get_template_directory_uri() . '/assets/static-js/static-chunks-js/chunk-047-performance.js',
array(),
wp_get_theme()->get('Version'),
true
);
For better loading performance, also add defer:
add_filter('script_loader_tag', function ($tag, $handle, $src) {
if ($handle === 'rx-chunk-047-performance') {
return '<script src="' . esc_url($src) . '" id="' . esc_attr($handle) . '-js" defer></script>' . "\n";
}
return $tag;
}, 10, 3);
Best folder position:
rx-theme/
└── assets/
└── static-js/
└── static-chunks-js/
└── chunk-047-performance.js
This file is safe for advanced RX Theme use because it checks browser support before using modern features and keeps all functions inside the window.RXTheme.performance namespace.