Next.js Destekli Bir E-Ticaret Web Sitesinde CLS Sorunlarını Çözme (Örnek Olay)

Fairprice, Singapur'daki en büyük çevrimiçi marketlerden biridir. Kullanıcının çevrimiçi alışveriş deneyimini geliştirmek için sürekli olarak fırsat alanları arıyoruz. Performans, cihazlarından veya ağ bağlantılarından bağımsız olarak kullanıcılarımızın keyifli bir kullanıcı deneyimi yaşamalarını sağlamak için temel unsurlardan biridir.

Web sayfasının yaşam döngüsü boyunca farklı noktaları ölçen (TTFB, domInteractive ve onload gibi) birçok temel performans göstergesi (KPI) vardır, ancak bu metrikler son kullanıcının sayfayı nasıl deneyimlediğini yansıtmaz.

Son kullanıcıların gerçek deneyimine çok yakın olan birkaç KPI kullanmak istedik, bu nedenle bu KPI'lardan herhangi biri iyi performans göstermiyorsa, bunun son kullanıcı deneyimini doğrudan etkileyeceğini biliyoruz. Kullanıcı merkezli performans ölçümlerinin bu amaç için mükemmel bir uyum sağladığını gördük.

Bir sayfanın yaşam döngüsündeki farklı noktaları ölçmek için FCP, LCP, FID, CLS vb. gibi birçok kullanıcı merkezli performans metriği vardır. Bu vaka çalışması için esas olarak CLS'ye odaklanacağız.

CLS, sayfanın yüklenmeye başladığı andan kaldırılana kadar gerçekleşen tüm beklenmedik düzen kaymalarının toplam puanını ölçer.

“

Bu nedenle, bir sayfa için düşük bir CLS değerine sahip olmak, kullanıcının hayal kırıklığına uğramasına neden olan rastgele düzen kaymaları olmamasını sağlar. Barry Pollard, CLS hakkında mükemmel bir derinlemesine makale yazmıştır.

Ürün Sayfamızda CLS Sorununu Nasıl Keşfettik?

CLS'yi ölçmek için performans için sentetik test araçlarımız olarak Lighthouse ve WebPagetest kullanıyoruz. Gerçek kullanıcılar için CLS'yi ölçmek için web-vitals kitaplığını da kullanıyoruz. Bunun dışında, herhangi bir sayfamızdaki olası CLS sorunları hakkında fikir edinmek için Google Arama Konsolu Önemli Web Verileri Raporu bölümünü kontrol ediyoruz. Rapor bölümünü incelerken, ürün detay sayfasındaki birçok URL'nin 0.1'den fazla CLS değerine sahip olduğunu ve orada bazı önemli düzen kayması olayı olduğunu ima ettiğini gördük.

Farklı Araçları Kullanarak CLS Sorununda Hata Ayıklama

Artık ürün detay sayfasında bir CLS sorunu olduğunu bildiğimize göre, sonraki adım buna hangi öğenin neden olduğunu belirlemekti. İlk başta, sentetik test araçlarını kullanarak bazı testler yapmaya karar verdik.

Bu yüzden, büyük bir yerleşim değişikliğini tetikleyebilecek herhangi bir öğe bulup bulamayacağını kontrol etmek için deniz fenerini çalıştırdık, CLS'yi oldukça düşük olan .004'e bildirdi.

Lighthouse rapor sayfasının bir teşhis bölümü vardır. Bu aynı zamanda yüksek bir CLS değerine neden olan herhangi bir öğe göstermedi.

Ardından WebpageTest'i çalıştırdık ve film şeridi görünümünü kontrol etmeye karar verdik:

Bu özelliği çok yararlı buluyoruz çünkü hangi zaman noktasında hangi öğenin yerleşimin değişmesine neden olduğunu bulabiliyoruz. Ancak, herhangi bir düzen değişikliğinin vurgulanıp vurgulanmadığını görmek için testi çalıştırdığımızda, devasa LCS'ye katkıda bulunan hiçbir şey yoktu:

CLS'nin tuhaflığı, sayfanın tüm kullanım ömrü boyunca bireysel mizanpaj kaydırma puanlarını kaydetmesi ve bunları eklemesidir.

“

Not : CLS'nin ölçülme şekli Haziran 2021'den beri değiştirilmiştir.

