Shopify'da Önemli Web Verileri Nasıl Optimize Edilir?

Önemli Web Verilerinin nasıl ölçüleceği ve sitenizin puanının iyi mi kötü mü olduğu hakkında çevrimiçi pek çok bilgi var. Ancak, özellikle Shopify'da iyileştirmeler yapmak için yapmanız gerekenler hakkında çok az eyleme geçirilebilir tavsiye var.

Bu makalede, Shopify mağazanızda Core Web Vitals puanınızı tam olarak nasıl iyileştirebileceğinize bakacağız. Bu önerilerin birçoğunu bir geliştirici olmadan eyleme geçirilebilir hale getirmeye çalıştık, ancak bazıları uzman teknik uygulama gerektiriyor.

Sırayla her bir temel web hayati metriğini inceleyeceğiz, performanslarını hangi faktörlerin etkilediğini açıklayacağız ve ardından size herhangi bir Shopify mağazasında her bir CWV metriğini nasıl iyileştireceğinizi göstereceğiz.

Doğrudan o bölüme atlamak için aşağıdaki başlıklara tıklayın:

• Shopify'da Önemli Web Verileri Nasıl Hesaplanır?
• Shopify'da LCP Nasıl İyileştirilir?
• Shopify'da CLS Nasıl İyileştirilir?
• Shopify'da FID Nasıl İyileştirilir?
• Shopify Core Web Vitals Uygulamaları

Temel Web Verileri Nedir?

Önemli Web Verilerinin ne olduğunu kısaca özetleyelim.

Önemli Web Verileri, Google'ın web sayfası performansını ve kullanıcılar için deneyimi ölçmek için kullandığı bir dizi ölçümdür. Her metrik için URL'ler "Yeşil - İyi", "Sarı - İyileştirme Gerekiyor" veya "Kırmızı - Kötü" olarak işaretlenir.

Core Web Vitals puanlarının, arama motoru sıralamaları üzerinde doğrudan etkisi vardır.

LCP - En Büyük İçerikli Boya

Sayfanızdaki en büyük öğenin ekranda görüntülenmesi ne kadar sürer?

CLS - Kümülatif Düzen Kaydırma

Sayfa yüklenirken sayfa düzeni ne kadar değişiyor?

FID - İlk Giriş Gecikmesi

Sayfanın etkileşimlere duyarlı hale gelmesi ne kadar sürer?

Shopify'da Önemli Web Verileri Nasıl Hesaplanır?

Google'ın Önemli Web Verileri puanlarını nasıl hesapladığını anlamak önemlidir çünkü bu, nasıl anlamlı iyileştirmeler yapılacağını etkiler. Önemli Web Verileri verileri, Chrome web tarayıcısını kullanan gerçek web sitesi ziyaretçilerinin performansını ölçen CrUX verilerinden gelir. Buna 'alan verileri' denir.

Her bir CWV metriği için, "Zayıf" olarak işaretlenmemek için ulaşmanız gereken minimum bir ortalama puan vardır. Bu, sayfa gruplarına göre kaydedilen ortalama puanlara dayanır. Shopify web sitenizin temel bir web vitals metriğine göre puanlanmadığını anlamak önemlidir; web sitenizdeki URL'ler.

Shopify mağazanız bir Önemli Web Verileri metriğinde başarısız olduğunda, Search Console size sorundan etkilenen URL'lerin bir örneğini gösterir. Bu, sorunun nerede olduğunu daraltmanıza ve hedef iyileştirme uygulamanıza yardımcı olur. Shopify mağazanızda herhangi bir Önemli Web Verileri optimizasyon çalışmasına başlamadan önce, hangi iyileştirme alanlarının en etkili olacağını belirleyin. Olumlu sonuç vermeyecek işlerle zamanınızı boşa harcamayın.

Shopify Core Web Vital Metrik Optimizasyon İpuçları

Core web vitals, en önemli içeriğinizi ve kaynaklarınızı mümkün olan en kısa sürede sunmakla ilgilidir.

Sayfa hızı optimizasyonu tek seferlik bir şey değildir. Kuruluşunuzun, sayfa hızı etkisinin tüm karar alma süreçlerinde dikkate alındığı bir kültürü benimsemesi gerekir. Mağazanızda yapmayı düşündüğünüz her geliştirme için, sayfa hızıyla ilgili değiş tokuşun ne olacağını düşünün.

Shopify'da LCP Nasıl İyileştirilir?

LCP, sayfanızdaki en büyük öğeyi ve tarayıcının bu öğeyi ekrana yüklemesinin ve oluşturmasının ne kadar sürdüğünü ifade eder. Bu normalde bir görüntü olacaktır, ancak bir metin öğesi de olabilir.

Bir Shopify mağazasında LCP'yi iyileştirmek için LCP'yi etkileyen faktörlerin anlaşılmasına yardımcı olur. LCP öğenizi yüklemek için gerçekleşen dört aşama vardır.

LCP, web tarayıcısının en büyük öğenizi sayfaya boyamasının/işlemesinin ne kadar sürdüğü ile ilgilidir. Yükleme ve boyama aynı şeyler değildir. LCP öğeniz küçük bir dosya boyutuna optimize edilmiş olsa bile, LCP aşağıdakilerden dolayı uzun sürebilir:

• Kaynak Yükleme Gecikmesi. Tarayıcının öğeyi indirmeye başlaması çok uzun sürüyor
• Öğe Oluşturma Gecikmesi. LCP öğesi tarayıcı tarafından indirildikten sonra, öğenin sayfada işlenmesi çok uzun sürüyor.

Buradaki paket servis anlayışı, LCP'nin en büyük öğenizin dosya boyutundan daha fazlası olduğudur. Yukarıdaki 4 aşamalı süreci tamamlamak için gereken süredir. LCP puanlarınızı iyileştirmek için, LCP öğenizi yükleme ve oluşturma sürecinin tamamına odaklanın.

Herhangi Bir Shopify Sayfasında LCP Öğesini Nasıl Bulunur?

LCP'yi iyileştirmek için sayfadaki hangi öğenin LCP olduğunu bilmeniz gerekir. Bu, Shopify'da kolaydır. Basitçe PageSpeed ​​Insights'a gidin ve LCP'yi bulmanız gereken URL'yi analiz edin. Rapor bittiğinde, aşağı kaydırın ve 'Teşhis' bölümüne bakın. 'En Büyük İçerikli Boya öğesi' adlı bir satır olacaktır. Bu sayfada LCP'nin hangi öğe olduğuyla ilgili ayrıntıları görmek için bunu genişletin.

LCP Öğesini Tembel Yüklemeyin

Tembel yükleme, bir öğeyi yalnızca görünüm alanında görünür hale geldiğinde yüklemek için kullanılan bir yöntemdir. Bu, ekranın üst kısmındaki içeriğin daha hızlı yüklenmesine yardımcı olur. LCP öğenizi tembel yüklememelisiniz çünkü bu, tarayıcının öğeyi indirmeye başlama hızını geciktirecektir.

Shopify mağazalarında bir ürün sayfasındaki LCP öğesi normalde ana ürün görseli olacaktır. Veya bir blog gönderisinde LCP öğesi muhtemelen bir blog başlık resmi olacaktır. Bazı Shopify temaları, ekranın üst kısmında görünenler dahil her görsele otomatik olarak yavaş yükleme ekler. Shopify şablonlarınızın her birini inceleyin ve LCP öğesinin ne olduğunu öğrenin. Ekranın üst kısmında görünüyorsa, aşağıdaki özelliğin HTML etiketinde yer almadığından emin olun:

yükleniyor="tembel"

LCP Öğesini önceden yükleyin

Web tarayıcılarına belirli bir kaynağı mümkün olan en kısa sürede indirmelerini söylemek için rel=”preload” kullanabilirsiniz. LCP öğenize rel=”preload” uygulayarak, tarayıcı bu kaynağın sayfaya yüklenmesine öncelik verecektir.

Tema kodunuzu düzenleyerek bunu kendiniz yapabilirsiniz. Shopify tema geliştiricileri için Shopify sıvı şablonlarına eklenebilecek bir ön yükleme etiketi çıkaran bir filtre vardır.

Nextgen Görüntülerini Kullanın

WebP gibi yeni görüntü formatlarının dosya boyutu, JPG ve PNG gibi geleneksel formatlardan daha küçüktür. LCP öğeniz bir görüntüyse, bir Nextgen görüntü formatı kullanmak indirme süresini hızlandırır. Mümkün olduğunda WebP görüntülerini kullanın, ancak yeni nesil görüntüleri desteklemeyen eski tarayıcılar için bir yedek eklemeyi unutmayın.

Yeni Shopify temaları, resimlerinizi otomatik olarak WebP'ye dönüştürür ve uygun tarayıcılara sunar.

LCP Öğesinin İlk HTML Yanıtına Dahil Edildiğinden Emin Olun

LCP öğenizin ilk HTML yanıtı içinde teslim edildiğinden emin olarak 'kaynak yükleme gecikmesini' azaltın. LCP öğesi sayfaya harici bir kaynak (JS komut dosyası gibi) tarafından yüklenirse, tarayıcının LCP öğesini indirmeye başlaması daha uzun sürer.

Bunun Shopify mağazanızı etkileyip etkilemeyeceği, kullandığınız mağaza temasına bağlıdır. Bunu test etmenin hızlı bir yolu, LCP öğenizin ne olduğunu bulmak ve ardından JS kapalıyken sayfayı görüntülemektir. LCP öğesinin çıktısı sayfa HTML'sinde yoksa bu, ilk HTML yanıtında teslim edilmediği anlamına gelir.

Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın

"Görüntülemeyi engelleyen kaynakları ortadan kaldırın" tavsiyesi uzun zamandır var. Ama gerçekte ne anlama geliyor? Komut dosyaları ve stil sayfaları gibi bazı kaynaklar, bir web sayfasının oluşturulmasını engeller. Bir tarayıcı bir kaynak keşfettiğinde, sayfayı indirmeyi durduracak ve bunun yerine bu kaynağı indirip çalıştıracaktır. Bu, sayfanın kullanıcılar için oluşturulmasını geciktirir.

Bir deniz feneri raporu size herhangi bir sayfa için oluşturmayı engelleyen kaynakları gösterecektir. Bu nedenle, komut dosyalarınızdan ve stil sayfalarınızdan hangilerinin oluşturmayı engellediğini bulmanız ve ardından bunların teslim edilme şeklini optimize etmeniz gerekir.

İşleme Engelleme JS'yi Ortadan Kaldırın

Öncelikle erteleme ve eşzamansız olarak adlandırılan iki özelliği anlamanız gerekir. Bu HTML öznitelikleri harici komut dosyalarına eklenebilir ve tarayıcıya kaynağı ne zaman indireceğini/yürüteceğini söyleyebilir.

Böylece, JS betiklerinize async veya defer uygulayarak sayfa işleme üzerindeki etkilerini en aza indirebilirsiniz. Shopify, komut dosyalarınızı otomatik olarak senkronize etmez veya ertelemez, bu nedenle sıvı şablonlar temasına gitmeniz ve özelliği kendiniz eklemeniz gerekir. Ancak, bir komut dosyasını ertelemenin mağazanızın işlevselliği üzerinde ne gibi bir etkisi olabileceğini düşünmeniz gerektiğinden, bu işlemi yaparken çok dikkatli olun.

Ayrıca, Shopify mağazanıza yüklediğiniz uygulamaların ve eklentilerin, işlemeyi engelleyen JS betiklerinin çıktısını alacağını da göreceksiniz. Bunları bir Lighthouse raporu aracılığıyla belirleyebilirsiniz. Mağazanıza yüklediğiniz her uygulamayı dikkatlice değerlendirin ve sayfa hızı üzerindeki potansiyel etkisini düşünün. Bazı satıcılar, kullanılmayan uygulamaların hâlâ bir mağazada yüklü olduğunun ve sayfa hızını etkilediğinin farkına bile varmaz. Bir uygulamayı kaldırdığınızda, temanızda herhangi bir eski kod bırakmadığından emin olun.

Oluşturmayı Engelleyen CSS Stil Sayfalarını Ortadan Kaldırın

