Shopify mağazalarında LCP'yi uzatan hero görseli, render-blocking font, senkron uygulama scriptleri, kullanılmayan Liquid bölümleri ve şişmiş JavaScript bundle: beş yaygın tema hatasını hem tanıma hem müdahale açısından inceleyen kontrol listesi.
Shopify Temasını Yavaşlatan 5 Yaygın Hata
Shopify, kendi altyapısında çalışan, sunucu tarafını büyük ölçüde sizden soyutlayan bir e-ticaret platformudur. Bu soyutlama, tema düzeyinde yapılan hatalar söz konusu olduğunda bir güvence sunmaz; tema kalitesi, üçüncü taraf uygulama yükü ve görsel kararlar bir arada, mağazanızın Core Web Vitals puanlarını belirler.
Mağazanın yavaş hissettirmesi çoğu durumda platform kısıtlamalarından değil, temaya gömülü alışkanlıklardan kaynaklanır. Teknik denetimlerde beş sorun özellikle sık çıkar: büyük hero görseli, render-blocking font yüklemesi, senkron uygulama scriptleri, kullanılmayan Liquid bölümleri ve şişmiş JavaScript bundle. Her biri ayrı tanılama ve ayrı müdahale ister.
Büyük hero görseli LCP'yi bloke eder
LCP (Largest Contentful Paint), görünür alandaki en büyük içerik öğesinin boyandığı anı ölçer. Shopify temalarında bu öğe büyük çoğunlukla hero bölümündeki görseldir. Görselin dosya boyutu, formatı ve tarayıcıya verilen yükleme önceliği LCP süresini doğrudan etkiler.
Sorunun yaygın görünümü şudur: tema editöründe 2000 x 800 piksel, 400-600 KB boyutunda bir JPEG yüklenmiş, fetchpriority="high" tanımlanmamış, ama bir de hata üstüne loading="lazy" eklenmiş. Lazy loading, viewport dışındaki görseller için tasarlanmıştır; ilk ekrandaki bir görsele uygulandığında tarayıcı görseli daha düşük öncelikle ister ve LCP gecikmesi artar.
Tarayıcı, render ağacını tamamlamadan görselin viewport'ta olup olmadığını belirleyemez. Bu nedenle büyük, önceliksiz bir hero görseli başlangıç yükünde ek baskı oluşturur.
Düzeltme üç adımda ilerler. Önce görseli WebP veya AVIF formatına dönüştürün; çoğu durumda JPEG'e kıyasla boyut belirgin biçimde küçülür. Ardından viewport genişliğine göre boyutlandırın; masaüstü için 1200-1440 piksel genişlik yeterlidir, mobil için ayrı bir srcset sürümü eklenebilir. Son olarak fetchpriority="high" niteliği ekleyin; Shopify'ın Liquid image_tag filtresi bu niteliği destekler, özel temalar doğrudan img etiketine yazabilir.
Hero görselini LCP kaynağı olarak tespit etmek için LCP öğesini bulma yöntemleri başlangıç noktası olabilir. Hangi öğenin LCP olduğunu bilmeden yapılan optimizasyon çoğunlukla boşa gider.
Render-blocking font yüklemesi ilk boyamayı geciktirir
Shopify temalarında özel fontlar çoğunlukla <link rel="stylesheet"> ile bir CDN üzerinden yüklenir. Tarayıcı bu CSS dosyasını indirip işlemeden render ağacını tamamlayamaz; söz konusu kaynak render-blocking olarak sınıflandırılır.
Render-blocking font FCP'yi (First Contentful Paint) doğrudan uzatır. Sayfa HTML'i hazır olsa da, font CSS indirilene kadar tarayıcı text içeriğini ya görünmez bırakır (FOIT: Flash of Invisible Text) ya da sistem fontuyla gösterir (FOUT: Flash of Unstyled Text). Her iki durum da kullanıcıya kararsız ve yavaş bir deneyim yansıtır.
İki müdahale bu sorunu çözer. Birinci seçenek: font CSS dosyasını <link rel="preload"> ile önceden istemek ve font-display: swap tanımlamak. Swap, FOIT'u ortadan kaldırır; font yüklenene kadar sistem fontu görünür kalır, içerik hemen okunabilir hale gelir. İkinci seçenek: özellikle body text için sistem font stack'i tercih etmek. "Inter" veya özel bir tipografi yerine -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif gibi bir stack, ek ağ isteği gerektirmez.
@font-face tanımlarını harici bir CDN yerine doğrudan tema CSS dosyasına gömmek, ek DNS sorgusunu ortadan kaldırır. Bu, özellikle Google Fonts dışındaki kaynaklardan yükleme yapıyorsanız bağlantı gecikmesini azaltan somut bir adımdır. Font yüklemesinin FCP ile nasıl ilişkilendiğini daha geniş bağlamda görmek için render zincirindeki gecikme kaynaklarına bakmak yararlı olur.
Senkron uygulama scriptleri sayfayı bekletir
Her yüklü Shopify uygulaması temaya bir veya birden fazla script ekler. Sorun burada başlar: çoğu uygulama, scripti <head> içine senkron biçimde yerleştirir. Senkron bir script HTML ayrıştırmasını durdurur; script indirilir, yürütülür, ardından ayrıştırma kaldığı yerden devam eder.
Yavaşlık bulaşıcıdır. İki uygulama senkron yüklendiğinde etkiler toplanır; beş uygulama aktifse, başlangıç zinciri birkaç yüz milisaniye uzayabilir. Bu gecikme FCP ve LCP'ye yansır. Daha önemlisi, ana iş parçacığı uzun görevlerle meşgul olduğunda INP (Interaction to Next Paint) de kötüleşir; kullanıcı butona tıklar, yanıt gecikir.
Uygulamaları değerlendirirken şu soruları sormak işe yarar: bu uygulama aktif kullanımda mı, ilk render için zorunlu mu, async veya defer ile yüklenemiyor mu? Bazı uygulamalar Shopify App Block sistemi üzerinden tema bölümlerine entegre edilebilir; bu yöntemle script yalnızca ilgili bölüm aktif olduğunda yüklenir. Uygulamayı devre dışı bırakıp LCP ve FCP değerlerini yeniden ölçmek, o scriptin gerçek maliyetini göstermenin en güvenilir yoludur.
Hangi scriptin ne kadar bloke ettiğini görmek için Network waterfall'u okumak gerekir. Performans sorununda önce neye bakılacağı konusunda waterfall okuma adımları yol gösterici olacaktır.
Kullanılmayan Liquid bölümleri gereksiz yük taşır
Shopify temaları bölüm (section) sistemi üzerine kuruludur. Tema editöründe aktif olmayan ya da herhangi bir sayfada kullanılmayan bölümler bile Liquid motoru tarafından işlenebilir ve HTML çıktısına dahil olabilir. Premium temalar on beş ile yirmi farklı bölüm şablonu içerebilir; bunların önemli bir kısmı kurulumdan bu yana hiç etkinleştirilmemiş olabilir.
Sorun iki boyutludur. Birinci boyut server tarafındadır: Liquid render süresi gereksiz yere uzar, TTFB'yi dolaylı biçimde etkiler. İkinci boyut istemci tarafındadır: kullanılmayan bölümlerin CSS ve JavaScript dosyaları yine de sayfaya dahil edilir, aktarılan toplam veri büyür, ayrıştırma yükü artar.
Ölçüm basit. Chrome DevTools Coverage panelini açın, sayfayı yenileyin ve yüklenen CSS ile JS dosyalarına bakın. Yüzde yetmişin üzerinde kullanılmayan kural görmek alışılmadık değildir; bu oran genellikle etkin olmayan bölümlere ait stiller anlamına gelir.
Müdahale sırası şöyledir: tema editöründe sayfaya eklenmemiş bölümleri kaldırın, ardından kodda ilgili CSS ve JS bloklarını ayırt edin. Eğer tema geliştirici erişimine açıksa, kullanılmayan .css ve .js dosyalarını Liquid koşullarıyla kilitlemek - yani yalnızca ilgili bölüm sayfada aktifken dahil etmek - aktarılan veri miktarını düşürmenin en temiz yoludur. Hazır tema kullanıyorsanız ve kaynak koduna müdahale edemiyorsanız, en azından editörde aktif olmayan bölümleri kaldırmak TTFB ve ayrıştırma yükü açısından kayda değer bir iyileştirme sağlar.
Şişmiş JavaScript bundle ana iş parçacığını tıkar
Büyük bir JS bundle teslim edildiğinde tarayıcının yapması gereken üç iş vardır: dosyayı indirmek, ayrıştırmak ve yürütmek. Bu üç aşama ana iş parçacığını (main thread) meşgul eder. Ana iş parçacığı meşgulken kullanıcı tıklamalarına, kaydırmaya ve form etkileşimlerine yanıt gecikir; bu durum INP metriğine yansır.
Shopify'ın varsayılan tema JS'si genellikle makul bir boyuttadır; asıl şişme birkaç kaynaktan gelir. Tema şablon kütüphaneleri bazen yüzlerce kilobaytlık bir çerçeve içerir, bunun büyük bölümü o sayfada hiç kullanılmaz. Uygulama scriptleri kendi bağımlılıklarını getirir; bazı uygulamalar özellikle ödeme, yorum veya arama bileşenlerinde React veya benzeri ağır bir kütüphane yükler. Eski yöntemle entegre edilmiş scriptler tekrar eden bağımlılıkları içerebilir, örneğin aynı yardımcı kütüphane iki farklı yerden yüklenir.
Ölçümü Coverage ve Network paneli birlikte yapar. Network panelinde JS dosyalarını boyuta göre sıralayın; Coverage panelinde aynı dosyaların kullanılmayan kod oranına bakın. Otuzu aşan büyük dosyalar ve yüksek kullanılmayan oran, müdahale önceliğini işaret eder. Burada dikkat gereken nokta şudur: her büyük JS dosyası sorun değildir, sorun ilk yükleme sırasında zorunlu olmayan kodun o anda yüklenmesidir.
Uygulama tarafında kaldırma veya değiştirme seçeneği yoksa, o uygulamanın yalnızca ilgili sayfalarda yüklenmesini sağlamak bile fark yaratır. Kasa uygulaması checkout dışında, inceleme uygulaması ürün sayfası dışında yükleniyorsa bu gereksizdir. Shopify App Proxy veya Script Tag ayarlarından hedefleme yapılabilir. Tema JS'si söz konusu olduğunda, geliştiriciye sahip temalar için tree-shaking ve code splitting uygulanabilir; hazır temalarda bu müdahale temayı güncellemeden mümkün olmayabilir.
JavaScript yükünün performans etkisini daha geniş bir e-ticaret perspektifinden görmek için e-ticaret sitelerinde öncelikli performans adımları yararlı bir çerçeve sunar.
Tema seçimi ve düzenli denetim
Beş sorun birbirinden bağımsız görünse de kökleri çoğunlukla aynı yerde buluşur: tema seçiminde ve kurulum sonrası denetimsizlikte. Tema seçilirken görsel zenginliğine bakılır, performans puanına nadiren bakılır. Tema kurulur, uygulamalar eklenir, aylar geçer; bu sürede JS bundle büyür, hero görseli değişmez, kullanılmayan bölümler birikir.
Yeni bir tema değerlendirirken üç kontrol hızlı bir fikir verir. Demo mağazasını PageSpeed Insights ile test edin; puan yüksekse temanın varsayılan konfigürasyonu temizdir. Temayı satın almadan önce kaynak kodunu inceleyin; baş kısımdaki senkron script sayısı ve toplam JS boyutu görünür. Son olarak tema geliştiricisinin uygulama uyumluluğuna ilişkin notlarına bakın; bazı temalar belirli uygulamalarla çakışan script yapıları içerir.
Kurulum sonrası denetim için belirli aralıklarla - büyük değişikliklerden sonra ve aylık düzenli olarak - LCP, FCP ve INP değerlerini kaydetmek, regresyonları erken yakalar. Aylık hız takibinin nasıl yapılacağı bu alışkanlığı sistematik bir forma sokar. Shopify mağazasına özgü daha kapsamlı iyileştirme adımları için Shopify mağaza hızı rehberine bakabilirsiniz.
Beş hatanın tamamının aynı anda var olması ola dışı değildir; orta büyüklükteki bir mağazada birden fazlasını bir arada görmek yaygındır. Ancak her biri için ayrı ayrı çözüm üretmek gerekmez; hangi hatanın LCP, FCP veya INP'ye en çok katkı yaptığını belirlemek önceliklendirmeyi kolaylaştırır. Hangi soruna önce bakılacağına karar verme süreci bu anlamda rehber niteliğindedir.
Shopify, altyapı tarafındaki kararları büyük ölçüde üstlenir; tema ve uygulama tarafı ise tamamen mağaza sahibinin kontrolündedir. Bu ayrım hem kısıtlamayı hem de fırsatı tanımlar: sunucu yapılandırmasına, CDN seçimine veya önbellek politikasına müdahale edemezsiniz, ama LCP görselini optimize etmek, render-blocking kaynakları azaltmak ve gereksiz scriptleri kaldırmak tamamen erişilebilir adımlardır. Somut adımlar attıkça alan verisiyle doğrulama yapmak, özellikle Search Console Core Web Vitals raporu, müdahalenin gerçek etkisini gösteren tek güvenilir kaynak olur.