Önemli Web Verileri'ni optimize etmeye ve Next.js'ye geçmeye odaklanan bir proje, dönüşüm oranlarında% 5, oturum başına sayfa sayısında ise% 87 artış sağladı.
QuintoAndar, gayrimenkul alanında uçtan uca dijital çözümler sunan Brezilyalı bir teknoloji ürünleri şirketidir. Bu yıl, uygulamamızdaki içerik merkezinin performansını iyileştirmeye odaklanan bir proje yürüttük ve kullanıcı trafiği ile dönüşüm metriklerini artırma konusunda cesaret verici sonuçlar elde ettik.
%46
hemen çıkma oranındaki azalma
%87
oturum başına sayfa sayısındaki artış
%5
doğrulama aşamasında dönüşümdeki iyileşme
Meydan okumalar
Uygulamamızda 40.000'den fazla sayfa içeren bir kondominyum içerik merkezi var. Kullanıcılar burada mülkleri ile ilgili bilgilere ulaşabilir, ortak alanların fotoğraflarına bakabilir, mahalleyle ilgili bilgileri okuyabilir ve kiralık ya da satılık mevcut girişleri bulabilir. Bu sayfalar QuintoAndar için çok önemlidir:
- Arama motoru sonuçlarından gelen kullanıcı sayısı gitgide artan bir şekilde, organik trafik için önemli bir kaynaktır.
- Diğer sayfalara kıyasla orta ila uzun vadede yüksek dönüşüm oranlarına sahiptir.
Ancak, bu sayfalardaki performans ve kullanıcı deneyimi açısından bazı zorluklar vardı:
- Önemli Web Verileri ile ölçülen performansları optimize edilmemişti ve yavaş sayfa yüklemeleri, kullanıcı girişine yavaş yanıt verme ve düzen kararsızlığı gibi bilinen sorunlar vardı.
- Hemen çıkma oranları, uygulamanın diğer bölümlerinden daha yüksek olmasını beklesek de yüksekti.
- O tarihte henüz yayınlanmamış Google Arama'daki sayfa deneyimi güncellemesi, sıralama algoritmasına Önemli Web Verileri'ni de dahil ediyordu. 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:
- Kondominyum sayfaları da dahil olmak üzere yüksek trafiğe sahip tüm sayfaları oluşturan sunucu tarafı oluşturma mantığımız, şirket içinde oluşturuldu ve hem bakım hem de ilk katılım için çok karmaşık bir hale geldi.
- İyi bir uygulama performansı elde etmeye yönelik kod bölme gibi gerekli özellikler de özel bir kurulum ve geliştiricilerin manuel çalışması gerektiriyordu.
- QuintoAndar'ın 30'dan fazla React web uygulaması vardır. Bu uygulamaların güncellenmesini sağlamak ve bunları en iyi uygulamalar doğrultusunda kullanıma sunmak zahmetli bir iştir.
Yaklaşım
Kullanıcı deneyimini geliştirmek için kondominyum içerik merkezinde bir performans optimizasyonu projesi başlattık. Bu geliştirmeler dönüşüm kazanımları, daha iyi SEO ve daha iyi kullanılabilirlik sağlayabilir. Bu girişim aynı zamanda geliştirici deneyimini geliştirmek için de uygun bir fırsat oldu.
Next.js'ye taşıma
Kondominyum sayfasının yeni sürümü Next.js ile uygulanmıştır. Büyük ölçüde uygulamanın diğer bölümlerinden bağımsız olan kondominyum içerik merkezi, yeni bir çerçeve denemek için iyi bir aday gibi görünüyordu. Bu şekilde, QuintoAndar'daki diğer React uygulamalarını etkilemeden, taşıma çalışmalarının büyüklüğünü anlayabilir ve özelliklerin, uygulamaya nasıl yardımcı olabileceğini değerlendirebiliriz.
Zor bir şart, sayfaların arama motorları tarafından taranabilir durumda kalmasını sağlamaktı. Next.js, sunucu tarafında kullanıma hazır oluşturmayı destekleyerek bu gereksinimi karşılar ve özel kurulum ihtiyacını ortadan kaldırır. Bu dokümanlar, sunucuda veri getirme gibi görevlerin nasıl yapılacağına ilişkin bilgileri paylaşmayı ve yeni geliştiricilerin katılımını gerçekleştirmeyi çok kolaylaştırır. Sunucu tarafı oluşturmanın da İlk Zengin İçerikli Boyama (FCP) gibi performans metriklerini iyileştirdiği bilinmektedir.
Bu çerçeve, otomatik kod bölme ve önceden getirme gibi performans dostu başka özellikler sunar. Mevcut yapıda bu tür özellikler zaten sağlanmış olsa da, geliştiricilerin gerektirdiği ek çalışmalar, bunların benimsenmesini zorlaştırmıştır. Ö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 kodu kaldırmaktı. Her bir JS paketinin içeriğini gösteren Web Paketi Paketi Analiz Aracı raporlarını inceledik ve tüm üçüncü taraf komut dosyalarını dikkatli bir şekilde inceledik. 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 çok sayıda JS gerekir. Bununla birlikte, kondominyum sayfasında kullanıcıların% 0,5'ten azı düğmeyle etkileşimde bulundu.Düğme, uygulamamızın diğer bölümlerinde daha sık kullanılıyordu. Hem Mühendislik hem de Ürün ile ilgili bir tartışmadan sonra bu özelliği kaldırmaya karar verdik.
Derleme sırasında BrotliWebpackPlugin kullanılarak yapılan ve diğer statik kaynak türlerine uygulanan Brotli ile statik sıkıştırma gibi başka JS optimizasyonları da zaten uygulanmaktaydı. Başlangıçta CDN'nin sağladığı sıkıştırmayı kullanıyorduk ve Brotli, gzip'e kıyasla JS boyutunu% 18 küçülttü. Ancak daha sonra, derleme sırasında Brotli sıkıştırmasına geçiş yaparak% 24'lük bir azalma elde etmeyi başardık.
Görüntü kaynaklarını optimize etme
Mobil sürümde, ekranın üst kısmındaki alanın çoğunu kaplayan bir lokomotif resim vardır. Ayrıca sayfanın Largest Contentful Paint (LCP) değeri de olur.
Daha önce tüm resimlerde duyarlı resimler sunmak için zaten srcset ve sizes özellikleri bulunuyordu. Ayrıca resimleri isteğe bağlı olarak yeniden boyutlandırmak için Thumbor'ı kullandık ve CDN'mizi bunları verimli bir şekilde önbelleğe alacak şekilde yapılandırdık.
Modern mobil cihazlarda, çok yüksek piksel yoğunluğuna sahip ekranlar kullanılır. Diğer bir deyişle, tarayıcı resmin 3 veya 4x sürümünü (varsa) oluşturur. Çözünürlük arttıkça, insan gözünün farklılıkları algılaması zorlaşır ancak dosya boyutları yine de artar. Maksimum resim çözünürlüğünü sınırlandırma, kullanıcı deneyiminden ödün vermeden resim boyutunu iyileştirir. Lokomotif resmi en fazla 2x sürümünü içerecek şekilde sınırlandırdık. Bu boyut, 3x sürümden yaklaşık% 35 daha küçük ve 4x olandan% 50 daha küçüktür.
Son olarak, LCP metriğini iyileştirmek amacıyla önceden yükleme stratejisi kullanarak raporu mümkün olan en kısa sürede indirip görüntüledik.
<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">
Next.js yerleşik resim bileşeni, duyarlı yeniden boyutlandırma ve öncelikli yükleme gibi optimizasyonların birçoğunu içerir. Bu proje sırasında, mevcut resimleri bu bileşeni kullanmak için taşımadık ancak yeni özelliklerde uygulamayı planlıyoruz.
Düzen kaymasını azaltma
Kondominyum sayfasında Cumulative Layout Shift (CLS) ile ilgili birkaç sorun vardı. Düzen kaymalarından sorumlu öğeler yalnızca istemcide oluşturulmuştu. Örneğin, sunucu tarafı işaretlemeyi istemci tarafından oluşturulan bileşenlerle veya tanımlı width ve height özellikleri olmayan resimlerle sulandırma.
Bu sorunları çözmek için mümkün olduğunda bu öğeler için tam boyutları veya min-height ile tahmini değerleri belirleriz. aspect-ratio CSS mülkünü kullanma gibi başka seçenekler de sunulur. Dinamik olarak oluşturulan bileşenlerin düzen kaymasına neden olmasını önlemek için de yer tutucular oluşturduk.
Değişiklikleri kademeli olarak kullanıma sunma
Ekibimiz, kullanıcı deneyiminin daha iyi olması için kondominyum merkez sayfasının optimize edilmiş sürümünü doğrulamak istedi. Bu doğrultuda, aşamalı kullanıma sunma stratejisi benimsedik:
- İlk aşamada, yeni sürüm özenle seçilmiş birkaç URL için yayınlandı, böylece günde yalnızca birkaç yüzlerce kullanıcı bunları görecekti.
- İkinci aşamada ise daha fazla sayfa için yayınlandı ve günde birkaç bin kullanıcıya denk geliyordu.
- Üçüncü ve son aşamada ise uygulama tüm sayfalar için yayınlandı ve kullanıma sunma işlemi tüm kullanıcılar için tamamlandı.
Bu süre zarfında mühendislik ekibi, üretimdeki sayfa performansını sürekli olarak ölçüp iyileştirmeler üzerinde çalışmaya devam etti. Ayrıca ekip yeni ve önceki sürümlerin iş metriklerini karşılaştırdı. Bu doğrulama dönemindeki sonuçlar umut vericiydi.
Sonuçlar
Ekip, kondominyum sayfasında sürekli olarak laboratuvar testleri yapmak için SpeedCurve aracını kullandı. Mobil sürüm için sonuçlar şu şekildedir:
| 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 | 1.056 milisaniye | -%4 |
| Cumulative Layout Shift (CLS) | 0,0402 | 0,0093 | -%77 |
Bu değişikliğin gerçek kullanıcılarımız üzerindeki etkisini de incelemek istedik. Instana Website Monitoring ile toplanan alan verilerini kullanarak, özelliğin kullanıma sunulmasından önceki ve sonraki 1 aylık dönemi inceledik. Mobil kullanıcılar için 75. yüzdelik dilimi karşılaştırdığımızda LCP'nin %26, FID'nin ise %72 oranında azaldığını gördük.
PageSpeed Insights, son 28 güne ait bir alan verileri raporu sağlar. Yalnızca en çok erişilen siteler sayfasında mobil kullanıcılara yönelik bir rapor oluşturmaya yetecek kadar veri vardı. Kasım 2021 itibarıyla tüm Core Web Vitals "iyi" grubundadır.
Kademeli kullanıma sunma sırasında hemen çıkma oranlarında bir düşüş fark ettik. Tüm sayfalar için sürümü bitirdiğimizde, Google Analytics hemen çıkma oranında% 46'lık bir düşüş, oturum başına sayfa sayısında% 87'lik bir artış ve ortalama oturum süresinde% 49'luk bir artış göstermiştir. Ücretli aramalardaki hemen çıkma oranında daha da büyük bir düşüş yaşanmış ve% 59'luk bir düşüş yaşanmıştır. Bu, tıklama başına ödeme (TBÖ) reklamlarına yapılan yatırımlar söz konusu olduğunda olumlu bir işarettir.
İşletme metriklerindeki etkiye gelince, tur planlama ve gayrimenkul kiralamak veya satın almak için başvuruda bulunma gibi işlemlerin dönüşüm oranlarını analiz ettik. İyileştirmeler kullanıma sunulmaya devam ederken ekibimiz, önceki ve yeni sürümler arasındaki dönüşümü karşılaştırdı. Aynı hafta, yeni sürümü kullanan sayfa grubunda% 5'lik bir dönüşüm artışı görülürken diğer sayfalarda aynı metrikte küçük bir düşüş yaşandı.
Sonuç
Bu proje, çerçevesiz React'ten Next.js'ye uzun vadeli geçiş sürecinin ilk kısmıdır. O zamandan beri kondominyum sayfasında çalışan ekipler, geliştirilen geliştirici deneyimi hakkında olumlu geri bildirimde bulundu. Yeni web uygulamalarını yeniden yüklemesi gereken diğer ekipler bunu daha önce Next.js kullanarak yaptı. Next.js'nin bakım çalışmalarını basitleştireceğine ve farklı uygulamalar arasında ortak bir zemin yaratacağına inanıyoruz.
Genel olarak, kondominyum içerik merkezi, mutlak kullanıcı sayısı ve işlem sayısı açısından sürekli büyümektedir. Uzun vadeli analizde, QuintoAndar’ın faaliyetlerinin genişletilmesi ve sayfa dizine eklemenin iyileştirilmesi gibi SEO girişimleri gibi buna katkıda bulunan birçok faktör bulunuyor. Bu projede, 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.
Kullanıcı verilerini derinlemesine inceleyip bu örnek olayda görülen tüm dönüşüm analizlerini hazırlayan SEO Ekibi Ürün Müdürü Pedro Carmo'ya özel olarak teşekkür ederiz.