Performance Observer API: Çalışma Zamanı Performans Metriklerinin ve Darboğaz Analizinin Kilidini Açın

Günümüzün zorlu dijital dünyasında, kusursuz ve duyarlı bir kullanıcı deneyimi sunmak her şeyden önemlidir. Yavaş yükleme süreleri ve takılan etkileşimler, hızla kullanıcı hayal kırıklığına ve siteyi terk etmeye yol açabilir. Performance Observer API, çalışma zamanı performansını izlemek ve analiz etmek için güçlü bir mekanizma sunarak geliştiricilerin darboğazları belirlemesine ve uygulamalarını en yüksek performans için optimize etmesine olanak tanır. Bu kapsamlı kılavuz, Performance Observer API'sinin tüm ayrıntılarını keşfedecek, tam potansiyelini ortaya çıkarmanıza yardımcı olacak pratik örnekler ve eyleme geçirilebilir içgörüler sunacaktır.

Performance Observer API Nedir?

Performance Observer API, tarayıcıda performans metrikleri oluştukça bunlara abone olmanızı sağlayan bir JavaScript API'sidir. Genellikle sonradan analiz gerektiren geleneksel performans izleme araçlarının aksine, Performance Observer API performans verilerine gerçek zamanlı erişim sağlayarak performans sorunlarına ortaya çıktıkları anda müdahale etmenize olanak tanır. Bu gerçek zamanlı geri bildirim döngüsü, kullanıcı deneyimini etkilemeden önce performans darboğazlarını belirlemek ve gidermek için paha biçilmezdir.

Bunu, uygulamanızın performansını sürekli olarak izleyen bir dinleme cihazı gibi düşünebilirsiniz. Belirli bir performans olayı meydana geldiğinde (örneğin, uzun bir görev, bir kaynağın yüklenmesi, bir düzen kayması), gözlemci bilgilendirilir ve siz de uygulamanın performansı hakkında bilgi edinmek için olay verilerini işleyebilirsiniz.

Temel Kavramlar ve Terminoloji

Pratik uygulamaya geçmeden önce, bazı temel kavramları ve terminolojiyi tanımlayalım:

• PerformanceEntry: Tek bir performans metriğini veya olayını temsil eden temel bir arayüz. name, entryType, startTime ve duration gibi ortak özellikleri içerir.
• PerformanceObserver: Performans girdilerine abone olmaktan ve bunlar hakkında bildirim almaktan sorumlu temel arayüz.
• entryTypes: Gözlemcinin izlemesi gereken performans girdilerinin türlerini belirten bir dize dizisi. Yaygın girdi türleri arasında 'longtask', 'resource', 'layout-shift', 'paint' ve 'navigation' bulunur.
• buffered: Gözlemcinin, gözlemci oluşturulmadan önce meydana gelen performans girdileri için bildirim alıp almayacağını belirten bir boolean bayrağı.
• observe(): Performans girdilerini gözlemlemeye başlamak için kullanılan yöntem. entryTypes ve buffered bayrağını belirten bir seçenekler nesnesi alır.
• disconnect(): Performans girdilerini gözlemlemeyi durdurmak için kullanılan yöntem.

Bir Performance Observer Kurulumu

Bir Performance Observer oluşturmak oldukça basittir. İşte uzun görevleri nasıl gözlemleyeceğinizi gösteren temel bir örnek:

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Long Task:', entry);
    // Process the long task entry
  });
});

observer.observe({ entryTypes: ['longtask'] });

Bu örnekte, yeni bir PerformanceObserver örneği oluşturuyoruz. Kurucu, belirtilen türde yeni bir performans girdisi gözlemlendiğinde çalıştırılacak bir geri arama işlevi alır. list.getEntries() yöntemi, gözlemlenen girdi türleriyle eşleşen bir PerformanceEntry nesneleri dizisi döndürür. Son olarak, uzun görevleri gözlemlemeye başlamak için observe() yöntemini çağırırız.

Kodun analizi:

