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ı.
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.
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.
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.
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:
- İ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;
- İkinci aşamada, daha fazla sayfa için yayınlandı ve günlük birkaç bin kullanıcıya ulaştı;
- Üçü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 |
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.
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.
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.
İş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ı 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.