QuintoAndar sayfa performansını iyileştirerek dönüşüm oranlarını ve oturum başına sayfa sayısını nasıl artırdı?

Core Web Vitals'ı optimize etmeye ve Next.js'e geçmeye odaklanan bir proje, dönüşüm oranlarında% 5 ve oturum başına sayfa sayısında% 87 artış sağladı.

Daniela Sayuri Yassuda
Daniela Sayuri Yassuda

QuintoAndar, Brezilya merkezli bir emlak teknolojisi şirketidir. Ürünleri, emlak için uçtan uca dijital çözümler sunar. Bu yıl, uygulamamızdaki bir içerik merkezinin performansını iyileştirmeye odaklanan bir proje yürüttük ve kullanıcı trafiğini ve dönüşüm metriklerini artırma konusunda cesaret verici sonuçlar elde ettik.

46%

Hemen çıkma oranında azalma

%87

oturum başına sayfa sayısındaki artış

5%

doğrulama aşamasında dönüşümde iyileşme

Meydan okumalar

Uygulamamızda, kullanıcıların mülkleri hakkında bilgi edinebileceği, ortak alanların fotoğraflarını inceleyebileceği, mahalle hakkında bilgi edinebileceği ve kiralık veya satılık girişleri bulabileceği 40.000'den fazla sayfa içeren bir apartman dairesi içerik merkezi bulunuyor. Aşağıdaki sayfalar QuintoAndar için çok önemlidir:

  • Arama motoru sonuçlarından gelen kullanıcı sayısının giderek artmasıyla birlikte, önemli bir organik trafik kaynağıdır.
  • Diğer sayfalara kıyasla orta ve uzun vadede yüksek dönüşüm oranları elde ediyorlar.

Ancak bu sayfalardaki performans ve kullanıcı deneyimi konusunda bazı zorluklar vardı:

  • Core Web Vitals tarafından ölçülen performansları optimize edilmemişti ve yavaş sayfa yüklemeleri, kullanıcı girişine yavaş yanıt verme ve düzen kararlılığı ile ilgili bilinen sorunlar vardı.
  • Uygulamanın diğer bölümlerinden daha yüksek olmasını beklediğimiz hemen çıkma oranları yüksekti.
  • O zamanlar henüz yayınlanmamış olan Google Arama'daki sayfa deneyimi güncellemesi, Core Web Vitals'ı sıralama algoritmasına dahil edecekti. Bu da sayfa performansının, arama sonuçlarının nasıl gösterileceğini etkileyebileceği anlamına geliyordu.

Aynı zamanda, şirket genelindeki diğer projelerde kazanç sağlayabilecek bazı geliştirici deneyimi fırsatları belirledik:

  • Apartman sayfaları da dahil olmak üzere yüksek trafik alan tüm sayfaları oluşturan sunucu tarafı oluşturma mantığımız şirket içinde oluşturuldu ve yeni işe alınanların oryantasyonunu sağlamak ve bu mantığı sürdürmek için çok karmaşık hale geldi.
  • İyi uygulama performansı elde etmek için gerekli olan kod bölme gibi özellikler, geliştiricilerin özel kurulum ve manuel çalışma yapmasına da ihtiyaç duyuyordu.
  • QuintoAndar'ın 30'dan fazla React web uygulaması var. Bu uygulamalara güncelleme yayınlamak ve bunları en iyi uygulamalara uygun şekilde sürdürmek zahmetli bir iştir.

Yaklaşım

Bu iyileştirmeler dönüşüm artışı, daha iyi SEO ve daha iyi kullanılabilirlik sağlayabileceğinden, kullanıcı deneyimini iyileştirmek için apartman dairesi içerik merkezinin performans optimizasyonu projesine başladık. Bu girişim, geliştirici deneyimini iyileştirmek için de uygun bir fırsattı.

Next.js'e taşıma

Apartman sayfasının yeni sürümü Next.js ile uygulandı. Uygulamanın diğer bölümlerinden büyük ölçüde bağımsız olan apartman dairesi içerik merkezi, yeni bir çerçeveyi denemek için iyi bir aday gibi görünüyordu. Taşıma çalışmalarının kapsamını anlayabilir ve QuintoAndar'daki diğer React uygulamalarını etkilemeden özelliklerinin nasıl yardımcı olabileceğini değerlendirebiliriz.

