Core Web Vitals optimizasyonu için mükemmel Chrome Network panel ayarları
Chrome DevTools network panelini maksimum verimlilik için yapılandırın
Core Web Vitals Optimizasyonu için Mükemmel Chrome Network Panel Ayarları
Chrome DevTools Network paneli, Core Web Vitals'ı optimize etmeyi hedefleyen web geliştiricileri için vazgeçilmez bir araçtır. Ne yazık ki varsayılan ayarlar, hız optimizasyonu için en iyi ayarlar değildir. Doğru ayarları yapılandırarak gerçek dünya koşullarını doğru bir şekilde simüle edebilir ve web sitenizin performansı hakkında daha iyi bilgiler elde edebilirsiniz. Bu kılavuz, Core Web Vitals puanlarınızı analiz etmek ve iyileştirmek için ideal Chrome DevTools network panel kurulumunu adım adım anlatacaktır.
Table of Contents!
Network Panelini Yapılandırma
Network paneline erişmek için Chrome DevTools'u açın (F12 veya Ctrl+Shift+I) ve "Network" sekmesine tıklayın.
Throttling
Core Web Vitals optimizasyonu için en önemli ayarlardan biri network throttling'dir. Bu, kullanıcılarınızın karşılaşabileceği çeşitli ağ koşullarını simüle etmenizi sağlar.
Network panelindeki "No throttling" açılır menüsüne tıklayın. "Fast 4g", "Slow 4g" veya "3G" seçeneklerinden birini seçerek mobil ağ koşullarını simüle edin. En iyi seçenek hedef kitlenize bağlıdır. Hedef kitleniz genellikle hızlı ağ koşullarında üst düzey mobil cihazlar kullanıyorsa "Fast 4G"yi etkinleştirin. Tipik ağ koşulları biraz daha zayıfsa "Slow 4G"yi seçin aksi takdirde güvenli tarafta kalın ve "3G"yi seçin
Önbelleği Devre Dışı Bırakma
Sitenizi ilk kez ziyaret eden bir kullanıcının deneyimleyeceği şekilde test ettiğinizden emin olmak için: Network panelindeki "Disable cache" onay kutusunu işaretleyin.
Big Request Rows'u Etkinleştirme
Big request rows, her istek için daha kapsamlı bir görünüm sağlar. Size vereceği en önemli yeni bilgiler şunlardır:
- size sütunu artık isteğin sıkıştırılmamış ve sıkıştırılmış boyutunu gösterecektir.
- name sütunları yol hakkında bilgi verecektir.
- priority sütunu size başlangıç ve son fetch priority'yi gösterecektir.
Ekran Görüntülerini Etkinleştirme
Ekran görüntülerini etkinleştirdiğinizde Chrome, sayfa yüklemeleri sırasında ekran görüntüleri yakalayacaktır. Her ekran görüntüsü sayfadaki görsel bir değişikliği temsil eder ve sayfa yüklemesinin farklı aşamalarını anlamak ve Cumulative Layout Shift'leri tespit etmek için kullanılabilir.
- Network sekmesi odaktayken sayfayı yenilemek için Ctrl+F5 (Mac'te Cmd+R) tuşlarına basın.
- Chrome, sayfa yükleme işlemi sırasında ekran görüntüleri yakalayacaktır.
- Bu ekran görüntülerinin küçük resimleri, Network panelindeki onay kutuları satırının altında görünecektir.
Ekran görüntüsü genel görünümünün henüz bilmediğiniz bazı kullanışlı küçük özellikleri vardır:
- Bir ekran görüntüsünün ne zaman yakalandığını görmek için üzerine gelin. Bu, Genel Bakış grafiğinde sarı bir dikey çizgi ile gösterilecektir.
- O ekran görüntüsü alındıktan sonra gerçekleşen istekleri filtrelemek için bir ekran görüntüsü küçük resmine tıklayın.
- Yakınlaştırmak ve ekran görüntüsünü daha ayrıntılı görmek için bir küçük resme çift tıklayın.
En iyi network sütunlarını etkinleştirme
Core Web Vitals sorunlarını bulmak için aşağıdaki paneller size yararlı bilgiler verecektir. Herhangi bir sütun adına sağ tıklayıp tercih ettiğiniz sütunları seçmeniz yeterlidir
Ardından Core Web Vitals için önem taşıyan aşağıdaki sütunları etkinleştirin:
| Sütun Adı | Açıklama | Core Web Vitals için Önemi |
|---|---|---|
| Name | İstek adı | Kaynakları tanımlama |
| Status | HTTP durum kodları | 200 olmayan kodları izleme (yönlendirmeleri bulmak için 301 ve 302, var olmayan kaynaklar için 404 / 410) |
| Protocol | Kullanılan ağ protokolü | Performans için HTTP/3'ü önceliklendirme |
| Domain | Kaynak alan adı | Üçüncü taraf kaynakları tanımlama |
| Type | Kaynak türü | İstekleri kategorize etme |
| Initiator | İstek tetikleyicisi | İstek kaynaklarını anlama |
| Size | Transfer ve gerçek boyut | Büyük istekleri tanımlama |
| Priority | Kaynak yükleme önceliği | Doğru önceliklendirmeyi sağlama |
| Waterfall | İsteklerin görsel zaman çizelgesi | Yükleme sırasını analiz etme |
Bu Özel Yanıt Başlıklarını Etkinleştirin:
Bu Özel Yanıt Başlıklarını Etkinleştirin:
| Sütun Adı | Açıklama | Core Web Vitals için Önemi |
|---|---|---|
| Cache-Control | Kaynak önbellekleme davranışı | Kaynakları tanımlama |
| Link | Link yanıt başlığı | Preloading veya prefetch başlıklarını kontrol etme |
| Content-Encoding | Kullanılan kodlama | Kaynak sıkıştırmasını doğrulama |
Sonuç:
Şimdi sayfayı yeniden yükleme ve Chrome'un network sekmesindeki yeni ve geliştirilmiş ağ yanıtını görme zamanı. Aşağıdaki gibi görünecek ve Core Web Vitals hata ayıklamasına başlamak için ihtiyacınız olan tüm bilgileri gösterecektir!
Stop debating in Jira.
Get a definitive answer on your performance issues. I deliver a granular breakdown of your critical rendering path.
- Definitive Answers
- Granular Breakdown
- Critical Path Analysis