• new PerformanceObserver((list) => { ... }): Geri arama işleviyle yeni bir gözlemci örneği oluşturur. Geri arama işlevi bir `list` argümanı alır.
• list.getEntries().forEach((entry) => { ... }): `list` içindeki tüm PerformanceEntry nesnelerini alır ve bunlar üzerinde döngü kurar.
• console.log('Long Task:', entry);: Uzun görev girdisini konsola kaydeder. Bunu kendi işleme mantığınızla değiştireceksiniz.
• observer.observe({ entryTypes: ['longtask'] });: 'longtask' türündeki performans girdilerini gözlemlemeye başlar.

Yaygın Performans Girdi Türleri ve Kullanımları

Performance Observer API, her biri uygulama performansına farklı açılardan ışık tutan çeşitli girdi türlerini destekler. İşte en sık kullanılan girdi türlerinden bazılarının ve uygulamalarının bir dökümü:

1. Uzun Görevler

Girdi Türü: 'longtask'

Uzun görevler, ana iş parçacığını 50 milisaniyeden fazla engelleyen görevlerdir. Bu görevler, kullanıcı deneyimini olumsuz etkileyerek gözle görülür gecikmelere ve takılmalara neden olabilir. Uzun görevleri izlemek, verimsiz kod veya aşırı işlemden kaynaklanan performans darboğazlarını belirlemenizi ve gidermenizi sağlar.

Örnek Kullanım Alanları:

• Hesaplama açısından maliyetli JavaScript işlevlerini belirleme.
• Uzun gecikmelere neden olan üçüncü taraf betiklerini optimize etme.
• Büyük görevleri daha küçük, eşzamansız birimlere ayırma.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Long Task:', entry.duration);
    // Analyze the duration of the long task to identify potential bottlenecks.
  });
});

observer.observe({ entryTypes: ['longtask'] });

2. Kaynak Zamanlaması

Girdi Türü: 'resource'

Kaynak zamanlama API'si, resimler, betikler ve stil sayfaları gibi bireysel kaynakların yüklenmesi hakkında ayrıntılı bilgi sağlar. Kaynak zamanlamasını izleyerek, yavaş yüklenen kaynakları belirleyebilir ve sayfa yükleme performansını iyileştirmek için bunların sunumunu optimize edebilirsiniz.

Örnek Kullanım Alanları:

• Sayfa yüklemesini yavaşlatan büyük resimleri belirleme.
• Resim sıkıştırma ve formatlarını optimize etme.
• Kaynak yükleme sürelerini azaltmak için tarayıcı önbelleğinden yararlanma.
• Üçüncü taraf betiklerinin sayfa yükleme performansı üzerindeki etkisini analiz etme.
• DNS çözümlemesi, TCP bağlantısı ve TLS anlaşması darboğazlarını belirleme.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Resource:', entry.name, entry.duration);
    // Analyze the resource loading time and optimize resource delivery.
  });
});

observer.observe({ entryTypes: ['resource'] });

3. Düzen Kaymaları

Girdi Türü: 'layout-shift'

Düzen kaymaları, bir web sayfasındaki öğelerin beklenmedik bir şekilde konumlarını değiştirmesiyle meydana gelir ve sarsıcı ve rahatsız edici bir kullanıcı deneyimine neden olur. Bu kaymalar genellikle boyutları belirtilmemiş resimler, dinamik olarak eklenen içerik veya geç yüklenen yazı tiplerinden kaynaklanır. Düzen kaymalarını izlemek, bu beklenmedik değişikliklerin temel nedenlerini belirlemenize ve gidermenize olanak tanıyarak uygulamanızın görsel kararlılığını artırır.

Örnek Kullanım Alanları:

• Düzen kaymalarına neden olan, boyutları belirtilmemiş resimleri belirleme.
• Düzen kaymalarını en aza indirmek için dinamik olarak eklenen içeriğin yüklenmesini optimize etme.
• Yazı tipi yüklemesinin düzen kaymalarına neden olmasını önlemek için yazı tipi görüntüleme stratejilerini kullanma.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Layout Shift:', entry.value);
    // Analyze the layout shift score and identify the elements causing the shifts.
  });
});

observer.observe({ entryTypes: ['layout-shift'] });

4. Boyama Zamanlaması

Girdi Türü: 'paint'

Boyama zamanlama API'si, kullanıcının algıladığı yükleme performansının önemli göstergeleri olan ilk boyama (FP) ve ilk içerikli boyama (FCP) için metrikler sağlar. Boyama zamanlamasını izlemek, daha hızlı ve görsel olarak daha çekici bir deneyim sunmak için uygulamanızın oluşturulmasını optimize etmenize olanak tanır.