Sayfaların arama motorları tarafından taranmaya devam etmesini sağlamak zorunlu bir şarttı. Next.js, sunucu tarafı oluşturmayı kullanıma hazır olarak destekleyerek bu koşulu karşılar ve özel kurulum ihtiyacını ortadan kaldırır. Dokümanlar, sunucuda veri getirme gibi görevlerin nasıl yapılacağı ve yeni geliştiricilerin oryantasyonu hakkında bilgi paylaşmayı çok daha kolay hale getirir. Sunucu tarafı oluşturmanın, İlk Zengin İçerikli Boyama (FCP) gibi performans metriklerini iyileştirdiği de bilinmektedir.

Çerçeve, otomatik kod bölme ve prefetching gibi performansa uygun diğer özellikleri de sunar. Mevcut yapı bu tür özellikleri zaten sağlıyor olsa da geliştiricilerin ek çalışmalar yapması gerekiyordu. Bu da bu özelliklerin kullanıma sunulmasını geciktiriyordu. Örneğin, sayfa veya bileşen düzeyinde kod bölme işleminin manuel olarak yapılması gerekiyordu.

JavaScript kaynaklarını optimize etme

İlk adım, kullanılmayan kodları kaldırmak oldu. Her JS paketinin içeriğini gösteren Webpack Bundle Analyzer raporlarına baktık ve tüm üçüncü taraf komut dosyalarını dikkatlice inceledik. Sonuç olarak, bu belirli sayfada kullanılmayan bazı izleme kitaplıklarını temizleyebildik.

Ekibimiz daha da ileri giderek mevcut özelliklerin performans maliyetini değerlendirdi. Örneğin, "beğen" düğmesinin çalışması için oldukça fazla JS gerekiyordu. Ancak, apartman sayfasında kullanıcıların% 0,5'inden azı bu düğmeyle etkileşime geçti.Bu düğme, uygulamamızın diğer bölümlerinde mevcut ve daha sık kullanılıyor. Hem Mühendislik hem de Ürün ekibiyle yaptığımız bir görüşmenin ardından bu özelliği kaldırmaya karar verdik.

"Beğen" düğmesi özelliğini gösteren animasyon. Kiralık bir daireyle ilgili bir kart var. Kartın sağ alt köşesinde, tıklandığında mavi renk alan gri kalp şeklinde bir düğme bulunur.

Brotli ile statik sıkıştırma gibi diğer JS optimizasyonları da zaten uygulanıyordu. Bu optimizasyon, BrotliWebpackPlugin kullanılarak derleme sırasında yapılır ve diğer statik kaynak türlerine de uygulanır. İlk başta CDN tarafından sağlanan sıkıştırmaya güveniyorduk. Brotli, JS boyutunu gzip'e kıyasla% 18 oranında azalttı. Ancak daha sonra derleme sırasında Brotli sıkıştırmasına geçtik ve% 24 oranında bir azaltma elde ettik.

Resim kaynaklarını optimize etme

Mobil sürümde, katlantı üzerindeki alanın büyük bir kısmını kaplayan bir hero resim var. Bu öğe aynı zamanda sayfanın Largest Contentful Paint'i (LCP) olur.

Edifício Copan (São Paulo, Brezilya) için apartman sayfası. Zemin seviyesinden çekilen bir fotoğrafta bina yapısının kıvrımları gösterilir.
Apartman sayfasının lokomotif resmi.

Daha önce tüm resimlerde uyumlu resimler yayınlamak için srcset ve sizes özellikleri zaten mevcuttu. Ayrıca, resimleri isteğe bağlı olarak yeniden boyutlandırmak için Thumbor'u kullandık ve CDN'mizi bunları verimli bir şekilde önbelleğe alacak şekilde yapılandırdık.

Modern mobil cihazlar çok yüksek piksel yoğunluğuna sahip ekranlara sahiptir. Bu, tarayıcıda, varsa resmin 3x veya 4x sürümlerinin oluşturulacağı anlamına gelir. Çözünürlük arttıkça insan gözünün farklılıkları algılaması zorlaşır ancak dosya boyutları buna rağmen artar. Maksimum resim çözünürlüğünün sınırlandırılması, kullanıcı deneyiminden ödün vermeden resim boyutunu iyileştirdi. Hero resmini en fazla 2x sürümüyle sunacak şekilde sınırladık. Bu sürüm, 3x sürümden yaklaşık% 35, 4x sürümden ise% 50 daha küçüktür.

