Overview Infinite scroll with the WordPress REST API and vanilla JavaScript is a modern, user-friendly way to load additional posts as the reader scrolls. This article covers everything you need: how the REST API pagination works, server-side tweaks (exposing featured images, custom endpoints, headers), the recommended client-side implementation (IntersectionObserver with a scroll fallback), accessibility and […]
Introduction This article explains, in exhaustive detail, how to implement lazy loading for iframes in WordPress using the IntersectionObserver API. You will get complete, copy-paste-ready examples for markup, JavaScript, CSS, and WordPress PHP integration. The patterns cover single iframe embeds, responsive iframes, automatic conversion of WordPress embeds (oEmbed), noscript fallbacks, and robustness for older browsers […]
Overview This tutorial explains, in full detail, how to measure Web Vitals in JavaScript on a WordPress site and reliably send those metrics to a WordPress REST API endpoint for storage, analysis, or forwarding to an analytics backend. It covers recommended client-side measurement methods, robust data delivery (sendBeacon, fetch fallback, offline queuing), how to enqueue […]
Overview This article explains, in complete detail, how to remove jQuery from the WordPress front end and replace its usage with vanilla JavaScript without breaking your site. It covers auditing dependencies, safe removal (and exceptions), creating a compatibility shim if needed, converting common jQuery patterns to vanilla JS, handling AJAX, animations and event delegation, troubleshooting, […]
Overview This article explains, in exhaustive detail, how to defer scripts to the footer in WordPress and avoid render-blocking resources. It covers fundamental concepts, step-by-step code examples (for functions.php and inline scripts), tips for CSS handling, caveats, testing methodology, and recommended plugins and practices. All examples are ready to paste into a child theme or […]
Why split JavaScript by pages? Performance: delivering only the code that a page needs reduces payload, lowers TTFB and time-to-interactive, and reduces render-blocking. Maintainability: smaller modules are easier to reason about and test. Caching and versions: targeted files change less often, so caches stay valid longer. How WordPress script loading works (quick fundamentals) Use wp_register_script() […]
Overview — Why rel=preload for critical scripts in WordPress rel=preload is an early-fetch hint that tells the browser to start fetching a resource (CSS, fonts, scripts, etc.) as soon as possible, before the browser discovers it in the normal document flow. For critical JavaScript that you need available earlier than normal discovery allows (for example, […]
Prefetching and related resource hints let modern browsers discover and start fetching critical third-party hosts and assets earlier in the page lifecycle. WordPress exposes a lightweight API and filter that let you add dns-prefetch, preconnect, prefetch and prerender hints from PHP so they appear in the HTML head. This article explains every practical detail you […]
Introduction — what is WordPress object caching and why wp_cache matters WordPress provides an object cache layer exposed by the wp_cache family of functions (wp_cache_get, wp_cache_set, wp_cache_add, wp_cache_delete, wp_cache_flush, wp_cache_incr, wp_cache_decr, wp_cache_replace, etc.). Object caching stores PHP values (arrays, objects, scalars) in memory between requests (persistent cache) or for the lifetime of a single request […]
Overview This article explains, in exhaustive detail, how to invalidate cache when saving a post in WordPress using hooks in PHP. It covers the WordPress lifecycle hooks you should use, how to avoid edge cases (autosaves, revisions, permission checks), strategies for different cache layers (object cache, page cache, CDNs, reverse proxies), examples for common caches […]
