Menünüz Neden Yavaş Açılıyor? Görsel Optimizasyonu Rehberi

Şu sahneyi hayal edin: müşteri masaya oturdu, garson yanında bekliyor, karekodu okuttu ve ekranda beyaz bir sayfa duruyor. Bir web sitesini beklerken insan sabırlıdır, çünkü yalnızdır. Ama restoran masasında menü açılışı sosyal baskı altında gerçekleşir; garson ayakta, masadakiler bakıyor. Üç saniye sonra o müşteri telefonu masaya bırakıp garsona dönüyor ve 'ne var menüde?' diye soruyor. Kimse size 'menünüz yavaş' demez. Sadece menünüzü kullanmaz.

Bu sorunun en sinsi tarafı, sizin onu asla göremiyor olmanızdır. Menünüzü kendi telefonunuzdan açtığınızda ışık hızında geliyor; çünkü ofis wifi'sindesiniz ve tarayıcınız tüm görselleri zaten önbelleğe almış. Müşteriniz ise akşam sekizde, kalabalık bir mekanda, baz istasyonu yüklüyken 4G ile bağlanıyor veya otuz kişinin paylaştığı bir wifi'ye giriyor. İki deneyim arasında dağlar kadar fark var ve siz yanlış tarafta duruyorsunuz.

İyi haber şu: menü yavaşlığının sebebi neredeyse her zaman aynı tek şeydir — görseller. Kod değil, sunucu değil, veritabanı değil. Bir menü sayfasının tüm metni (ürün adları, açıklamalar, fiyatlar) topu topu birkaç on kilobayttır; yani bir saniyenin küçük bir kesrinde iner. Fotoğraflar ise megabaytlarla ölçülür. Sorun tek bir yerde toplandığı için çözümü de o kadar nettir.

Modern bir telefon kamerası varsayılan ayarda 12 megapiksel çeker; bu 4032 x 3024 piksel, yani yaklaşık 12 milyon piksel demektir. Böyle bir fotoğrafın dosya boyutu genellikle 3-8 MB arasındadır ve 48 MP modda veya yüksek kaliteli ayarlarda 15 MB'ı rahatlıkla geçer. Bu boyut bir hata değil, kasıtlı bir tasarımdır: telefon üreticisi o fotoğrafla A3 poster basabilmenizi ister. Ama siz onunla poster basmıyorsunuz — 6 inçlik bir ekranda küçük bir kare gösteriyorsunuz.

Şimdi çarpalım. Menünüzde 20 ürün var ve her birinin fotoğrafını telefondan çektiğiniz gibi yüklediniz: 20 x 5 MB = 100 MB. Buna kategori görselleri, logo ve kapak fotoğrafı da eklenir. Gerçek dünyada kalabalık bir mekanda 4G ile 10-20 Mbps civarı bir hız görürsünüz; bu hızda 100 MB indirmek 40 ila 80 saniye sürer. Yoğun saatte, herkes aynı baz istasyonundayken daha da kötüsü olur. Müşteriniz 80 saniye beklemeyecek. Üç saniye bekleyecek.

Bir de görünmeyen tarafı var: o 100 MB müşterinin veri paketinden iniyor. Bir menüye bakmak için 100 MB harcatmak, artık sadece bir hız problemi değil, bir nezaket problemidir. Aynı menü doğru hazırlandığında toplamda 1-2 MB ile açılabilir — yani elli kat daha az. Aradaki fark, müşterinin gördüğü görüntüde sıfır; sadece bekleme süresinde ve faturasında.

Optimizasyonun temel mantığı şudur: ekranın gösteremeyeceği pikseli göndermenin hiçbir faydası yoktur. Yaygın bir telefon ekranı yaklaşık 390 piksel genişliğindedir; yüksek yoğunluklu (retina) ekranlarda bu fiziksel olarak 1170 piksele denk gelir. Üstelik menüde bir ürün fotoğrafı çoğu zaman tam ekran bile değildir — 80x80'lik küçük bir kare veya yarım genişlikte bir karttır. Yani 4032 piksellik bir fotoğraf gönderdiğinizde, ekranın gösterebileceğinin üç-dört katını yollamış olursunuz. Tarayıcı fazlalığı çöpe atar, ama atmadan önce indirir. Parayı ve saniyeleri o indirme sırasında kaybedersiniz.

