Gerçek kullanıcı verileriyle temel çizgiyi kullanılabilir hale getirme

Yayınlanma tarihi: 10 Şubat 2025

Kullanıcılarınızın tarayıcıları tarafından desteklenip desteklenmediğinden emin olmadığınız için modern bir web özelliğini uygulamayı ertelediniz mi? Yoksa ağır polyfill'leri gerektiğinden daha uzun süre mi kullandınız? Yalnız değilsiniz. Temel düzey, dünya genelindeki tarayıcı desteği hakkında bize net sinyaller verse de eksik bir parça var: Kullanıcılarınızın gerçekten hangi tarayıcı sürümlerini desteklediğini bilmek.

RUMvision ekibi, bu sorunu temel verileri gerçek kullanıcı izleme (RUM) verileriyle birleştirerek çözdü ve elde edilen sonuçlar çok ilginç. Ekipler, modern özellikleri planlanandan aylar önce kullanabileceklerini fark etti. Bazıları ise kullanıcılarının% 97'sinin bile ihtiyaç duymadığı polyfill'leri koruduklarını keşfetti. Bazıları ise kitleleri henüz hazır olmadığı için yeni özellikleri uygulamayı erteleme kararı aldı.

Temel çizgiyi kaç ziyaretçinin desteklediğini gösteren RUMvision kontrol paneli.
Aralık 2024'teki verilere dayalı ana RUMvision Baseline kontrol paneli, kullanıcılarınız genelindeki genel Baseline özellik desteğini, kullanıma sunma yılına göre düzenler.

Temel çizgi ve tarayıcı desteğinin işleyiş şekli

Bir web özelliğinin desteği, tarayıcı sürümlerine bağlıdır: Tarayıcılar bir özelliği kullanıma sunduğunda, kullanıcılar tarayıcılarını güncelleyerek bu özelliği edinir. Referans çizgisi, tüm büyük tarayıcıların (Chrome, Edge, Firefox ve Safari) bir özelliği kullanıma sunduğunu izler, özelliği mavi rozetle işaretler ve "Yeni kullanıma sunuldu" olarak ayarlar. 30 aydan sonra bu durum "Geniş bir kitle tarafından kullanılabilir" olarak güncellenir.

Ancak kullanıcılarınızın güncelleme kalıpları, dünya genelindeki ortalamalardan çok farklı olabilir. RUMvision, kullanıcılarınızın kullandığı gerçek tarayıcı sürümlerini izleyerek kitlenizin her bir özelliği tam olarak ne kadarının desteklediğini gösterebilir. Bu sayede, temel çizgi genel bir göstergeden özel durumunuz için pratik bir araç haline gelir.

Web'de tarayıcı kullanımı

RUMvision, farklı pazarlardaki milyonlarca sayfa görüntülemesini inceleyerek (Aralık 2024) kullanıcıların tarayıcı güncellemelerini alma konusunda net kalıplar keşfetti:

  • Chrome, Edge ve Firefox güncellemeleri hızlı bir şekilde benimsenir ve genellikle yaklaşık üç ay içinde %95'e ulaşır.
  • Safari'de bu süreç çok daha uzun sürer. İşletim sistemi güncellemeleriyle bağlantılı olduğundan aynı seviyeye ulaşması yaklaşık 19 ay sürer.
  • Chrome'un kendine özgü bir özelliği vardır. %95-98'e hızlıca ulaşır ancak daha sonra yavaşlar ve %99'a ulaşması 23 aya kadar sürebilir.

Temel çizgi yüzlerce özelliği takip etse de muhtemelen kullanmak istediğiniz belirli özelliklere odaklanırsınız. Bir özelliğin bekleme süresi, özelliği en son destekleyen tarayıcıya bağlıdır.

Bir özelliğin taban çizgisine ulaşması için gereken son tarayıcı Chrome ise ve kitleniz çoğunlukla Chrome kullanıyorsa bu özellik büyük olasılıkla birkaç ay içinde kitlenize sunulur. Ancak Safari, desteği en son ekleyen tarayıcıysa diğer tüm tarayıcılar yıllar önce hazır olsa bile Safari kullanıcılarınızın gerekli işletim sistemi güncellemesini alması 19 ay sürebilir.

Gerçek dünya herkes için farklı görünür

Verilerimiz, destek hizmetlerinin farklı sitelerde önemli ölçüde farklılık gösterdiğini gösteriyor (Aralık 2024):

  • Hollandalı bir ev eşyaları perakendecisi:
    • Baseline 2024 özellikleri: % 34 destek
    • Baseline 2023 özellikleri: % 76 destek
    • Yaygın olarak kullanılan özellikler: % 95 destek
  • ABD merkezli bir teknoloji blogu:
    • Baseline 2024 özellikleri: % 59 destek
    • Baseline 2023 özellikleri: % 89 destek
    • Yaygın olarak kullanılan özellikler: % 100 destek
  • Orta Doğu'daki bir emlak sitesi:
    • Baseline 2024 özellikleri: % 39 destek
    • Baseline 2023 özellikleri: % 74 destek
    • Yaygın olarak kullanılan özellikler: % 95 destek

Bu farklılıklar, ziyaretçilerinizin kimliği ve sitenize nasıl göz attıkları nedeniyle ortaya çıkar:

  • Teknoloji konusunda bilgili kullanıcılar genellikle güncellemeleri hızlı bir şekilde uygularken genel kitleler genellikle eski sürümleri kullanmaya devam eder.
  • Farklı yaş grupları ve kitlelerin farklı tarama alışkanlıkları ve cihazları vardır.
  • Mobil ve masaüstü kullanıcıları, sitenize erişim şekilleri açısından farklılık gösterir.
  • Bazı bölgeler iOS'i, bazıları ise Android'i tercih eder. Bu da özelliklerin kullanıma sunulduğu zamanı etkiler.

Bu nedenle, aynı özellik bir teknoloji blogunda birkaç ay içinde güvenli bir şekilde kullanılabilirken bir e-ticaret sitesinde bir yıl daha yedek çözümlere ihtiyaç duyabilir.

Referans değerini RUMvision'a entegre etme

RUMvision ekibi, entegrasyonun geliştiricilerin beklentilerine ve bu bilgilerin nasıl sunulmasını beklediklerine uygun olduğundan emin olmak istedi.

Bu konuya iki açıdan yaklaştılar:

  • Geliştiricilerin bu bilgileri bilmesi gerekir.
  • Daha geniş bir geliştirici topluluğu için içerik üreten içerik üreticiler

Birçok geliştirici gibi ekip de Can I Use ve MDN destek tabloları gibi araçları düzenli olarak kullanır. Bu nedenle, entegrasyonu, bilgileri tüm RUMvision kullanıcılarının ihtiyaçlarını karşılarken kendi iş akışlarını da iyileştirecek şekilde sunacak şekilde uyarladı.

Birden fazla veri kaynağını birleştirme

İşlem, yeni yayınlanan web özellikleri verilerinin otomatik olarak içe aktarılmasıyla başlar. Bu özellikler daha sonra RUMvision kullanıcıları için aranabilir ve filtrelenebilir bir girişte gösterilir.

Bir web özelliği tıklandığında, temel bilgiler ve tarayıcı desteği zaman çizelgesi hakkında ayrıntılı bilgi gösteren bir modal açılır. Bu görünüm, ek analizlerle desteklenir:

  • Kaynaklar: MDN, Can I Use, W3C sayfalarının bağlantıları, tarayıcı sürüm bilgileri, Chrome Durumu ve web.dev makaleleri.
  • Referans kullanım zaman çizelgesi: Her tarayıcının bir özellik için desteği ne zaman uyguladığını gösterir.
  • MDN destek tablosu: MDN'nin standart destek tablolarına benzer ayrıntılı bilgiler gösteren browser-compat-data verilerinden elde edilen veriler.
  • Bilinen hatalar: Mevcut kaynakları desteklemek için aynı veri kümesinden ayıklanır.
  • Yapay zeka desteği: Başlıca tarayıcılardaki destek istatistiklerini yorumlamaya yardımcı olur.
RUMVision'da gösterildiği gibi Popover için içerik görünürlüğü ve tarayıcı desteği verileri dokümanları.
Bu ekran görüntülerinde, referans grubundaki tüm özelliklerle ilgili ücretsiz olarak sağlanan dokümanlar ve destek bilgileri gösterilmektedir.

Modern özelliklerden en iyi şekilde yararlanma

Referans değerini kullanıcı verileriyle birleştirmenin asıl gücü, modern web özellikleriyle ilerlemeyle de ilgilidir. Her özellik için kitlenizin benimseme düzeylerini görürsünüz ve bu düzeylerin zaman içinde nasıl değiştiğini izleyebilirsiniz. Bu, karmaşık JavaScript çözümlerinin doğru zamanda yerel tarayıcı özellikleriyle değiştirilmesi anlamına gelir. Örneğin, şuradan şuraya geçebilirsiniz:

"Geniş kullanıma sunuldu" durumunu almak için 30 ay beklemek yerine gerçek kullanım verilerine dayalı bilinçli kararlar alabilirsiniz. Yeni özellikleri ne zaman kullanıma sunacağınızı ve bunları nasıl etkili bir şekilde uygulayacağınızı tam olarak bilirsiniz.

Gerçek örnekler, gerçek etki

Çalışan bir örnek için yakın zamanda Temel Seviye'ye ulaşan CSS content-visibility özelliğine göz atın:

  • Bazı siteler, hemen uygulanmaya hazır% 99 destek aldı.
  • Diğerleri ise% 82-89 oranında destek göstererek yedek planlara ihtiyaç olduğunu gösteriyordu.
  • Hâlâ eski tarayıcılarda bulunan birkaç belirli kullanıcı segmenti.
Tarayıcı destek zaman çizelgeleri.
content-visibility ABD'deki bir teknoloji sitesi ile Orta Doğu'daki bir emlak sitesi için zaman çizelgesi.

Veriler ayrıca, Şubat 2024 ile Eylül 2024 arasında Safari'de her iki özellik için de desteğin %20 civarında kaldığını gösteriyor. Bu durum, Eylül 2024'ten itibaren kullanıma sunulan iOS 18'de bu özelliğin kullanıma sunulmasıyla aynı zamana denk geliyor.

Kendi "Yaygın olarak kullanılabilir" referans değeriyle müşteri başarısı

Kendi RUM bilgilerinizden elde edilen analizleri kullanarak kendi referans çizginizi oluşturabilirsiniz. Bu referans çizgisi, kendi siteniz için dört durumda kullanılabilen özellikleri ve bunları filtreleme olanağını içerir:

  • Gönderime hazır (ziyaretçilerinizin en az% 98'i tarafından desteklendiğinde).
  • İyi görünüyor (destek kapsamı% 95 ila %98 arasında).
  • Uyarı (%75 ile %95 arasında kapsama alanı).
  • Dikkatli bir şekilde ilerleyin (%75'ten az kapsama alanı).

İçerik görünürlüğü hakkında bilgi

Kullanıcılar, RUM verilerini web özelliği başına temel bilgilerle birleştirerek başarı hikayeleri elde etti. Informatiebord.nl, kullanıcılarının% 97'sinin yerel özellikleri zaten desteklediğini keşfettikten sonra 30 KB JavaScript polyfill'i kaldırdı. Geliştirici Kevin Meijer şunları söyledi:

"Baseline ile stratejik olarak karar verebiliriz: Performanstan ödün vermeden ziyaretçilerimizin% 97'sine mükemmel bir kullanıcı deneyimi sunmaya mı odaklanacağız yoksa kalan %3'ü karşılamak için yenilikleri yavaşlatacak mıyız? Bu% 3 için ek çabalar çoğunluğun deneyimini olumsuz yönde etkileyeceğinden, bilinçli olarak ilk seçeneği tercih ediyoruz."

Ziyaretçilerin% 96,9'unun ekran dışı kanvası desteklediğini belirten bir mesaj.
Müşteri başarı öyküsü: informatiebord.nl, gerçek kullanıcı verilerine dayanarak siteden polyfill'i güvenle kaldırdı.

Web'e katkıda bulunma

Gerçek kullanıcı analizleriyle birlikte temel veriler, özellik desteği hakkında daha iyi kararlar vermemize yardımcı olur. Eski kodu ne zaman bırakacağınızı, yeni özellikleri ne zaman kullanacağınızı belirlemek için kullanıcılarınızın neleri desteklediğini bilmeniz gerekir.

RUMvision, tarayıcı kullanım kalıplarıyla ilgili bulguları WebDX Topluluk Grubu ile paylaşarak özelliklerin "Yeni kullanıma sunuldu" durumundan "Geniş kullanıma sunuldu" durumuna nasıl geçtiği hakkında bilgi vermektedir.