Örnek Kullanım Alanları:

• İlk boyamaya kadar geçen süreyi azaltmak için kritik oluşturma yolunu optimize etme.
• İlk içerikli boyamaya kadar geçen süreyi iyileştirmek için kritik olmayan kaynakları erteleme.
• İlk JavaScript paket boyutunu azaltmak için kod bölme ve tembel yükleme kullanma.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Paint:', entry.name, entry.startTime);
    // Analyze the paint timing and optimize the rendering pipeline.
  });
});

observer.observe({ entryTypes: ['paint'] });

5. Gezinme Zamanlaması

Girdi Türü: 'navigation'

Gezinme zamanlama API'si, ilk istekten sayfa yüklemesinin tamamlanmasına kadar sayfa gezinme sürecinin farklı aşamaları hakkında ayrıntılı bilgi sağlar. Gezinme zamanlamasını izlemek, gezinme sürecindeki darboğazları belirlemenize ve genel sayfa yükleme deneyimini optimize etmenize olanak tanır.

Örnek Kullanım Alanları:

• DNS çözümleme süresini, TCP bağlantı süresini ve TLS anlaşma süresini analiz etme.
• Sunucu tarafı işleme darboğazlarını belirleme.
• İlk bayta kadar geçen süreyi (TTFB) azaltmak için HTML içeriğinin sunumunu optimize etme.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('Navigation:', entry.duration);
    // Analyze the navigation timing and optimize the page load process.
  });
});

observer.observe({ entryTypes: ['navigation'] });

Gerçek Dünya Örnekleri ve Kullanım Alanları

Performance Observer API, uygulama performansını iyileştirmek için çok çeşitli senaryolarda uygulanabilir. İşte bazı gerçek dünya örnekleri ve kullanım alanları:

1. E-ticaret Web Sitesi: Ürün Resmi Yüklemesini Optimize Etme

Bir e-ticaret web sitesi, ürün resimlerinin yükleme sürelerini izlemek için kaynak zamanlama API'sini kullanabilir. Sayfa yüklemesini yavaşlatan büyük resimleri belirleyerek, web sitesi alışveriş deneyimini iyileştirmek için resim sıkıştırmasını optimize edebilir, duyarlı resimler kullanabilir ve tarayıcı önbelleğinden yararlanabilir. Örneğin, Japonya'daki bir çevrimiçi perakendeci, üst düzey cihazlarda mükemmel şekilde oluşturulan yüksek çözünürlüklü resimlerin, kırsal alanlardaki daha yavaş bağlantılara sahip kullanıcılar için kabul edilemez yükleme sürelerine neden olduğunu fark edebilir. Kaynak Zamanlama API'sini kullanmak, bu sorunu belirlemelerine ve ağ koşullarına göre uyarlanabilir resim sunumu uygulamalarına yardımcı olur.

2. Haber Web Sitesi: Reklam Yüklemesinden Kaynaklanan Düzen Kaymalarını Azaltma

Bir haber web sitesi, dinamik olarak eklenen reklamlardan kaynaklanan düzen kaymalarını izlemek için düzen kayması API'sini kullanabilir. Reklamlar için yer ayırarak ve reklam içeriğinin yüklenmesini optimize ederek, web sitesi düzen kaymalarını en aza indirebilir ve daha istikrarlı ve kullanıcı dostu bir okuma deneyimi sağlayabilir. Hindistan'da, çok çeşitli cihazlarda geniş bir kitleye hizmet veren bir haber kuruluşu, çeşitli kaynaklardan gelen reklamlar farklı hızlarda yüklendiğinde bile tutarlı bir okuma deneyimi sağlamak için bu API'yi kullanabilir. Ani içerik atlamalarından kaçınmak, kullanıcı etkileşimini artırır ve hemen çıkma oranlarını düşürür.

3. Sosyal Medya Platformu: JavaScript Çerçevelerinden Kaynaklanan Uzun Görevleri Analiz Etme