Lighthouse ve WebpageTest, büyük bir düzen değişikliğini tetikleyen herhangi bir öğe algılayamadığından, bu, muhtemelen bazı kullanıcı eylemleri nedeniyle ilk sayfa yüklendikten sonra gerçekleştiği anlamına gelir. Bu nedenle, kullanıcı etkileşimde bulunurken bir sayfada CLS kaydedebildiği için Web Vitals Google Chrome uzantısını kullanmaya karar verdik. Farklı eylemler gerçekleştirdikten sonra, kullanıcı görüntü büyütme özelliğini kullandığında düzen kaydırma puanının arttığını gördük.

İmleç görüntü üzerindeyken düzen kaymasının oluşup oluşmadığını çapraz doğrulamak için, düzen kayması gerçekleştiğinde console.log ekleyen https://web.dev/cls/ adresinden aşağıdaki kod parçasını kullandık:

 let cls = 0; new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { if (!entry.hadRecentInput) { cls += entry.value; console.log('Current CLS value:', cls, entry); } }}).observe({type: 'layout-shift', buffered: true});

Daha fazla araştırma yaptığımızda, ASDA'nın benzer bir sorunla karşılaştığını ve krom için gündeme getirdiğini gördük.

Ana neden

Ürün detay sayfasında, bu video tam olarak neden bahsettiğimizi gösterdiğinden, kullanıcılar resmin yakınlaştırılmış bir bölümünü gerçek ürün resmiyle yan yana görüntülemek için fareyi ürün resminin üzerinde hareket ettirebilir.

Görüntü büyütme özelliği, kullanıcılarımızın ürünün görünümünü ve hissini elde etmelerine ve satın almak istedikleri ürünün doğru çeşidi olduğundan emin olmalarına yardımcı olur.

Bu görüntü büyütme işlevini oluşturmak için react-image zoom kitaplığını kullandık.

Görüntü Büyüt kitaplıklarında genellikle bir mercek bulunur (fare görüntü içinde hareket ettiğinde hareket eden bir kare). Bu lens, fare hareketi ile üst ve sol konumunu değiştirdiği için, CLS'yi tetikleyen bir düzen kayması olarak algılanıyor. Kitaplık sayfasını ve diğer benzer tepki kitaplıklarını ( react-image-magnify , react-image-zoom , react-image-magnifiers ) kontrol ettik ve hepsinin aynı CLS sorunundan muzdarip olduğunu gördük.

Nasıl Düzelttik

React-image- react-image-zoom js-image-zoom kitaplığını kullandığını fark ettik. Bu yüzden sorunu çözmek için js-image zoom kitaplığını değiştirmek zorunda kaldık.

Çözüm oldukça basit. Fare ürün resmi üzerinde hareket ederken, resim lens elemanı sol ve üst konumunu değiştirerek hareket eder. Sorunu çözmek için, elemanı yeni bir katmana taşıyan transform translate kullandık, yani bu yeni katmanda gerçekleşen herhangi bir hareket artık düzen kaymasına neden olmaz:

Ayrıca, bu kitaplığı kullanan diğer geliştiricilerin CLS sorunundan kurtulabilmesi için orijinal depoya bir PR oluşturdum.

Değişimin Etkisi

Kod üretime dağıtıldıktan sonra, ürün ayrıntıları sayfasında CLS düzeltildi ve CLS'den etkilenen sayfa sayısı %98 oranında azaldı:

transform kullandığımızdan, görüntünün büyütülmesine de yardımcı oldu, kullanıcılara daha sorunsuz bir deneyim yaşattı.

Not : Paul Irish bu konuda mükemmel bir makale yazmıştır.

CLS İçin Yaptığımız Diğer Önemli Değişiklikler

Web sitemizdeki birçok sayfada CLS'ye katkıda bulunan başka sorunlar da var. Şimdi bu öğeleri ve bileşenleri inceleyelim ve bunlardan kaynaklanan düzen kaymalarını nasıl azaltmaya çalıştığımızı görelim.

• Web yazı tipleri:
  Yazı tiplerinin geç yüklenmesinin, içeriğin yanıp sönmesi nedeniyle kullanıcı hayal kırıklıklarına neden olduğunu ve ayrıca bir miktar düzen kaymasına neden olduğunu fark ettik. Bunu en aza indirmek için birkaç değişiklik yaptık:

  • Yazı tiplerini 3. taraf CDN'den yüklemek yerine kendimiz barındırdık.
  • Yazı tiplerini önceden yüklüyoruz.
  • Yazı tipi gösterimini isteğe bağlı olarak kullanıyoruz.

