Web Performansının Kilidini Açmak: Performance Observer API'ye Derin Bir Bakış

Günümüzün hızlı tempolu dijital dünyasında, web performansı bir lüks değil, bir zorunluluktur. Yavaş veya yanıt vermeyen bir web sitesi, kullanıcı hayal kırıklığına, daha yüksek hemen çıkma oranlarına ve satışlar, reklam geliri veya kullanıcı etkileşimi gibi iş hedefleri üzerinde doğrudan olumsuz bir etkiye yol açabilir. Yıllardır geliştiriciler, performansı tek bir zaman noktasında, tipik olarak ilk sayfa yüklemesi sırasında ölçen araçlara güvendiler. Yararlı olmakla birlikte, bu yaklaşım hikayenin kritik bir bölümünü kaçırıyor: kullanıcının sayfayla etkileşim kurarken yaşadığı tüm deneyimi. Çalışma zamanı performans izlemenin devreye girdiği yer burasıdır ve en güçlü aracı Performance Observer API'dir.

Geleneksel yöntemler genellikle performance.getEntries() gibi fonksiyonlarla performans verilerini yoklamayı içerir. Bu verimsiz olabilir, yoklamalar arasında meydana gelen önemli olayları kaçırmaya yatkın olabilir ve hatta ölçmeye çalıştığı performans yükünü artırabilir. Performance Observer API, olaylar gerçekleştiğinde performans olaylarına abone olmak için eşzamansız, düşük ek yüke sahip bir mekanizma sağlayarak bu süreci devrimleştirir. Bu kılavuz sizi bu temel API'ye derinlemesine götürecek, Temel Web Verilerini izlemek, darboğazları belirlemek ve sonuçta küresel bir kitle için daha hızlı, daha keyifli web deneyimleri oluşturmak için gücünden nasıl yararlanacağınızı gösterecektir.

Performance Observer API Nedir?

Özünde, Performance Observer API, performans girişleri olarak bilinen performans ölçüm olaylarını gözlemlemenin ve toplamanın bir yolunu sağlayan bir arayüzdür. Bunu tarayıcı içindeki performansla ilgili etkinlikler için özel bir dinleyici olarak düşünün. Tarayıcıya aktif olarak "Henüz bir şey oldu mu?" diye sormak yerine, tarayıcı proaktif olarak size "Yeni bir performans olayı meydana geldi! İşte ayrıntılar." der.

Bu, bir gözlemci modeli aracılığıyla elde edilir. Bir gözlemci örneği oluşturur, hangi tür performans olaylarıyla ilgilendiğinizi (örneğin, büyük boyamalar, kullanıcı girişleri, düzen kaymaları) belirtir ve bir geri çağırma fonksiyonu sağlarsınız. Tarayıcının performans zaman çizelgesinde belirtilen türde yeni bir olay kaydedildiğinde, geri çağırma fonksiyonunuz yeni girişlerin bir listesiyle çağrılır. Bu eşzamansız, itme tabanlı model, tekrar tekrar performance.getEntries() çağrısı yapmanın eski çekme tabanlı modelinden çok daha verimli ve güvenilirdir.

Eski Yöntem ve Yeni Yöntem

Performance Observer'ın yeniliğini takdir etmek için, iki yaklaşımı karşılaştıralım:

• Eski Yöntem (Yoklama): Metriğinizin kaydedilip kaydedilmediğini görmek için periyodik olarak performance.getEntriesByName('my-metric') çağırmak için setTimeout veya requestAnimationFrame kullanabilirsiniz. Bu sorunludur çünkü çok geç kontrol edebilir ve olayı kaçırabilir veya çok sık kontrol edebilir ve CPU döngülerini boşa harcayabilirsiniz. Girişleri düzenli olarak temizlemezseniz tarayıcının performans arabelleğini doldurma riskini de taşırsınız.
• Yeni Yöntem (Gözlemleme): Bir kez bir PerformanceObserver kurarsınız. Arka planda sessizce oturur ve minimum kaynak tüketir. İlgili bir performans girişi kaydedilir kaydedilmez - sayfa yüklemesinden bir milisaniye sonra veya bir kullanıcının oturumuna on dakika sonra - kodunuz anında bilgilendirilir. Bu, hiçbir olayı kaçırmamanızı ve izleme kodunuzun mümkün olduğunca verimli olmasını sağlar.

Neden Performance Observer Kullanmalısınız?

Performance Observer API'sini geliştirme iş akışınıza entegre etmek, küresel erişim hedefleyen modern web uygulamaları için kritik olan birçok fayda sunar.

• Müdahalesiz İzleme: Gözlemcinin geri çağırması genellikle boşta kalma dönemlerinde yürütülür ve performans izleme kodunuzun kullanıcı deneyimini engellememesini veya ana iş parçacığını engellememesini sağlar. Hafif olacak ve ihmal edilebilir bir performans ayak izine sahip olacak şekilde tasarlanmıştır.
• Kapsamlı Çalışma Zamanı Verileri: Web dinamiktir. Performans sorunları sadece yükleme zamanında meydana gelmez. Bir kullanıcı karmaşık bir animasyonu tetikleyebilir, kaydırarak daha fazla içerik yükleyebilir veya ilk sayfa yerleştikten çok sonra ağır bir bileşenle etkileşim kurabilir. Performance Observer bu çalışma zamanı olaylarını yakalar ve tüm kullanıcı oturumunun eksiksiz bir resmini verir.
• Geleceğe Hazır ve Standartlaştırılmış: Performans verilerini toplamak için W3C tarafından önerilen standarttır. Yeni performans metrikleri ve API'leri onunla entegre olacak şekilde tasarlanmıştır, bu da onu projeleriniz için sürdürülebilir ve ileriye dönük bir seçim haline getirir.
• Gerçek Kullanıcı İzlemenin (RUM) Temeli: Sitenizin farklı ülkelerdeki, cihazlardaki ve ağ koşullarındaki kullanıcılar için nasıl performans gösterdiğini gerçekten anlamak için, gerçek oturumlardan elde edilen verilere ihtiyacınız vardır. Performance Observer, hayati metrikleri toplamanıza ve bunları toplama ve analiz için bir analiz hizmetine göndermenize olanak tanıyan sağlam bir RUM çözümü oluşturmak için ideal araçtır.
• Yarış Durumlarını Ortadan Kaldırır: Yoklama ile, kaydedilmeden önce bir performans girişine erişmeye çalışabilirsiniz. Gözlemci modeli bu yarış durumunu tamamen ortadan kaldırır, çünkü kodunuz yalnızca giriş kullanılabilir olduktan sonra çalışır.

Başlarken: Performance Observer'ın Temelleri

API'yi kullanmak basittir. Süreç üç ana adım içerir: bir gözlemci oluşturmak, bir geri çağırma tanımlamak ve gözlemciye neyi izleyeceğini söylemek.

1. Bir Geri Çağırma ile Bir Gözlemci Oluşturmak

İlk olarak, bir PerformanceObserver nesnesi oluşturur ve ona bir geri çağırma fonksiyonu geçirirsiniz. Bu fonksiyon, yeni girişler algılandığında yürütülecektir.

const observer = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('Giriş Türü:', entry.entryType); console.log('Giriş Adı:', entry.name); console.log('Başlangıç Zamanı:', entry.startTime); console.log('Süre:', entry.duration); } });

Geri çağırma bir PerformanceObserverEntryList nesnesi alır. Yeni gözlemlenen performans girişlerinin bir dizisini almak için bu listede getEntries() metodunu çağırabilirsiniz.

2. Belirli Giriş Türlerini Gözlemlemek

Bir gözlemci, neyi izleyeceğini söyleyene kadar hiçbir şey yapmaz. Bunu .observe() metodunu kullanarak yaparsınız. Bu metot, ilgilendiğiniz performans giriş türlerini temsil eden bir dizide olan bir entryTypes özelliği (veya bazı modern durumlarda, tek bir tür için sadece type) olan bir nesne alır.

// İki tür girişi gözlemlemeye başlayın observer.observe({ entryTypes: ['mark', 'measure'] });

En yaygın giriş türlerinden bazıları şunlardır:

• 'resource': Komut dosyaları, resimler ve stil sayfaları gibi varlıklar için ağ istekleriyle ilgili ayrıntılar.
• 'paint': İlk boyama ve ilk içerikli boyama zamanlaması.
• 'largest-contentful-paint': Algılanan yükleme hızı için Temel Web Verileri metriği.
• 'layout-shift': Görsel kararlılık için Temel Web Verileri metriği.
• 'first-input': İlk Girdi Gecikmesi Temel Web Verisi için kullanılan ilk kullanıcı etkileşimi hakkında bilgi.
• 'longtask': Ana iş parçacığında 50 milisaniyeden uzun süren ve yanıt vermemeye neden olabilecek görevleri tanımlar.
• 'mark' & 'measure': Kullanıcı Zamanlama API'sini kullanarak kendi kodunuzda tanımladığınız özel işaretçiler ve ölçümler.