En uzun kenarı 1600 piksele indirmek burada tatlı noktadır. 1600 piksel; tam genişlikte gösterim için de, yüksek yoğunluklu ekranlar için de, müşteri parmağıyla yakınlaştırsa bile net kalması için de fazlasıyla yeterlidir. Sadece bu küçültme bile piksel sayısını yaklaşık yüzde 84 azaltır (4032x3024 = 12,2 milyon piksele karşılık 1600x1200 = 1,9 milyon piksel). Pratikte 5 MB'lık bir fotoğraf birkaç yüz kilobayta iner ve müşteri hiçbir kalite kaybı fark etmez. Çünkü fark edecek bir şey yoktur: göz zaten o pikselleri göremiyordu.

MenüYap bu işi siz hiçbir şey yapmadan, üstelik yükleme başlamadan önce tarayıcınızın içinde halleder: seçtiğiniz fotoğrafın en uzun kenarı 1600 piksele indirilir, sonra sunucuya gider. Yani 12 MP'lik fotoğrafınız hiçbir zaman internete tam boy çıkmaz. Kendi sitenizde veya başka bir platformda çalışıyorsanız bunu elle yapmanız gerekir; Squoosh gibi ücretsiz araçlar veya telefonun galerisinden 'küçük boyutta paylaş' seçeneği iş görür. Kural basit: orijinali arşivinizde saklayın, menüye küçültülmüşünü koyun.

Fotoğrafı küçülttükten sonraki adım, onu hangi formatta sakladığınızdır. JPEG 1992'den kalma bir teknolojidir ve hâlâ çalışır, ama WebP aynı görsel kalitede yaklaşık yüzde 25-30 daha küçük dosya üretir. Pratikte 400 KB'lık bir JPEG, WebP olarak 280 KB'a iner — üstelik yan yana koyduğunuzda farkı göremezsiniz. Eskiden tarayıcı uyumluluğu bir endişeydi; bugün Chrome, Safari, Firefox ve Edge'in tümü WebP destekliyor, yani 2026'da bu tartışma kapanmış durumda. Bir de kalite ayarı var: 0.82 civarı bir değer, dosya boyutunun büyük kısmını atarken gözün fark edemeyeceği bir kayıp bırakır. Kaliteyi 1.0'da tutmak, kimsenin göremeyeceği bir mükemmellik için müşterinize saniyeler ödetmektir.

Sessiz bir tuzak da HEIC formatıdır. iPhone varsayılan olarak fotoğrafları HEIC olarak kaydeder ve Safari dışındaki tarayıcılar bu formatı açamaz. Yani menünüze iPhone'dan doğrudan HEIC yüklerseniz, Android kullanan müşterileriniz o üründe boş bir kare görür — sizse kendi iPhone'unuzdan baktığınız için her şeyin yolunda olduğunu sanırsınız. MenüYap yükleme sırasında HEIC dosyalarını otomatik olarak tarayıcıda JPEG'e çevirir, bu yüzden sorun size hiç ulaşmaz. Bunu kendiniz yönetiyorsanız iPhone'da Ayarlar > Kamera > Formatlar yolundan 'En Uyumlu' seçeneğini işaretlemek en pratik çözümdür.

İki format da menüde işiniz olmasın: GIF ve PNG. Animasyonlu GIF hem devasa hem çağ dışıdır; sıkıştırması berbattır ve tek bir dönen hamburger animasyonu, on ürünün fotoğrafından daha fazla yer kaplayabilir. Hareket şartsa video kullanın. PNG ise şeffaflık ve keskin kenarlar (logo, ikon) için doğru formattır; bir yemek fotoğrafını PNG olarak kaydettiğinizde dosya, JPEG veya WebP'in üç-beş katına çıkar ve karşılığında hiçbir şey kazanmazsınız.

Önbellek (cache), tarayıcının indirdiği dosyaların bir kopyasını telefonda saklamasıdır. Doğru ayarlandığında etkisi çarpıcıdır: müdavim müşteriniz ikinci kez geldiğinde menü görsellerini sıfır bayt indirir, menü anında açılır. Bu ayar sunucunun gönderdiği tek bir başlıkla yapılır — 'Cache-Control: public, max-age=31536000, immutable' ifadesi tarayıcıya 'bu dosyayı bir yıl boyunca sakla, bir daha sorma' der. Haftada üç kez uğrayan bir müşteri için bu, ilk ziyaret dışında hiç bekleme yaşamaması demektir.

Buradaki klasik tuzak dosya adıdır. Fotoğrafınızı 'burger.jpg' diye yükleyip sonra yeni bir çekimle aynı adla değiştirirseniz, tarayıcı 'bende zaten burger.jpg var' der ve müşteriye eski fotoğrafı göstermeye devam eder. Aylarca. Çözüm, her yüklemeye benzersiz bir ad vermektir. MenüYap her görseli benzersiz bir kimlikle saklar; aynı ad asla iki kez kullanılmaz, dolayısıyla bir adresteki içerik hiçbir zaman değişmez ve bir yıl boyunca gönül rahatlığıyla önbelleğe alınabilir. Yeni fotoğraf yüklediğinizde yeni bir adres oluşur, müşteri de yenisini görür — eskimiş görsel sorunu hiç doğmaz.

