Performans bütçesi: Shopify'da görsel ve font stratejisi

Hız çalışması bittikten üç ay sonra mağaza neden yine yavaşlıyor? Çünkü ölçüm var, bütçe yok. Sayfa tipi başına hedefleri, görsel ve font kurallarını ve bütçenin nasıl korunduğunu yazdık.

Hız denetimi biten mağazalarda tekrar eden bir sahne var: rapor iyi, düzeltmeler yapılmış, metrikler yeşile dönmüş. Üç ay sonra aynı mağaza yine yavaş. Arada kötü bir şey olmuyor; sadece bir kampanya görseli, bir yorum uygulaması, bir font ailesi ve iki piksel ekleniyor. Hiçbiri tek başına suçlu değil, toplamı yavaşlatıyor.

Bu yazı ölçüm değil uygulama tarafında: hedefleri baştan bir bütçeye bağlamak, görsel ve font tarafını kurallara oturtmak ve o bütçeyi zaman içinde korumak. Yani hız çalışmasının bir defalık iş olmaktan çıkıp mağazanın bir kuralı haline gelmesi.

Performans bütçesi nedir?

Performans bütçesi, mağazanın aşmamayı kabul ettiği sayılardır. Bütçenin işlevi hız kazanmak değil, kazanılan hızı kaybetmemek. Sayı yazılı olmadığında her yeni istek tek tek makul görünür; yazılı olduğunda ise soru değişir: “bunu ekleyebilir miyiz” değil, “bunu eklersek bütçenin neresinden düşeceğiz”.

Bütçeyi iki katmanda kuruyoruz. Üstte kullanıcının hissettiği sonuç metrikleri, altta ekibin günlük kararlarda kontrol edebileceği somut kalemler. Sonuç metrikleri hedefi, alttakiler ise davranışı belirler.

Üst katman: sonuç hedefleri

Google'ın Core Web Vitals eşikleri sektör standardı olduğu için bütçeyi doğrudan onların üzerine kuruyoruz. Üç metrik ve “iyi” sayılan eşikleri şöyle:

Kritik ayrıntı eşiklerin kendisinde değil, nasıl okunduğunda: bu hedefler ortalamayla değil, gerçek ziyaretçilerin 75. yüzdeliğiyle ölçülür ve mobil ile masaüstü ayrı ayrı değerlendirilir. Yani ziyaretçilerinizin dörtte üçünün eşiğin altında kalması gerekir. Ortalamaya bakan mağazalar bu yüzden kendini olduğundan hızlı sanır.

Bütçeyi mağazanın tamamı için tek satır halinde yazmıyoruz; sayfa tipi başına yazıyoruz. Ana sayfa, koleksiyon, ürün ve sepet farklı işler yapar, farklı yükler taşır. Türkiye'deki mağazalarda trafiğin ağırlığı mobilde olduğu için bütçenin bağlayıcı sürümü mobil sürümdür.

Alt katman: kontrol edilebilir kalemler

Sonuç metrikleri geriden gelir; bir kampanya görseli yüklendiğinde saha verisi haftalar sonra tepki verir. Bu yüzden günlük kararları yönetecek somut kalemler gerekir. Mağazaya göre değişmekle birlikte tipik olarak şunları yazıya döküyoruz:

Son iki kalemi hedef değil, sınır olarak kullanıyoruz. Sayfa ağırlığını düşürmek başlı başına bir amaç değil; ama bir üst sınır yazılmadığında ağırlık her zaman artıyor, hiç azalmıyor.

Görsel stratejisi: en ucuz kazanç, en hızlı kaybedilen

Neredeyse her mağazada en büyük içerik bir görseldir; yani LCP'yi belirleyen şey çoğu zaman tek bir görselin ne zaman geldiğidir. Görsel tarafı hem en kolay kazandığınız hem de bir kampanya sonrası en hızlı kaybettiğiniz alan.

1. Önce LCP görselini bulun

Her sayfa tipinde “en büyük içerik” hangi öğe, bunu bilerek başlayın: ana sayfada kapak görseli, koleksiyonda ızgaranın ilk sırası, ürün sayfasında ana ürün görseli. O tek görsel erken yüklenir; geri kalan her şey ertelenir. Sık yapılan hata bunun tersi: tüm görsellere gelişigüzel erteleme uygulanır, en kritik görsel de sıraya girer ve LCP kötüleşir.

2. Servis edilen genişlik, görüntülenen genişlik olsun

Shopify'ın görsel CDN'i istediğiniz genişlikte sürüm üretebiliyor; ölçek bir sınırla birlikte geliyor: en fazla 5760 piksel ve hiçbir görsel orijinalinden büyütülmüyor. Bu iki cümle iki pratik sonuç veriyor. Birincisi, yüklediğiniz kaynak dosya makul ölçüde büyük olmalı — küçük yüklenmiş bir görsel retina ekranda net görünmez. İkincisi, mağazada 2000 piksellik bir görselin 400 piksellik bir kartta gösterilmesi için hiçbir sebep yok; her yerleşim için gereken genişlikler tanımlanır ve tarayıcı kendi ekranına uyanı indirir.

Katalog tarafında da tek bir standart belirleyin. Kaynak görselleri aynı en-boy oranında ve aynı ölçüde yükleyin; farklı oranlardaki görseller ızgarada dolgu ya da kırpma gerektiriyor, ikisi de görsel kaliteyi ve düzeni bozuyor.

3. Format işini CDN'e bırakın

Görselleri elle WebP'ye dönüştürüp yüklemek Shopify'da gereksiz bir iş. CDN, isteği yapan tarayıcının hangi formatları desteklediğini kendisi tespit edip modern formatı servis ediyor; tema tarafındaki format dönüşümü zaten yalnızca JPEG varyantlarını kapsıyor. Sizin işiniz kaynağı doğru vermek: fotoğrafı JPEG, logo ve düz renkli grafikleri PNG olarak yükleyin ve kaynağı gereksiz yere kayıpsız-devasa tutmayın.

Kalite ayarı da abartılmamalı. Ürün fotoğraflarında tam kaliteyle bir tık altı arasındaki dosya boyutu farkı büyük, görünen fark ise çoğu üründe yok. Kategori bazında bir kalite seviyesi belirleyip ona sadık kalmak, görsel görsel karar vermekten daha iyi sonuç veriyor.

4. Yer her zaman baştan ayrılsın

Düzen kaymasının en yaygın sebebi ölçüsü bildirilmemiş görseller. Görsel gelene kadar yeri boş kalır, geldiğinde alttaki her şey aşağı kayar; kullanıcı tam o sırada bir butona basmışsa yanlış yere basar. Çözüm basit ve tek: her görsel alanının en-boy oranı baştan bellidir. Aynı kural sonradan yüklenen bloklar için de geçerli — duyuru çubuğu, yorum yıldızları, taksit tablosu, çerez bildirimi. Sonradan yerleşen her öğe için yer önceden ayrılır.

5. Kampanya görsellerine metin gömmeyin

Kampanya banner'ına yazının görsel içine gömülmesi hem dosyayı büyütüyor hem her dil ve her indirim için yeni bir dosya üretmeyi gerektiriyor. Metin metin olarak yazıldığında görsel küçülüyor, arama motoru okuyabiliyor ve kampanya değiştiğinde tek satır düzenleniyor.

Font stratejisi: küçük dosya, büyük gecikme

Fontlar sayfa ağırlığında küçük görünür, ama metnin ne zaman okunabilir olduğunu belirledikleri için etkileri ağırlıklarından büyüktür. Font tarafında kararlar az sayıda ve kalıcıdır; bir kere doğru kurulduğunda nadiren bozulur.

1. Aile ve ağırlık sayısını sayın

Bütçenin en somut satırı budur: kaç aile, her aileden kaç ağırlık. Çoğu mağaza iki aile ve toplam üç-dört ağırlıkla gayet iyi görünüyor. Sahada gördüğümüz tablo ise genellikle şu: tema bir aile yüklüyor, sonradan eklenen bir bölüm ikincisini, bir uygulama üçüncüsünü getiriyor ve kimse fark etmiyor. Her ilave ağırlık ayrı bir dosya demek.

İtalik ağırlıkları da ayrıca sayın. Gerçek italik varyantı yüklemiyorsanız tarayıcı harfleri eğerek uyduruyor; iyi görünmüyor. Kullanmayacaksanız hiç yüklemeyin, kullanacaksanız bütçeye yazın.

2. Sistem fontu bir seçenektir

