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

QuintoAndar, ürünleri gayrimenkul için uçtan uca dijital çözümler sunan Brezilyalı bir proptech şirketidir. 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.

Zorluklar #

Uygulamamız, kullanıcıların mülkleri hakkında bilgi alabilecekleri, ortak alanların fotoğraflarına bakabilecekleri, mahalle hakkında okuyabilecekleri ve kiralık veya satılık mevcut ilanları bulabilecekleri 40.000’den fazla sayfaya sahip bir kat mülkiyeti içerik merkezine sahiptir. Bu sayfalar QuintoAndar için çok önemlidir:

• Onlar önemli bir kaynak organik trafikarama motoru sonuçlarından gelen kullanıcı sayısı giderek artıyor.
• Diğer sayfalara göre orta ve uzun vadede yüksek dönüşüm oranlarına sahiptirler.

Ancak, bu sayfalarda performans ve kullanıcı deneyimi söz konusu olduğunda zorluklar yaşandı:

• Core Web Vitals tarafından ölçülen performansları optimize edilmemişti ve yavaş sayfa yüklemeleri, kullanıcı girdilerine yavaş yanıt verme ve düzen istikrarsızlığı ile ilgili bilinen sorunlar vardı.
• Onların hemen çıkma oranları uygulamanın diğer bölümlerinden daha yüksek olmasını beklesek bile yüksekti.
• bu Google Arama’da sayfa deneyimi güncellemesio sırada henüz yayınlanmamış olan Önemli Web Verilerini sıralama algoritmasına dahil edecekti, bu da sayfa performansının arama sonuçlarının nasıl görüntüleneceğini etkileyebileceği anlamına geliyordu.

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

• Kat mülkiyeti sayfaları da dahil olmak üzere tüm yüksek trafikli sayfaları işleyen sunucu tarafı işleme mantığımız şirket içinde oluşturuldu ve yeni işe alınanların bakımı ve katılımı için çok karmaşık hale geldi.
• İyi uygulama performansı elde etmek için temel özellikler, örneğin kod bölmeayrıca özel bir kurulum ve geliştiricilerin manuel çalışmasını gerektiriyordu.
• QuintoAndar’da 30’un üzerinde Tepki Web uygulamaları. Bu uygulamalara güncellemeler sağlamak ve bunları en iyi uygulamalara göre sürdürmek zorlu bir iştir.

Yaklaşmak #

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

Next.js’ye Geçiş #

Kat mülkiyeti sayfasının yeni versiyonu ile hayata geçirildi. Sonraki.js. Uygulamanın diğer bölümlerinden büyük ölçüde bağımsız olan kat mülkiyeti içerik merkezi, yeni bir çerçeve denemek için iyi bir aday gibi görünüyordu. QuintoAndar’daki diğer React uygulamalarını etkilemeden geçiş çabalarının boyutunu anlayabilir ve özelliklerinin nasıl yardımcı olabileceğini değerlendirebiliriz.

Zor bir gereklilik, sayfaların arama motorları tarafından taranabilir durumda kalmasını sağlamaktı. Next.js, kullanıma hazır sunucu tarafı işlemeyi destekleyerek bu gereksinimi karşılar ve özel kurulum ihtiyacını ortadan kaldırır. Dokümantasyon, aşağıdakiler gibi görevlerin nasıl yapılacağına ilişkin bilgileri paylaşmayı çok daha kolaylaştırır: veri alma sunucuda ve yerleşik yeni geliştiricilerde. Sunucu tarafı işlemenin ayrıca performans geliştirme First Contentful Paint (FCP) gibi ölçümler.

Çerçeve, otomatik kod bölme ve önceden getirme gibi diğer performans dostu özellikler sağlar. Mevcut yapı bu tür özellikleri zaten sağlasa da, geliştiricilerden gereken ek çalışma, bunların benimsenmesini durdurdu. Örneğin, sayfa veya bileşen düzeyinde kod bölmenin manuel olarak yapılması gerekiyordu.

