Framework kullanmadığımız için burada aslında avantajlıyız: React/Next.js hydration maliyeti yok. Risk şu — Canvas oyununun kendi JS'i ve asset'leri, sayfanın asıl LCP/CLS bütçesini yiyor. Kural: oyun motoru, sayfa ilk boyandıktan sonra devreye girsin.

Lazy Loading — "Afiş + Oynat" (Facade) Deseni

Canvas'ı ve oyun script'ini sayfa yüklenir yüklenmez başlatmayın. Bunun yerine statik bir önizleme + "Oyna" butonu gösterin; gerçek oyun kodu yalnızca kullanıcı tıkladığında veya IntersectionObserver ile görünüme girdiğinde yüklensin. Bu, YouTube'un lite-embed tekniğinin Canvas karşılığıdır — 2048 sayfamızda bu deseni birebir kullandık.

<div class="game-embed" style="aspect-ratio: 4 / 3;">
  <button class="game-play-btn" data-game="2048" aria-label="2048 oyununu başlat">
    <img src="/images/2048-poster.webp" alt="2048 oyunu önizleme ekranı"
         loading="lazy" width="800" height="600">
    <span class="play-icon" aria-hidden="true">▶</span>
  </button>
</div>

document.querySelectorAll('.game-play-btn').forEach((btn) => {
  btn.addEventListener('click', () => loadGame(btn), { once: true });
});

function loadGame(btn) {
  const wrapper = btn.parentElement;
  const canvas = document.createElement('canvas');
  canvas.width = 800;
  canvas.height = 600;
  wrapper.replaceChildren(canvas);

  const script = document.createElement('script');
  script.src = '/games/2048/main.js';
  script.defer = true;           // parser'ı bloklamaz
  document.body.appendChild(script);
}

Sayfada birden çok script varsa: kendi oyun/UI kodunuzu her zaman defer ile, üçüncü parti (reklam, analytics) script'lerini async ile yükleyin. defer DOM sırasını korur, async korumaz — oyun mantığınız DOM'a bağımlıysa mutlaka defer kullanın.

Asset Optimizasyonu

• Sprite'ları tek bir texture atlas (sprite sheet) olarak birleştirin — 20 ayrı PNG isteği yerine 1 istek.
• Görselleri WebP/AVIF olarak sunun, PNG/JPG'yi yalnızca fallback olarak tutun.
• Ses dosyalarını (varsa) kullanıcı etkileşiminden sonra yükleyin — tarayıcılar zaten otomatik sesi engelliyor, önceden yüklemek boşa bant genişliği.
• Oyun script'inizi minify edin; kaynak haritasını (sourcemap) yalnızca geliştirme ortamında tutun.

CLS (Cumulative Layout Shift) Önleme

CLS'nin tek nedeni budur: tarayıcı, içerik gelmeden önce o içeriğin ne kadar yer kaplayacağını bilmiyor. Canvas/görsel için her zaman aspect-ratio + genişlik/yükseklik belirtin — oyun kodu yüklenmeden önce bile alan ayrılmış olur.

.game-embed {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 800px;
  background: var(--surface-2);   /* canvas gelene kadar iskelet rengi */
  border-radius: 12px;
  overflow: hidden;
}

.game-embed canvas,
.game-embed img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

JSON-LD Yapısal Veri (Kopyala-Yapıştır)

Google'ın oyunlara özel bir zengin sonuç türü yoktur, ancak VideoGame + SoftwareApplication tiplerini birlikte kullanmak, arama motorlarına varlık (entity) bağlamı verir ve bazı yazılım/uygulama zengin sonuçlarına uygunluk sağlar.

{
  "@context": "https://schema.org",
  "@type": ["VideoGame", "SoftwareApplication"],
  "name": "2048",
  "url": "https://siteniz.com/oyunlar/2048",
  "image": "https://siteniz.com/images/2048-kapak.jpg",
  "description": "Sayıları birleştirerek 2048 karosuna ulaşmaya çalıştığınız, tarayıcıda ücretsiz oynanan bulmaca oyunu.",
  "applicationCategory": "GameApplication",
  "operatingSystem": "Any (Web Browser)",
  "gamePlatform": "Web Browser",
  "genre": "Puzzle",
  "playMode": "SinglePlayer",
  "inLanguage": "tr",
  "isAccessibleForFree": true,
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "author": {
    "@type": "Organization",
    "name": "Site Adınız"
  }
}

Sadece bir <canvas> etiketi içeren sayfa, Google için "ince içerik"tir — indekslenir ama sıralanmaz, çünkü metin karşılığı yoktur. Çözüm: oyunun etrafına, arama niyetiyle eşleşen gerçek metin içerik inşa etmek. Aşağıdaki H1–H3 hiyerarşisi her oyun sayfası için tekrar kullanılabilir bir şablondur — 2048 sayfamız tam olarak bunu izliyor.

