Saha verisi ve laboratuvar skoru: bir mağazayı dürüstçe ölçmek

Bir Shopify mağazasının ne kadar hızlı olduğunu üç araca sorun, üç farklı cevap alabilirsiniz. PageSpeed Insights 100 üzerinden bir skor gösterir, Shopify yönetim paneli milisaniye gösterir, Search Console ise iyi ya da kötü olarak işaretlenmiş URL grupları gösterir. Birbirleriyle çelişmiyorlar; farklı şeyleri ölçüyorlar. Hangisinin ne olduğunu bilmek, mağazayı düzeltmekle bir rakamın peşinden koşmak arasındaki farktır.

İki tür rakam

Laboratuvar verisi, bir sayfanın önceden tanımlanmış bir cihaz ve ağla kontrollü bir ortamda yüklenmesinden gelir. Lighthouse bunu üretir ve PageSpeed Insights’ın en üstündeki skor buna dayanır. Hata ayıklamak için yeterince tekrarlanabilirdir ve bir sayfanın *neden* yavaş olduğunu gösterir: hangi script render’ı engelliyor, en büyük öğe hangi görsel.

Saha verisi gerçek ziyaretçilerden, her biri kendi telefonu, bağlantısı ve önbelleğiyle gelir. Google buna gerçek kullanıcı izleme (real user monitoring) der. Bir sayfanın neden yavaş olduğunu söyleyemez; ama mağazanın, orada alışveriş yapan insanlar için gerçekte nasıl performans gösterdiğini söyleyen tek veri budur.

İkisi neden uyuşmaz?

Google’ın web.dev kılavuzu nedenleri sıralar. Bir mağazada en önemli olanlar:

• Önbellek. Laboratuvar testi sayfayı boş bir önbellekle yükler. Geri dönen müşterilerde temanızın CSS’i ve script’leri çoğu zaman zaten önbellektedir.
• En büyük öğe değişir. LCP için sayılan öğe ekran boyutuna, kişiselleştirmeye ya da bir A/B testine göre farklı olabilir.
• Gerçek etkileşim. Bir laboratuvar çalıştırması varyant seçiciye tıklamaz ya da sepet çekmecesini açmaz. Saha verisi insanlar bunu yaptığında ne olduğunu yakalar.
• Kaydırma. Geç yüklenen görsellerden kaynaklanan düzen kaymaları ziyaretçi kaydırdığında olur; laboratuvar yüklemesi bunları hiç tetiklemeyebilir.
• Tek cihaz ve birçok cihaz. Laboratuvar testi tek bir simüle yüklemedir. Saha verisi ise ziyaretçilerinizin kullandığı her cihaz ve bağlantıya yayılan bir dağılımdır.

Bir Shopify mağazasında her rakam nereden gelir?

PageSpeed Insights’ın saha bölümünün ve Search Console’un arkasındaki veri seti olan CrUX’in kendi sınırları var. Yalnızca herkese açık olarak keşfedilebilen ve yeterli ziyaretçisi olan sayfaları içerir; veriyi de masaüstü ve Android’de buna onay vermiş Chrome kullanıcılarından toplar. iOS’taki Chrome dahil değildir; yani iPhone kullanan müşteriler bu veride yoktur. Shopify’ın raporları daha geniş bir tarayıcı kümesinden, tüm Chromium tarayıcılarından ve Firefox’tan beslenir (Safari orada da dahil değildir) ve sayfa türüne göre ayrıştırılabilir. Bu yüzden bir Shopify mağazasında ilk bakılacak yer onlardır.

Önemli eşikler

Google’ın Core Web Vitals’ı, her biri sayfa yüklemelerinin 75. yüzdeliğinde ve mobil ile masaüstü için ayrı ayrı değerlendirilen üç saha metriğidir:

INP’nin ölçülmesi için gerçek bir kişinin etkileşime girmesi gerekir; bu yüzden laboratuvar araçları onu ölçemez. Lighthouse bunun yerine ana iş parçacığının ne kadar meşgul olduğuna dair bir gösterge olan Total Blocking Time’ı raporlar. Laboratuvarda iyi bir TBT, sahada INP’nin iyi olacağına dair bir ipucudur, kanıt değil.

Laboratuvar verisi hâlâ neye yarar?