Oluşturmayı engelleyen CSS'yi ortadan kaldırmak için, ekranın üst kısmındaki içeriği oluşturmak için gereken kritik stilleri satır içine almalısınız. CSS'nin çoğu kullanılmayacağından, tüm stil sayfanızı her ziyaretçi için hemen indirmek verimli değildir.

Çözüm, sayfanızın ekranın üst kısmını oluşturmak için gereken kritik CSS'yi kafanızdaki bir stil etiketine dahil ederek satır içine almaktır. Daha sonra aşağıdaki kodu ekleyin ana stil sayfanızı eşzamansız olarak yüklemek için theme.liquid.js dosyanızın.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

Bunu canlı mağazanıza yayınlamadan önce, sayfanızın görsel olarak hala doğru göründüğünü doğrulamak için bir test teması üzerinde deneme yapın.

Shopify'da CLS Nasıl İyileştirilir?

CLS, bir sayfa yüklenirken sayfa düzeninin ne kadar değiştiğiyle ilgilidir. Bunun nedeni, normalde yüklenip işlenirken içeriği hareket ettiren görüntülerdir.

Resimlerinize Genişlik ve Yükseklik Nitelikleri Ekleyin

En kolay CLS çözümü, img etiketlerinizin açık genişlik ve yükseklik nitelikleri çıktısını almasını sağlamaktır. Bu nitelikler resim HTML'sine uygulanır ve tarayıcıya resim genişliğini ve yüksekliğini söyler. Tarayıcı bu bilgilerle görüntünün en boy oranını ve boyutlarını hesaplayabilir ve o görüntü için gereken alanı ayırabilir. Bu, görüntü sayfaya eklendiğinde düzenin kaymasını durdurur.

Bunu kendi Shopify mağazanızdaki bir görsel üzerinde yapmak için giriş yapın ve temalar bölümüne gidin. Ve temanız için 'Kodu Düzenle'ye gidin. Ardından, sıvı şablonunuzda görüntüyü çıkaran kod parçacığını bulun ve aşağıdaki parçacığı img etiketine ekleyin.

 height="{{img.height}}" width="{{img.width}}

Shopify ana sayfanız, koleksiyonlarınız, ürünleriniz ve bloglarınız için kullandığınız akıcı şablonlara bakın ve img etiketlerinin genişlik ve yükseklik niteliklerini referans aldığından emin olun.

Yazı Tiplerinizi Optimize Edin

Google yazı tipleri gibi yerlerden yüklediğiniz bu süslü web yazı tipleri, FOUS (stilsiz metin flaşı) adı verilen bir sorun nedeniyle CLS sorunlarına neden olabilir. Bu, web tarayıcısının başlangıçta bir yedek yazı tipini yüklediği yerdir ve ardından ana web yazı tipi yüklendiğinde metin yeniden işlenerek bir düzen kaymasına neden olur.

3. Taraf Web Yazı Tiplerine Güvenmeyi Azaltın Her şeyden önce, üçüncü taraf web yazı tiplerine olan güveninizi azaltmaya çalışın. Web yazı tiplerini içe aktardığınızda, yalnızca ihtiyacınız olan yazı tipi ailelerini içe aktarın. Farklı yazı tipi ağırlıklarını ve stillerini, hiç kullanılmamışlarsa içe aktarmayın, çünkü bu, yazı tipi dosyasının boyutunu şişirir.

Yazı Tiplerini Önceden Yükle Web yazı tipleri bazen bir stil sayfası içinden yüklenir. Bu, tarayıcının yazı tipini indirmeye başlama hızını geciktirir. Bunun yerine, yazı tipi dosyalarınızı önceden yükleyin. mağazanızın Bu, tarayıcıya yazı tipi dosyasını yüksek öncelikli olarak yüklemesini söyleyecektir.

font-display kullanın:opsiyonel Font-display, tarayıcıya bir font yüzü 100 ms içinde indirilmediğinde ne yapması gerektiğini söyleyen bir CSS özelliğidir. Tarayıcı başlangıçta yedek yazı tipini yükler ve özel yazı tipinin indirilmesi 100 ms içinde bitmezse, tarayıcı yedek yazı tipini sayfada işlenmeye devam eder. Bu, özel yazı tipinin çok geç yüklenmesi ve düzen kaymasına neden olma riskini azaltır.

