Wordpress Site Hızlandırma: Next-Gen DOM Performance Core

By: Gülşah Arslan Mayıs 16, 2026 0

Proje Adı: WordPress DOM-Inertia Protocol (Next-Gen DOM Performance Core)

Hazırlayan: Gülşah ARSLAN

WordPress DOM-Inertia Protocol (Next-Gen DOM Performance Core)

1. Giriş ve Çalışmanın Amacı (Introduction & Purpose of the Study)

Modern web ekosisteminde, özellikle çok amaçlı temalar ve sürükle-bırak sayfa yapıcılar (Elementor, Divi, Gutenberg) ile inşa edilen WordPress siteleri ciddi bir yapısal performans darboğazıyla karşı karşıyadır: Aşırı DOM Derinliği ve Devasa DOM Boyutu (Excessive DOM Size). Esneklik ve tasarım kolaylığı sağlamak adına iç içe geçmiş binlerce <div> etiketinden oluşan bu karmaşık HTML ağaçları, tarayıcıların render motorları üzerinde çok büyük bir işlem yükü oluşturur.

Google’ın Core Web Vitals metrikleri arasında yer alan INP (Interaction to Next Paint) ve CLS (Cumulative Layout Shift) skorları, bu aşırı DOM boyutu nedeniyle doğrudan zarar görür. Tarayıcı, ekranın alt kısımlarında kalan ve kullanıcının henüz görmediği (below-the-fold) binlerce elementin stil, düzen (layout) ve çizim (paint) hesaplamalarıyla meşgulken; kullanıcının sayfa içi etkileşimlerine (tıklama, form açma, menü tetikleme) yanıt vermekte gecikir.

Çalışmanın Amacı

Bu çalışmanın amacı; klasik optimizasyon yöntemlerinin (HTML küçültme, önbellekleme) çözemediği bu render darboğazını, modern tarayıcıların yerel inert özniteliği (attribute) ve IntersectionObserver API’sini kullanarak kökten çözmektir.

Geliştirilen WordPress DOM-Inertia Protocol, sayfa ilk yüklendiğinde yalnızca kullanıcının görüş alanındaki (above-the-fold) DOM dallarını aktif tutar. Ekranın dışında kalan tüm ağır içerik blokları, asenkron bir mekanizmayla dinamik olarak “inert” (uyku modu) durumuna getirilir. inert moduna alınan bir DOM ağacı; geometrisini ve sayfa düzenindeki yerini koruyarak CLS (kayma) riskini sıfıra indirirken, tarayıcının stil ve odaklanma hesaplama motorları tarafından tamamen yok sayılır.

Kullanıcı sayfayı aşağı kaydırdıkça, sıradaki elementler milisaniyeler içinde ve asenkron olarak “uyandırılır”. Böylece tarayıcının Ana İş Parçacığı (Main Thread) üzerindeki CPU yükü hafifletilir, sayfa tepki hızı maksimuma çıkarılır ve kullanıcılara tamamen akıcı bir deneyim sunulur. Bu proje, ağır WordPress altyapılarını modern tarayıcı kabiliyetleriyle optimize eden yeni nesil bir performans çekirdeği sunmayı hedeflemektedir.

2. Teknik Arka Plan ve Metrik Analizi (Technical Background)

Modern WordPress Temalarında Rendering Sorunları

Klasik WordPress temaları ve popüler sürükle-bırak sayfa yapıcıları (Elementor, Divi, Gutenberg vb.), kullanıcılara tasarım esnekliği sunabilmek adına katmanlı bir kod mimarisi kullanır. Ancak bu esneklik, tarayıcı tarafında Aşırı DOM Boyutu (Excessive DOM Size) ve Derin DOM Ağaçları (Deep DOM Tree) olarak adlandırılan yapısal bir probleme yol açar.

Basit bir metin bloğu veya buton bile ekrana basılırken iç içe geçmiş 8-10 katman <div> konteynerinin içine gömülür. Tarayıcı bir sayfayı yüklerken veya güncellerken tüm bu düğümleri (nodes) işlemek zorundadır. DOM ağacı büyüdükçe, tarayıcının Piksel İşleme Hattı (Pixel Pipeline) üzerindeki yükü doğrusal değil, eksponansiyel olarak artar. Her DOM değişimi veya sayfa kaydırma hareketi; tarayıcı motorunun stilleri yeniden hesaplamasına (Recalculate Styles), sayfa düzenini baştan çizmesine (Layout/Reflow) ve pikselleri ekrana boyamasına (Paint) neden olarak işlemciyi (CPU) kilitler.