3. Gözlemciyi Durdurmak

Artık veri toplamanız gerekmediğinde, kaynakları boşaltmak için gözlemciyi ayırmak iyi bir uygulamadır.

observer.disconnect();

Pratik Kullanım Örnekleri: Temel Web Verilerini İzleme

Temel Web Verileri, Google'ın bir web sayfasının genel kullanıcı deneyiminde önemli gördüğü bir dizi belirli faktördür. Bunları izlemek, Performance Observer API'sinin en güçlü uygulamalarından biridir. Her birini nasıl ölçeceğimize bakalım.

En Büyük İçerikli Boyamayı (LCP) İzleme

LCP, yükleme performansını ölçer. Ana içeriğin büyük olasılıkla yüklendiği sayfa yükleme zaman çizelgesindeki noktayı işaretler. İyi bir LCP skoru 2,5 saniye veya daha azdır.

LCP öğesi, sayfa yüklendikçe değişebilir. Başlangıçta, bir başlık LCP öğesi olabilir, ancak daha sonra daha büyük bir resim yüklenebilir ve yeni LCP öğesi olabilir. Bu nedenle, bir Performance Observer mükemmeldir - oluşturulduğunda sizi her potansiyel LCP adayı hakkında bilgilendirir.

// LCP'yi gözlemleyin ve nihai değeri günlüğe kaydedin let lcpValue = 0; const lcpObserver = new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); // Son giriş, en güncel LCP adayıdır const lastEntry = entries[entries.length - 1]; lcpValue = lastEntry.startTime; console.log(`LCP güncellendi: ${lcpValue.toFixed(2)}ms`, lastEntry.element); }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); // Kullanıcı etkileşimde bulunduktan sonra gözlemciyi ayırmak iyi bir uygulamadır, // çünkü etkileşimler yeni LCP adaylarının gönderilmesini durdurabilir. // window.addEventListener('beforeunload', () => lcpObserver.disconnect());

buffered: true kullanımına dikkat edin. Bu, gözlemciye observe() metodu çağrılmadan *önce* kaydedilen girişleri dahil etmesini söyleyen kritik bir seçenektir. Bu, erken bir LCP olayını kaçırmanızı önler.

İlk Girdi Gecikmesini (FID) ve Sonraki Boyamaya Etkileşimi (INP) İzleme

Bu metrikler etkileşimi ölçer. Kullanıcının sayfayla ilk etkileşim kurmaya çalıştığında yaşadığı deneyimi ölçerler.

İlk Girdi Gecikmesi (FID), bir kullanıcının bir sayfayla ilk etkileşim kurduğu (örneğin, bir düğmeyi tıkladığı) zamandan, tarayıcının bu etkileşime yanıt olarak olay işleyicilerini işlemeye başlayabildiği zamana kadar geçen süreyi ölçer. İyi bir FID 100 milisaniye veya daha azdır.

Sonraki Boyamaya Etkileşim (INP), Mart 2024'te FID'in yerini alan daha yeni, daha kapsamlı bir metriktir. FID yalnızca *ilk* etkileşimin *gecikmesini* ölçerken, INP sayfanın yaşam döngüsü boyunca *tüm* kullanıcı etkileşimlerinin *toplam gecikmesini* değerlendirir ve en kötüsünü bildirir. Bu, genel yanıt verme hızının daha iyi bir resmini verir. İyi bir INP 200 milisaniye veya daha azdır.

FID'yi 'first-input' giriş türünü kullanarak izleyebilirsiniz:

// FID'yi gözlemleyin const fidObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { const fid = entry.processingStart - entry.startTime; console.log(`FID: ${fid.toFixed(2)}ms`); // İlk giriş rapor edildikten sonra bağlantıyı kesin fidObserver.disconnect(); } }); fidObserver.observe({ type: 'first-input', buffered: true });

INP'yi izlemek biraz daha karmaşıktır, çünkü bir olayın tam süresine bakar. 'event' giriş türünü gözlemlersiniz ve süreyi hesaplarsınız, en uzun olanı takip edersiniz.