Shopify'da FID Nasıl İyileştirilir?

Deneyimlerimize göre FID, Shopify mağazalarını etkilediğini gördüğümüz en az yaygın Core Web Vital metriğidir. FID'yi, bir sayfanın yükleme sırasında ne kadar duyarlı olduğunu ölçmenin bir yolu olarak düşünün. Hiçbir şey, kullanıcıları tıklamak/dokunmak kadar sinirlendiremez ve hiçbir şey olmaz.

FID, Toplam Engelleme Süresi (TBT) adı verilen başka bir metriğe benzer. TBT, sayfanın oluşturulmaya başlaması (First Contentful Paint veya FCP) ile sayfanın yanıt vermeye başlaması (Interactive Time veya TTI) arasındaki süreyi ölçer.

TBT, ana iş parçacığının işlenmesini engelleyen 'uzun görevler'den kaynaklanır. Ana iş parçacığı, tarayıcının bir sayfayı yüklemek için gereken her şeyi işlediği yerdir. Uzun görevler ana iş parçacığının işlenmesini engellerse, bir sayfanın kullanıcılar için ne kadar hızlı etkileşimli hale geldiğini geciktirir.

FID ve TBT Arasındaki Fark Nedir?

FID ile TBT arasındaki temel fark, FID'nin saha verilerine (Shopify mağazanızı ziyaret eden gerçek kullanıcılardan alınan veriler) dayalı olmasıdır. Oysa TBT laboratuvarda ölçülebilir ve tanımlanmış ağ koşullarına sahip yapmacık bir ortamda testler yapılarak hesaplanır.

Kendi sayfalarınızı test ederken FID'yi ölçemeyeceğiniz için, bunun yerine TBT'yi ölçmelisiniz.

FID'yi iyileştirmek için Shopify mağazanızın bir kullanıcının ilk etkileşimine yanıt verme hızını artırmanız gerekir. Bu, Shopify sayfalarınızın mümkün olduğunca verimli bir şekilde yüklenmesini sağlayarak yapılır. Bu üç alana odaklanın:

Üçüncü Taraf Kodun Etkisini Azaltın

Tüm temel web vitals ölçümlerinde olduğu gibi, üçüncü taraf JavaScript genellikle sorunların nedenidir. Ana ileti dizisini 250 ms'den fazla bloke eden herhangi bir üçüncü taraf, bir Lighthouse raporunda işaretlenir. Hangi üçüncü taraf komut dosyalarının sorunlara neden olduğunu belirlemek için sayfalarınızı Lighthouse aracılığıyla çalıştırın. Ardından, hangilerinin eşzamansız veya erteleme olarak ayarlanabileceğine karar verin.

JavaScript Yürütme Süresini Azaltın

JavaScript'inizin yürütülmesi için gereken süre de önemlidir. Her şeyden önce, sayfalarınızı Lighthouse'da çalıştırın ve hangi komut dosyalarının yürütülmesinin en uzun sürdüğünü belirleyin. Lighthouse, 2 saniyeden uzun süren komut dosyalarını işaretleyecektir.

Kod Bölmeyi Kullanın Tüm JavaScript kodunuzu tek bir dosyada teslim etmek yerine, kodunuzu daha küçük parçalara bölün ve yalnızca o sayfa için gereken kodu gönderin. Bu kolay değildir ve kodunuzu yöneten geliştiricilerin desteğini gerektirir. Projenin başında Shopify temanızın geliştirilmesine entegre edilirse bunu çok daha kolay bulacaksınız.

Kodunuzu Küçültün ve Sıkıştırın Kodunuzu küçülttüğünüzde, gereksiz boşlukları ve yorumları kaldırırsınız. Bu, dosyanın boyutunu azaltır ancak bir tarayıcının kodu ne kadar hızlı yürütebileceğini hızlandırır. Shopify ile ilgili harika şeylerden biri, çoğu tema js'nin otomatik olarak küçültülmüş olmasıdır.

Küçültme gibi, js'nizi sıkıştırmak dosya boyutunu azaltır ve web tarayıcısının kodu yürütme hızını hızlandırır.

