Hyvä hızını Lighthouse ile nasıl test ediyoruz ve nelere dikkat etmeli?

Lighthouse rakamları, kendi sayfalarımız dahil Hyvä ile ilgili her tartışmada karşınıza çıkar. Nasıl ölçüldüğünü bilmiyorsanız 94 puanın hiçbir anlamı yoktur. Aynı sayfayı iki kez ölçün, iki farklı sonuç alabilirsiniz. Yanlış şekilde ölçün, hiç yüklenmemiş bir sayfa için kusursuz bir puan alabilirsiniz.

Bu yazıda Hyvä ve Luma mağazalarını ölçerken kullandığımız yöntemi anlatıyoruz. Kendi mağazanızı kontrol ederken kaçınabilmeniz için bizzat karşılaştığımız tuzakları da sıralıyoruz.

Tek bir Lighthouse ölçümü neden yetmez

Lighthouse, yavaşlatılmış bir bağlantıda orta seviye bir telefonu simüle eder. Sonuç sayfaya bağlıdır; ama aynı zamanda sunucunun o anki yanıt süresine, CDN’e ve testi çalıştıran makineye de bağlıdır.

Tek bir ölçüm iki yönde de sapabilir. Bu yüzden hiçbir zaman tek bir ölçümü referans göstermiyoruz. Her sayfayı üç kez ölçüp medyanı kullanıyoruz.

Bir mağaza için en önemli üç sayfa türünü de test ediyoruz: ana sayfa, kategori ve ürün. Ana sayfası hızlı ama ürün sayfası yavaş olan bir mağaza hızlı bir mağaza değildir.

Yöntemimiz adım adım

1. Lighthouse CLI kullanın. Lighthouse 13'ü eklentilerin kurulu olduğu bir tarayıcı sekmesinden değil, komut satırından çalıştırıyoruz. Tarayıcı eklentileri script ekleyerek sonucu değiştirebilir.
2. Headless Chrome kullanın. Chrome'u şu parametreyle başlatıyoruz: --headless=new; bu, normal Chrome ile aynı oluşturma motorunu kullanır.
3. Gerçek adresi test edin. Sunucu IP'sini veya dahili bir ana bilgisayar adını değil, CDN arkasındaki herkese açık adresi test ediyoruz. Müşteriler mağazaya CDN üzerinden ulaşır; test de öyle yapılmalıdır.
4. Önce önbelleği temizleyin ve ısıtın. Bir dağıtımdan sonra önbelleği temizliyor ve ölçümden önce her sayfayı bir kez açıyoruz. Aksi halde ilk ölçüm soğuk önbelleği ölçer.
5. Her sayfayı üç kez ölçün. 3 mobil ölçümün medyanını ve 1 masaüstü ölçümünü alıyoruz.
6. Raporun tamamını kaydedin. JSON çıktısını kaydediyoruz; böylece yalnızca puana değil, LCP'ye, toplam engelleme süresine, istek sayısına ve aktarım boyutuna da bakabiliyoruz.

Tipik bir komut şöyle görünür:

lighthouse https://www.example.com/women/dresses.html \
  --only-categories=performance \
  --chrome-flags="--headless=new" \
  --output=json --output-path=./category-run1.json

Masaüstü ölçümü için şunu ekliyoruz: --preset=desktop. Varsayılan cihaz türü mobildir.

1. tuzak: bot koruması testi engeller

Bu bizi şaşırttı. nginx yapılandırmamız “lighthouse” veya “headless” içeren bot kullanıcı aracılarını engelliyor. Bu, veri kazıyıcılara (scraper) karşı mantıklı bir kural, ancak testi de engelliyor.

İstek engellendiğinde sunucu bir 403 hata sayfası döndürür. Lighthouse bu küçük hata sayfasını ölçer ve puan mükemmel görünebilir. Rakam gerçektir, ama yanlış sayfayı anlatır.

Çözüm, testi normal bir tarayıcı kullanıcı aracısıyla çalıştırmak ya da kendi test makinenize izin vermektir. Bir puana güvenmeden önce rapordaki son adresi ve ekran görüntüsünü mutlaka kontrol edin.

2. tuzak: CDN'i atlayarak test etmek

Kaynak sunucuyu doğrudan test etmek, müşterilerin gördüğünden daha yavaş bir sonuç verebilir; çünkü CDN hiçbir şeyi önbelleğe almıyordur. CDN'de henüz önbelleğe alınmamış bir sayfayı test etmek ise yine farklı bir sonuç verir.

