Yayınlanma tarihi: 14 Ekim 2025
Interaction to Next Paint (INP), duyarlılığı ölçmek için kullanılan önemli bir Core Web Vital metriğidir. Google Search Console, Fotocasa'da 2024'te INP'nin First Input Delay'in (FID) yerini almasıyla birlikte "İyileştirilmesi gerekiyor" ve "Kötü" olarak değişen önemli sayıda sayfayı vurguladı. Bu örnek olay incelemesinde, bu sorunları teşhis etmek ve çözmek için kullanılan araçlar ve stratejiler özetlenmekte, sonuç olarak INP önemli ölçüde iyileştirilmektedir.
Fotocasa ekibinin başlangıç noktası
FID'den INP'ye geçişten önce hem masaüstü hem de mobil cihazlardaki neredeyse her sayfa "İyi" eşiğindeydi. Bu da o sırada tüm Core Web Vitals'ın (LCP, CLS ve FID) iyi performans gösterdiği anlamına geliyordu. Ancak INP'ye geçişten sonra, INP değerleri çoğu kullanıcı etkileşimi için sürekli olarak 200 milisaniyeyi aştığından neredeyse tüm sayfalar "İyileştirilmesi gerekiyor" ve hatta bazıları "Kötü" olarak değişti.
Bu değişiklik, Fotocasa ekibinin kullanıcı deneyiminin önemli bir yönünü gözden kaçırdığını fark etmesini sağladı. FID yalnızca ilk etkileşimin gecikmesini ölçerken INP, giriş işleme ve sunum gecikmelerini hesaba katarak tüm etkileşimlerin yanıt verme durumunu değerlendirir. Bu daha kapsamlı ölçüm, gerçek etkileşim için çok daha iyi bir temsilci (Google'ın belirttiği gibi) ve kaçırılan fırsatları vurguladı.
Google Search Console, alan performansı verileri sağlasa da gerçek zamanlı analizler sunmaz. Verileri 28 günlük bir dönemde toplanır. Bu nedenle, hangi etkileşimlerin o anda sorunlara neden olduğunu tam olarak belirlemek zordur.
En yavaş ve kullanıcılar tarafından en sık kullanılan etkileşimleri belirlemek ve bunları ekibin geliştirme ortamlarında güvenilir bir şekilde yeniden üretmek için INP'yi gerçek zamanlı olarak izlemenin bir yolu gerekiyordu. Hangi düzeltmelerin yardımcı olduğunu anlamanın yanı sıra, hangi ince ayarların istemeden durumu kötüleştirdiğini anlamak da aynı derecede önemliydi.
Bu nedenle, sorunların teşhis edilip çözülmesine yardımcı olmak için bir dizi araç kullanıldı. En önemli olanlar şunlardı:
- Google Chrome Geliştirici Araçları, özellikle Performans sekmesi.
- Fotocasa ekibi tarafından Datadog'da web-vitals kitaplığı kullanılarak oluşturulan özel bir RUM (Gerçek Kullanıcı İzleme) sistemi.
- React Geliştirici Araçları
Sorunu teşhis etmenize yardımcı olan araçlar
INP performansıyla ilgili sorunları teşhis etmek ve hata ayıklamak için aşağıdaki araçlar kullanıldı.
Google Chrome Geliştirici Araçları
Bir web uygulamasında Core Web Vitals ile ilgili sorunları tespit etmenin ve yeniden üretmenin mükemmel bir yolu, Google Chrome Geliştirici Araçları'ndaki Performans sekmesini kullanmaktır. Performans sekmesi, Core Web Vitals metriklerini otomatik olarak ölçer ve yükleme, etkileşim ve düzen kayması metrikleri hakkında anında geri bildirim sağlar. Bu metriklerin diğer Google araçlarına raporlanma şekliyle genel olarak tutarlıdır.
Fotocasa ekibi, INP sorunlarını belirleyip çözmek için genellikle CPU'yu kısıtlayarak düşük ve orta segment cihazların performansını simüle ederek işe başlıyordu. Bu sayede Fotocasa ekibi, sayfanın daha kısıtlı koşullarda nasıl davrandığını gözlemleyebildi. Ardından, oturum profil oluşturucu kullanılarak kaydedildi ve izler, performans sorunlarını belirlemek için kullanıcı etkileşimine odaklanılarak dikkatlice analiz edildi.
Darboğazları belirlerken INP alt bölümlerini ve tarayıcının her birinde gerçekleştirdiği görevleri incelemek özellikle yararlıdır. Örneğin, aşağıdaki resimde, belgenin gövdesindeki stil değişikliklerinden kaynaklanan iki stil yeniden hesaplaması nedeniyle INP'nin oldukça yüksek olduğu görülmektedir.
Fotocasa, INP ve diğer Core Web Vitals metriklerini izlemek için bir sistem kurarak performans sorunlarının hızlı bir şekilde tespit edilip çözülmesini sağladı. Bir metrik belirli bir eşiği aştığında (Google'ın tanımladığı aralıklara göre) ilişkilendirme kaydedilir. Böylece sorun analiz edilip çözülebilir.
Bu sistemde, bu metrikleri gerçek kullanıcılardan Chrome'un ölçme ve diğer Google araçlarına (ör. Chrome Kullanıcı Deneyimi Raporu, Page Speed Insights, Search Console'un Hız Raporu) bildirme şekliyle doğru şekilde eşleşecek şekilde yakalamak için web-vitals kitaplığı kullanıldı.
Kapsamlı bir görünüm ve merkezi izleme için Fotocasa, verileri toplamak ve görselleştirmek üzere Datadog'u kullandı. Böylece ekip, bilgiye dayalı ve veriye dayalı kararlar alabildi. Özel metrikler, maliyet verimliliğini korurken Fotocasa web sitesindeki neredeyse tüm kullanıcıları daha iyi izlemeyi mümkün kılıyor.
Bu sistem, Fotocase ekibinin değişikliklerinin metrikleri etkileyip etkilemediğini veya öngörülemeyen değişikliklerin oluşup oluşmadığını hızlı bir şekilde izlemesine olanak tanır. Bu değişiklikler, metrikleri tehlikeye atabilir. Ardından, etkileşimin hangi bölümünün uzun etkileşim sürelerinden esas olarak sorumlu olduğunu tam olarak belirlemek için INP metriği giriş gecikmesi, işleme süresi ve sunum gecikmesi gibi bölümlere ayrılabilir.
Fotocasa, 7 ve 8 numaralı şekillerde gösterilen anormallikleri tespit ettikten sonra hızlı bir şekilde yanıt verdi ve değişikliğin nerede olabileceğini belirlemeye yardımcı olan başka bir araç olan OpenSearch'ü kullandı. web-vitals kitaplığı tarafından sağlanan veriler, hedefi (yüksek metrik değerinden sorumlu olabilecek DOM öğesi) belirlemeye yardımcı oldu ve ekibin sorunu düzeltmeye daha fazla odaklanmasını sağladı.
Ayrıca, senaryoları kolaylaştırmak ve INP'nin nasıl etkilendiğini daha doğru bir şekilde anlamak için sayfa türü, cihaz veya yükleme durumu gibi çeşitli filtreler tanımlanabilir.
React Geliştirici Araçları
React Developer Tools, Fotocasa'nın hata ayıklama özelliklerini geliştirmek için kullanıldı. Bu araç, yeniden oluşturulan bileşenleri görsel olarak vurgulamanıza olanak tanıyan güçlü bir özellik sunar.
Bu özellik, Profiler sekmesine gidilerek etkinleştirilebilir. Buradan üst çubuğun sağ tarafındaki dişli simgesini tıklayın, Genel sekmesine gidin ve Bileşenler oluşturulduğunda güncellemeleri vurgula onay kutusunu işaretleyin. Bu seçenek etkinleştirildiğinde, bileşenler yeniden oluşturulduklarında vurgulanır ve dinamik bir görsel temsil sağlanır.
Yeniden oluşturmanın nedenini öğrenme
Yeniden oluşturulan bir bileşen tanımlandıktan sonraki soru "Neden oldu?" olur. React DevTools, bu soruyu alev grafiği görünümünde faydalı bir ipucuyla yanıtlar.
Bu bilgilere erişmek için bir profil oluşturma oturumu kaydedin. Profiler çıkışını analiz ederek aşağıdaki gibi faydalı bilgiler edinebilirsiniz:
- Sağ üst köşede, React commit'lerinin sayısı gösterilir.
- Alev grafiği, bileşen ağacını görsel olarak temsil eder. Gri renk, yeniden oluşturulmayan bileşenleri gösterir. Her çubuk, React bileşen ağacının değiştiği ve DOM'da ilgili değişikliğin yapıldığı bir anı temsil eder.
- Alev grafiğindeki her bileşenin üzerine geldiğinizde, Bu neden oluşturuldu? alt başlığı altında yeniden oluşturulma nedeni gösterilir.
Bir bileşenin yeniden oluşturulmasının nedenleri arasında şunlar yer alabilir:
- Bu, bileşenin ilk kez oluşturulduğu zamandır.
- Bağlam değişti
- Kancalar değiştirildi
- Özellikler değiştirildi
- Durum değiştirildi
- Üst bileşen oluşturuldu
Oluşturma süresini öğrenme
Alev grafiğindeki renkler anlamlı bilgiler verir. Mavinin çeşitli tonları gibi renkler, bir bileşenin diğer bileşenlere kıyasla nispeten kısa bir oluşturma süresi gerektirdiğini gösterir. Buna karşılık, turuncu ve kırmızı gibi renkler bir bileşenin daha fazla oluşturma süresi aldığını gösterir.
Fotocasa ekibi sorunu nasıl çözdü?
Gereksiz yeniden oluşturmaları kaldırın
Yeniden oluşturma işlemleri, React'in kullanıcı arayüzünü yeni verilerle güncellemesi gerektiğinde gerçekleşir. Bu genellikle bir kullanıcı işleminden, API yanıtından veya kullanıcı arayüzü güncellemesi gerektiren diğer önemli etkinliklerden kaynaklanır. Her yeniden oluşturma işlemi JavaScript'i çalıştırdığından, bunların aynı anda çok fazla olması (özellikle büyük bir bileşen ağacında) ana iş parçacığını engelleyebilir ve performans sorunlarına neden olabilir.
İki tür yeniden oluşturma vardır:
- Gerekli yeniden oluşturmalar: Bir bileşenin, yeni verileri kullandığı veya bu verilerin sahibi olduğu için gerçekten güncellenmesi gerektiğinde.
- Gereksiz yeniden oluşturmalar: Bir bileşen, genellikle verimsiz durum yönetimi veya uygunsuz özellik işleme nedeniyle anlamlı bir değişiklik olmadan güncellendiğinde.
React, kullanıcıların genellikle fark etmeyeceği kadar hızlı olduğundan birkaç gereksiz yeniden oluşturma genellikle büyük bir sorun teşkil etmez. Ancak bu işlemler çok sık gerçekleşirse veya büyük bir bileşen ağacında gerçekleşirse kullanıcı deneyimini olumsuz etkileyebilir ve sayfanın INP'sini düşürebilir.
Fotocasa ekibi için de durum böyleydi. Web sitesinde birçok gereksiz yeniden oluşturma işlemi olduğunu fark ettiler. Bu durumlar iki ana senaryoda meydana geldi:
- Sayfa yükleme sırasında: Ana iş parçacığındaki uzun görevlerin sayısını artırma ve ilk etkileşimi geciktirme, bu durum sayfanın INP'sini olumsuz etkiledi.
- Kullanıcı etkileşimleri sırasında: Çoğu etkileşimin işleme süresinin artması, INP'ye de zarar verdi.
Fotocasa web sitesinde çok sayıda gereksiz yeniden oluşturma işlemi optimize edildi. Gerçekleştirilen en büyük optimizasyonlardan biri Arama sayfasında yapıldı. Sayfa yüklenirken üç gereksiz yeniden oluşturma işlemi yapıldı. Bunlar kaldırıldıktan sonra aşağıdaki sonuçlar gözlemlendi:
- Daha az sayıda uzun görev (aşağıdaki şekle bakın)
- Daha az toplam engelleme süresi (Şekil 14 ve 15'i karşılaştırın)
Eyalet ortak yerleşimi
React durumunun yanlış yerleştirilmesi, uygulamanın yavaşlamasına ve kullanıcı arayüzünün yanıt vermiyormuş gibi görünmesine neden olabilir. Bir bileşenin durumu değiştiğinde, bir kaçış yolu (ör. memo) kullanılmadığı sürece alt bileşenleri varsayılan olarak yeniden oluşturulur.
Önceki bölümde açıklandığı gibi, yeniden oluşturma işlemi doğası gereği kötü değildir ancak belirli bir durum güncellemesi nedeniyle tüm sayfanın yeniden oluşturulması, DOM güncellemeleri oluşturma işleminden sonra gerçekleştiği için etkileşimlerin yavaşlamasına neden olabilir.
Örneğin, arama sayfasında bir düğme tıklandığında tüm filtreleri gösteren bir iletişim kutusu bulunur.
Bu durumda iletişim kutusunun açık durumunu kontrol eden durum, arama sayfasına yerleştirildi. Bu durum değiştiğinde sayfanın tamamı yeniden oluşturuluyordu. Bu da özellikle daha yavaş cihazlarda kötü bir INP'ye neden oluyordu. Bu durum, Geliştirici Araçları'nda CPU sınırlaması kullanıldığında görülüyordu:
Durumu, değişikliği tetikleyen bileşene mümkün olduğunca yakın bir şekilde değiştirmek bu sorunu çözer. Bu durumda, durum filtrelerin düğme bileşenine yerleştirilebilir. Böylece durum değiştiğinde yalnızca düğme yeniden oluşturulur.
Gereksiz durumları kaldırın
Durumlar gereksiz veya yinelenen bilgiler içermemelidir. Bu durumda, gereksiz yeniden oluşturmalar gerçekleşebilir ve sorunlar ortaya çıkabilir.
Örneğin, Fotocasa filtre çubuğunda belirli bir arama için uygulanan filtre sayısını gösteren bir metin bulunur:
Uygulanan filtrelerin sayısı, uygulamanın durumuna göre hesaplanır. Ancak bu durum yalnızca bileşenin tamamının gereksiz yere yeniden oluşturulmasına neden olmakla kalmadı, aynı zamanda belirli durumlarda bu bileşen sunucu tarafında oluşturulduğu için düzen kaymasına da yol açtı:
const [filtersCount, setFiltersCount] = useState(DEFAULT_COUNTER)
useEffect(() => {
const counter = filters
? Object.keys(filters)
?.reduce(reducerCounter, [])
?.filter((param) => searchParams?.[param]).length
: DEFAULT_COUNTER
setFiltersCount(counter)
}, [searchParams]);
Bu sorunu çözmek için değer, durum yerine bir değişken kullanılarak filtreler nesnesinden türetildi:
const counter = filters
? Object.keys(filters)
?.reduce(reducerCounter, [])
?.filter((param) => searchParams?.[param]).length
: DEFAULT_COUNTER;
Pahalı oluşturma işlemlerini azaltma
React uygulamasında bir etkileşim gerçekleştiğinde normalde bir durum değişikliği tetiklenir. Daha önce açıklandığı gibi, bir bileşenin durumu değiştiğinde bileşen, tüm alt bileşenleriyle birlikte yeniden oluşturulur.
Bu bileşenlerden birinin oluşturma işlevleri yavaşsa uzun bir görev oluşturulacağı ve DOM'un güncellenmesi daha uzun süreceği için sayfanın INP'si olumsuz etkilenir.
Fotocasa ekibi, bileşenlerin oluşturma işlevindeki zaman alan hesaplamaları mümkün olduğunca en aza indirmeye çalıştı. Yavaş oluşturma işlemlerini tespit etmek için Chrome Geliştirici Araçları ve React Geliştirici Araçları oldukça faydalı oldu.
Kod yürütmeyi geciktirme
Bileşenlerin oluşturma işlevini optimize etmenin yanı sıra, uzun görevleri mümkün olduğunca en aza indirmek için diğer işlevler de optimize edildi. Ancak bazı görevler üçüncü taraf koduna bağlı olduğundan optimize edilemedi.
Buna örnek olarak analizleri verebiliriz. Bu durumda, kullanıcı etkileşimleri gerçekleştiğinde Analytics kodunun yürütülmesini geciktirmeye ve DOM güncellemelerine öncelik vermeye karar verildi. Fotocasa ekibi bu amaca ulaşmak için idlefy adlı bir kitaplık kullandı. Bu kitaplık, tarayıcı hemen kapatılsa bile analiz kodunun çalışmaya devam etmesini sağladı.
Performans kültürü
Performans çalışmaları tek seferlik bir çaba değildir. Üretime sunulan her özellik için dikkate alınması gerekir. Ekipteki herkesin uyumlu olması gerekir. Aksi takdirde, Core Web Vitals'da gerileme yaşanması neredeyse kaçınılmazdır.
Bu durumu kontrol altında tutmak için Fotocasa ekibi, ekip içinde aktif olarak bilgi paylaşımında bulundu ve Fotocasa'nın Datadog RUM verilerine dayalı olarak performans sorunlarını belirlemek için net bir çerçeve oluşturdu. Bu çerçeve, sorunların nasıl yeniden üretileceğini de içeriyordu. RUM sisteminde, özellikle INP olmak üzere Core Web Vitals ile ilgili uyarılar ayarlandı ve Fotocasa ekibini doğrudan Slack'te bilgilendirecek şekilde yapılandırıldı. Bu yaklaşım, performansı ön planda tuttu ve sorunların gerilemeye dönüşmeden önce yakalanmasına yardımcı oldu.
Sonuçlar
Fotocasa'da INP'yi iyileştirmek için teknik optimizasyonlar ve kültürel değişiklikler bir arada kullanıldı. Fotocasa ekibi, gereksiz yeniden oluşturmaları ortadan kaldırarak, durum yerleşimini optimize ederek, maliyetli oluşturmaları azaltarak ve kritik olmayan kodu erteleyerek tüm masaüstü sayfalarını "iyileştirme gerekiyor"dan "iyi"ye taşımayı başardı. Ayrıca, neredeyse tüm "kötü" ve "iyileştirme gerekiyor" sayfalarını "iyi"ye yükselterek mobil sayfaları önemli ölçüde iyileştirdi.
Bu değişiklikler, Fotocasa'nın genel kullanıcı deneyimini iyileştirdi ve diğer girişimlerle birlikte iletişim ve telefon potansiyel müşterisi reklamlarında% 27 artış sağlayarak şirketin temel iş metriklerini doğrudan güçlendirdi.
Datadog ile gerçek zamanlı izleme sayesinde Fotocasa ekibi, INP iyileştirmelerini doğrulayabildi, anormallikleri hızlıca tespit edebildi ve regresyonları önleyebildi. Fotocasa, bu başarıların yanı sıra web performansını geliştirme kültürüne yerleştirmeyi de başardı. Böylece, INP ve Core Web Vitals'ın her sürümde öncelikli olmasını sağladı.