Bunların hiçbiri laboratuvar araçlarını işe yaramaz kılmaz. Saha verisi size ürün sayfalarının mobilde yavaş olduğunu söyler; nedenini söyleyemez. Lighthouse ve tarayıcının performans paneli söyleyebilir:

• Hangi görsele ya da başlığa öncelik vereceğinizi bilmeniz için bir şablondaki LCP öğesini belirlemek.
• Uygulamaların eklediği dahil, render’ı engelleyen script’leri ve stil dosyalarını bulmak.
• Kötü tepki hızının olağan şüphelileri olan uzun ana iş parçacığı görevlerini Total Blocking Time üzerinden fark etmek.
• Gerilemeleri yayından önce yakalamak. Yayımlanmamış bir temayı ya da yeni bir uygulamayı laboratuvarda test etmek, etkisini gerçek ziyaretçilerden önce görmenin tek yoludur.

Pratik kural: bir sorun olup olmadığına ve düzelip düzelmediğine saha verisi karar verir; nereye bakılacağına laboratuvar verisi. Saha verisi yerinde sayarken iyileşen bir laboratuvar skoru, değişikliğin gerçek ziyaretçilere ulaşmadığı ya da onlar için bir şey değiştirmediği anlamına gelir.

Bir değişikliği ölçmenin yolu

1. Sahadan başlayın. Shopify’ın web performansı raporlarını cihaz türüne göre filtreleyerek okuyun. Mobildeki bir sorun iyi bir masaüstü rakamının arkasında saklanabilir; tersi de olabilir.
2. Metriği ve şablonu adlandırın. “Mağaza yavaş” düzeltilemez. “Ürün sayfalarında mobil LCP” düzeltilebilir; Shopify’ın sayfa türü raporları da yavaş bir metriğin arkasında hangi şablonun olduğunu gösterir.
3. Nedeni bulmak için laboratuvar araçlarını kullanın. O şablonun temsili bir URL’sinde Lighthouse’u birkaç kez çalıştırın ve skora değil tanılamalara bakın: render’ı engelleyen script’ler, LCP öğesi, uzun ana iş parçacığı görevleri.
4. Tek bir şeyi değiştirin ve ne zaman değiştirdiğinizi yazın. Shopify’ın zaman içindeki raporları uygulama kurulumları ve tema güncellemeleri gibi değişiklikleri işaretler; saha verisindeki bir hareket bir nedene bağlanabilsin diye kendi değişikliklerinizi de tarihiyle not edin.
5. Zaman penceresinin dolmasını bekleyin. Shopify’ın özeti 30, CrUX ise 28 günü kapsar; bu yüzden bir düzeltme ertesi sabah değil, kademeli olarak görünür. Öncesini ve sonrasını aynı cihaz türü ve şablonla karşılaştırın.
6. İkisini de etiketleyerek raporlayın. “Ürün sayfalarında mobil LCP p75, Shopify web performansı raporları, 30 gün” birinin kontrol edebileceği bir iddiadır. “94 aldık” değildir.

Sık raporlama tuzakları

• Tek bir Lighthouse çalıştırmasını aktarmak. Bu, tek bir simüle yüklemedir ve çalıştırmadan çalıştırmaya değişir. İki tekil çalıştırmaya dayanan bir öncesi-sonrası pek bir şey kanıtlamaz.
• Origin verisini sayfa verisi gibi okumak. PageSpeed Insights origin düzeyindeki saha verisine geri döndüğünde rakam test ettiğiniz sayfayı değil, tüm siteyi anlatır.
• Yalnızca ana sayfayı optimize etmek. Trafiğinizi taşıyan şablonları ölçün; bunlar genellikle ana sayfanın yanında koleksiyon ve ürün sayfalarıdır.
• Skoru hedef sanmak. Skor bir laboratuvar tanılamasıdır. Deneyimi anlatan, gerçek ziyaretlerde ölçülen Core Web Vitals’tır.

Bu, performans çalışmasını nasıl şekillendirir?

Lintel’in performans ve teknik SEO çalışması aynı sırayı izler: önce saha verisi, ardından her sorunun izini bir uygulamaya, bir script’e, bir görsele ya da temaya kadar sürmek için laboratuvar araçları, sonra kaynağında bir düzeltme ve ikinci bir ölçüm. Sorunun kaynağı tema kodu ya da bir uygulamanın temaya eklediği bir script olduğunda düzeltme tema mühendisliğidir.