// Basitleştirilmiş INP izleme örneği let worstInp = 0; const inpObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // INP, olayın süresidir const inp = entry.duration; // Sadece mevcut en kötüden daha uzun etkileşimleri önemsiyoruz if (inp > worstInp) { worstInp = inp; console.log(`Yeni en kötü INP: ${worstInp.toFixed(2)}ms`); } } }); inpObserver.observe({ type: 'event', durationThreshold: 16, buffered: true }); // durationThreshold, çok kısa, muhtemelen önemsiz olayları filtrelemeye yardımcı olur.

Kümülatif Düzen Kaymasını (CLS) İzleme

CLS, görsel kararlılığı ölçer. Kullanıcıların ne sıklıkla beklenmedik düzen kaymaları yaşadıklarını ölçmeye yardımcı olur - içeriğin sayfada uyarı vermeden hareket ettiği sinir bozucu bir deneyim. İyi bir CLS skoru 0,1 veya daha azdır.

Puan, tüm bireysel düzen kayması skorlarının bir toplamıdır. Bir Performance Observer burada önemlidir, çünkü her kaymayı meydana geldiği anda rapor eder.

// Toplam CLS skorunu gözlemleyin ve hesaplayın let clsScore = 0; const clsObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // Kullanıcı girdisinden kaynaklanan kaymaları saymak istemiyoruz if (!entry.hadRecentInput) { clsScore += entry.value; console.log(`Mevcut CLS skoru: ${clsScore.toFixed(4)}`); } } }); clsObserver.observe({ type: 'layout-shift', buffered: true });

hadRecentInput özelliği önemlidir. Bir kullanıcının eylemine yanıt olarak meydana gelen (örneğin, bir menüyü genişleten bir düğmeyi tıklamak gibi) meşru düzen kaymalarını filtrelemenize yardımcı olur ve bu kaymalar CLS skoruna dahil edilmemelidir.

Temel Web Verilerinin Ötesinde: Diğer Güçlü Giriş Türleri

Temel Web Verileri harika bir başlangıç noktası olsa da, Performance Observer çok daha fazlasını izleyebilir. İşte inanılmaz derecede kullanışlı diğer birkaç giriş türü.

Uzun Görevleri İzleme (`longtask`)

Uzun Görevler API'si, ana iş parçacığını 50 milisaniye veya daha uzun süre meşgul eden görevleri ortaya çıkarır. Bunlar sorunludur, çünkü ana iş parçacığı meşgulken, sayfa kullanıcı girdisine yanıt veremez, bu da yavaş veya donmuş bir deneyime yol açar. Bu görevleri belirlemek, INP'yi iyileştirmenin anahtarıdır.

// Uzun görevleri gözlemleyin const longTaskObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log(`Uzun Görev Algılandı: ${entry.duration.toFixed(2)}ms`); // 'attribution' özelliği bazen uzun göreve neyin neden olduğunu size söyleyebilir console.log('Atıf:', entry.attribution); } }); longTaskObserver.observe({ type: 'longtask', buffered: true });

Kaynak Zamanlamalarını Analiz Etme (`resource`)

Varlıklarınızın nasıl yüklendiğini anlamak, performans ayarlamanın temelidir. 'resource' giriş türü, DNS araması, TCP bağlantısı ve içerik indirme süreleri dahil olmak üzere sayfanızdaki her kaynak için ayrıntılı ağ zamanlama verileri verir.

// Kaynak zamanlamalarını gözlemleyin const resourceObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { // Yavaş yüklenen resimleri bulalım if (entry.initiatorType === 'img' && entry.duration > 500) { console.warn(`Yavaş resim algılandı: ${entry.name}`, `Süre: ${entry.duration.toFixed(2)}ms`); } } }); // Bu komut dosyası çalışmadan önce yüklenen varlıkları yakalamak için // 'buffered: true' kullanmak neredeyse her zaman gereklidir. resourceObserver.observe({ type: 'resource', buffered: true });

Özel Performans İşaretlerini Ölçme (`mark` ve `measure`)

Bazen, uygulamaya özel mantığın performansını ölçmeniz gerekir. Kullanıcı Zamanlama API'si, özel zaman damgaları oluşturmanıza ve aralarındaki süreyi ölçmenize olanak tanır.

• performance.mark('start-operation'): 'start-operation' adlı bir zaman damgası oluşturur.
• performance.mark('end-operation'): Başka bir zaman damgası oluşturur.
• performance.measure('my-operation', 'start-operation', 'end-operation'): İki işaret arasındaki bir ölçümü oluşturur.

Performance Observer, JavaScript çerçevesindeki bileşen oluşturma süreleri veya kritik bir API çağrısının süresi ve sonraki veri işleme gibi şeyler hakkında zamanlama verilerini toplamak için mükemmel olan bu özel 'mark' ve 'measure' girişlerini dinleyebilir.