İş Parçacığı Çalışmasını En Aza İndirin

Ana iş parçacığı, tüm iş işleme ve bir sayfanın nasıl oluşturulacağını hesaplama işlemlerini yapar. Ana iş parçacığı yoğun görevler tarafından işgal edildiğinde, TBT'niz daha kötü olacaktır. Bu çoğunlukla Shopify temanızın ne kadar sağlam olduğuna bağlıdır. Zayıf geliştiriciler tarafından oluşturulan ucuz temalar, Shopify uzmanları tarafından geliştirilenler kadar verimli yüklenmeyecektir.

Shopify mağazanızda iş parçacığı çalışmasını nasıl en aza indirebilirsiniz? Yukarıda bahsedildiği gibi, bunun temanıza baştan entegre edilmesi çok daha kolaydır. Harika incelemelere sahip premium bir Shopify teması satın almanızı öneririz. Veya kendi Shopify mağazanızı oluşturuyorsanız, temanızın iş parçacığı çalışmasını en aza indirecek şekilde optimize edilmesini sağlayabilecek Shopify uzman geliştiricileriyle çalıştığınızdan emin olun.

Önemli Web Verileri Performansı Nasıl Ölçülür?

Artık Shopify mağazanızda Önemli Web Verilerini nasıl geliştireceğinizi anladığınıza göre, şimdi Önemli Web Verileri ilerlemenizi nasıl ölçeceğinizi bilmeniz gerekiyor.

Arama Konsolu

Shopify mağazanızın şu anda Core Web Vitals için nasıl performans gösterdiğini görmenin en hızlı yolu Search Console'dur. Sitenizin şu anda nasıl performans gösterdiğiyle ilgili verileri almak için soldaki menüden Önemli Web Verileri raporuna gidin. Önemli Web Verileri sorunları yaşadığınız yerlerin bir dökümünü içerir ve size etkilenen URL'lerin bir örneğini gösterir.

Pagespeed Insights/Deniz Feneri

Sayfa hızı bilgileri, herhangi bir sayfanın sayfa hızını ölçmenizi sağlayan ücretsiz bir Google aracıdır. Performansınızın ayrıntılı bir dökümünü ve daha yüksek bir puan elde etmek için önerilen eylemleri almak için araç aracılığıyla Shopify URL'lerinizi çalıştırın.

CrUX Raporu

CrUX, Google'ın milyonlarca gerçek sayfa için kendi hız/performans veri kümesidir. Google CrUX Data Studio Dashboard'u kullanarak kendi Shopify mağazanız için CrUX verilerine erişebilirsiniz. Pano, sitenizin son 16 ayda Önemli Web Verileri ölçümlerinde nasıl performans gösterdiğine dair ayrıntılı bir döküm sağlar.

Tüm Bu CWV Terimleri Ne Anlama Geliyor?

Önemli Web Verileri'ne bakmaya başladığınızda, birçok karmaşık terminolojiyle karşılaşacaksınız, bunların anlamı şu:

Önemli Web Verileri Shopify Uygulamaları

Önemli Web Verileri puanlarını iyileştirebileceğini iddia eden çok sayıda shopify uygulaması var. Bu uygulamalardan bazıları etkilidir ve performans iyileştirmesi sağlar. Bu, Önemli Web Verileri puanlarınızı iyileştirebilse de herhangi bir etki göreceğinizi garanti etmez. Bunun nedeni, Önemli Web Verileri puanlarının her Shopify mağazasına özel olmasıdır. Belirli bir tema sorunu nedeniyle mağazanızın Önemli Web Verileri puanları düşükse, bir uygulama muhtemelen herhangi bir fark yaratmayacaktır.

Uygulama yolunu kullanmak istiyorsanız, bir uygulamayı denemenizi ve performans üzerindeki etkisini gözlemlemenizi öneririz. İşte denemeniz için önerilen bazı uygulamalar:

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

E-ticaret işinizle ilgili herhangi bir tavsiyeye veya desteğe ihtiyacınız varsa, ekibimize yazın, size yardımcı olmaktan memnuniyet duyarız.