Shopify'ın font seçicisinde sistem fontları da var ve seçildiklerinde indirilecek dosya olmuyor — cihazın kendi fontuyla çizildiği için metin ilk boyamada okunabilir halde geliyor. Marka kimliğiniz belirli bir yazı karakterine bağlı değilse, gövde metni için sistem fontu kullanmak bedava bir kazanç. Başlıklarda marka fontunu, gövdede sistem fontunu kullanan karma kurgu da işe yarıyor.

3. Metin fontu beklerken görünsün

Font henüz inmediğinde tarayıcının iki davranışı var: metni hiç göstermemek ya da yedek fontla gösterip sonra değiştirmek. Mağaza için ikincisi neredeyse her zaman doğru — kullanıcı boş bir ekrana bakmaz. Shopify temalarında font yükleme bildirimi Liquid tarafında üretiliyor ve bu davranış bir parametreyle ayarlanabiliyor; teması sizin için yazılan mağazalarda bunun ayarlandığından emin olun.

Yedek fontu da rastgele bırakmayın. Yedek fontun ölçüleri marka fontundan çok farklıysa font geldiği anda metin yeniden akıyor ve düzen kayması sayacınız çalışıyor. Ölçüsü yakın bir yedek seçmek bu sıçramayı büyük ölçüde siliyor.

4. Kendi fontunuzu barındırıyorsanız

5. İkon fontlarını bırakın

Beş ikon için yüzlerce glif taşıyan bir ikon fontu yüklemek hâlâ sık rastladığımız bir kalem. İkonlar doğrudan sayfaya gömülen vektör olarak verildiğinde hem dosya kalmıyor hem ikonun renk ve boyutu tema ayarlarıyla birlikte değişiyor.

Bütçeyi korumak: asıl iş burada

Bütçeyi yazmak bir günlük iş; koruması süreklidir. Bunu ayrı bir çalışma olarak değil, mevcut işleyişin içine yerleştirilmiş üç kontrol olarak kuruyoruz.

Bir de bütçe aşıldığında ne olacağının önceden kararlaştırılması gerekiyor. Bizim kullandığımız kural şu: yeni bir yük ekleniyorsa yerine bir şey çıkar ya da eklenen şeyin getirisi ölçülerek gösterilir. Aksi halde bütçe birkaç ay içinde kâğıt üstünde kalıyor.

Sık karşılaştığımız üç yanlış

Birincisi puanı bütçe sanmak. Test aracının verdiği tek sayı bir bütçe değil; koşullara göre değişiyor ve gerçek kullanıcı verisiyle birebir örtüşmüyor. Bütçe saha verisinden okunur.

İkincisi bütçeyi mağazanın tamamı için tek satır yazmak. Ana sayfası ağır olan bir mağazanın ürün sayfası pekâlâ hızlı olabilir; ortalama ikisini de gizler.

Üçüncüsü bütçeyi yalnızca teknik ekibe vermek. Görsel ölçüsünü, kampanya banner'ını ve yeni uygulama talebini teknik ekip belirlemiyor; bütçe pazarlama tarafında da bilinmiyorsa korunmuyor.

Ne zaman bütçe kurmaya değmez?

Dürüst cevap: her mağazanın buna ihtiyacı yok. Saha verisinde üç metrik de rahatça eşiklerin altındaysa, sayfaya yeni bir şey eklenmesi ayda birden seyrekse ve mağazayı tek kişi yönetiyorsa yazılı bir bütçe fazladan bürokrasi olur. Bütçe, çok kişinin dokunduğu ve sık değişen mağazalarda kendini ödüyor.

Aynı şekilde, mağazanız hâlâ yavaşsa önce denetim yapılır. Bütçe kaybetmemek içindir; kazanmak için değil.

Özet

Hız bir defa kazanılan değil, korunan bir şey. Korumanın yolu sayfa tipi başına yazılmış bir bütçe: üstte 2,5 saniye, 200 milisaniye ve 0,1 eşikleri, altta görsel, font, uygulama ve betik sayıları. Görsel tarafında en büyük kazanç doğru görseli erken, geri kalanını geç yüklemek ve her alana yerini baştan ayırmaktan; font tarafında ise aile ve ağırlık sayısını azaltmaktan geliyor.

Mağazanız zaten eşiklerin altındaysa ve sayfaya nadiren yeni bir şey ekleniyorsa bunu kurmanıza gerek yok; bunu ilk görüşmede söyleriz. Kurmaya değdiği durumda ise getirisi ölçülebilir ve ölçümü paylaşırız.