// Uygulama kodunuzda: performance.mark('start-data-processing'); // ... bazı karmaşık veri işleme ... performance.mark('end-data-processing'); performance.measure('data-processing-duration', 'start-data-processing', 'end-data-processing'); // İzleme komut dosyanızda: const customObserver = new PerformanceObserver((entryList) => { for (const entry of entryList.getEntriesByName('data-processing-duration')) { console.log(`Özel Ölçüm '${entry.name}': ${entry.duration.toFixed(2)}ms`); } }); customObserver.observe({ entryTypes: ['measure'] });

Gelişmiş Kavramlar ve En İyi Uygulamalar

Performance Observer API'sini profesyonel bir üretim ortamında etkili bir şekilde kullanmak için bu en iyi uygulamaları göz önünde bulundurun.

• Her Zaman `buffered: true` Değerini Göz Önünde Bulundurun: Sayfa yüklemesinin başlarında meydana gelebilecek giriş türleri için ('resource', 'paint' veya 'largest-contentful-paint' gibi), arabelleğe alınmış bayrağını kullanmak, bunları kaçırmamak için çok önemlidir.
• Tarayıcı Desteğini Kontrol Edin: Modern tarayıcılarda yaygın olarak desteklenmesine rağmen, kullanmadan önce varlığını kontrol etmek her zaman akıllıcadır. Belirli bir tarayıcı tarafından hangi giriş türlerinin desteklendiğini de kontrol edebilirsiniz.
• if ('PerformanceObserver' in window && PerformanceObserver.supportedEntryTypes.includes('longtask')) { // Uzun görevler için PerformanceObserver'ı kullanmak güvenlidir }
• Verileri Bir Analiz Hizmetine Gönderin: Verileri konsola kaydetmek geliştirme için harikadır, ancak gerçek dünya izlemesi için bu verileri toplamanız gerekir. Bu telemetriyi istemciden göndermenin en iyi yolu navigator.sendBeacon() API'sini kullanmaktır. Bir sayfayı boşaltırken bile güvenilir bir şekilde çalışan, bir sunucuya az miktarda veri göndermek için tasarlanmış engellemeyen bir mekanizmadır.
• Gözlemcileri İlgiye Göre Gruplandırın: Birden çok giriş türü için tek bir gözlemci kullanabilseniz de, farklı kaygılar için ayrı gözlemciler oluşturmak genellikle daha temizdir (örneğin, Temel Web Verileri için bir tane, kaynak zamanlamaları için bir tane, özel metrikler için bir tane). Bu, kodun okunabilirliğini ve sürdürülebilirliğini artırır.
• Performans Yükünü Anlayın: API, çok düşük ek yüke sahip olacak şekilde tasarlanmıştır. Bununla birlikte, ağır hesaplamalar yapan çok karmaşık bir geri çağırma fonksiyonu potansiyel olarak performansı etkileyebilir. Gözlemci geri çağırmalarınızı yalın ve verimli tutun. Herhangi bir ağır işlemi bir web worker'a erteleyin veya ham verileri işlenmek üzere arka ucunuza gönderin.

Sonuç: Performans Öncelikli Bir Kültür Oluşturmak

Performance Observer API, sadece başka bir araçtan daha fazlasıdır; web performansına yaklaşımımızda temel bir değişimdir. Bizi reaktif, tek seferlik ölçümlerden, kullanıcılarımızın dünya çapındaki gerçek, dinamik deneyimini yansıtan proaktif, sürekli izlemeye taşır. Temel Web Verilerini, uzun görevleri, kaynak zamanlamalarını ve özel metrikleri yakalamak için güvenilir ve verimli bir yol sağlayarak, geliştiricileri önemli sayıda kullanıcıyı etkilemeden önce performans darboğazlarını belirleme ve çözme konusunda güçlendirir.

Performance Observer API'sini benimsemek, herhangi bir geliştirme ekibinde performans öncelikli bir kültür oluşturmaya yönelik kritik bir adımdır. Neyi ölçmeniz gerektiğini bildiğinizde, neleri iyileştirmeniz gerektiğini de bilirsiniz. Bu gözlemcileri bugün projelerinize entegre etmeye başlayın. Kullanıcılarınız - dünyanın neresinde olurlarsa olsunlar - daha hızlı, daha sorunsuz ve daha keyifli bir deneyim için size teşekkür edeceklerdir.