Bir sosyal medya platformu, gecikmelere ve takılmalara neden olan hesaplama açısından maliyetli JavaScript işlevlerini belirlemek için uzun görev API'sini kullanabilir. Bu işlevleri optimize ederek veya daha küçük, eşzamansız birimlere ayırarak, platform kullanıcı arayüzünün yanıt verme yeteneğini geliştirebilir ve daha sorunsuz bir gezinme deneyimi sağlayabilir. Örneğin, merkezi Amerika Birleşik Devletleri'nde bulunan bir sosyal medya şirketi, belirli bir JavaScript çerçevesine büyük ölçüde dayanan bazı özelliklerin, Güneydoğu Asya'daki kullanıcılar tarafından kullanılan eski mobil cihazlarda uzun görevlere neden olduğunu keşfedebilir. Bu darboğazları belirleyerek, optimizasyon çabalarına öncelik verebilir veya alternatif çerçeve uygulamalarını keşfedebilirler.

4. Web Tabanlı Oyun: Kare Oluşturma Sürelerini İzleme

Web tabanlı bir oyun, kare oluşturma sürelerini izlemek ve oyunun akıcılığını etkileyen performans darboğazlarını belirlemek için boyama zamanlama API'sini kullanabilir. Oluşturma hattını optimize ederek ve her karede gerçekleştirilen iş miktarını azaltarak, oyun daha akıcı ve ilgi çekici bir oyun deneyimi sağlayabilir. Avrupa'daki küresel bir kitleyi hedefleyen bir oyun geliştiricisi, oyunun çok çeşitli donanım yapılandırmalarında sorunsuz çalışmasını sağlamak için bu API'yi kullanabilir. Farklı coğrafi bölgelerdeki oluşturma performansındaki farklılıkları belirlemek, oyunun varlıklarını ve kodunu her yerde en iyi performans için optimize etmelerine olanak tanır.

5. Çevrimiçi Öğrenme Platformu: Gezinmeyi ve Sayfa Geçişlerini İyileştirme

Bir çevrimiçi öğrenme platformu, sayfa gezinme sürecinin farklı aşamalarını analiz etmek ve genel sayfa yükleme deneyimini etkileyen darboğazları belirlemek için gezinme zamanlama API'sini kullanabilir. Sunucu tarafı işlemeyi optimize ederek, HTML içeriğinin sunumunu iyileştirerek ve tarayıcı önbelleğinden yararlanarak, platform daha hızlı ve daha sorunsuz bir öğrenme deneyimi sağlayabilir. Örneğin, Kanada merkezli ve dünya çapında öğrencilere hizmet veren bir eğitim platformu, sınırlı internet altyapısına sahip ülkelerdeki öğrencilerin dersler arasında gezinirken kabul edilebilir yükleme süreleri yaşamasını sağlamak için gezinme zamanlamalarını analiz edebilir. Belirli bölgelerdeki yavaş sunucu yanıtlarını belirlemek, içerik dağıtım ağı (CDN) yapılandırmalarını optimize etmelerine olanak tanır.

Performance Observer API'sini Kullanmak İçin En İyi Uygulamalar

Performance Observer API'sinden etkili bir şekilde yararlanmak için aşağıdaki en iyi uygulamaları göz önünde bulundurun:

• Yalnızca analizinizle ilgili girdi türlerini gözlemleyin. Çok fazla girdi türünü gözlemlemek, performans yüküne yol açabilir ve en önemli performans sorunlarını belirlemeyi zorlaştırabilir.
• Performans girdilerini verimli bir şekilde işleyin. Gözlemci geri arama işlevinde hesaplama açısından maliyetli işlemler yapmaktan kaçının, çünkü bu performansı olumsuz etkileyebilir. İşlemeyi ayrı bir iş parçacığına yüklemek için bir web çalışanı kullanmayı düşünün.
• Toplanan veri miktarını azaltmak için örnekleme teknikleri kullanın. Bazı durumlarda, toplanan veri miktarını azaltmak ve performans yükünü en aza indirmek için performans girdilerini örneklemek gerekebilir.
• Sağlam hata yönetimi uygulayın. Performance Observer API nispeten kararlıdır, ancak beklenmedik hataların uygulamanızı kesintiye uğratmasını önlemek için sağlam bir hata yönetimi uygulamak önemlidir.
• Performans verilerini toplamanın gizlilik üzerindeki etkilerini göz önünde bulundurun. Topladığınız performans verileri hakkında kullanıcılara karşı şeffaf olun ve geçerli tüm gizlilik düzenlemelerine uyduğunuzdan emin olun. Bu, özellikle Avrupa Birliği'nin GDPR'si gibi sıkı veri koruma yasalarına sahip bölgelerde önemlidir.
• buffered seçeneğini akıllıca kullanın. İlk performans metriklerini yakalamak için yararlı olsa da, buffered: true kullanmanın, özellikle çok sayıda olayı gözlemlerken bellek kullanımını potansiyel olarak artırabileceğinin farkında olun. Bunu akıllıca kullanın ve özellikle düşük güçlü cihazlarda performans üzerindeki potansiyel etkisini göz önünde bulundurun.
• Veri işlemenizi geciktirin veya kısıtlayın (debounce or throttle). Analiz için bir uzak sunucuya performans verileri gönderiyorsanız, özellikle yüksek aktivite dönemlerinde ağı bunaltmaktan kaçınmak için veri iletimini geciktirmeyi (debouncing) veya kısıtlamayı (throttling) düşünün.

İleri Düzey Teknikler ve Dikkat Edilmesi Gerekenler

1. Performans Veri İşleme için Web Çalışanlarını Kullanma

Daha önce de belirtildiği gibi, karmaşık hesaplamaları doğrudan Performance Observer geri arama işlevi içinde gerçekleştirmek, ana iş parçacığının yanıt verme yeteneğini etkileyebilir. En iyi uygulama, bu işlemeyi bir Web Worker'a yüklemektir. Web Çalışanları ayrı bir iş parçacığında çalışır, bu da ana iş parçacığını engellemelerini önler ve sorunsuz bir kullanıcı deneyimi sağlar.

İşte basitleştirilmiş bir örnek:

1. Bir Web Worker betiği oluşturun (ör. `performance-worker.js`):

// performance-worker.js
self.addEventListener('message', (event) => {
  const performanceData = event.data;
  // Karmaşık analizinizi burada yapın
  const processedData = processPerformanceData(performanceData);  // Gerçek işlevinizle değiştirin
  self.postMessage(processedData);
});

function processPerformanceData(data) {
  // Karmaşık işleme mantığınız burada
  return data; // İşlenmiş verilerle değiştirin
}

2. Ana betiğinizde:

const worker = new Worker('performance-worker.js');

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  // Girdileri işlenmek üzere çalışana gönderin
  worker.postMessage(entries);
});

worker.addEventListener('message', (event) => {
  const processedData = event.data;
  // Çalışandan gelen işlenmiş verileri işleyin
  console.log('Processed Data from Worker:', processedData);
});

observer.observe({ entryTypes: ['longtask'] });

Bu yaklaşım, ana iş parçacığının yanıt verme yeteneğini etkilemeden karmaşık analizler yapmanızı sağlayarak daha sorunsuz bir kullanıcı deneyimi sunar.

2. Performans Verilerini Kullanıcı Eylemleriyle İlişkilendirme

Daha derinlemesine bilgi edinmek için performans verilerini belirli kullanıcı eylemleriyle ilişkilendirin. Örneğin, hangi düğme tıklamalarının veya etkileşimlerinin uzun görevleri veya düzen kaymalarını tetiklediğini izleyin. Bu, performans darboğazlarından sorumlu olan tam kodu veya bileşenleri belirlemenize yardımcı olacaktır. Performans girdilerini kullanıcı etkileşimleriyle bağlamak için özel olaylar ve zaman damgaları kullanabilirsiniz.

// Örnek: Bir düğme tıklamasını izleme ve bunu uzun görevlerle ilişkilendirme

document.getElementById('myButton').addEventListener('click', () => {
  const clickTimestamp = Date.now();

  // Düğme tıklama mantığınız burada
  performSomeAction();

  // Tıklamadan sonra uzun görevleri gözlemleyin
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.startTime >= clickTimestamp) {
        console.log('Long Task after button click:', entry);
        // Uzun görev verilerini, clickTimestamp ile birlikte analiz hizmetinize gönderin
      }
    });
  });

  observer.observe({ entryTypes: ['longtask'] });
});