Son olarak, LCP metriğini iyileştirmeyi umarak önceden yükleme stratejisi kullanarak öğeyi en kısa sürede indirip görüntüledik.

<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">

Next.js'in yerleşik resim bileşeni, duyarlı yeniden boyutlandırma ve öncelikli yükleme gibi bu optimizasyonların çoğunu içerir. Bu proje sırasında mevcut resimleri bu bileşeni kullanacak şekilde taşımadık ancak yeni özelliklerde kullanmayı planlıyoruz.

Düzen kaymasını azaltma

Apartman sayfasında kümülatif düzen kayması (CLS) ile ilgili birkaç sorun vardı. Sayfa düzeni değişikliklerinden sorumlu öğeler yalnızca istemcide oluşturuldu (ör. istemci tarafından oluşturulan bileşenlerle sunucu tarafı işaretlemeyi besleme veya tanımlanmış width ve height özellikleri olmayan resimler).

Bu sorunları çözmek için mümkün olduğunda bu öğeler için tam boyutları veya min-height ile tahmini değerleri ayarlarız. aspect-ratio CSS mülkünü kullanmak gibi başka seçenekler de vardır. Ayrıca, dinamik olarak oluşturulan bileşenlerin düzen kaymalarına neden olmasını önlemek için yer tutucular oluşturduk.

Google Haritalar&#39;da, ortasında kırmızı bir işaretçi bulunan bir kentsel alanı gösteren resim.
Harita resmi gibi öğeler için boyutlar tanımlandığında CLS düşürülmüştür.

Değişiklikleri kademeli olarak kullanıma sunma

Ekibimiz, kullanıcı deneyiminin daha iyi olmasını sağlamak için apartman merkezi sayfasının optimize edilmiş sürümünü doğrulamak istedi. Bunu başarmak için aşamalı kullanım stratejisi benimsedik:

  1. İlk aşamada, yeni sürüm birkaç özenle seçilmiş URL için yayınlandı. Bu nedenle, bu sürümleri günde yalnızca birkaç yüz kullanıcı görüyordu;
  2. İkinci aşamada, daha fazla sayfa için yayınlandı ve günlük birkaç bin kullanıcıya ulaştı;
  3. Üçüncü ve son aşamada, tüm sayfalar için yayınlandı ve tüm kullanıcılar için kullanıma sunuldu.

Bu süre zarfında mühendislik ekibi, üretimdeki sayfa performansını sürekli olarak ölçtü ve iyileştirmeler üzerinde çalışmaya devam etti. Ayrıca ekip, yeni ve önceki sürümlerdeki işletme metriklerini karşılaştırdı. Bu doğrulama dönemindeki sonuçlar umut vericiydi.

Sonuçlar

Ekip, apartman dairesi sayfasında sürekli olarak laboratuvar testleri çalıştırmak için SpeedCurve'ı kullandı. Mobil sürümün sonuçları şunlardır:

Laboratuvar metriği Önce Sonra Fark
Largest Contentful Paint (LCP) 2,41 saniye 1,48 saniye -%39
Etkileşime Hazır Olma Süresi (TTI) 12,16 saniye 7,48 saniye -%39
Toplam Engelleme Süresi (TBT) 1.124 milisaniye 1056 milisaniye -%4
Cumulative Layout Shift (CLS) 0,0402 0,0093 -%77
SpeedCurve ile toplanan laboratuvar metrikleri sonuçları.

Ayrıca, gerçek kullanıcılarımız üzerindeki etkisini de kontrol etmek istedik. Instana Web Sitesi İzleme ile toplanan saha verilerini kullanarak, kullanıma sunma işleminden önceki ve sonraki 1 aylık dönemi inceledik. Mobil kullanıcılar için yüzde 75'lik dilimi karşılaştırdığımızda LCP'nin %26, FID'nin ise %72 oranında azaldığını tespit ettik.

Mevcut ve önceki aydaki yeni ve önceki sürümleri karşılaştıran LCP değerleri içeren bir çizgi grafik. Yeni sürümün eğrisi 2 ila 4 saniye arasında değişiyor ve çoğu zaman önceki sürümün eğrisinin altında kalıyor.
Geçerli ve önceki aydaki yeni ve önceki sürümleri karşılaştıran FID değerleri içeren bir çizgi grafik. Yeni sürümün eğrisi çoğu zaman 100 ms&#39;nin altında kalırken önceki sürümün eğrisinde 250 ms&#39;yi aşan birkaç ani artış vardır.
Instana ile toplanan alan metrikleri sonuçları.

