Ekip, açılış sayfalarında gerçekleştirilen 10 milyon ziyaretten elde ettiği verileri analiz etti ve Largest Contentful Paint ile dönüşüm oranı arasında güçlü bir bağlantı olduğunu belirledi.
Fransız çok uluslu otomobil üreticisi Groupe Renault, 130'dan fazla ülkede faaliyet gösteriyor. Renault gibi bir otomotiv grubu için daha fazla kullanıcı etkileşimi ve dönüşüm sağlayan yüksek performanslı marka siteleri daha fazla iş demektir. Markanın tüm siteleri, yerelleştirilmiş siteler için içerik ve özelliklerin esnekliğini korurken, geniş ölçekte en iyi kullanıcı deneyimini sağlamayı amaçlamaktadır. Bu bağlamda performans izleme, küresel platformu geliştirmek ve sürdürmekten sorumlu olan müşteri deneyimi ekibi için önemli bir konudur.
Core Web Vitals'ın işletme üzerindeki etkisini ölçme
Google Analytics'te ölçüm
Küresel veri iş ortağı olan Renault, web-vitals kitaplığını kurdu. Bu kitaplık sayesinde, gerçek kullanıcılardan gelen tüm Web Verileri metrikleri, Chrome tarafından ölçülme ve diğer Google araçlarına raporlanma yöntemleriyle doğru bir şekilde eşleşir.
Aşağıdaki analizde, Aralık 2020 ile Mart 2021 arasında dört ay boyunca bu araçlar kullanılarak toplanan bir veri kümesi gösterilmektedir.
Optimize edilmiş LCP, kullanıcı etkileşimi ve iş metrikleriyle güçlü bir ilişkilidir
Ekipler, düşük Largest Contentful Paint (LCP) ile avantajlı hemen çıkma oranları ve dönüşüm oranları arasında özellikle güçlü bir ilişki olduğunu tespit etmiştir (aşağıdaki görselde gösterilmiştir).
Veri kümesi, dört ay içinde 33 ülkede 10 milyondan fazla ziyareti tespit etmekte ve düşük LCP ölçümlerinin aşağıdakilerle nasıl ilişkili olduğunu göstermektedir:
- Daha düşük hemen çıkma oranları
- Daha fazla dönüşüm (tamamlanan potansiyel müşteri formları)
İlginçtir ki, web sitesi Tek Sayfalık Uygulama (SPA) olarak çalıştığından tüm bu ölçümler yalnızca açılış sayfalarından yakalanmaktadır. Veriler, LCP 1 saniyenin altına ulaşana kadar web sitesini optimize etmeye değer olduğunu gösteriyor. Grubun marka siteleri hiçbir zaman çok optimize edilemez!
Bu veri kümesi, yalnızca LCP ile işletme metrikleri arasındaki negatif bağıntıyı göstermekle kalmaz, aynı zamanda en iyi performans gösteren açılış sayfaları arasındaki performans tutarsızlıklarını da vurgular. Bu web sitesi bağlamında, 1 saniyeden kısa LCP elde etmek, dönüşümlerde büyük artışlara ve hemen çıkma oranında azalmaya neden olmaktadır.
Eja Rakotoarimanana, Danışman, elli beş
1 saniyelik LCP iyileştirmesi, hemen çıkma oranında yüzde 14 düşüş, dönüşümlerde ise% 13 artışa yol açabilir.
| 1 saniye LCP iyileştirmesi | Sonuç |
|---|---|
| 1 sn. civarında LCP | +% 13 DO |
| 1,6 sn.den kısa LCP | -14 yüzdelik hemen çıkma oranı |
| 1,6 sn.nin üzerinde LCP | -5 yüzdelik hemen çıkma oranı |
Renault'nun Core Web Vitals'ı geniş ölçekte optimize etme yaklaşımı
2020'nin başlarından bu yana, markanın en büyük 5 Avrupa pazarında hızlı LCP (2,5 saniyenin altında) yaşayan ziyaretçi sayısı, Renault alanları için ortalama %22 oranında iyileşti (%51'den %73'e).
Bu konuya nasıl yaklaşım yaptıklarını aşağıda görebilirsiniz.
Merkezi bir SPA optimizasyonu
Platform açısından bakıldığında performans yıllardır bir öncelik olmuştur ve Core Web Vitals'ı temel metrik olarak eklemek sorunsuz bir süreçti. Merkezi ekipler, kapsamlı bir izleme çözümü (Google Lighthouse ve Chrome Kullanıcı Deneyimi Raporu API'si ile) oluşturdu ve kuruluş genelinde bir performans kültürü oluşturdu. Tek Sayfalık Uygulamalarını optimize etmek için aşağıdakiler de dahil olmak üzere birkaç strateji vardı:
- Hızlı bir İlk Zengin İçerikli Boyama (FCP) sağlamak için sunucu tarafı oluşturma (SSR).
- Yalnızca açılış sayfası için gerekli olan JS ve CSS parçalarını yayınlamak üzere kod bölme (daha iyi LCP ve FID için).
- Yüksek düzeyde kaynak önbelleğe alma özelliğine sahip CDN (gereksiz sorgu parametrelerini sıralamak ve kaldırmak için bir Lambda@Edge dahil). Bu, SSR'nin (sunucu hesaplamasından dolayı daha yavaş TTFB) dezavantajlarının önlenmesine ve içeriğin son kullanıcıya daha yakın bir şekilde sunulmasına (daha iyi TTFB ve LCP için) yardımcı oldu.
- Kod boyutunu azaltmak için brotli ile sıkıştırmayı optimize edin.
- İstek ve yanıtların çoğaltılmasını etkinleştirmek için HTTP2.
- Kullanıcılara en uygun resim boyutu ve biçimini sunmak için duyarlı resimleri WebP desteği,
srcsetvesizesözellikleriyle birlikte kullanma. IntersectionObserverve FPO'ları (1 KB'lık küçük küçük resimler) kullanarak resimleri, videoları ve iframe'leri geç yükleme.- JS dosya boyutlarını küçültmek için (gereksiz çoklu dolguları önleyerek) engelleyen komut dosyalarını kaldırma ve tarayıcı hedeflerine transpilasyonu ayarlama.
- Üçüncü taraf komut dosyalarını yalnızca gerektiğinde ve gerektiğinde yüklemek için Google Etiket Yöneticisi kapsayıcısının boyutunu küçültme.
- Özel yazı tipi sayısını azaltma, unicode aralığıyla woff/woff2 biçimlerini kullanma ve yazı tipi dosyalarının boyutlarını küçültmek ve özel yazı tipleri henüz kullanılamıyor olsa bile metni mümkün olan en kısa sürede göstermek için
font-display:swap. - Genellikle LCP öğeleri olan hero resimleri önceden yükleme.
Ekip, gelecekte aşağıdaki gibi iyileştirmeler yapmak için çalışmalarını sürdürüyor:
- CSS'yi daha hızlı yayınlayarak FCP'yi iyileştirmek için sunucu aktarma. (AWS desteği eksikliği ve kullanımdan kaldırma teklifi nedeniyle beklemededir.
- FID'yi iyileştirmek için progresif sıvı alımı.
- Modern tarayıcılara yönelik ES6 derlemelerini kullanarak daha hızlı bir deneyim sunan ES6 Modülü desteği.
Kullanıcılar sayfalar arasında gezinirken sayfanın tam olarak yeniden yüklenmesi gerekmediğinden, SPA yaklaşımı performans açısından faydalı olabilir. Bununla birlikte, SPA'daki mevcut Önemli Web Verileri ölçüm metodolojileri, rota geçişleri ölçülmediğinden bir dezavantaj olarak algılanabilir. Bu nedenle, kullanıcı arayüzü önbelleğe alma sayesinde bir oturumda nispeten daha hızlı sayfa yüklemeleri dikkate alınmaz. Aynı zamanda Önemli Web Verileri'nin, hazır bir önbelleğin kullanıcının oturum sırasında göz atacağı her sayfada ölçümleri azalttığı bir Çok Sayfalı Uygulama rakip web sitesiyle karşılaştırmasını da zorlaştırır. Daha fazla bilgi için Web Vitals SPA SSS sayfasını okuyun.
Bunlar, Chrome ürün ekipleri tarafından araştırılan bilinen sınırlamalardır. SPA'larda ölçümü iyileştirmek için CLS metriğiyle ilgili bir güncelleme halihazırda gönderilmiştir.
Çeşitli teknik ekipler etkileyebileceğinden performansın sürekli izlenmesi gerekir. Önemli Web Verileri, SPA'larda ölçülme biçimindeki kısıtlamalara rağmen ekiplerimizin gerçekleştirdiği eylemlerin etkisini izlememize olanak tanıyor. Rota geçişlerinin kısa süre içinde dikkate alınacağını umuyoruz.
Cedric Bazureau, Teknoloji Lideri, Renault
Performans optimizasyonunu ortak bir sorumluluk olarak tanıtan yerel kurallar
Performans hem global (merkezi) hem de yerel bir sorumluluk olarak tanımlanır. Ekipler, yerel içerik sahiplerinin takip etmesi gereken bir dizi en iyi uygulamayı bir araya getirdi. Aşağıda, bu yönergelerden birkaç örnek verilmiştir:
- Site performansını artırmak için yerel Google Etiket Yöneticisi kapsayıcısını optimize edin (ör. belirli etiketleri koşullu olarak tetikleme).
- Video içeriğini dahili araçlar kullanarak sıkıştırarak veya harici bir platformda (ör. YouTube) barındırarak boyutunu sınırlayın.
- Resimleri Google Etiket Yöneticisi üzerinden yüklemekten kaçının.
Dijital performansımızı derinlemesine anlamak, marka sitelerimizin sürekli optimizasyonu için çok önemli. Müşteri deneyimi ekibimizin yaklaşımı, yerel ekiplerin iş sonuçlarını olumlu yönde etkileyen küresel bir platform sunarken bu ekipleri, bu performansı üst düzeyde tutmak için yönergeler ve en iyi uygulamalarla desteklemeyi hedefler.
Alexandre Perruche, Performans Müdürü, Renault
Sonuç olarak, Renault'da web sitesi performansı her zaman bir öncelik olmuştur ve şirketin web sitesi platformu sürekli olarak optimize edilmektedir. Önemli Web Verileri'ni işletme metrikleriyle birlikte ölçmek, şirketlerin bu konuyu tüm dünyada paylaşılan bir sorumluluk olarak tanıtmasını sağladı ve yerel yönergeler, ekipleri bu yararlı girişime katılabilme olanağıyla donatıyor.