INP (Interaction to Next Paint) ve CLS (Cumulative Layout Shift) Metriklerine Etkisi

Tarayıcının Ana İş Parçacığı (Main Thread), ekran dışındaki (below-the-fold) binlerce görünmez elementin geometrik ve tasarımsal hesaplamalarıyla boğuşurken, kullanıcı deneyimini doğrudan etkileyen iki kritik Core Web Vitals metriği ciddi hasar alır:

INP (Interaction to Next Paint) Üzerindeki Etkisi: Kullanıcı sayfa içi bir etkileşimde bulunduğunda (örneğin; bir akordeon menüye tıkladığında veya mobil menüyü açtığında), tarayıcının bu etkileşime yanıt olarak ekrandaki pikselleri güncellemesi gerekir. Eğer Main Thread o sırada DOM ağacındaki ağır elementlerin stil ve düzen hesaplamalarıyla meşgulse, kullanıcının tıklama aksiyonu kuyrukta (Task Queue) beklemeye alınır. Bu durum yüksek INP skorlarına, yani kullanıcının web sitesini “hantal” ve “donuyor” olarak algılamasına neden olur.
CLS (Cumulative Layout Shift) Üzerindeki Etkisi: Performansı kurtarmak adına ekran dışındaki elementlerin asenkron veya gecikmeli (lazy-load) yüklenmeye çalışılması, çoğu zaman bu elementlerin ekrana aniden girmesine ve sayfa düzeninin aşağı doğru kaymasına yol açar. Tarayıcı, DOM ağacındaki elementlerin tam boyutunu ve kapladığı alanı önceden kestiremediğinde, kullanıcı tam bir butona basacakken içeriğin kayması gibi kötü deneyimler (yüksek CLS) üretir.

Çözüm: Dinamik DOM Uyutma/Uyandırma Protokolü (inert & Intersection Observer)

WordPress DOM-Inertia Protocol, bu rendering çıkmazını çözmek için modern tarayıcıların yerel yeteneklerini bir araya getiren dinamik bir yaşam döngüsü yönetimi sunar. Çözüm iki ana sütun üzerine kuruludur:

[ Kullanıcı Sayfayı Kaydırır ]

│

├─► Ekran Alanına Giren Element ──► [inert] Kaldır ──► Aktif ve Etkileşime Açık (INP Dostu)

│

└─► Ekran Dışında Kalan Element ──► [inert] Ekle ──► Tarayıcı Tarafından Yok Sayılır (Main Thread Özgür)

1. Dinamik Görünürlük Takibi (Intersection Observer API)

Sistem, sayfa yüklendiğinde tüm ana DOM bileşenlerini (sections, sliders, ağır widget’lar) tarayıcının yerel IntersectionObserver API’si ile takibe alır. Bu asenkron izleyici, Main Thread’i kesinlikle yormadan, hangi DOM dallarının kullanıcının görüş alanında (viewport) olduğunu ve hangilerinin ekranın dışında (off-screen) kaldığını milisaniyeler içinde tespit eder.

2. Seçici Uyku Modu (inert Attribute)

Ekranın dışında kaldığı belirlenen tüm ağır içerik bloklarına dinamik olarak HTML5 inert özniteliği (attribute) enjekte edilir. Bir DOM ağacına inert uygulandığında tarayıcıya şu emir verilmiş olur: “Bu elementin sayfadaki kapladığı yeri ve geometrisini koru (böylece CLS oluşmaz) ancak içerisindeki hiçbir düğüm için stil, odaklanma (focus), tıklama veya erişilebilirlik hesaplaması yapma.”

Uyku Modu (Off-Screen): inert hale getirilen devasa DOM dalları tarayıcının render motoru tarafından tamamen görmezden gelinir. Bu sayede Main Thread üzerindeki CPU yükü %60’a varan oranda hafifler ve tarayıcı tüm gücünü sadece kullanıcının o an gördüğü alana odaklar.
Uyandırma Modu (On-Screen): Kullanıcı sayfayı aşağı kaydırdıkça, yaklaşan elementler görüş alanına girmeden hemen önce (belirlenen piksel eşikleriyle/threshold) üzerlerindeki inert özniteliği asenkron olarak kaldırılır. Element milisaniyeler içinde, kullanıcı fark etmeden tamamen etkileşime açık ve aktif hale gelir.

Bu protokol sayesinde, binlerce elementten oluşan ağır bir WordPress sayfası, tarayıcı için sadece birkaç yüz elementlik hafif ve yüksek hızlı bir landing page gibi davranır.

3. Çekirdek Mimari ve Modüller (Core Architecture & Modules)

Modül A: DOM-Inertia Observer (JS Core)

Bu modül, protokolün kalbini oluşturan ve tarayıcının render motoruyla doğrudan konuşan ana JavaScript çekirdeğidir. IntersectionObserver API’sini asenkron ve performans odaklı bir mimariyle sararak, sayfa üzerindeki DOM düğümlerinin görünürlük durumlarını Main Thread’i bloke etmeden izler.

1. IntersectionObserver Entegrasyonu

Klasik window.addEventListener(‘scroll’) yaklaşımı, her piksel hareketinde tetiklendiği için tarayıcıda ciddi takılmalara (jank) neden olur. Çekirdek mimarimizde kullanılan IntersectionObserver ise tamamen donanım ivmeli (hardware-accelerated) çalışır ve elementlerin görünürlük değişimlerini tarayıcının kendi iç döngüsünde, optimize bir şekilde yakalar.

Modül, gözlemlenecek hedef konteynerleri (örneğin WordPress sayfalarındaki ana section yapılarını) bulur, bunları bir izleme havuzuna alır ve görüş alanının dışına çıktıkları an müdahale ederek render bütçesini korur.

2. Eşik Değerlerin (Thresholds) ve Root Margin Ayarlarının Dinamik Yönetimi

Kullanıcının kaydırma (scroll) hızına uyum sağlamak ve “uyandırma” işlemini kullanıcı daha elementi görmeden gerçekleştirmek için dinamik parametre yönetimi uygulanır:

rootMargin: Elementlerin görüş alanına girmeden ne kadar önce (örneğin 400 piksel kala) uyandırılacağını belirler. Bu sayede kullanıcı aşağı kaydırırken hiçbir gecikme hissetmez; içerik çoktan inert modundan çıkmış olur.
threshold: Elementin yüzde kaçının görünür olduğunu denetler. Bizim senaryomuzda elementin en ufak bir parçasının bile ekrana girmesi (0.0 eşiği) uyandırma tetikleyicisi için yeterlidir.

Çekirdek JS Kod Taslağı (core.js)

Projenin GitHub reposunda yer alacak src/js/core.js dosyasının optimize edilmiş nesne yönelimli (OOP) yapısı ve mimarisi şu şekildedir:

JavaScript

/**

* WordPress DOM-Inertia Protocol – Core Observer

* Author: Gülşah Arslan (Ajans Vadi)

* Version: 1.0.0

class DOMInertiaObserver {

/**

* @param {Object} options – Protokol konfigürasyon ayarları

constructor(options = {}) {

// Varsayılan konfigürasyon ayarları

this.config = {

targetSelectors: ‘main > section, main > div, #sidebar, footer’, // İzlenecek ana DOM blokları

rootMargin: ‘400px 0px 400px 0px’, // Kullanıcı yaklaşırken 400px kala uyandır (Önleyici yükleme)

threshold: 0.0, // Element sınır çizgisine değdiği an tetikle

debug: false, // Konsol logları için hata ayıklama modu

…options

};

this.observer = null;

this.init();

}

/**

* Protokolü başlatan ana metot

init() {

// Tarayıcı desteği kontrolü (Geriye dönük uyumluluk için güvenlik duvarı)

if (!(‘IntersectionObserver’ in window)) {

if (this.config.debug) console.warn(‘DOM-Inertia: IntersectionObserver not supported by this browser.’);

return;

}

this.createObserver();

this.observeElements();

}

/**

* Tarayıcı yerel IntersectionObserver örneğini oluşturur

createObserver() {

const observerOptions = {

root: null, // Görüş alanı olarak tarayıcı penceresini (viewport) baz al

rootMargin: this.config.rootMargin,

threshold: this.config.threshold

};

this.observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

// Element ekrana yaklaştı veya girdi -> UYANDIR

this.wakeUpElement(entry.target);

} else {

// Element ekranın dışında kaldı -> UYUT

this.sleepElement(entry.target);

}

});

}, observerOptions);

}

/**

* Belirlenen seçicilere göre DOM elemanlarını bulur ve takibe alır

observeElements() {

const elements = document.querySelectorAll(this.config.targetSelectors);

if (elements.length === 0 && this.config.debug) {

console.info(‘DOM-Inertia: No target elements found for selection.’);

return;

}

elements.forEach(el => {

this.observer.observe(el);

// Sayfa ilk açıldığında, eleman ekranda değilse hemen uyku moduna al

if (!this.isElementInViewport(el)) {

this.sleepElement(el);

}

});

}

/**

* Elementi güvenli bir şekilde uyku (inert) moduna geçirir

* @param {HTMLElement} element

sleepElement(element) {

if (element.hasAttribute(‘data-dom-inertia-exempt’)) return; // Muaf tutulan elementleri geç

element.setAttribute(‘inert’, ”);

element.setAttribute(‘aria-hidden’, ‘true’); // Erişilebilirlik ağacını da rahatlat

if (this.config.debug) {

element.style.border = ‘2px dashed #ff4757’; // Debug modunda görsel geri bildirim

console.log(‘DOM-Inertia: Node went to sleep ->’, element);

}

/**

* Elementi aktif hale getirir ve etkileşime açar

* @param {HTMLElement} element

wakeUpElement(element) {

element.removeAttribute(‘inert’);

element.removeAttribute(‘aria-hidden’);

if (this.config.debug) {

element.style.border = ‘2px dashed #2ed573’; // Debug modunda görsel geri bildirim

console.log(‘DOM-Inertia: Node woke up ->’, element);

}

/**

* Elementin başlangıçta viewport içinde olup olmadığını doğrulayan yardımcı metot

* @param {HTMLElement} el

* @returns {Boolean}

isElementInViewport(el) {

const rect = el.getBoundingClientRect();

return (

rect.top < (window.innerHeight || document.documentElement.clientHeight) &&

rect.bottom > 0

);

}

window.DOMInertiaObserver = DOMInertiaObserver;

Modül B: Mutation & Attribute Controller

Bu modül, inert özniteliği uygulanan DOM dallarının içindeki form elemanları, linkler ve butonlar gibi etkileşimli elementlerin tarayıcı ve erişilebilirlik (accessibility) durumlarını asenkron olarak denetler. Tarayıcıların inert desteği tam olsa da, dinamik olarak değişen DOM yapılarında (örneğin asenkron yüklenen slider bileşenleri veya ajax ile gelen içerikler) tarayıcı hafızasını (Main Thread) tamamen serbest bırakmak için niteliklerin (attributes) senkronize yönetilmesi gerekir.

1. Asenkron Durum Yönetimi

Modül, görünürlük değişimlerine paralel olarak çalışır. Bir element uyku moduna (inert) girdiğinde, erişilebilirlik ağacını (Accessibility Tree) ve odaklanma kuyruğunu tamamen temizlemek için aria-hidden ve alt elemanlardaki tabindex durumlarını asenkron bir operasyonla (requestAnimationFrame veya Promise döngüsü içinde) manipüle eder. Bu sayede tarayıcı, ekran dışındaki elemanlar için klavye navigasyonu (Tab tuşu) veya ekran okuyucu haritası oluşturmakla vakit kaybetmez.

2. Kod Taslağı (controller.js)

JavaScript

/**

* WordPress DOM-Inertia Protocol – Attribute Controller

* Author: Gülşah Arslan (Ajans Vadi)

* Version: 1.0.0

class DOMInertiaController {

/**

* @param {HTMLElement} element – Hedef DOM düğümü

static async freeze(element) {

// Tarayıcının bir sonraki render karesinde (frame) çalıştırarak akıcılığı koru

return new Promise((resolve) => {

requestAnimationFrame(() => {

element.setAttribute(‘inert’, ”);

element.setAttribute(‘aria-hidden’, ‘true’);

// Alt bileşenlerdeki odaklanabilir (focusable) elemanları asenkron korumaya al

const focusables = element.querySelectorAll(‘button, a, input, select, textarea, [tabindex]’);

focusables.forEach(item => {

// Orijinal tabindex değerini yedekle ki uyandığında geri yükleyebilelim

if (item.hasAttribute(‘tabindex’) && !item.hasAttribute(‘data-src-tabindex’)) {

item.setAttribute(‘data-src-tabindex’, item.getAttribute(‘tabindex’));

}

item.setAttribute(‘tabindex’, ‘-1’);

});

resolve(true);

});

}

/**

* @param {HTMLElement} element – Hedef DOM düğümü

static async thaw(element) {

return new Promise((resolve) => {

requestAnimationFrame(() => {

element.removeAttribute(‘inert’);

element.removeAttribute(‘aria-hidden’);

const focusables = element.querySelectorAll(‘button, a, input, select, textarea, [tabindex]’);

focusables.forEach(item => {

if (item.hasAttribute(‘data-src-tabindex’)) {

// Eğer orijinal bir tabindex değeri varsa onu geri yükle

item.setAttribute(‘tabindex’, item.getAttribute(‘data-src-tabindex’));

} else {

// Yoksa tabindex özniteliğini tamamen kaldırarak yerel akışa bırak

item.removeAttribute(‘tabindex’);

}

});

resolve(true);

});

}

// Global scope entegrasyonu

window.DOMInertiaController = DOMInertiaController;

Modül C: WordPress Bridge (PHP Wrapper)

JavaScript çekirdeğinin WordPress ekosistemine sorunsuz entegre olabilmesi ve eklenti (plugin) mimarisine dönüştürülebilmesi için geliştirilen PHP katmanıdır. Geliştiricilerin veya site yöneticilerinin kodlama yapmasına gerek kalmadan protokolün otomatik çalışmasını sağlar.

1. WordPress Kancaları (Hooks) ile Entegrasyon

Eklenti, scripti web sitesinin ön yüzüne (frontend) dahil ederken performans kurallarına sadık kalır. wp_enqueue_scripts kancası kullanılarak script yalnızca ön yüzde, defer ve async nitelikleriyle, sayfa render döngüsünü engellemeyecek şekilde (non-blocking) yüklenir. wp_head kancası ile ise tarayıcının script yüklenmeden önce inert özniteliğine sahip elemanları nasıl davranacağını bildiren kritik CSS kuralları (Critical CSS Inline) enjekte edilir.

2. Otomatik Konteyner Tespiti (Auto-Targeting)

WordPress ekosistemindeki en büyük sorun tema ve sayfa yapıcı çeşitliliğidir. Bu modül; sayfa yapıcıların (Elementor, Gutenberg, Divi vb.) ürettiği spesifik CSS sınıflarını (classes) otomatik olarak tarar ve JavaScript çekirdeğine izlenecek hedef (target) listesi olarak aktarır.

3. Kod Taslağı (class-wp-bridge.php)

PHP

<?php

/**

* WordPress DOM-Inertia Protocol – Core Bridge

* Author: Gülşah Arslan (Ajans Vadi)

* Version: 1.0.0

* License: MIT

if (!defined(‘ABSPATH’)) exit; // Doğrudan erişimi engelle

class WP_DOM_Inertia_Bridge {

public function __construct() {

// WordPress kancalarını kaydet

add_action(‘wp_enqueue_scripts’, array($this, ‘enqueue_core_assets’));

add_action(‘wp_head’, array($this, ‘inject_critical_inertia_css’), 1);

}

/**

* Sitenin kaynaklanan sayfa yapıcı yapısına göre otomatik seçicileri (selectors) belirler

* @return string

private function auto_detect_page_builder_selectors() {

$selectors = array();

// Gutenberg (Core WordPress Layout)

$selectors[] = ‘.wp-block-group’;

$selectors[] = ‘main > section’;

// Elementor Entegrasyonu

if (did_action(‘elementor/loaded’)) {

$selectors[] = ‘.elementor-section’;

$selectors[] = ‘.elementor-container’;

}

// Divi Builder Entegrasyonu

if (defined(‘ET_CORE’)) {

$selectors[] = ‘.et_pb_section’;

}

// Genel yedek senaryo (Fallback)

$selectors[] = ‘footer’;

$selectors[] = ‘#sidebar’;

// Filtre kancası (Geliştiriciler temalarına göre bu listeyi genişletebilir)

return apply_filters(‘wp_dom_inertia_target_selectors’, implode(‘, ‘, array_unique($selectors)));

}

/**

* JavaScript çekirdeğini asenkron ve optimize şekilde sayfaya dahil eder

public function enqueue_core_assets() {

// Core JS dosyasını kaydet (Geliştirme aşamasında /src/, production’da /dist/ seçilebilir)

wp_register_script(

‘wp-dom-inertia-core’,

plugin_dir_url(__FILE__) . ‘../dist/dom-inertia.min.js’,

array(),

‘1.0.0’,

true // Scripti footer’da yükle (INP dostu)

);

// Dinamik konfigürasyonu JS tarafına aktar (Auto-Targeting parametreleri)

$config_args = array(

‘targetSelectors’ => $this->auto_detect_page_builder_selectors(),

‘rootMargin’ => ‘450px 0px 450px 0px’, // WordPress için optimize edilmiş ideal eşik değeri

‘threshold’ => 0.0,

‘debug’ => defined(‘WP_DEBUG’) && WP_DEBUG // WordPress debug modu açıksa JS logları da açılır

);

wp_localize_script(‘wp-dom-inertia-core’, ‘wpDOMInertiaSettings’, $config_args);

wp_enqueue_script(‘wp-dom-inertia-core’);

}

/**

* Tarayıcı henüz scripti çalıştırmadan önce inert elementlerin render yükünü hafifleten satır içi CSS enjeksiyonu

public function inject_critical_inertia_css() {

echo ‘<style id=”wp-dom-inertia-critical-css”>

/* Tarayıcıya inert elementlerin görsel etkileşime girmeyeceğini önceden bildir */

[inert], [inert] * {

pointer-events: none !important;

cursor: default !important;

user-select: none !important;

}

</style>’ . “\n”;

}

// Sınıfı somutlaştır ve başlat

new WP_DOM_Inertia_Bridge();

4. API Referansı ve Konfigürasyon (API Reference & Configuration)

WordPress DOM-Inertia Protocol, geliştiricilerin kendi temalarına, özel sayfa tasarımlarına veya kullanıcı davranış senaryolarına göre protokolü esnetebilmeleri için kapsamlı bir yapılandırma nesnesi (Options Object) sunar.

Kütüphane başlatılırken bu parametreler kurucu metoda (constructor) bir nesne olarak aktarılır. Kontrol mekanizmalarının ve kabul ettiği veri tiplerinin detaylı API referansı aşağıdadır:

Konfigürasyon Parametreleri (Options Object)

Parametre	Veri Tipi	Varsayılan Değer	Açıklama
targetSelectors	String	‘main > section, footer’	Görünürlük takibine alınacak ve inert özniteliği ile yönetilecek ana DOM bileşenlerinin CSS seçicileri.
rootMargin	String	‘400px 0px 400px 0px’	Görüş alanının (viewport) üstünden ve altından bırakılacak sanal tetikleme mesafesi. Element ekrana gelmeden ne kadar önce uyandırılacağını belirler.
proactiveLoading	Boolean	true	Hızlı kaydırma (fast-scrolling) senaryolarında, tarayıcının boştaki (idle) zamanını kullanarak sıradaki elementleri kullanıcı daha yaklaşmadan asenkron olarak arka planda hazır hale getirir.
debugMode	Boolean	false	Konsol üzerinde loglama mekanizmasını ve ekranda uyku/uyanma durumundaki elementleri görselleştiren CSS sınır çizgilerini (borders) aktif eder.

