Hyvä'da Core Web Vitals: mobilde 2 saniyenin altında LCP

Largest Contentful Paint (LCP), ekrandaki en büyük öğenin görünmesinin ne kadar sürdüğünü ölçer. Bir Magento 2 mağazasında bu genellikle ana ürün fotoğrafı, bir kategori banner'ı ya da ana sayfadaki büyük görseldir (hero).

Google, 2,5 saniye ya da daha kısa bir LCP'yi iyi kabul eder. Biz mobilde 2 saniyenin altını hedefliyoruz; çünkü orta seviye telefonlarda ve kesintili bağlantılarda alışveriş yapan gerçek kullanıcılar her laboratuvar testinden daha yavaştır. Bu yazıda Hyvä'nın LCP için ne yaptığını ve sizin hala yapmanız gerekenleri anlatıyoruz. Anlattıklarımız, her geliştirdiğimiz Hyvä mağazasının arkasındaki hız çalışmasına dayanıyor.

Ölçümlerimiz ne gösteriyor?

Hyvä 1.5.2 ile temiz bir Magento 2.4.9 kurulumunu Magento’nun Luma temasıyla karşılaştırdık. İkisi de aynı sunucuda, aynı katalogla çalıştı; testleri Lighthouse 13 ile yaptık ve üç mobil ölçümün medyanını aldık.

Bu, Hyvä'da mobilde yaklaşık daha hızlı LCP demek. Yöntemin tamamını ve tüm sayfa türlerini şu yazımızda bulabilirsiniz: Hyvä ve Luma karşılaştırması.

Burada dürüst bir not düşmek gerekiyor. Hızlı bir sunucuda, Cloudflare arkasında ve canlı modda çalışan temiz bir Luma mağazası da iyi puan alır. Eklentiler ve takip kodları olan gerçek Luma mağazaları ise genellikle çok daha düşük puan alır. Asıl fark laboratuvar puanında değil, tarayıcının ne kadar şey yüklemesi gerektiğindedir.

Hyvä LCP'ye neden yardımcı olur?

Bir Luma sayfası, sayfanın büyük kısmı çalışmadan önce yaklaşık yarım megabayt JavaScript indirmek, ayrıştırmak ve çalıştırmak zorundadır. RequireJS modülleri zincirler halinde yükler; görsel sırasını beklerken ana iş parçacığı meşgul kalır.

Hyvä ise Alpine.js ve Tailwind CSS kullanır. Yaklaşık 26 KB JavaScript ile tarayıcı ana görsele daha erken ulaşır ve onunla yarışan iş yükü daha azdır.

Gerçek, giriş seviyesi telefonlarda yarım megabayt JavaScript, laboratuvarın gösterdiğinden daha fazla fark yaratır. Hyvä'nın Interaction to Next Paint (INP) metriğinde de iyi sonuç vermesinin nedeni budur: daha az kod, dokunuşlara yanıt vermeye hazır bir ana iş parçacığı demektir.

1. adım: hızlı bir sunucu yanıtı

LCP, HTML gelmeden başlayamaz. Sunucu geç yanıt veriyorsa, hiçbir ön yüz bunu telafi edemez.

Hyvä mağazaları için kullandığımız altyapı şöyle:

• PHP 8.4 üzerinde Magento 2.4.9; canlı modda ve statik içerik dağıtımıyla.
• Önbellek ve oturumlar için Redis ya da Valkey, katalog araması için OpenSearch.
• Her mağaza için ayrı bir PHP-FPM havuzuyla nginx.
• Önde Cloudflare; yönetim panelindeki kayıtların mağaza ön yüzünü yavaşlatmaması için zamanlanmış çalışan indeksleyiciler.

Sayfa görüntülemelerinin çoğunu hızlı yapan şey tam sayfa önbelleğidir. Önbellekteki bir kategori ya da ürün sayfası, Magento uygulamasının tamamı çalıştırılmadan sunulur. Hosting seçeneklerini şu rehberimizde daha ayrıntılı ele alıyoruz: en iyi Magento 2 hosting.

2. adım: LCP görselini doğru kurgulayın

Magento sayfalarının çoğunda LCP öğesi bir görseldir. En büyük farkı dört alışkanlık yaratır.

1. Ana görseli asla geç yüklemeye (lazy-load) bırakmayın. Geç yükleme, sayfanın aşağısındaki görseller için doğrudur; ancak ilk ürün fotoğrafı ya da hero görseli hemen yüklenmelidir.
2. Tarayıcıya bu görselin önemli olduğunu söyleyin. Aradığınız fetchpriority="high" özniteliği, tarayıcının ana görseli daha az önemli dosyalardan önce indirmesine yardımcı olur.
3. Doğru boyutu sunun. Bir telefonun masaüstü boyutunda bir fotoğrafa ihtiyacı yoktur; bu yüzden Magento'nun her görsel rolü için oluşturduğu yeniden boyutlandırılmış görselleri kullanın.
4. Daha hafif bir format kullanın. Ürün ve tema görsellerini WebP olarak sunuyoruz; ayrıntılar şu yazımızda: Cloudflare arkasında WebP görseller.

Görsellerde genişlik ve yüksekliği de her zaman belirtin. Bu LCP'yi doğrudan değiştirmez, ancak sayfa yüklenirken yerleşim kaymasını önler.

3. adım: sayfayı yeni yüklere karşı koruyun

Hyvä mağazalarının çoğu yayına alındığı gün hızlıdır. Risk daha sonra gelir: takip etiketleri, canlı sohbet widget'ları, yorum widget'ları ve pazarlama pikselleri birer birer eklenir.

Her kod, bant genişliği ve işlemci süresi için ana görselle yarışır. Birkaç kuralımız var:

• İlk görünüm için gerekli değillerse, üçüncü taraf kodları sayfa kullanılabilir hale geldikten sonra yükleyin.
• Her takip aracını tek bir kez yükleyin; tercihen birkaç modül yerine tek bir etiket yöneticisi üzerinden.
• Yeni eklentileri yayına almadan önce geride kalmış Luma JavaScript'i açısından kontrol edin.
• Kodlarda ya da eklentilerde yapılan her değişiklikten sonra ana sayfa, kategori ve ürün sayfalarını yeniden test edin.

Yazı tipleri de önemlidir. Birkaç kalınlığa sahip, kendi sunucunuzda barındırdığınız tek bir yazı tipi ailesi genellikle yeterlidir ve başka sunuculara ek bağlantı kurulmasını önler.

4. adım: doğru şekilde ölçün

Laboratuvar testleri ancak gerçek durumu test ettiklerinde işe yarar. Lighthouse 13'ü komut satırından headless Chrome ile kullanıyor, üç ölçümün medyanını alıyor ve önbelleği ısıttıktan sonra CDN arkasındaki gerçek URL'yi test ediyoruz.

Bir tuzak bize zaman kaybettirdi: nginx yapılandırmamız “lighthouse” veya “headless” içeren bot user agent’larını engelliyor; bu da 403 hatasına ve anlamsız bir sonuca yol açtı. Testleri normal bir tarayıcı user agent’ıyla çalıştırınca sorun çözüldü. Tüm tuzakları şu yazıda listeliyoruz: Hyvä hızını Lighthouse ile nasıl test ediyoruz?.

Laboratuvar sonuçları bir yol göstericidir, son karar değil. Google'ın Core Web Vitals için kullandığı şey, Search Console ve Chrome UX Report'ta raporlanan gerçek ziyaretçilerden gelen saha verileridir.

Gerçek mağazalarda durum

Hyvä demo mağazamızda medyan mobil Lighthouse puanları ana sayfa için 96, kategori için 90 ve ürün sayfası için 92. Masaüstünde ise 100, 100 ve 98.

Dokuz ülkeye satış yapan Alman bir müşteri mağazasında Hyvä'ya geçiş, bir ürün sayfasının mobil Lighthouse puanını 72'den 94'e, bir kategori sayfasınınkini 88'den 95'e çıkardı. Bu rakamlar, test ortamı sürümünde yaptığımız ölçümlerden geliyor.

Yayına aldığımız her Hyvä mağazası için ana sayfa, kategori ve ürün sayfalarında mobilde en az 89 Lighthouse Performance puanını taahhüt ediyoruz. Bu taahhüt, Hyvä için optimize edilmiş bir sunucuda ve önceden kararlaştırılan görseller ve kodlarla geçerlidir.

SSS

Hyvä iyi Core Web Vitals sonuçlarını garanti eder mi?

Hiçbir tema bunu tek başına garanti edemez. Hyvä size çok daha hafif bir başlangıç noktası sunar; ancak nihai sonucu yine sunucu, görseller ve üçüncü taraf kodlar belirler.

Hyvä mağazam neden karşılaştırmadaki sonuçlardan daha yavaş?

Genellikle nedenler yavaş bir sunucu yanıtı, optimize edilmemiş bir ana görsel ya da yayından sonra eklenen kodlardır. Bir Magento 2 analizi mağazanızda bunlardan hangisinin geçerli olduğunu gösterir.

Önemli olan tek metrik LCP mi?

Hayır. INP ve Cumulative Layout Shift de Core Web Vitals metrikleridir. Core Web Vitals kontrol listemiz üçünü de ele alıyor.

Kendi mağazanızda 2 saniyenin altında LCP mi istiyorsunuz? Göz atın: Hyvä paketlerimiz, ya da bizimle şu konuyu konuşun: Magento 2 hız optimizasyonu.