JavaScript kaynaklarını optimize etme #

İlk adım, kullanılmayan kodu kaldırmaktı. biz baktık Webpack Paket Çözümleyicisi her bir JS paketinin içeriğini gösteren ve tüm üçüncü taraf komut dosyalarını dikkatlice gözden geçiren raporlar. Sonuç olarak, bu 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 kat mülkiyeti sayfasında, uygulamamızın diğer bölümlerinde bulunan ve daha sık kullanılan düğmeyle kullanıcıların %0,5’inden azı etkileşimde bulundu. Hem Mühendisliği hem de Ürünü içeren bir tartışmadan sonra bu özelliği kaldırmaya karar verdik.

Brotli ile statik sıkıştırma gibi diğer JS optimizasyonları halihazırda mevcuttu. BrotliWebpackPluginve diğer statik kaynak türlerine de uygulandı. İlk başta, CDN tarafından sağlanan sıkıştırmaya güveniyorduk ve Brotli, JS boyutunu gzip’e kıyasla %18 oranında azalttı. Ancak daha sonra, derleme zamanında Brotli sıkıştırmaya geçtik ve %24’lük bir azalma elde edebildik.

Görüntü kaynaklarını optimize etme #

Mobil versiyonda ekranın üst kısmındaki alanın büyük bir kısmını kaplayan bir kahraman görseli var. Aynı zamanda sayfanın En Büyük İçerikli Boyası (LCP) olur.

Daha önce, tüm resimler zaten vardı srcset Ve sizes duyarlı görüntüler sunmak için öznitelikler. biz de kullandık parmak görüntüleri isteğe bağlı olarak yeniden boyutlandırmak ve CDN’mizi bunları verimli bir şekilde önbelleğe alacak şekilde yapılandırmak için.

Modern mobil cihazlarda çok yüksek piksel yoğunluğuna sahip ekranlar bulunur; bu, tarayıcının varsa görüntünün 3x veya 4x sürümlerini oluşturacağı 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ı ne olursa olsun artacaktır. Maksimum görüntü çözünürlüğünü sınırlama kullanıcı deneyiminden ödün vermeden geliştirilmiş görüntü boyutu. Kahraman görüntüsünü, 3x sürümden yaklaşık %35 ve 4x sürümden %50 daha küçük olan 2x sürümünü en fazla sunacak şekilde sınırladık.

Bitirmek için, LCP metriğini iyileştirmeyi sabırsızlıkla bekleyerek mümkün olan en kısa sürede indirmek ve görüntülemek için bir ön yükleme stratejisi kullandık.

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

bu Next.js yerleşik görüntü bileşeni duyarlı yeniden boyutlandırma ve öncelikli yükleme gibi bu optimizasyonların çoğunu içerir. Bu proje sırasında, bu bileşeni kullanmak için mevcut görüntüleri taşımadık, ancak yeni özelliklerde uyarlamayı planlıyoruz.

Düzen kaymasını azaltma #

Kat mülkiyeti sayfasında Kümülatif Düzen Kayması (CLS) ile ilgili birkaç sorun vardı. Düzen kaymalarından sorumlu öğeler yalnızca istemcide işlendi; örneğin, istemci tarafından oluşturulan bileşenlerle sulu sunucu tarafı işaretlemesi veya tanımlanmamış görüntüler width Ve height Öznitellikler.

Bu sorunları çözmek için, mümkün olduğunda bu öğeler için kesin boyutlar belirleriz veya min-height. kullanmak gibi daha fazla seçenek vardır. aspect-ratio CSS özelliği. Dinamik olarak oluşturulmuş bileşenlerin düzen kaymalarına neden olmasını önlemek için yer tutucular da oluşturduk.

Değişiklikleri aşamalı olarak kullanıma sunma #

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