Performans verilerini kullanıcı eylemleriyle ilişkilendirerek, kullanıcı deneyimini çok daha ayrıntılı bir şekilde anlayabilir ve optimizasyon çabalarını buna göre önceliklendirebilirsiniz.

3. Performans İşaretlerini ve Ölçümlerini Kullanma

Performans API'si ayrıca, uygulamanız içinde özel performans metrikleri tanımlamanıza olanak tanıyan performance.mark() ve performance.measure() yöntemlerini de sunar. İşaretler, kodunuzun belirli noktalarına ekleyebileceğiniz zaman damgalarıdır, ölçümler ise iki işaret arasındaki süreyi hesaplar. Bu, özellikle özel bileşenlerin veya belirli kod bloklarının performansını ölçmek için kullanışlıdır.

// Örnek: Özel bir bileşenin performansını ölçme

performance.mark('componentStart');

// Bileşen oluşturma mantığınız burada
renderMyComponent();

performance.mark('componentEnd');

performance.measure('componentRenderTime', 'componentStart', 'componentEnd');

const measure = performance.getEntriesByName('componentRenderTime')[0];
console.log('Component Render Time:', measure.duration);

Daha sonra bu özel ölçümleri, 'measure' girdi türünü gözlemleyerek Performance Observer API'sini kullanarak gözlemleyebilirsiniz.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === 'measure') {
      console.log('Custom Measure:', entry.name, entry.duration);
    }
  });
});

observer.observe({ entryTypes: ['measure'] });

Performance Observer API'sine Alternatifler

Performance Observer API güçlü bir araç olsa da, performans izleme için tek seçenek değildir. İşte bazı alternatifler:

• Google Lighthouse: Ayrıntılı performans raporları ve iyileştirme önerileri sunan kapsamlı bir denetim aracı.
• WebPageTest: Çeşitli konumlardan ve tarayıcılardan web sitesi performansını test etmek için güçlü bir çevrimiçi araç.
• Tarayıcı Geliştirici Araçları: Chrome Geliştirici Araçları, Firefox Geliştirici Araçları ve diğer tarayıcı geliştirici araçları, profil oluşturma, zaman çizelgesi kaydı ve ağ analizi dahil olmak üzere zengin performans analizi özellikleri sunar.
• Gerçek Kullanıcı İzleme (RUM) Araçları: RUM araçları, gerçek kullanıcılardan performans verileri toplayarak gerçek kullanıcı deneyimi hakkında değerli bilgiler sağlar. Örnekler arasında New Relic, Datadog ve Sentry bulunur.
• Sentetik İzleme Araçları: Sentetik izleme araçları, gerçek kullanıcıları etkilemeden önce performans sorunlarını proaktif olarak belirlemek için kullanıcı etkileşimlerini simüle eder.

Sonuç

Performance Observer API, yüksek performanslı bir kullanıcı deneyimi sunma konusunda ciddi olan her web geliştiricisi için vazgeçilmez bir araçtır. API, performans metriklerine gerçek zamanlı erişim sağlayarak, performans darboğazlarını proaktif olarak belirlemenize ve gidermenize, uygulamanızı en yüksek performans için optimize etmenize ve kullanıcılarınızın sorunsuz ve ilgi çekici bir deneyim yaşamasını sağlamanıza olanak tanır. Performance Observer API'sini diğer performans izleme araçları ve teknikleriyle birleştirerek, uygulamanızın performansına bütünsel bir bakış açısı kazanabilir ve kullanıcı deneyimini sürekli olarak iyileştirebilirsiniz.

Eğrinin önünde kalmak ve sınıfının en iyisi bir kullanıcı deneyimi sunmak için uygulamanızın performansını sürekli olarak izlemeyi, analiz etmeyi ve optimize etmeyi unutmayın. Performance Observer API, uygulamanızın performansının kontrolünü elinize almanızı ve günümüzün dijital dünyasının sürekli artan taleplerini karşılamasını sağlamanızı sağlar.

Bu kapsamlı kılavuz, Performance Observer API'sini anlamanız ve kullanmanız için size sağlam bir temel sağlamıştır. Şimdi bilginizi pratiğe dökme ve bu güçlü aracın tüm potansiyelini ortaya çıkarma zamanı!