PageSpeed Insights, son 28 güne ait bir alan verisi raporu sağlar. Yalnızca en çok erişilen apartman sayfası, mobil kullanıcılar için rapor oluşturmaya yetecek kadar veri içeriyordu. Kasım 2021 itibarıyla tüm Core Web Vitals metrikleri "iyi" kategorisindedir.

Alan Verileri bölümüne odaklanan PageSpeed Insights raporunun ekran görüntüsü. Tüm Core Web Vitals metrikleri (FCP, İGG, LCP, CLS) iyi gruptadır.
PageSpeed Insights, mobil kullanıcıların en çok erişilen apartman daireleri sayfasında iyi bir deneyim yaşadığını gösteriyor.

Kademeli kullanıma sunma sürecinde, hemen çıkma oranlarında düşüş olduğunu fark ettik. Tüm sayfalar için yayını tamamladığımızda Google Analytics, hemen çıkma oranında% 46, oturum başına sayfa sayısında% 87 ve ortalama oturum süresinde% 49 artış olduğunu gösterdi. Atlama oranındaki düşüş, ücretli aramalarda daha da büyüktü ve% 59'a ulaştı. Bu, tıklama başına maliyet (PPC) reklamlarına yapılan yatırımlar açısından olumlu bir işarettir.

Google Analytics&#39;teki bir grafiğin ekran görüntüsü. Bu rapor, Mart 2021&#39;deki iki farklı dönem arasındaki hemen çıkma oranlarını karşılaştırır. 17 Mart&#39;tan itibaren hemen çıkma oranında hafif bir düşüş var. Düşüş 24 Mart&#39;ta belirgindir.
Yeni sürümü daha fazla sayfada kullanıma sunduğumuzda Google Analytics, hemen çıkma oranının azaldığını gösteriyor.

İşletme metriklerindeki etkiye gelince, tur planlama ve mülk kiralamak veya satın almak için başvuruda bulunma gibi işlemler için dönüşüm oranlarını analiz ettik. İyileştirmeler kullanıma sunulurken ekibimiz önceki ve yeni sürümler arasındaki dönüşümü karşılaştırdı. Aynı hafta, yeni sürüme sahip sayfa grubu% 5 dönüşüm artışı gösterirken diğer sayfalarda aynı metrikte hafif bir düşüş yaşandı.

Yan yana iki çizgi grafik. Her biri, mevcut hafta ile önceki hafta arasındaki dönüşümü karşılaştırır. Soldaki, sayfanın önceki sürümüne aittir ve mevcut haftanın dönüşüm eğrisinin önceki haftanın eğrisinin biraz altında olduğunu gösterir. Sağdaki yeni sürüm içindir ve mevcut haftanın dönüşüm eğrisi önceki haftanın eğrisinin biraz üzerindedir.
Aynı hafta, yeni sürümün dönüşümü artarken önceki sürümde küçük bir düşüş yaşandı.

Sonuç

Bu proje, çerçevesiz React'ten Next.js'e uzun vadeli bir taşıma çalışmasının ilk kısmıdır. O zamandan beri apartman dairesi sayfasında çalışan ekipler, iyileştirilmiş geliştirici deneyimi hakkında olumlu geri bildirimler verdi. Yeni web uygulamalarını sıfırdan başlatmak zorunda kalan diğer ekipler, bunu Next.js ile zaten yaptı. Next.js'in bakım çalışmalarını basitleştireceğine ve farklı uygulamalar arasında ortak bir zemin oluşturacağına inanıyoruz.

Genel olarak, apartman dairesi içerik merkezi, kullanıcı ve işlem sayısı açısından sürekli olarak büyüyor. Uzun vadeli analizde, QuintoAndar'ın operasyonunun genişletilmesi ve sayfa dizine ekleme gibi SEO girişimleri gibi bu artışa katkıda bulunan birçok faktör vardır. Bu proje sırasında, sayfa performansının da olumlu dönüşüm etkisi potansiyeli yüksek olan bu faktörlerden biri olduğunu gördük.

SEO ekibinin Ürün Müdürü Pedro Carmo'ya, kullanıcı verilerini inceleyip bu örnek olayda görülen tüm dönüşüm analizlerini oluşturduğu için özel teşekkürler.