1. İlk aşamada, özenle seçilmiş birkaç URL için yeni sürüm yayınlandı, bu nedenle bunları günde yalnızca birkaç yüz kullanıcı görecekti;
2. İkinci aşamada, günde birkaç bin kullanıcıya karşılık gelen daha fazla sayfa yayınlandı;
3. Üçüncü ve son aşamada tüm sayfalar için yayınlandı ve tüm kullanıcılar için sunum tamamlandı.

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. Ek olarak ekip, yeni ve önceki sürümler arasındaki iş ölçümlerini karşılaştırdı. Bu doğrulama dönemindeki sonuçlar umut vericiydi.

Sonuçlar #

Kullanılan takım Hız Eğrisi kat mülkiyeti sayfasına karşı sürekli laboratuvar testleri yapmak. Mobil sürüm için sonuçlar şunlardır:

Ayrıca gerçek kullanıcılarımız üzerindeki etkisini de kontrol etmek istedik. ile toplanan saha verilerini kullanma Instana Web Sitesi İzleme, kullanıma sunmadan önceki ve sonraki 1 aylık döneme baktık. Mobil kullanıcılar için 75. yüzdelik dilimi karşılaştırdığımızda, LCP’nin %26 ve FID’nin %72 azaldığını bulduk.

PageSpeed ​​Insights, son 28 gün için bir saha verileri raporu sağlar. En çok erişilen kat mülkiyeti sayfası tek başına mobil kullanıcılar için bir rapor oluşturmak için yeterli veriye sahipti. Kasım 2021 itibariyle, tüm Önemli Web Verileri “iyi” grubundadır.

Kademeli sunum sırasında, hemen çıkma oranlarında bir düşüş fark ettik. Tüm sayfaların yayınlanmasını bitirdiğimizde, Google Analytics hemen çıkma oranında %46 azalma, oturum başına sayfa sayısında %87 artış ve ortalama oturum süresinde %49 artış gösterdi. Hemen çıkma oranındaki düşüş, ücretli aramalarda daha da fazlaydı ve %59’luk bir düşüşe ulaştı. tıklama başına ödeme (PPC) reklamları.

İş ölçümlerindeki etkiye gelince, bir tur planlamak ve bir mülk kiralamak veya satın almak için başvurmak gibi işlemler için dönüşüm oranlarını analiz ettik. Geliştirmeler devam ederken, ekibimiz önceki ve yeni sürümler arasındaki dönüşümü karşılaştırdı. Aynı hafta içerisinde yeni sürüme sahip sayfa grubu %5 dönüşüm artışı gösterirken, diğer sayfalar aynı metrikte hafif bir düşüş yaşadı.

Çözüm #

Bu proje, çerçevesiz React’ten Next.js’ye uzun vadeli geçiş çabasının ilk parçasıdır. O zamandan beri kat mülkiyeti sayfasında çalışan ekipler, iyileştirilmiş geliştirici deneyimi hakkında olumlu geri bildirimde bulundu. Yeni web uygulamalarını önyüklemek zorunda kalan diğer ekipler bunu zaten Next.js ile yaptı. Next.js’nin bakım çalışmalarını basitleştireceğine ve farklı uygulamalar arasında ortak bir zemin oluşturacağına inanıyoruz.

Genel olarak, kat mülkiyeti içerik merkezi, mutlak kullanıcı ve işlem sayısı açısından sürekli olarak büyümektedir. Uzun vadeli analizde, QuintoAndar’ın operasyonunun genişletilmesi ve iyileştirilmiş sayfa indeksleme gibi SEO girişimleri gibi buna katkıda bulunan birçok faktör vardır. Bu proje sırasında, sayfa performansının da olumlu dönüşüm etkisi için büyük potansiyele sahip bu faktörlerden biri olduğunu gördük.

Özellikle ….. ‘ya teşekkür Pedro CarmoSEO ekibinin Ürün Müdürü, kullanıcı verilerini derinlemesine incelediği ve bu örnek olay incelemesinde görülen tüm dönüşüm analizlerini oluşturduğu için.