Bu sorunun daha az belirgin bir türüyle görsellerde karşılaştık. Ürün görselleri, Magento yeniden boyutlandırılmış sürümlerini oluşturmadan önce istenmiş ve CDN'de önbelleğe alınmıştı. Yeniden boyutlandırma bittikten sonra da CDN yanlış yanıtı sunmaya devam etti.

Çözüm, şunu çalıştırmaktı: catalog:images:resize komutunu çalıştırıp ardından CDN önbelleğini alan adı bazında temizlemekti. Tüm görsel kurulumunu şu yazıda anlatıyoruz: Cloudflare arkasında ürün görsellerini WebP olarak sunmak.

3. tuzak: developer modu ve eksik statik içerik

Developer modundaki Magento dosyaları istek anında üretir ve birçok optimizasyonu atlar. Developer modunda alınan bir Lighthouse puanı canlı ortam hakkında neredeyse hiçbir şey söylemez.

Yalnızca canlı modda, statik içerik dağıtıldıktan sonra ve indeksleyiciler zamanlanmış modda çalışırken ölçüm yapıyoruz. Kurulumu şu yazıda anlatıyoruz: Hyvä mağazalarında canlı mod ve dağıtım.

4. tuzak: karşılaştırılamayacak laboratuvar puanlarını karşılaştırmak

Cloudflare arkasında, hızlı bir sunucuda ve canlı modda çalışan temiz bir Luma teması da iyi puan alır. Kendi karşılaştırma testimizde temiz Luma mobilde 88 ila 99, Hyvä ise 93 ila 100 puan aldı.

Asıl büyük fark, tarayıcının yüklemek zorunda olduğu miktardaydı:

Eklentileri ve izleme script'leri olan gerçek Luma mağazaları genellikle temiz bir kurulumdan çok daha düşük puan alır. Gerçek, giriş seviyesi telefonlarda yarım megabaytlık JavaScript, laboratuvarın gösterdiğinden daha fazla fark yaratır. Bu yüzden yalnızca puanı değil, yükü de karşılaştırıyoruz. Tüm rakamlar şu yazıda: Hyvä ve Luma karşılaştırmamızda.

Laboratuvar verisi ve saha verisi

Lighthouse laboratuvar verisidir: tek bir simüle cihaz, tek bir konum, tek bir an. Sürümleri karşılaştırmak ve gerilemeleri yakalamak için mükemmeldir.

Saha verisi gerçek ziyaretçilerden gelir; örneğin Search Console'daki Chrome User Experience Report üzerinden. Gerçek telefonları, gerçek ağları ve gerçek izleme script'lerini yansıtır.

Lighthouse'u hedef belirlemek ve her yayını kontrol etmek için kullanıyoruz. Yayından sonra gerçek kullanıcı verilerine ve tamamlanan ödemelere bakıyoruz; çünkü müşterilerin gerçekten yaşadığı budur. Saha metriklerini Core Web Vitals kontrol listemiz yazımızda daha ayrıntılı ele alıyoruz.

SSS

PageSpeed Insights puanım neden sizinkinden farklı?

PageSpeed Insights, Lighthouse’u Google’ın sunucularında, farklı bir konumdan ve farklı bir anda çalıştırır. Yeterli veri varsa saha verilerini de gösterir. Araçlar arasındaki küçük farklar normaldir; bu yüzden sabit bir yöntem ve medyan kullanıyoruz.

Oturum açmış kullanıcı sayfalarını da test etmeli miyiz?

Hız hedefleri için, oturum açmamış ziyaretçilere önbellekten sunulan herkese açık sayfaları test ediyoruz. Sepet, ödeme ve hesap sayfaları gerçek kullanıcı verileri ve işlevsel testlerle daha iyi kontrol edilir.

Yayına alındığında hangi puanı garanti ediyorsunuz?

Ana sayfa, kategori ve ürün sayfalarında mobilde en az 89 Lighthouse Performance puanı. Bu garanti, Hyvä için optimize edilmiş bir sunucuda ve proje planında üzerinde anlaşılan görseller ve script'lerle geçerlidir.

Mevcut mağazanızın gerçek performansını mı öğrenmek istiyorsunuz? Şuna göz atın: Hyvä ile Luma'nın karşılaştırması, ya da bizden, burada anlattığımız şekilde yapılan ölçümlerle bir Magento 2 analizi isteyin.