Kendi sitenizi yönetiyorsanız sunucu ayarlarınıza bakın. En yaygın hata, görsellere 'no-cache' göndermek veya max-age değerini birkaç dakikada bırakmaktır; bu durumda her ziyaret ilk ziyaret gibi yavaş olur. Çalışıp çalışmadığını anlamak kolaydır: tarayıcının geliştirici araçlarında Network sekmesini açıp sayfayı ikinci kez yükleyin. Görsellerin yanında 'from disk cache' yazıyorsa önbellek çalışıyor; her seferinde boyut yazıyorsa çalışmıyor demektir.

Kırk ürünlük bir menüde müşteri ilk açılışta yalnızca dört-beş ürün görür; gerisi sayfanın aşağısındadır ve belki hiç oraya kadar inmeyecektir. Buna rağmen varsayılan tarayıcı davranışı, sayfadaki tüm görselleri açılış anında indirmeye başlamaktır. Yani müşteri, bakmayacağı otuz beş ürünün fotoğrafını indirmeyi bitirene kadar bekler. Lazy-load (tembel yükleme) bunu tersine çevirir: bir görsel yalnızca ekranda görünmeye yaklaştığında indirilir. Teknik olarak tek bir satırdır, etkisi ise ilk açılışta indirilen veriyi bölmektir.

MenüYap'ta ürün ve kategori görselleri tembel yüklenir ve ayrıca kod çözme işlemi ana iş parçacığından ayrılır. Bunun pratik karşılığı şudur: menüde kırk ürün olsa bile açılışta yalnızca ilk ekrandaki beş-altı görsel iner, kalanlar müşteri kaydırdıkça sessizce gelir; ve görseller çözülürken sayfa donmaz, kaydırma takılmaz. Müşteri hiçbir zaman 'kırk fotoğraflık bir menü' açtığını hissetmez.

Ama burada dürüst olmak gerekir: lazy-load kötü bir fotoğrafı kurtarmaz, sadece faturayı erteler. 5 MB'lık fotoğrafınız, müşteri o ürüne kaydırdığında yine 5 MB'dır — sadece beklemeyi sayfanın ortasına taşımış olursunuz. Bu yüzden sıralama önemlidir: önce küçültün, sonra formatı düzeltin, sonra önbelleği açın, en son lazy-load. Bir de kimsenin sormadığı soruyu sorun: her ürünün fotoğrafı gerçekten gerekli mi? Bir şişe suyun fotoğrafı ne satış artırır ne menüye değer katar; sadece indirilecek bir dosya daha ekler.

Tahmin etmeyi bırakıp ölçün. Tarifi şu: telefonunuzu wifi'dan çıkarıp mobil veriye geçin, tarayıcıda gizli sekme açın (önbellek temiz olsun, yani ilk kez gelen bir müşteri gibi olun) ve menünüzün karekodunu okutun. Bunu tercihen akşamın en yoğun saatinde, mekanın içinde yapın — sabah boş salonda yapılan test yalan söyler. Kronometreyi başlatın. Üç saniyede ürünler ve fiyatlar karşınızdaysa sorun yok. On saniye geçiyorsa müşterilerinizin bir kısmını menüye hiç bakmadan kaybediyorsunuz.

Daha derin bakmak isterseniz menünüzü bilgisayarda açıp geliştirici araçlarında Network sekmesine geçin ve 'Img' filtresini seçin; sayfa yüklenirken toplam transfer boyutunu görürsünüz. Ya da adresinizi PageSpeed Insights'a yapıştırın. Bakmanız gereken tek sayı var: görsellerin toplam boyutu. Sağlıklı bir menü ilk açılışta 1-2 MB civarında kalır. Orada 20 MB görüyorsanız teşhis kesindir ve suçlu fotoğraflardır — başka yere bakmanıza gerek yok.

Bu yazıdaki dört adım (1600 piksele küçültme, WebP'ye çevirme, bir yıllık önbellek, lazy-load) MenüYap'ta varsayılan olarak açıktır; fotoğrafı telefondan çektiğiniz gibi yükleyip işinize dönebilirsiniz, gerisi arka planda olur. Kendi sitenizde ya da başka bir platformdaysanız aynı dört adımı elle uygulamanız gerekir — ama liste bu kadar, gizli beşinci madde yok. Hız görünmez bir özelliktir: doğru yaptığınızda kimse fark etmez, yanlış yaptığınızda ise kimse söylemez. Sadece garsona döner.