- PageSpeed Insights
AI tarafından çevrilmiş metin.
뚠뚠멍의 생각들
Web Sitesi Performansını Ölçme - PerformanceObserver
- Yazım Dili: Korece
- Referans Ülke: Tüm Ülkeler
durumis AI tarafından özetlenen yazı
- Web sitesi performansını iyileştirmek için Web performans ölçüm araçlarını (PageSpeed Insights, Lighthouse) kullanmak, arama motoru görünürlüğünü artırır ve Web Core Vitals metrikleri önemlidir.
- CLS, LCP, FCP, FID gibi metrikleri iyileştirmek için UI iskeleti, resim optimizasyonu, işlemeyi engelleyen öğelerin kaldırılması, web yazı tipi optimizasyonu, JavaScript'in eşzamansız işlenmesi gibi yöntemler uygulanabilir.
- Her bir metrik iyileştirme yöntemi ile birlikte web performansını artırmak için çeşitli teknikler (gzip sıkıştırması, web işçileri vb.) tanıtılır ve gelecekte ilgili konular daha derinlemesine ele alınacaktır.
Google tarafından sağlanan bir site aracılığıyla
web performansını kolayca ölçebilirsiniz.
https://pagespeed.web.dev/
adresini girerek ölçebilirsiniz veya Chrome uzantısı olarak Lighthouse'ı (Lighthouse) yükleyerek ölçebilirsiniz.
Göstergeleri iyileştirmenin faydaları nelerdir?
Arama motorlarında daha iyi görünürlük elde edebilirsiniz. SEO (Arama Motoru Optimizasyonu) nedeniyle sunucu tarafı işleme (server-side rendering) sıklıkla kullanılır,
Ancak yukarıdaki performans göstergeleri düşükse, bu etki azalacaktır.
Nasıl iyileştirilir?
web.dev sitesinde, her bir göstergenin nasıl iyileştirilebileceği ayrıntılı olarak açıklanmıştır.
Özellikle 3 gösterge puanda büyük bir paya sahiptir. (Web Core Vitals)
Göstergeleri iyileştirmek için denediğim şeyleri kaydetmek istiyorum.
Yerel olarak nasıl ölçülür?
export default () => { if (process.client && 'PerformanceObserver' in window) { let cumulativeLayoutShiftScore = 0; let largestContentfulPaint = 0; let firstInputDelay = 0; let firstContentfulPaint = 0;
// CLS const clsObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (!entry.hadRecentInput) { cumulativeLayoutShiftScore += entry.value; } }); }); // LCP const lcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; largestContentfulPaint = lastEntry.startTime; }); // FID const fidObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstInputDelay = firstEntry.processingStart - firstEntry.startTime; }); // FCP const fcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstContentfulPaint = firstEntry.startTime; }); clsObserver.observe({ type: 'layout-shift', buffered: true }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); fidObserver.observe({ type: 'first-input', buffered: true }); fcpObserver.observe({ type: 'paint', buffered: true }); window.addEventListener('onload', () => { console.log('Final CLS Score:', cumulativeLayoutShiftScore); console.log('LCP:', largestContentfulPaint); console.log('FID:', firstInputDelay); console.log('FCP:', firstContentfulPaint); }); } };
Yukarıdaki kodu ekleyin. Nuxt (Nuxt) kullanıyorsanız, eklentilere (plugins) yerleştirin ve konsol çıktısını kontrol edin.
Kümülatif Düzen Kayması (Cumulative Layout Shift - CLS)
İşleme sırasında düzenin değişme derecesini ölçer.
Örneğin, API yanıtını kullanarak bir resim URL'si alan ve 400x400 boyutunda bir resim işleyen bir sayfa olduğunu varsayalım,
Bazı düzenler, resmin işlenmesiyle birlikte 400 piksel kadar kayacaktır.
Bu, kullanıcının beklemediği bir harekettir ve kullanıcı deneyimine (UX) zarar verir, ayrıca tarayıcı da ekranı işlerken
dolaylı olarak olumsuz etkilenir.
İyileştirme için iki kolay yol vardır.
1. Kullanıcı Arayüzü İskeleti Uygulamak
- Çoğu site, resim boyutuna veya bileşen boyutuna uygun iskeletleri düzgün bir şekilde çizer. Ekran geliştirilirken bu nokta dikkate alınır. Vue (Vue) kullanıyorsanız, her bir öğeye uygun iskeleti çizmek için v-if ve v-else'i (v-if ve v-else) kullanabilirsiniz.
2. Yüksekliği Rezerv Etmek
- İskelete çok fazla stil eklenirse, bakım karmaşıklaşabilir ve ters etki yaratabilir. Sadece işlenecek öğenin minimum yüksekliğini (min-height) belirlemek bile etkili olabilir.
- Duyarlı web (responsive web) gibi resim boyutunun cihaza göre değiştiği durumlarda, yüksekliği sabit bir şekilde belirlemek zordur. Bu durumda, en küçük cihazı veya vh veya vw'yi (vh veya vw) referans alabilirsiniz.
3. Resim Öğelerine Genişlik ve Yükseklik Belirtmek
- Resim öğesine genişlik ve yükseklik şu şekilde eklenebilir:
<img src="image.jpg" width="400" height="400">
Resmin gerçek boyutu 400x400 olmasa bile, tarayıcıya resmin beklenen boyutunu bildirir.
4. Web Yazı Tiplerinden Kaynaklanan Düzen Değişikliklerini Önlemek İçin font-display: swap Kullanmak
- Yedek yazı tipi belirterek düzen kaymasını engeller.
En Büyük İçerik Boyutu (Largest Contentful Paint - LCP)
Ekranda en büyük alanı kaplayan öğenin işlenmesinin ne kadar sürdüğünü gösterir. Genellikle resim olur, bu nedenle sezgisel olarak yükleme hızını artırmanız gerekir.
1. Resim boyutunu küçültün.
- İşleme boyutuna göre resim boyutunun büyük olup olmadığını kontrol edin.
- WebP (WebP) gibi uzantılarla resim işlemeyi optimize edin. WebP, kayıplı sıkıştırma kullanıldığında JPEG formatından yaklaşık %30 daha küçük bir dosya boyutuna sahipken, kayıpsız sıkıştırma kullanıldığında PNG'den (PNG) yaklaşık %20 daha küçük bir boyuta sahiptir.
- Kaydırma konumuna göre yüklenen tembel yüklemeyi (lazy loading) de düşünebilirsiniz.
2. Önbelleğe alma (caching) veya CDN (Content Delivery Network) kullanın.
3. İşlemeyi engelleyen öğeleri kaldırın.
- Çoğu ölçüm göstergesi bundan etkilendiği için mutlaka kaldırılmalıdır. Tarayıcı, ekranı işlerken başlık (head) etiketindeki komut dosyalarını (script) önce alır ve ardından işleme işlemine başlar, bu nedenle başlık (head) etiketindeki komut dosyalarının (script) (genellikle harici komut dosyaları) önce işlenmesi gerekip gerekmediğini kontrol edin. Bununla ilgili olarak, async ve defer etiketlerini kullanarak kolayca yönetebilirsiniz.
* Başlık (head) içindeki komut dosyası (script) öznitelikleriyle ilgili olarak daha sonra başka bir yazı yazacağım.
4. Paket boyutunu en aza indirin.
- Resimlerin işlenme hızının yavaş olmasıyla ayrı olarak, sunucudan iletim yavaşsa, bunu iyileştirmeniz gerekecektir.
Nginx (Nginx) gibi bir proxy sunucusu kullanıyorsanız, gzip sıkıştırmasını (gzip compression) kullanabilirsiniz.
* Nginx (Nginx) ayarlarıyla ilgili olarak daha sonra başka bir yazı yazacağım.
İlk İçerik Boyutu (First Contentful Paint - FCP)
Sayfada ilk içeriğin işlendiği anı gösterir.
1. Benzer şekilde, işlemeyi engelleyen öğeleri kaldırın.
2. HTML boyutunu en aza indirin.
- Kontrolsüz bir şekilde div div etiketleriyle sarmak, çok fazla iç içe geçmiş bir ağaç oluşturur ve dosya boyutunu artırır.
3. Harici web yazı tipleri sorun olabilir. font-display: swap; özelliğini aktif olarak kullanarak varsayılan yazı tipini önce işleyin.
İlk Giriş Gecikmesi (First Input Delay - FID)
Kullanıcının sayfada ilk girdiyi (tıklama, kaydırma vb.) gerçekleştirdiği anda tarayıcının bunu işleme süresini gösterir. Bazen bir düğmeye basıldığında yanıt verilmeyebilir, ancak aslında yanıt verilmemesi değil, API yanıtının bekleniyor olması olabilir.
1. Eşzamansızlığı (asynchronous) doğru bir şekilde kullanarak JavaScript ana iş parçacığının (main thread) ağır işlere takılmamasını sağlayın.
2. Ana iş parçacığından (main thread) ayrı olarak, web işçileri (web worker) kullanarak başka işler yapılabilir.
* Web işçileri (web worker) hakkında daha sonra başka bir yazı yazacağım.
Karakter sayısı sınırlaması nedeniyle burada sonlandırıyorum.