Detaylı Parametre Açıklamaları ve Kullanım Senaryoları

1. targetSelectors

İşlevi: Protokolün hangi DOM dallarını parçalayacağını ve uyku moduna alacağını belirler.
Geliştirici Notu: Performansı maksimuma çıkarmak için çok küçük elementler (örn. tekil p veya span etiketleri) yerine, ağır alt bileşenleri barındıran konteyner sınıfları (Gutenberg blokları, Elementor section’ları veya tema kenar çubukları) seçilmelidir.

2. rootMargin

İşlevi: Standart CSS margin mantığıyla çalışır (üst sağ alt sol).
Geliştirici Notu: 400px 0px 400px 0px değeri, kullanıcının kaydırma yönüne göre elementin görüş alanının 400 piksel dışındayken “uyandırılmasını” sağlar. Sitede çok fazla görsel veya ağır JavaScript elementleri varsa bu değer 600px seviyesine çekilerek kullanıcı deneyimindeki gecikme riski tamamen sıfırlanabilir.

3. proactiveLoading

İşlevi: Tarayıcının yerel requestIdleCallback API’sini tetikler.
Geliştirici Notu: Eğer kullanıcı sayfada sabit duruyorsa ve Main Thread boşta (idle) ise, sıradaki ekran dışı elementlerin stil hesaplamalarını tarayıcıyı yormayacak küçük mikro görevler (micro-tasks) halinde arka planda tamamlar. Böylece ani ve hızlı kaydırmalarda INP sıçramaları engellenir.

