Frontend Performans API Navigasyonu: Sayfa Yükleme Metriklerini Toplamada Ustalaşma

Günümüzün dijital dünyasında web sitesi performansı her şeyden önemlidir. Yavaş yüklenen bir web sitesi, hayal kırıklığına uğramış kullanıcılara, terk edilmiş alışveriş sepetlerine ve nihayetinde gelir kaybına yol açabilir. Frontend performansınızı optimize etmek, kullanıcılarınız dünyanın neresinde olursa olsun olumlu bir kullanıcı deneyimi sunmak için kritik öneme sahiptir. Frontend Performans API'si, sayfa yükleme performansının çeşitli yönlerini ölçmek ve analiz etmek için güçlü araçlar sunar. Bu kapsamlı rehber, temel sayfa yükleme metriklerini toplamak ve anlamak için Navigasyon Zamanlama API'sinden ve diğer ilgili performans arayüzlerinden nasıl yararlanacağınızı adım adım anlatacak, böylece darboğazları belirlemenize ve web sitenizin hızını ve duyarlılığını küresel bir kitle için iyileştirmenize olanak tanıyacaktır.

Sayfa Yükleme Metriklerinin Önemini Anlamak

Sayfa yükleme metrikleri, web sitenizin ne kadar hızlı yüklendiği ve kullanıcılar için etkileşimli hale geldiği konusunda değerli bilgiler sunar. Bu metrikler birkaç nedenden dolayı çok önemlidir:

• Kullanıcı Deneyimi: Daha hızlı yüklenen bir web sitesi, daha sorunsuz ve daha keyifli bir kullanıcı deneyimi sunarak etkileşimi ve memnuniyeti artırır. Tokyo'daki bir kullanıcının e-ticaret sitenize erişmeye çalıştığını düşünün; yavaş bir yükleme deneyimi, muhtemelen satın alımlarından vazgeçmelerine neden olacaktır.
• SEO Sıralaması: Google gibi arama motorları, sayfa hızını bir sıralama faktörü olarak kabul eder. Web sitenizin performansını optimize etmek, arama motoru görünürlüğünüzü artırabilir.
• Dönüşüm Oranları: Çalışmalar, sayfa yükleme süresi ile dönüşüm oranları arasında doğrudan bir ilişki olduğunu göstermiştir. Daha hızlı yüklenen sayfalar, özellikle internet hızının daha yavaş olduğu bölgelerde genellikle daha yüksek dönüşüm oranlarına yol açar.
• Mobil Optimizasyon: Mobil cihazların artan kullanımıyla birlikte, mobil performans için optimizasyon yapmak esastır. Sayfa yükleme süreleri, özellikle sınırlı bant genişliğine sahip bölgelerde mobil kullanıcı deneyimini önemli ölçüde etkileyebilir. Örneğin, Hindistan'da 3G bağlantılarına güvenen kullanıcılar, hızlı yüklenen bir web sitesini yüksek hızlı fiber bağlantılara sahip kullanıcılardan daha fazla takdir edecektir.
• Küresel Erişim: Performans, kullanıcının coğrafi konumuna, ağ koşullarına ve cihaz özelliklerine göre önemli ölçüde değişebilir. Farklı bölgelerden performansı izlemek, optimizasyonun gerekli olduğu alanları belirlemeye yardımcı olabilir.

Frontend Performans API'sine Giriş

Frontend Performans API'si, web sayfaları için performansla ilgili verilere erişim sağlayan bir JavaScript arayüzleri koleksiyonudur. Bu API, geliştiricilerin sayfa yükleme süresinin çeşitli yönlerini, kaynak yüklemesini ve diğer performans özelliklerini ölçmesine olanak tanır. Frontend Performans API'sinin önemli bir bileşeni olan Navigasyon Zamanlama API'si, sayfa yükleme sürecinin çeşitli aşamaları hakkında ayrıntılı zamanlama bilgileri sağlar.

Performans API'sinin Temel Bileşenleri:

• Navigasyon Zamanlama API'si (Navigation Timing API): DNS arama, TCP bağlantısı, istek ve yanıt süreleri ve DOM işleme gibi sayfa yükleme sürecinin farklı aşamaları hakkında zamanlama bilgileri sağlar.
• Kaynak Zamanlama API'si (Resource Timing API): Görüntüler, komut dosyaları ve stil sayfaları gibi sayfa tarafından yüklenen tekil kaynaklar için zamanlama bilgileri sağlar. Bu, özellikle cihaza ve bölgeye göre farklı görüntü çözünürlükleri sunarken (örneğin, daha iyi sıkıştırma için desteklenen tarayıcılara WebP görüntüleri sunmak) hangi varlıkların yükleme sürelerine en çok katkıda bulunduğunu anlamak için paha biçilmezdir.
• Kullanıcı Zamanlama API'si (User Timing API): Geliştiricilerin özel performans metrikleri tanımlamasına ve yürütme süresini ölçmek için koddaki belirli noktaları işaretlemesine olanak tanır.
• Boya Zamanlama API'si (Paint Timing API): İlk Boyama (FP) ve İlk İçerikli Boyama (FCP) gibi ekrandaki içeriğin oluşturulmasıyla ilgili metrikler sağlar.
• En Büyük İçerikli Boyama (LCP): Sayfanın ilk yüklenmeye başladığı ana göre görünüm alanı içinde görünen en büyük resmin veya metin bloğunun oluşturulma süresini bildirir. Bu, Google'ın Core Web Vitals'ındaki önemli bir metriktir.
• İlk Girdi Gecikmesi (FID): Bir kullanıcının bir sayfayla ilk kez etkileşimde bulunduğu andan (örneğin, bir bağlantıya tıkladığı, bir düğmeye dokunduğu veya özel, JavaScript destekli bir kontrol kullandığı zaman) 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.
• Kümülatif Düzen Kayması (CLS): Bir sayfanın tüm yaşam döngüsü boyunca meydana gelen tüm beklenmedik düzen kaymalarının toplamını ölçer.

Navigasyon Zamanlama API'si ile Sayfa Yükleme Metriklerini Toplama

Navigasyon Zamanlama API'si, sayfa yükleme süreci hakkında zengin bilgi sağlar. Bu verilere erişmek için JavaScript'te performance.timing özelliğini kullanabilirsiniz.

Örnek: Navigasyon Zamanlama Verilerini Toplama

İşte Navigasyon Zamanlama verilerini nasıl toplayacağınıza ve konsola nasıl yazdıracağınıza dair bir örnek:

if (window.performance && window.performance.timing) { const timing = window.performance.timing; console.log('Navigasyon Başlangıcı:', timing.navigationStart); console.log('Getirme Başlangıcı:', timing.fetchStart); console.log('Alan Adı Arama Başlangıcı:', timing.domainLookupStart); console.log('Alan Adı Arama Sonu:', timing.domainLookupEnd); console.log('Bağlantı Başlangıcı:', timing.connectStart); console.log('Bağlantı Sonu:', timing.connectEnd); console.log('İstek Başlangıcı:', timing.requestStart); console.log('Yanıt Başlangıcı:', timing.responseStart); console.log('Yanıt Sonu:', timing.responseEnd); console.log('DOM Yükleniyor:', timing.domLoading); console.log('DOM Etkileşimli:', timing.domInteractive); console.log('DOM Tamamlandı:', timing.domComplete); console.log('Yükleme Olayı Başlangıcı:', timing.loadEventStart); console.log('Yükleme Olayı Sonu:', timing.loadEventEnd); }

Önemli: performance.timing nesnesi, PerformanceNavigationTiming arayüzü lehine kullanımdan kaldırılmıştır. Modern tarayıcılar için ikincisinin kullanılması önerilir.

PerformanceNavigationTiming Kullanımı

