Performance Observer API: Çalışma Zamanı Performans Metrikleri ve Darboğaz Analizi

Günümüzün rekabetçi dijital ortamında, web sitesi ve web uygulaması performansı, kullanıcı etkileşimi ve iş başarısı için kritik öneme sahiptir. Yavaş yükleme süreleri ve yanıt vermeyen arayüzler, hayal kırıklığına uğramış kullanıcılara, terk edilmiş işlemlere ve nihayetinde gelir kaybına yol açabilir. Performance Observer API, geliştiricilerin çalışma zamanı performans metriklerini izlemesine, analiz etmesine, darboğazları belirlemesine ve kullanıcıların konumu veya cihazı ne olursa olsun uygulamalarını daha akıcı, daha hızlı ve daha keyifli bir kullanıcı deneyimi için optimize etmesine olanak tanıyan güçlü bir araçtır.

Performance Observer API Nedir?

Performance Observer API, bir web uygulamasında performansla ilgili olaylar meydana geldikçe bunları gözlemlemek ve bunlara tepki vermek için bir mekanizma sağlayan bir JavaScript API'sidir. Periyodik örneklemeye veya manuel enstrümantasyona dayanan geleneksel performans izleme tekniklerinin aksine, Performance Observer API, performans verilerini gerçek zamanlı olarak yakalamak için daha verimli ve esnek bir yol sunar. Geliştiricilerin belirli performans girdi türlerine abone olmalarını ve yeni girdiler kaydedildiğinde bildirim almalarını sağlar.

Bu "gözlemle ve tepki ver" yaklaşımı, proaktif performans izlemeyi mümkün kılarak geliştiricilerin performans sorunlarını kullanıcı deneyimini etkilemeden önce belirlemesine ve ele almasına olanak tanır. API, modern tarayıcılarda standartlaştırılmıştır, bu da tutarlı davranış ve platformlar arası uyumluluk sağlar.

Temel Kavramlar ve Özellikler

Performance Observer API'sini etkili bir şekilde kullanmak için temel kavramlarını ve özelliklerini anlamak çok önemlidir:

• PerformanceEntry: Tek bir performans ölçümünü veya olayını temsil eder. Performans girdileri, olayın türü, başlangıç ve bitiş zamanları ve diğer ilgili nitelikler hakkında bilgi içerir. Örnekler arasında resource, mark, measure, navigation, longtask ve event bulunur.
• PerformanceObserver: Belirli performans girdi türlerine abone olmanızı ve tarayıcının performans zaman çizelgesine yeni girdiler eklendiğinde bildirim almanızı sağlayan bir nesnedir.
• observe() metodu: PerformanceObserver'ı belirli performans girdi türlerini dinleyecek şekilde yapılandırmak için kullanılır. Gözlemlemek istediğiniz girdi türlerini ve geçmiş girdileri almak için bir buffered seçeneğini belirleyebilirsiniz.
• disconnect() metodu: PerformanceObserver'ın performans olaylarını dinlemesini durdurmak için kullanılır.
• takeRecords() metodu: Gözlemlenmiş ancak henüz gözlemcinin geri arama fonksiyonu tarafından işlenmemiş tüm performans girdilerinin bir dizisini döndürür.
• Geri Arama Fonksiyonu (Callback Function): Yeni performans girdileri gözlemlendiğinde yürütülen bir fonksiyondur. Bu fonksiyon, gözlemlenen girdileri içeren bir PerformanceObserverEntryList nesnesi alır.

Desteklenen Performans Girdi Türleri

Performance Observer API, web uygulaması performansının farklı yönlerine ilişkin özel bilgiler sağlayan çeşitli performans girdi türlerini destekler. En sık kullanılan girdi türlerinden bazıları şunlardır:

• resource: Resimler, betikler, stil sayfaları ve yazı tipleri gibi bireysel kaynakların yüklenmesi hakkında bilgi sağlar. Bu girdi türü, kaynak URL'si, başlangıç ve bitiş zamanları, getirme süresi ve aktarım boyutu gibi ayrıntıları içerir.
• mark: Belirli kod bölümlerinin süresini ölçmek için kodunuzda özel zaman damgaları oluşturmanıza olanak tanır. Veri işleme veya kullanıcı arayüzü oluşturma gibi kritik operasyonların başlangıcını ve sonunu izlemek için işaretleri kullanabilirsiniz.
• measure: İki işaret arasındaki süreyi hesaplamak için kullanılır. Bu girdi türü, özel kod bölümlerinin performansını ölçmek için uygun bir yol sağlar.
• navigation: DNS arama süresi, TCP bağlantı süresi, istek ve yanıt süreleri ve DOM işleme süresi dahil olmak üzere bir sayfanın gezinme zamanlaması hakkında bilgi sağlar.
• longtask: Ana iş parçacığını uzun bir süre (genellikle 50 milisaniyeden uzun) engelleyen görevleri tanımlar. Uzun görevler, kullanıcı arayüzünün yanıt vermemesine ve takılmasına neden olabilir.
• event: click, keydown ve scroll gibi belirli tarayıcı olayları için zamanlama bilgilerini kaydeder.
• layout-shift: Sayfadaki beklenmedik düzen kaymalarını izler. Bu kaymalar kullanıcılar için rahatsız edici olabilir ve kullanıcı deneyimini olumsuz etkileyebilir.
• largest-contentful-paint: En büyük içerik öğesinin sayfada görünür hale gelmesi için geçen süreyi ölçer.
• first-input-delay: Tarayıcının ilk kullanıcı etkileşimine (ör. bir tıklama veya dokunma) yanıt vermesi için geçen süreyi ölçer.
• element: Sayfadaki belirli öğelerin oluşturulması için zamanlama bilgilerini raporlar.

Pratik Örnekler ve Kullanım Alanları

Performance Observer API, web uygulaması performansını iyileştirmek için çok çeşitli senaryolarda kullanılabilir. İşte birkaç pratik örnek:

1. Kaynak Yükleme Sürelerini İzleme

resource girdi türü, resimler, betikler ve stil sayfaları gibi bireysel kaynakların yükleme sürelerini izlemenize olanak tanır. Bu bilgi, sayfa yükleme süresini etkileyen yavaş yüklenen kaynakları belirlemek için kullanılabilir. Örneğin, kaynak yükleme sürelerini izlemek için aşağıdaki kodu kullanabilirsiniz:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

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

            

              
                Copy
              
            
          

Bu kod, resource girdilerini dinleyen ve kaynak URL'sini ve süresini konsola yazdıran bir PerformanceObserver oluşturur. Bu verileri analiz ederek yavaş yüklenen kaynakları belirleyebilir ve resimleri sıkıştırarak, bir İçerik Dağıtım Ağı (CDN) kullanarak veya sunucu yapılandırmanızı optimize ederek bunları optimize edebilirsiniz.

Küresel Bakış Açısı: Kaynak yükleme sürelerini izlerken, kullanıcılarınızın coğrafi konumunu göz önünde bulundurun. Daha yavaş internet bağlantılarına sahip bölgelerdeki kullanıcılar, önemli ölçüde daha uzun yükleme süreleri yaşayabilir. Coğrafi olarak dağıtılmış sunuculara sahip bir CDN kullanmak bu sorunu azaltmaya yardımcı olabilir.

2. Özel Kod Yürütme Süresini Ölçme

mark ve measure girdi türleri, özel kod bölümlerinin yürütme süresini ölçmenize olanak tanır. Bu, uygulama mantığınızdaki performans darboğazlarını belirlemek için kullanışlıdır. Örneğin, belirli bir fonksiyonun süresini ölçmek için aşağıdaki kodu kullanabilirsiniz:

            performance.mark("start");

// Code to be measured
for (let i = 0; i < 1000000; i++) {
 // Some computationally intensive operation
}

performance.mark("end");
performance.measure("My Function", "start", "end");

const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Measurement: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

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

            

              
                Copy
              
            
          

Bu kod, ölçmek istediğiniz kod bölümünden önce ve sonra start ve end olmak üzere iki işaret oluşturur. Ardından, iki işaret arasındaki süreyi hesaplamak için performance.measure() yöntemini kullanır. PerformanceObserver, measure girdilerini dinler ve ölçüm adını ve süresini konsola yazdırır. Bu verileri analiz ederek yavaş performans gösteren kod bölümlerini belirleyebilir ve önbellekleme, memoizasyon veya algoritmik optimizasyon gibi teknikler kullanarak bunları optimize edebilirsiniz.

Uygulanabilir Bilgi: Uygulamanızın kritik yollarını – en sık yürütülen ve performans üzerinde en büyük etkiye sahip olan kod dizilerini – belirleyin. En önemli performans kazanımlarını elde etmek için optimizasyon çabalarınızı bu kritik yollara odaklayın.

3. Uzun Görevleri Belirleme

longtask girdi türü, ana iş parçacığını uzun bir süre engelleyen görevleri tanımlar. Uzun görevler, kullanıcı arayüzünün yanıt vermemesine ve takılmasına neden olarak kötü bir kullanıcı deneyimine yol açabilir. Uzun görevleri izlemek için aşağıdaki kodu kullanabilirsiniz:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
 console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
 });
});

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

            

              
                Copy
              
            
          