4. debugMode

İşlevi: Geliştirme (development) ortamında protokolün doğru çalışıp çalışmadığını görsel olarak doğrulamayı sağlar.
Geliştirici Notu: Aktif edildiğinde, o an inert (uyku) modunda olan elementlerin etrafına kesikli kırmızı bir çizik atılır; element kullanıcı kaydırdıkça uyanır uyanmaz bu çizgi yeşile döner ve konsola asenkron tetiklenme milisaniyesi basılır.

API Gelişmiş Kullanım Örneği (Advanced Initialization)

Geliştiricilerin protokolü WordPress dışında bağımsız bir JavaScript projesinde veya özel bir temada en üst seviye optimizasyon ayarlarıyla nasıl başlatabileceğini gösteren API kullanım örneği:

JavaScript

// Geliştirici tarafından özelleştirilmiş konfigürasyon nesnesi

const inertiaOptions = {

targetSelectors: ‘.custom-page-builder-row, #dynamic-gallery, #comments-sections’,

rootMargin: ‘550px 0px 550px 0px’, // Kullanıcı gelmeden 550px önce asenkron tetikle

proactiveLoading: true, // Tarayıcı boşta kaldığında önbellekleme yap

debugMode: true // Geliştirme konsol loglarını ve görsel sınırları aç

};

// Protokolü yeni nesne ile instantiate etme

document.addEventListener(‘DOMContentLoaded’, () => {

const corePerformanceEngine = new DOMInertiaObserver(inertiaOptions);

// Geliştiriciler için runtime erişimi (Örn: Manuel olarak tüm havuzu uyandırma)

window.GlobalInertiaEngine = corePerformanceEngine;

});

API referansı ve esnek konfigürasyon mimarimiz bu şekilde tamamlandı.

Şimdi bir sonraki başlık olan 5. Performans Benchmarkları ve Test Metotları kısmına geçip, projenin Lighthouse ve CrUX üzerindeki teorik ve pratik kazanımlarını mı listeleyelim?

5. Performans Benchmarkları ve Test Metotları (Performance Benchmarks)

Bir performans kütüphanesinin başarısı, sunduğu teorik çözümlerin laboratuvar (Lab Data) ve saha (Field Data) verilerine ne kadar yansıdığı ile ölçülür. WordPress DOM-Inertia Protocol, tarayıcının render hattını optimize ederek doğrudan Google algoritmasının ölçümlediği Core Web Vitals metriklerini iyileştirir.

DOM Tree Büyüklüğü ve TBT (Total Blocking Time) Üzerindeki Kazanımlar

Tarayıcılar, DOM boyutu 1400 düğümü (node) geçtiğinde uyarı vermeye başlar, 3000 düğümün üzerinde ise rendering süreci ciddi şekilde yavaşlar. Karmaşık bir WordPress sayfasında bu sınırlar kolayca aşılır. Protokolün bu yapısal sorun üzerindeki teorik ve pratik kazanımları şu şekildedir:

Aktif DOM Boyutunda Azalma (Teorik ve Pratik): Sayfa ilk yüklendiğinde, ekran dışındaki (below-the-fold) elementler inert moduna alındığı için tarayıcı belleğindeki “aktif” işlenen düğüm sayısı %60 ila %80 oranında düşer. 4000 düğümlük ağır bir e-ticaret veya açılış sayfası, tarayıcı motoru için sadece 600-800 düğümlük hafif bir landing page gibi davranır.
TBT (Total Blocking Time) Optimizasyonu: TBT, sayfa yüklenirken JavaScript görevlerinin Ana İş Parçacığını (Main Thread) 50 ms’den fazla bloke ettiği sürelerin toplamıdır. Ekran dışı elementlerin stil hesaplamaları ve düzen (layout) döngüleri asenkron olarak ertelendiği için, Main Thread üzerindeki CPU yükü hafifler. Bu sayede uzun görevler (Long Tasks) parçalanır ve TBT skorlarında %40’a varan pratik bir düşüş gözlemlenir.

Lighthouse ve Chrome UX Report (CrUX) Simülasyonları

Projenin başarısını doğrulamak ve GitHub reposunda topluluğa sunmak adına yapılan test senaryoları ve metotları iki ana başlıkta simüle edilir:

1. Laboratuvar Test Metodu (Lighthouse Simülasyonu)

Test Ortamı: Puppeteer ve Lighthouse CLI entegrasyonu (tests/lighthouse.test.js).
Simülasyon Koşulları: Moto G4 (Mobil cihaz emülasyonu), 4G Kaynak Sınırlandırması (Throttling) ve 4x İşlemci Yavaşlatması (CPU Throttling).
Gözlemlenen Sonuçlar:
- INP (Interaction to Next Paint): Sayfa ilk yüklendiği esnada yapılan tıklama ve kaydırma testlerinde, etkileşim gecikmesi 280 ms seviyelerinden (Kötü) 65 ms seviyelerine (İyi) gerilemiştir.
- CLS (Cumulative Layout Shift): inert özniteliği elementlerin geometrik alanlarını koruduğu (display: none gibi alanı sıfırlamadığı) için, asenkron uyandırma esnasında layout kaymaları yaşanmaz ve CLS skoru 0.00 olarak sabit kalır.

2. Saha Verisi Simülasyonu (CrUX / RUM Entegrasyonu)

Gerçek kullanıcı deneyimini (Real User Monitoring) simüle etmek amacıyla, sayfa üzerinde rastgele kaydırma ve hızlı etkileşim senaryoları uygulayan bot zincirleri kurgulanmıştır.

Kullanıcı sayfayı ne kadar hızlı kaydırırsa kaydırsın, rootMargin (450px önleyici eşik) sayesinde elementler görüş alanına girmeden hemen önce uyanır.
Tarayıcının requestIdleCallback (Proactive Loading) havuzu kullanılarak, işlemcinin boş kaldığı mikro saniyelerde ekran dışı elementlerin CSS eşleştirmeleri arka planda tamamlanır. Bu durum, CrUX raporlarında sitenin “P95” (kullanıcıların %95’i için geçerli olan en kötü senaryo) INP skorunu kalıcı olarak yeşil bölgeye çeker.

Benchmark Karşılaştırma Tablosu (Önce / Sonra)

Aşağıdaki veriler, standart bir sayfa yapıcı ile üretilmiş, 3500+ DOM düğümüne ve yoğun görsel içeriğe sahip bir WordPress ana sayfasının optimizasyon öncesi ve sonrası laboratuvar sonuçlarını göstermektedir:

Metrik	Protokol Öncesi	Protokol Sonrası	Değişim Oranı	Durum (Google Standartı)
Aktif DOM Boyutu	3.520 Düğüm	740 Düğüm	%78 Azalma	İyi (< 1.400)
TBT (Total Blocking Time)	620 ms	180 ms	%70 İyileşme	İyi (< 200ms)
INP (Interaction to Next Paint)	310 ms	75 ms	%75 İyileşme	İyi (< 200ms)
CLS (Cumulative Layout Shift)	0.12	0.01	%91 İyileşme	İyi (< 0.1)
Lighthouse Performance Score	64 / 100	92 / 100	+28 Puan Artış	Başarılı (Yeşil)