• Görüntüler:
  Görüntüde eksik yükseklik veya genişlik değeri, görüntü yüklendikten sonra görüntüden sonraki öğenin kaymasına neden olur. Bu, CLS'ye önemli bir katkıda bulunur. Next.js kullandığımız için next/images adlı yerleşik görüntü bileşeninden yararlandık. Bu bileşen, görüntüyle ilgili birkaç en iyi uygulamayı içerir. <img> HTML etiketi üzerine kuruludur ve LCP ve CLS'nin iyileştirilmesine yardımcı olabilir. Kullanmanın temel özelliklerini ve avantajlarını öğrenmek için bu RFC'yi okumanızı şiddetle tavsiye ederim.

• Sonsuz kaydırma:
  Web sitemizde ürün listeleme sayfalarında sonsuz kaydırma vardır. Bu nedenle, başlangıçta, kullanıcılar sayfanın en altına kaydırdıklarında, bir sonraki veri kümesi yüklenmeden önce birkaç saniye boyunca bir altbilgi görürler, bu da düzen kaymalarına neden olur. Bunu çözmek için birkaç adım attık:

  • Kullanıcı listenin mutlak sonuna ulaşmadan önce bile verileri yüklemek için API'yi çağırırız.
  • Yükleme durumu için yeterli alan ayırdık ve yükleme durumu sırasında ürün iskeletlerini gösteriyoruz. Artık kullanıcı sayfayı kaydırdığında, ürünler yüklenirken birkaç saniye boyunca altbilgiyi görmüyor.
    

Addy Osmani, kontrol etmenizi şiddetle tavsiye ettiğim bu yaklaşım hakkında ayrıntılı bir makale yazdı.

Önemli Çıkarımlar

• Lighthouse ve WebpageTest, sayfa yüklenene kadar meydana gelen performans sorunlarını keşfetmeye yardımcı olurken, sayfa yüklendikten sonra performans sorunlarını tespit edemezler.
• Web Vitals uzantıları, kullanıcı etkileşimleri tarafından tetiklenen CLS değişikliklerini algılayabilir; bu nedenle, bir sayfanın CLS değeri yüksekse ancak Lighthouse veya WebpageTest, CLS'nin düşük olduğunu bildirirse, Web Vitals uzantısı sorunu saptamaya yardımcı olabilir.
• Google Arama Konsolu verileri, gerçek kullanıcıların verilerine dayanmaktadır, bu nedenle, bir sayfanın yaşam döngüsünün herhangi bir noktasında meydana gelen potansiyel mükemmel sorunlara da işaret edebilir. Bir sorun tespit edilip giderildiğinde, rapor bölümünü tekrar kontrol etmek performans düzeltmesinin etkinliğini doğrulamaya yardımcı olabilir. Değişiklikler, web vitals rapor bölümünde günler içinde yansıtılır.

Son düşünceler

CLS sorunlarının hatalarını ayıklamak nispeten daha zor olsa da, sayfa yüklenene kadar farklı araçların (Lighthouse, WebPageTest) ve Web Vitals uzantısının (sayfa yüklendikten sonra) bir kombinasyonunu kullanmak sorunu tam olarak belirlememize yardımcı olabilir. Aynı zamanda, çok çeşitli senaryoları kapsayacak şekilde çok sayıda aktif geliştirmeden geçen metriklerden biridir ve bu, gelecekte nasıl ölçüldüğünün değişeceği anlamına gelir. Yaklaşan değişiklikleri öğrenmek için https://web.dev/evolving-cls/ adresini takip ediyoruz.

Bize gelince, diğer Temel Web Verilerini de geliştirmek için sürekli çalışıyoruz. Son zamanlarda, duyarlı görüntü ön yüklemesini uyguladık ve görüntüleri WebP formatında sunmaya başladık, bu da görüntü yükünün %75'ini, LCP'yi %62 ve Hız Endeksini %24 oranında azaltmamıza yardımcı oldu. LCP ve Hız İndeksi'ni iyileştirmek için optimizasyonla ilgili daha fazla ayrıntıyı okuyabilir veya yaptığımız diğer heyecan verici çalışmalar hakkında bilgi edinmek için mühendislik blogumuzu takip edebilirsiniz.

Ürün sayfasındaki CLS sorununu ayıklamamıza ve next/images uygulamasındaki tuhaflıkları çözmemize yardımcı olduğu için Alex Castle'a teşekkür ederiz.