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'ye taşımaya odaklanan bir proje, dönüşüm oranlarında% 5, oturum başına sayfa sayısında ise% 87 artış sağladı.

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.

Meydan okumalar

Uygulamamızda, 40.000'den fazla sayfanın bulunduğu bir apartman içerik merkezi vardır. Bu merkezlerde kullanıcılar, mülkleri hakkında bilgi edinebilir, ortak alanların fotoğraflarına göz atabilir, mahalleler hakkında bilgi edinebilir ve kiralık veya satılık mevcut ilanları bulabilirler. Bu sayfalar QuintoAndar için çok önemlidir:

• Arama motoru sonuçlarından gelen kullanıcı sayısı istikrarlı şekilde artan bu siteler, organik trafiğin önemli bir kaynağıdır.
• Diğer sayfalara kıyasla orta ila uzun vadede yüksek dönüşüm oranlarına sahiptirler.

Ancak, aşağıdaki sayfalarda performans ve kullanıcı deneyimi ile ilgili zorluklar vardı:

• Core Web Vitals tarafından ölçülen performansları optimize edilmemişti ve sayfaların yavaş yüklenmesi, kullanıcı girişine yavaş yanıt verilmesi ve düzen kararlılığıyla ilgili bilinen sorunlar vardı.
• Uygulamanın diğer bölümlerinden daha yüksek olmasını beklediğimiz halde 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ç elde etmenizi 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 uygulamalarda güncellemeler sunmak ve bunları en iyi uygulamalar doğrultusunda yönetmek zahmetli bir iştir.

Yaklaşım

Kullanıcı deneyimini iyileştirmek için site içeriği merkezinde bir performans optimizasyonu projesi başlattık. Bu proje, dönüşüm artışını, SEO'yu ve kullanılabilirliği artırmayı sağlayabilir. Bu girişim, geliştirici deneyimini iyileştirmek için de uygun bir fırsattı.

Next.js'ye 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 büyüklüğünü anlayabilecek ve QuintoAndar'daki diğer React uygulamalarını etkilemeden özelliklerinin nasıl yardımcı olabileceğini değerlendirebileceğiz.

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 ve yeni geliştiricileri oryantasyona alma gibi görevlerin nasıl yapılacağı hakkındaki bilgileri paylaşmayı çok daha kolay hale getirir. Sunucu tarafı oluşturmanın, ilk zengin içerikli boyama (FCP) gibi performans metriklerini iyileştirdiği de bilinmektedir.

Çerçeve, otomatik kod bölme ve ön getirme 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ını inceledik 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.

Brotli ile statik sıkıştırma gibi diğer JS optimizasyonları 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ırmadan yararlanıyorduk ve Brotli, JS boyutunu gzip'e kıyasla% 18 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. Aynı zamanda sayfanın Largest Contentful Paint (LCP) de olur.

Daha önce, duyarlı resimler yayınlamak için tüm resimlerde srcset ve sizes özellikleri bulunuyordu. 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ü sınırlama, kullanıcı deneyiminden ödün vermeden resim boyutunu iyileştirdi. Lokomotif resmi, en fazla 2x sürümüyle sınırlandırdık. Bu sürüm, 3x sürümden yaklaşık% 35 ve 4x sürümden% 50 daha küçüktür.

Süreci tamamlamak için önceden yükleme stratejisi kullanarak bu raporu mümkün olan en kısa sürede indirip görüntülemek için LCP metriğini iyileştirdik.

<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.

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. Bu amaca ulaşmak için aşamalı bir kullanıma sunma stratejisi benimsedik:

1. İlk aşamada yeni sürüm, özenle seçilmiş birkaç 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ümle ilgili sonuçlar şunlardır:

Ayrıca, gerçek kullanıcılarımız üzerindeki etkiyi 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.

PageSpeed Insights, son 28 güne ait bir alan verileri 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.

Progresif kullanıma sunma sürecinde hemen çıkma oranlarında bir düşüş 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.

İş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ı.

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ı başlatmak zorunda kalan diğer ekipler de Next.js ile bunu başardı. 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 site içerik merkezi, mutlak kullanıcı ve işlem sayısı bakımından sürekli büyümektedir. 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 bu faktörlerden biri olduğunu ve olumlu dönüşüm etkisi sağlama potansiyeli olduğunu gördük.

Kullanıcı verilerini ayrıntılı şekilde incelediği ve bu örnek olayda görünen tüm dönüşüm analizlerini oluşturduğu için SEO Ekibi Ürün Müdürü Pedro Carmo'ya özel teşekkür ederiz.