if (window.performance && window.performance.getEntriesByType) { const navigationEntries = performance.getEntriesByType('navigation'); if (navigationEntries && navigationEntries.length > 0) { const navigationEntry = navigationEntries[0]; console.log('Navigasyon Türü:', navigationEntry.type); // örn., 'navigate', 'reload', 'back_forward' console.log('Navigasyon Başlangıcı:', navigationEntry.startTime); console.log('Getirme Başlangıcı:', navigationEntry.fetchStart); console.log('Alan Adı Arama Başlangıcı:', navigationEntry.domainLookupStart); console.log('Alan Adı Arama Sonu:', navigationEntry.domainLookupEnd); console.log('Bağlantı Başlangıcı:', navigationEntry.connectStart); console.log('Bağlantı Sonu:', navigationEntry.connectEnd); console.log('İstek Başlangıcı:', navigationEntry.requestStart); console.log('Yanıt Başlangıcı:', navigationEntry.responseStart); console.log('Yanıt Sonu:', navigationEntry.responseEnd); console.log('DOM Etkileşimli:', navigationEntry.domInteractive); console.log('DOM Tamamlandı:', navigationEntry.domComplete); console.log('Yükleme Olayı Başlangıcı:', navigationEntry.loadEventStart); console.log('Yükleme Olayı Sonu:', navigationEntry.loadEventEnd); console.log('Süre:', navigationEntry.duration); // İlk Bayta Kadar Geçen Süreyi (TTFB) Hesapla const ttfb = navigationEntry.responseStart - navigationEntry.requestStart; console.log('TTFB:', ttfb); // DOM Yükleme Süresini Hesapla const domLoadTime = navigationEntry.domComplete - navigationEntry.domLoading; console.log('DOM Yükleme Süresi:', domLoadTime); // Sayfa Yükleme Süresini Hesapla const pageLoadTime = navigationEntry.loadEventEnd - navigationEntry.startTime; console.log('Sayfa Yükleme Süresi:', pageLoadTime); } }

Navigasyon Zamanlama Metriklerini Anlama

İşte Navigasyon Zamanlama API'si tarafından sağlanan bazı temel metriklerin bir dökümü:

• navigationStart: Belgeye navigasyonun başladığı zaman.
• fetchStart: Tarayıcının belgeyi getirmeye başladığı zaman.
• domainLookupStart: Tarayıcının belgenin alan adı için DNS aramasına başladığı zaman.
• domainLookupEnd: Tarayıcının belgenin alan adı için DNS aramasını tamamladığı zaman.
• connectStart: Tarayıcının sunucuyla bağlantı kurmaya başladığı zaman.
• connectEnd: Tarayıcının sunucuyla bağlantı kurmayı tamamladığı zaman. Farklı bölgelerdeki CDN kullanımının etkisini göz önünde bulundurun; iyi yapılandırılmış bir CDN, dünyanın dört bir yanındaki kullanıcılar için bağlantı sürelerini önemli ölçüde azaltabilir.
• requestStart: Tarayıcının sunucuya isteği göndermeye başladığı zaman.
• responseStart: Tarayıcının sunucudan yanıtın ilk baytını aldığı zaman. Bu, İlk Bayta Kadar Geçen Süreyi (TTFB) ölçmek için başlangıç noktasıdır.
• responseEnd: Tarayıcının sunucudan yanıtın son baytını aldığı zaman.
• domLoading: Tarayıcının HTML belgesini ayrıştırmaya başladığı zaman.
• domInteractive: Tarayıcının HTML belgesini ayrıştırmayı bitirdiği ve DOM'un hazır olduğu zaman. Bazı kaynaklar hala yükleniyor olsa da kullanıcı sayfayla etkileşime geçebilir.
• domComplete: Tarayıcının HTML belgesini ayrıştırmayı bitirdiği ve tüm kaynakların (görüntüler, komut dosyaları vb.) yüklenmesinin tamamlandığı zaman.
• loadEventStart: load olayının başladığı zaman.
• loadEventEnd: load olayının tamamlandığı zaman. Bu genellikle sayfanın tamamen yüklendiği nokta olarak kabul edilir.
• duration: Navigasyon için geçen toplam süre. PerformanceNavigationTiming ile kullanılabilir.

Optimizasyon için Sayfa Yükleme Metriklerini Analiz Etme

Sayfa yükleme metriklerini topladıktan sonra, bir sonraki adım optimizasyon için alanları belirlemek üzere bunları analiz etmektir. İşte bazı temel stratejiler:

1. Darboğazları Belirleyin

Navigasyon Zamanlama verilerini inceleyerek, sayfa yükleme sürecinin en uzun süren aşamalarını tam olarak belirleyebilirsiniz. Örneğin, domainLookupEnd - domainLookupStart yüksekse, bu bir DNS çözümleme sorununu gösterir. Eğer responseEnd - responseStart yüksekse, bu yavaş bir sunucu yanıt süresini veya büyük içerik boyutunu düşündürür.

Örnek: Güney Amerika'daki kullanıcılar için connectEnd - connectStart değerinin Kuzey Amerika'daki kullanıcılara göre önemli ölçüde daha yüksek olduğu bir senaryo düşünün. Bu, Güney Amerikalı kullanıcılara daha yakın varlık noktalarına (PoP'lar) sahip bir CDN'ye ihtiyaç olduğunu gösterebilir.

2. Sunucu Yanıt Süresini (TTFB) Optimize Edin

İlk Bayta Kadar Geçen Süre (TTFB), tarayıcının sunucudan ilk veri baytını almasının ne kadar sürdüğünü ölçen çok önemli bir metriktir. Yüksek bir TTFB, genel sayfa yükleme süresini önemli ölçüde etkileyebilir.

TTFB'yi iyileştirme stratejileri:

• Sunucu tarafı kodunu optimize edin: HTML yanıtını oluşturmak için geçen süreyi azaltmak amacıyla sunucu tarafı kodunuzun verimliliğini artırın. Yavaş sorguları veya verimsiz algoritmaları belirlemek için profil oluşturma araçlarını kullanın.
• İçerik Dağıtım Ağı (CDN) kullanın: Bir CDN, web sitenizin içeriğini önbelleğe alabilir ve kullanıcılarınıza daha yakın sunuculardan sunarak gecikmeyi azaltabilir ve TTFB'yi iyileştirebilir. Farklı bölgelerdeki kullanıcılara hizmet vermek için sağlam küresel ağlara sahip CDN'leri düşünün.
• HTTP önbelleğe almayı etkinleştirin: Sunucunuzu, tarayıcıların statik varlıkları önbelleğe almasına izin vermek için uygun HTTP önbellek başlıklarını gönderecek şekilde yapılandırın. Bu, sunucuya yapılan isteklerin sayısını önemli ölçüde azaltabilir ve sonraki sayfa yüklemeleri için TTFB'yi iyileştirebilir. Tarayıcı önbelleğini etkili bir şekilde kullanın.
• Veritabanı sorgularını optimize edin: Yavaş veritabanı sorguları TTFB'yi önemli ölçüde etkileyebilir. Dizinler kullanarak, tam tablo taramalarından kaçınarak ve sık erişilen verileri önbelleğe alarak sorgularınızı optimize edin.
• Daha hızlı bir web barındırıcısı kullanın: Mevcut web barındırıcınız yavaşsa, daha hızlı birine geçmeyi düşünün.

3. Kaynak Yüklemesini Optimize Edin

Kaynak Zamanlama API'si, görüntüler, komut dosyaları ve stil sayfaları gibi tekil kaynakların yükleme süresi hakkında ayrıntılı bilgi sağlar. Yüklenmesi uzun süren kaynakları belirlemek ve bunları optimize etmek için bu verileri kullanın.

Kaynak yüklemesini optimize etme stratejileri:

• Görüntüleri sıkıştırın: Kaliteden ödün vermeden görüntüleri sıkıştırmak için görüntü optimizasyon araçlarını kullanın. JPEG ve PNG'den daha iyi sıkıştırma sunan WebP gibi modern görüntü formatlarını kullanmayı düşünün. <picture> öğesini veya duyarlı görüntüler tekniklerini kullanarak kullanıcının cihazına ve ekran boyutuna göre farklı görüntü çözünürlükleri sunun.
• CSS ve JavaScript'i küçültün: Boyutlarını azaltmak için CSS ve JavaScript dosyalarınızdan gereksiz karakterleri ve boşlukları kaldırın.
• CSS ve JavaScript dosyalarını birleştirin: HTTP isteklerinin sayısını azaltmak için birden çok CSS ve JavaScript dosyasını daha az sayıda dosyada birleştirin. Birleştirme için Webpack, Parcel veya Rollup gibi araçları kullanın.
• Kritik olmayan kaynakların yüklenmesini erteleyin: Kritik olmayan kaynakları (örneğin, ekranın alt kısmındaki görüntüler) tembel yükleme (lazy loading) gibi teknikler kullanarak eşzamansız olarak yükleyin.
• Statik varlıklar için bir CDN kullanın: Yükleme sürelerini iyileştirmek için statik varlıkları (görüntüler, CSS, JavaScript) bir CDN'den sunun.
• Kritik kaynaklara öncelik verin: Sayfanın ilk oluşturulmasını iyileştirmek için CSS ve yazı tipleri gibi kritik kaynakların yüklenmesine öncelik vermek için <link rel="preload"> kullanın.

4. Oluşturmayı (Rendering) Optimize Edin

Kullanıcı deneyimini iyileştirmek için web sitenizin oluşturulma şeklini optimize edin. Önemli metrikler arasında İlk Boyama (FP), İlk İçerikli Boyama (FCP) ve En Büyük İçerikli Boyama (LCP) bulunur.

Oluşturmayı optimize etme stratejileri:

• CSS teslimatını optimize edin: CSS'yi oluşturmayı engellemeyecek şekilde teslim edin. İlk görünüm alanı için gerekli olan CSS'yi satır içine almak ve geri kalan CSS'yi eşzamansız olarak yüklemek için kritik CSS gibi teknikleri kullanın.
• Uzun süren JavaScript'ten kaçının: Ana iş parçacığını engellememek için uzun süren JavaScript görevlerini daha küçük parçalara ayırın.
• Web worker'ları kullanın: Ana iş parçacığını engellemekten kaçınmak için hesaplama açısından yoğun görevleri web worker'larına taşıyın.
• JavaScript yürütmesini optimize edin: Verimli JavaScript kodu kullanın ve gereksiz DOM manipülasyonlarından kaçının. React, Vue ve Angular gibi sanal DOM kütüphaneleri DOM güncellemelerini optimize etmeye yardımcı olabilir.
• Düzen kaymalarını azaltın: Görsel kararlılığı artırmak için beklenmedik düzen kaymalarını en aza indirin. Sayfa yüklenirken içeriğin zıplamasını önlemek için görüntüler ve reklamlar için yer ayırın. Düzen kaymalarının meydana geldiği alanları belirlemek için Kümülatif Düzen Kayması (CLS) metriğini kullanın.
• Yazı tiplerini optimize edin: Web yazı tiplerini önceden yükleyerek, görünmez metinden kaçınmak için font-display: swap; kullanarak ve yazı tipi dosyası boyutlarını azaltmak için yazı tipi alt kümeleri kullanarak verimli bir şekilde kullanın. Uygun olduğunda sistem yazı tiplerini kullanmayı düşünün.

5. Performansı Sürekli Olarak İzleyin

Web sitesi performansı tek seferlik bir düzeltme değildir. Ortaya çıktıkça yeni darboğazları belirlemek ve ele almak için performansı sürekli olarak izlemek esastır. Zaman içindeki temel metrikleri izlemek için performans izleme araçlarını kullanın ve performans düştüğünde sizi bilgilendirmek için uyarılar ayarlayın. Google PageSpeed Insights, WebPageTest ve Lighthouse gibi araçları kullanarak web sitenizin performansını düzenli olarak denetleyin. Farklı konumlardaki gerçek kullanıcılardan performans verileri toplamak için Gerçek Kullanıcı İzleme (RUM) uygulamayı düşünün.

Özel Metrikler için Kullanıcı Zamanlama API'sinden Yararlanma

Kullanıcı Zamanlama API'si, özel performans metrikleri tanımlamanıza ve belirli kod bölümlerinin yürütülmesinin ne kadar sürdüğünü ölçmenize olanak tanır. Bu, özel bileşenlerin veya belirli kullanıcı etkileşimlerinin performansını izlemek için yararlı olabilir.

Örnek: Özel Metriği Ölçme

// Ölçümü başlat performance.mark('start-custom-metric'); // Bir işlem gerçekleştir // ... kodunuz buraya ... // Ölçümü bitir performance.mark('end-custom-metric'); // Süreyi hesapla performance.measure('custom-metric', 'start-custom-metric', 'end-custom-metric'); // Ölçümü al const measures = performance.getEntriesByType('measure'); if (measures && measures.length > 0) { const customMetric = measures[0]; console.log('Özel Metrik Süresi:', customMetric.duration); }

Küresel Performans Analizleri için Gerçek Kullanıcı İzleme (RUM)

Sentetik testler (örneğin, Lighthouse kullanarak) değerli bilgiler sağlarken, Gerçek Kullanıcı İzleme (RUM), web sitenizin farklı konumlardaki ve çeşitli ağ koşullarındaki gerçek kullanıcılar için nasıl performans gösterdiğine dair daha doğru bir resim sunar. RUM, performans verilerini doğrudan kullanıcıların tarayıcılarından toplar ve sayfa yükleme süresi, TTFB ve hata oranları gibi temel metrikler hakkında bilgiler sağlar. Belirli kullanıcı segmentlerine özgü performans sorunlarını belirlemek için verileri coğrafya, cihaz, tarayıcı ve ağ türüne göre ayırmanıza olanak tanıyan RUM araçlarını kullanmayı düşünün.

Küresel RUM Uygulaması için Dikkat Edilmesi Gerekenler:

• Veri Gizliliği: Kullanıcı verilerini toplarken GDPR ve CCPA gibi veri gizliliği düzenlemelerine uyumu sağlayın. Mümkün olan yerlerde hassas verileri anonimleştirin veya takma ad kullanın.
• Örnekleme: Toplanan veri miktarını azaltmak ve kullanıcı performansı üzerindeki etkiyi en aza indirmek için örnekleme kullanmayı düşünün.
• Coğrafi Segmentasyon: Belirli konumlara özgü performans sorunlarını belirlemek için RUM verilerinizi coğrafi bölgeye göre ayırın.
• Ağ Koşulları: Ağ koşullarının kullanıcı deneyimini nasıl etkilediğini anlamak için farklı ağ türlerindeki (örneğin, 3G, 4G, Wi-Fi) performansı izleyin.

Doğru Araçları Seçmek

Sayfa yükleme metriklerini toplamanıza ve analiz etmenize yardımcı olabilecek birkaç araç vardır. Bazı popüler seçenekler şunlardır:

• Google PageSpeed Insights: Web sitenizin performansını analiz eden ve iyileştirme için öneriler sunan ücretsiz bir araç.
• WebPageTest: Web sitenizin performansını farklı konumlardan ve tarayıcılardan test etmenizi sağlayan ücretsiz bir araç.
• Lighthouse: Web sitenizin performansını, erişilebilirliğini ve SEO'sunu denetleyen açık kaynaklı bir araç. Chrome Geliştirici Araçları'na entegre edilmiştir.
• New Relic: Web sitenizin performansına ilişkin gerçek zamanlı bilgiler sağlayan kapsamlı bir izleme platformu.
• Datadog: Gerçek kullanıcı izleme ve sentetik test yetenekleri sunan bir izleme ve analiz platformu.
• Sentry: Performans sorunlarını belirlemenize ve düzeltmenize yardımcı olan bir hata izleme ve performans izleme platformu.

Sonuç

Frontend performansını optimize etmek, sürekli izleme, analiz ve optimizasyon gerektiren devam eden bir süreçtir. Frontend Performans API'sinden ve diğer araçlardan yararlanarak, web sitenizin performansına ilişkin değerli bilgiler edinebilir ve iyileştirme alanlarını belirleyebilirsiniz. Kitlenizin küresel doğasını göz önünde bulundurmayı ve farklı konumlardaki ve değişen ağ koşullarına sahip kullanıcılar için optimizasyon yapmayı unutmayın. Kullanıcı deneyimine odaklanarak ve performansı sürekli izleyerek, web sitenizin dünyanın neresinde olurlarsa olsunlar tüm kullanıcılar için hızlı ve duyarlı bir deneyim sunmasını sağlayabilirsiniz. Bu stratejileri uygulamak, küresel bir kitle için daha hızlı, daha ilgi çekici ve daha başarılı bir web sitesi oluşturmanıza yardımcı olacaktır.