Bu kod, longtask girdilerini dinleyen ve görev adını ve süresini konsola yazdıran bir PerformanceObserver oluşturur. Bu verileri analiz ederek uzun süren görevleri belirleyebilir ve bunları daha küçük parçalara ayırarak, eşzamansız işlemler kullanarak veya bir web worker'a yükleyerek optimize edebilirsiniz.

Küresel Yazım Kılavuzu: Teknik kavramları açıklarken, farklı teknik uzmanlık seviyelerindeki okuyucular için erişilebilir olan açık ve öz bir dil kullanın. Jargondan kaçının ve alışılmadık terimler için bağlam sağlayın.

4. Gezinme Zamanlamasını Analiz Etme

navigation girdi türü, DNS arama süresi, TCP bağlantı süresi, istek ve yanıt süreleri ve DOM işleme süresi dahil olmak üzere bir sayfanın gezinme zamanlaması hakkında ayrıntılı bilgi sağlar. Bu veriler, sayfa yükleme sürecindeki darboğazları belirlemek için kullanılabilir. Örneğin, gezinme zamanlamasını analiz etmek için aşağıdaki kodu kullanabilirsiniz:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Navigation: ${entry.name}`);
 console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
 console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
 console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
 console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
 console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
 });
});

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

            

              
                Copy
              
            
          

Bu kod, navigation girdilerini dinleyen ve çeşitli zamanlama metriklerini konsola yazdıran bir PerformanceObserver oluşturur. Bu verileri analiz ederek yavaş DNS araması, yavaş TCP bağlantısı, yavaş istek işleme, yavaş yanıt işleme veya yavaş DOM işleme gibi darboğazları belirleyebilirsiniz. Daha sonra DNS yapılandırmanızı optimize etmek, sunucu performansınızı iyileştirmek veya HTML ve JavaScript kodunuzu optimize etmek gibi bu darboğazları gidermek için uygun eylemi gerçekleştirebilirsiniz.

SEO Optimizasyonu: İçerik boyunca ilgili anahtar kelimeleri doğal bir şekilde kullanın. Bu bölümde, "gezinme zamanlaması", "DNS arama süresi", "TCP bağlantı süresi" ve "sayfa yükleme süreci" gibi anahtar kelimeler sorunsuz bir şekilde birleştirilmiştir.

5. Düzen Kaymalarını İzleme

layout-shift girdi türü, sayfadaki beklenmedik düzen kaymalarını izler. Bu kaymalar kullanıcılar için rahatsız edici olabilir ve kullanıcı deneyimini olumsuz etkileyebilir. Genellikle boyutları belirtilmemiş resimler, geç yüklenen reklamlar veya dinamik olarak eklenen içerik nedeniyle oluşurlar. Düzen kaymalarını izlemek için aşağıdaki kodu kullanabilirsiniz:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
 console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
 console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
 });
});

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

            

              
                Copy
              
            
          

Bu kod, layout-shift girdilerini dinleyen ve kayma değerini (kaymanın büyüklüğünü temsil eden bir puan) konsola yazdıran bir PerformanceObserver oluşturur. Daha yüksek bir değer, daha önemli bir kaymayı gösterir. hadRecentInput özelliği, kaymanın bir kullanıcı girdisinden sonraki 500ms içinde olup olmadığını gösterir. Kullanıcı girdisi tarafından tetiklenen kaymalar genellikle daha az sorunlu kabul edilir. sources özelliği, kaymaya neden olan öğeler hakkında ayrıntılar sağlar. Bu verileri analiz ederek, resimler için boyutlar belirleyerek, reklamlar için yer ayırarak ve yeniden akışlara neden olabilecek içeriği dinamik olarak eklemekten kaçınarak düzen kayması sorunlarını belirleyebilir ve düzeltebilirsiniz.

Uygulanabilir Bilgi: Düzen kayması sorunlarını belirlemek ve bunları düzeltmek için öneriler almak üzere Google'ın Lighthouse gibi araçlarını kullanın. Kullanıcı girdisi olmadan meydana gelen kaymaları düzeltmeye öncelik verin.

6. En Büyük İçerikli Boyama (LCP) Ölçümü

largest-contentful-paint girdi türü, en büyük içerik öğesinin sayfada görünür hale gelmesi için geçen süreyi ölçer. LCP, sayfanın algılanan yükleme hızını yansıtan temel bir web verisidir. İyi bir LCP puanı 2,5 saniye veya daha azdır. LCP'yi ölçmek için aşağıdaki kodu kullanabilirsiniz:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
 console.log(`LCP Element: ${entry.element}`);
 console.log(`LCP URL: ${entry.url}`);
 });
});

observer.observe({ entryTypes: ["largest-contentful-paint"] });

            

              
                Copy
              
            
          

Bu kod, largest-contentful-paint girdilerini dinleyen ve başlangıç zamanını, öğeyi ve URL'yi konsola yazdıran bir PerformanceObserver oluşturur. Bu verileri analiz ederek en büyük içerik öğesini belirleyebilir ve resim boyutunu optimize ederek, bir CDN kullanarak veya kaynağı önceden yükleyerek yükleme süresini optimize edebilirsiniz.

Küresel Bakış Açısı: Farklı kullanıcıların ekran boyutlarına ve çözünürlüklerine göre farklı LCP öğelerine sahip olacağını göz önünde bulundurun. Uygulamanızı çeşitli cihazlarda ve ekran boyutlarında iyi bir LCP puanı sağlayacak şekilde tasarlayın.

7. İlk Girdi Gecikmesini (FID) Ölçme

first-input-delay girdi türü, tarayıcının ilk kullanıcı etkileşimine (ör. bir tıklama veya dokunma) yanıt vermesi için geçen süreyi ölçer. FID, sayfanın etkileşimliliğini yansıtan bir diğer temel web verisidir. İyi bir FID puanı 100 milisaniye veya daha azdır. FID'yi ölçmek için aşağıdaki kodu kullanabilirsiniz:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
 console.log(`Event Type: ${entry.name}`);
 console.log(`Target Element: ${entry.target}`);
 });
});

observer.observe({ type: "first-input", buffered: true });

            

              
                Copy
              
            
          

Bu kod, first-input girdilerini dinleyen ve gecikmeyi, olay türünü ve hedef öğeyi konsola yazdıran bir PerformanceObserver oluşturur. Bu verileri analiz ederek uzun girdi gecikmelerinin nedenlerini belirleyebilir ve ana iş parçacığında harcanan süreyi azaltmak için JavaScript kodunuzu optimize edebilirsiniz.

Uygulanabilir Bilgi: Uzun süren görevleri daha küçük parçalara ayırın, görevleri bir arka plan iş parçacığına yüklemek için web worker'ları kullanın ve kullanıcı etkileşimleri için işlem süresini azaltmak üzere olay dinleyicilerinizi optimize edin.

İleri Teknikler ve Dikkat Edilmesi Gerekenler

Yukarıda açıklanan temel kullanım durumlarına ek olarak, Performance Observer API, web uygulaması performansı hakkında daha derin bilgiler edinmek için daha gelişmiş senaryolarda kullanılabilir. İşte birkaç ileri teknik ve dikkat edilmesi gereken nokta:

1. Arabelleğe Alma (Buffering) Kullanımı

observe() metodundaki buffered seçeneği, PerformanceObserver oluşturulmadan önce kaydedilen geçmiş performans girdilerini almanıza olanak tanır. Bu, ilk sayfa yüklemesi sırasında veya izleme kodunuz yüklenmeden önce meydana gelen performans verilerini yakalamak için kullanışlıdır. Örneğin:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Entry: ${entry.name}, Type: ${entry.entryType}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });

            

              
                Copy
              
            
          

Bu kod, navigation ve resource girdilerini dinleyen ve gözlemci oluşturulmadan önce kaydedilen tüm geçmiş girdileri alan bir PerformanceObserver oluşturur.

2. Performans Girdilerini Filtreleme

Analizinizle en alakalı verilere odaklanmak için performans girdilerini belirli kriterlere göre filtreleyebilirsiniz. Örneğin, kaynak girdilerini URL'lerine veya içerik türlerine göre filtreleyebilirsiniz:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
 console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 }
 });
});

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

            

              
                Copy
              
            
          

Bu kod, resource girdilerini dinleyen ve bunları yalnızca .jpg uzantılı resim kaynakları için girdileri içerecek şekilde filtreleyen bir PerformanceObserver oluşturur.

3. Web Worker'ları Kullanma

Ana iş parçacığının performansını etkilemekten kaçınmak için, performans izleme ve analizini bir web worker'a yükleyebilirsiniz. Bu, kullanıcı arayüzünü engellemeden arka planda performans verilerini toplamanıza ve işlemenize olanak tanır. Örneğin, performans olaylarını dinleyen ve verileri analiz için ana iş parçacığına gönderen bir web worker oluşturabilirsiniz.

Küresel Yazım Kılavuzu: Küresel bir kitleye uygun örnekler kullanın. Belirli bir ülkeye veya kültüre özgü örneklerden kaçının.

4. Analitik Platformlarıyla Entegrasyon

Performance Observer API, performans verilerini merkezi bir konumda toplamak ve analiz etmek için analitik platformlarıyla entegre edilebilir. Bu, zaman içindeki performans trendlerini izlemenize, performans gerilemelerini belirlemenize ve performans metriklerini diğer kullanıcı davranışı verileriyle ilişkilendirmenize olanak tanır. API'lerini kullanarak veya sunucu tarafı bir uç noktaya kaydederek performans girdilerini analitik platformunuza gönderebilirsiniz.

5. Eski Tarayıcılar için Polyfill Kullanımı

Performance Observer API çoğu modern tarayıcı tarafından desteklenirken, eski tarayıcılarda mevcut olmayabilir. Eski tarayıcıları desteklemek için, API'nin bir geri dönüş uygulamasını sağlayan bir polyfill kullanabilirsiniz. Çevrimiçi olarak uygulamanızda kullanabileceğiniz birkaç polyfill mevcuttur.

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

Performance Observer API'sini etkili bir şekilde kullanmak ve yaygın tuzaklardan kaçınmak için bu en iyi uygulamaları izleyin:

• Yalnızca hedeflerinizle ilgili metrikleri izleyin. Performansı etkileyebilecek aşırı veri toplamaktan kaçının.
• En önemli verilere odaklanmak için filtreleme kullanın. İşlemeniz gereken veri miktarını azaltmak için performans girdilerini belirli kriterlere göre filtreleyin.
• Performans izlemeyi bir web worker'a yükleyin. Bu, performans izlemenin ana iş parçacığının performansını etkilemesini önleyecektir.
• Zaman içindeki performans trendlerini izlemek için analitik platformlarıyla entegre olun. Bu, performans gerilemelerini belirlemenize ve performans metriklerini diğer kullanıcı davranışı verileriyle ilişkilendirmenize olanak tanır.
• Eski tarayıcıları desteklemek için polyfill'leri kullanın. Bu, performans izleme kodunuzun çok çeşitli tarayıcılarda çalışmasını sağlayacaktır.
• Performans izleme kodunuzu kapsamlı bir şekilde test edin. Kodunuzun kendi başına herhangi bir performans sorununa yol açmadığından emin olun.
• Veri gizliliği düzenlemelerine dikkat edin. Kullanıcının izni olmadan kişisel olarak tanımlanabilir herhangi bir bilgi (PII) toplamadığınızdan emin olun.

SEO Optimizasyonu: Etkileyici meta açıklaması oluşturun. Blog gönderisinin içeriğini özetleyen kısa bir açıklama JSON meta verilerinde sağlanmıştır.

Sonuç

Performance Observer API, geliştiricilerin çalışma zamanı performans metriklerini izlemesine, analiz etmesine, darboğazları belirlemesine ve web uygulamalarını daha akıcı, daha hızlı ve daha keyifli bir kullanıcı deneyimi için optimize etmesine olanak tanıyan güçlü bir araçtır. API'nin temel kavramlarını ve özelliklerini anlayarak ve kullanımı için en iyi uygulamaları izleyerek, uygulamalarınızın performansı hakkında değerli bilgiler edinebilir ve konumları veya cihazları ne olursa olsun kullanıcılarınıza daha iyi bir kullanıcı deneyimi sunabilirsiniz. Web uygulamaları giderek daha karmaşık hale geldikçe, Performance Observer API, optimum performans ve kullanıcı memnuniyeti sağlamak için vazgeçilmez bir araç olmaya devam edecektir.

Her şeyden önce kullanıcı deneyimine öncelik vermeyi unutmayın. Performans optimizasyonu her zaman kullanıcılarınız için sorunsuz ve keyifli bir deneyim sağlama hedefiyle yönlendirilmelidir. Performance Observer API'sini etkili bir şekilde kullanarak, uygulamanızın performansı hakkında daha derin bir anlayış kazanabilir ve kullanıcı deneyimini iyileştirmek için bilinçli kararlar alabilirsiniz.

Performansın küresel etkilerini dikkatlice göz önünde bulundurarak, geliştiriciler dünyanın dört bir yanındaki kullanıcılar için hızlı, duyarlı ve erişilebilir web uygulamaları oluşturabilirler. Bu, ağ gecikmesi, cihaz yetenekleri ve kültürel tercihler gibi faktörleri dikkate alan bütünsel bir yaklaşım gerektirir.