SSS bölümünü FAQPage şeması ile işaretlemek, arama sonuçlarında açılır soru-cevap zengin sonucu kazandırabilir:

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "2048'i kazanmak mümkün mü?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Evet, 2048 karosuna ulaştığınızda oyun kazandınız mesajı verir; dilerseniz daha yüksek karolar için devam edebilirsiniz."
      }
    },
    {
      "@type": "Question",
      "name": "En yüksek skorum nasıl kaydediliyor?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Skorunuz tarayıcınızda (localStorage) otomatik olarak saklanır ve sayfayı kapatıp tekrar açsanız bile kaybolmaz."
      }
    }
  ]
}

Site mimarisini bir hub-and-spoke (merkez-uç) yapısı olarak kurun: her oyun kategorisi bir "hub" sayfasıdır; hem tekil oyun sayfalarına hem de o kategoriyle ilgili blog yazılarına bağlanır. Bu yapı hem otorite dağılımını hem de kullanıcı akışını netleştirir. Malt'ta şu an 3 oyun tek bir ana sayfa bölümünde toplanıyor; oyun sayısı arttıkça bu bölümü kategori hub sayfalarına (/oyunlar/bulmaca/, /oyunlar/arcade/ gibi) ayırmayı planlıyoruz.

Hem oyun hem blog sayfalarına BreadcrumbList şeması ekleyin — bu, hiyerarşiyi Google'a açıkça bildirir ve arama sonucunda tam URL yerine kırıntı navigasyonu gösterir:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Anasayfa", "item": "https://siteniz.com/" },
    { "@type": "ListItem", "position": 2, "name": "Bulmaca Oyunları", "item": "https://siteniz.com/oyunlar/bulmaca/" },
    { "@type": "ListItem", "position": 3, "name": "2048", "item": "https://siteniz.com/oyunlar/2048" }
  ]
}

Google sıralama sinyali olarak doğrudan "dwell time" ölçmez, ama pogo-sticking (kullanıcının hemen arama sonucuna dönmesi) dolaylı olarak sıralamayı etkiler. Amaç: kullanıcıyı oyunun bitiminde de sitede tutacak sürtünmesiz mekanizmalar kurmak.

• Skor Kaydetme (localStorage): Kullanıcı en yüksek skorunu geçmeye çalışırken geri gelir — tekrar ziyaret motivasyonu yaratır. 2048, Yılan ve Refleks Testi'nin üçünde de uyguladık.
• Sürtünmesiz "Yeniden Başlat": Oyun bitince sayfa yenilemeden tek tıkla yeniden başlatma; her yeniden yükleme oturum süresini gereksiz kesintiye uğratır.
• Oyun Sonu "Benzer Oyunlar" Kartı: Oyun bittiği an ekranda 2-3 benzer oyun önerisi gösterin — kullanıcı kaybettiğinde Google'a değil bir sonraki oyununuza gitsin.
• Mola Temalı İçerik Köprüsü: Oyun sonu ekranında "5 dakikan bitti mi? Başka rahatlatıcı oyunlarımıza göz at" gibi bir blog CTA'sı — duygusal niyetle (stres, mola) örtüşür.
• Dokunmatik + Klavye Kontrolü: Mobilde kaydırma (swipe), masaüstünde ok tuşları — ilk saniyede sürtünme yaratan her şey terk oranını yükseltir.

function saveHighScore(gameId, score) {
  const key = `hs_${gameId}`;
  const best = Number(localStorage.getItem(key) || 0);

  if (score > best) {
    localStorage.setItem(key, String(score));
    return { isNewRecord: true, best: score };
  }
  return { isNewRecord: false, best };
}

// Oyun bitiminde:
const result = saveHighScore('2048', currentScore);
showEndScreen({
  score: currentScore,
  best: result.best,
  isNewRecord: result.isNewRecord,
  suggestions: ['sayi-zinciri', 'sudoku-mini'], // benzer oyunlar
});

"Basit web oyunları" gibi geniş kelimelerde büyük sitelerle (Poki, CrazyGames) rekabet imkansız. Bunun yerine niyet bazlı, düşük rekabetli uzun kuyruklu kelimelere odaklanın:

• Bilgilendirici: "2048 nasıl oynanır", "2048 kazanma taktikleri"
• İşlemsel / Navigasyonel: "ücretsiz 2048 oyna online", "indirmeden bulmaca oyunu oyna"
• Duygu/İhtiyaç Odaklı: "stres atmak için oyunlar", "iş molasında oynanacak oyunlar"
• Cihaz/Bağlam Odaklı: "mobilde tek elle oynanan oyunlar", "klavyeyle oynanan bulmaca oyunları"
• Liste/Karşılaştırma: "en iyi ücretsiz tarayıcı oyunları", "2048 alternatifleri"

Bu rehberdeki desenlerin (facade lazy-load, H1-H3 içerik şablonu, localStorage skor, JSON-LD) hepsi Malt'ın üç oyununda canlı olarak kullanılıyor: