Eleventy Shortcodes ile Duyarlı Görseller ve Satır İçi SVG: Hızlı Başlangıç

Web sitelerinizin yükleme hızı ve görsel kalitesi arasında denge kurmakta zorlanıyor musunuz? Sayfa hızını düşüren büyük resim dosyaları veya her ikon için ayrı bir HTTP isteği, kullanıcı deneyimini olumsuz etkileyebilir. Bu rehber, Eleventy statik site jeneratörünü kullanarak duyarlı görselleri ve satır içi SVG’leri (inline SVG) shortcode’lar aracılığıyla nasıl optimize edeceğinizi adım adım açıklıyor.

Günümüz dijital dünyasında, kullanıcıların web sitelerinden beklentileri her zamankinden daha yüksek. Hızlı yüklenen, görsel olarak çekici ve tüm cihazlarda sorunsuz çalışan web siteleri artık bir lüks değil, bir zorunluluktur. Ancak bu hedeflere ulaşmak genellikle büyük bir zorluktur. Özellikle görseller, bir web sayfasının toplam boyutunun önemli bir kısmını oluşturarak yükleme sürelerini uzatabilir ve mobil kullanıcılar için veri tüketimini artırabilir. Bir yandan çarpıcı görsellerle ziyaretçilerin dikkatini çekmek isterken, diğer yandan site performansından ödün vermek zorunda kalmak, birçok geliştiricinin karşılaştığı yaygın bir ikilemdir.

Peki, bu ikilemi nasıl aşabiliriz? Eleventy gibi modern bir statik site jeneratörü ve onun sunduğu kısa kodlar (shortcodes) bu noktada devreye giriyor. Geleneksel yaklaşımlarla her görselin farklı boyutlarını manuel olarak oluşturmak veya her ikon için ayrı bir isteği yönetmek oldukça zaman alıcı ve hataya açık bir süreç olabilir. Eleventy shortcode’ları, bu tekrarlayan görevleri otomatikleştirerek geliştirme sürecini basitleştirir ve web sitelerinizin yalnızca hızlı değil, aynı zamanda bakımı kolay ve ölçeklenebilir olmasını sağlar. Duyarlı görseller için ve srcset gibi HTML5 özelliklerini, SVG’ler içinse satır içi kullanım ve optimizasyon tekniklerini tek bir şablon işlevi altında birleştirebiliriz.

Bu makalede, Eleventy shortcode’larının gücünü kullanarak web sitelerinizdeki görsel varlıkları nasıl dönüştüreceğinizi, performansı nasıl artıracağınızı ve geliştirme iş akışınızı nasıl iyileştireceğinizi ayrıntılı bir şekilde inceleyeceğiz. İster yeni başlayan bir geliştirici olun, ister deneyimli bir profesyonel, burada sunulan adım adım örnekler ve gerçek dünya senaryolarıyla, web projelerinize entegre edebileceğiniz pratik çözümler bulacaksınız. Böylece, ziyaretçilerinize göz alıcı ve yıldırım hızında bir deneyim sunarken, geliştirme sürecindeki verimliliğinizi de maksimize edebileceksiniz. Sayfa hızı optimizasyonu ve görsel kalitesi arasındaki dengeyi nihayet yakalama zamanı geldi.

Eleventy Nedir ve Shortcode’lar Neden Bu Kadar Önemli?

Eleventy (11ty), JavaScript ile yazılmış, hızlı ve esnek bir statik site jeneratörüdür (SSG). Dinamik içerik yönetim sistemlerinin (CMS) aksine, Eleventy veritabanı veya sunucu tarafında çalışma zamanı gerektirmeyen, doğrudan tarayıcıda sunulabilecek HTML, CSS ve JavaScript dosyaları üretir. Bu yaklaşım, web sitelerinin yüklenme hızını önemli ölçüde artırır, güvenlik risklerini azaltır ve barındırma maliyetlerini düşürür. Eleventy’nin en çekici özelliklerinden biri, farklı şablon dillerini (Nunjucks, Liquid, Markdown, EJS vb.) desteklemesi ve geliştiricilere içeriklerini nasıl yönetecekleri konusunda büyük bir esneklik sunmasıdır. Web sitelerinin performansı söz konusu olduğunda, Eleventy’nin statik yapısı, içerik dağıtım ağları (CDN) ile mükemmel bir uyum sağlayarak global erişilebilirliği ve hızı daha da optimize eder.

Shortcode’lar ise Eleventy ekosisteminin temel taşlarından biridir ve içerik yazarları ile geliştiriciler arasındaki köprüyü kurar. Temelde, shortcode’lar şablon dilleri içinde tanımlanan, belirli bir işlevselliği yerine getiren özel etiketlerdir. Örneğin, Markdown dosyanızın içine

{% image "src/image.jpg", "Alternatif Metin" %}

gibi basit bir kod parçacığı yazarak, Eleventy'nin bu kodu çok daha karmaşık bir HTML yapısına (örneğin, duyarlı bir etiketi) dönüştürmesini sağlayabilirsiniz. Bu, içeriği yazarken HTML'in karmaşıklığından soyutlanmanızı ve daha temiz, daha okunabilir Markdown veya şablon dosyaları oluşturmanızı sağlar.

Shortcode'ların önemi, tekrarlanabilirliği ve bakımı kolaylaştırmasıyla daha da belirginleşir. Bir görselin duyarlı olması için gereken etiketi, srcset öznitelikleri, farklı boyutlar ve formatlar (WebP, AVIF) gibi detayları her seferinde manuel olarak yazmak yerine, bu mantığı tek bir shortcode içinde kapsayabilirsiniz. Daha sonra bu shortcode'u projenizin herhangi bir yerinde, istediğiniz kadar kullanabilirsiniz. Eğer görsel işleme mantığında bir değişiklik yapmanız gerekirse, sadece shortcode'un tanımını güncellemeniz yeterli olur; bu değişiklik tüm kullanıldığı yerlere otomatik olarak yansır. Bu, hem geliştirme süresinden tasarruf sağlar hem de proje genelinde tutarlılık ve hata riskini azaltır. Ayrıca, içerik yazarlarının teknik detaylara takılmadan görselleri kolayca eklemesine olanak tanır, bu da iş akışını hızlandırır ve içerik üretimine odaklanmayı kolaylaştırır. Eleventy'nin esnek shortcode yapısı sayesinde, sadece görsellerle değil, inline SVG'lerden özel bileşenlere kadar her türlü dinamik içeriği statik sitelerinize entegre edebilirsiniz, böylece web projelerinizin potansiyelini maksimuma çıkarırsınız.

Duyarlı Görseller İçin Eleventy Shortcode Nasıl Oluşturulur?

Web performansını artırmanın ve kullanıcı deneyimini iyileştirmenin en etkili yollarından biri, duyarlı görseller kullanmaktır. Geleneksel etiketi, tüm cihazlar için tek bir görsel boyutu sunar ve bu da ya küçük ekranlarda gereksiz büyük görsellerin indirilmesine ya da büyük ekranlarda pikselli görsellerin görüntülenmesine yol açar. Bu sorunu çözmek için HTML5 ile tanıtılan elemanı ve srcset özniteliği, tarayıcının ekran boyutuna, çözünürlüğe ve hatta ağ hızına göre en uygun görseli seçmesine olanak tanır. Ancak bu yapıları manuel olarak oluşturmak karmaşık ve tekrarlayıcı bir süreçtir. İşte burada Eleventy shortcode'ları devreye girer. Adım adım, bu karmaşık yapıyı otomatik olarak üreten bir shortcode nasıl oluşturacağımızı inceleyelim:

Adım 1: Eleventy Projesini Kurmak

Eğer henüz bir Eleventy projeniz yoksa, hızlıca bir başlangıç yapalım. Terminalinizde aşağıdaki komutları çalıştırarak yeni bir proje oluşturabilir ve gerekli bağımlılıkları yükleyebilirsiniz:

mkdir my-eleventy-site
cd my-eleventy-site
npm init -y
npm install @11ty/eleventy
    

Daha sonra, projenizin kök dizininde .eleventy.js adında bir yapılandırma dosyası ve index.md gibi bir içerik dosyası oluşturun. .eleventy.js içinde eleventy-img eklentisini kuracağız ve shortcode'umuzu tanımlayacağız.

// .eleventy.js
module.exports = function(eleventyConfig) {
  // Shortcode'larımızı burada tanımlayacağız
  return {
    dir: {
      input: ".",
      output: "_site"
    }
  };
};
    

Adım 2: Görsel İşleme Eklentisini Kurmak

Farklı boyutlarda ve formatlarda görseller üretmek için eleventy-img eklentisini kullanacağız. Bu eklenti, görselleri otomatik olarak yeniden boyutlandırır, sıkıştırır ve modern formatlara (WebP, AVIF) dönüştürür. Kurulum için:

npm install @11ty/eleventy-img
    

Adım 3: Temel Görsel Shortcode Fonksiyonunu Yazmak

Şimdi .eleventy.js dosyamızda image adında bir asenkron shortcode tanımlayalım. Bu shortcode, bir kaynak görsel yolu, alternatif metin ve isteğe bağlı olarak genişlikler alacak.

// .eleventy.js
const Image = require("@11ty/eleventy-img");

module.exports = function(eleventyConfig) {
  eleventyConfig.addNunjucksAsyncShortcode("image", async function(src, alt, widths = [null], sizes = "100vw") {
    let metadata = await Image(src, {
      widths: widths,
      formats: ["avif", "webp", "jpeg"],
      outputDir: "./_site/img/",
      urlPath: "/img/"
    });

    let imageAttributes = {
      alt,
      sizes,
      loading: "lazy",
      decoding: "async",
    };

    return Image.generateHTML(metadata, imageAttributes);
  });

  return {
    dir: {
      input: ".",
      output: "_site"
    }
  };
};
    

Yukarıdaki kodda:

• Image(src, options): Belirtilen görseli işler ve farklı boyutlarda/formatlarda çıktılar üretir. widths: [null], orijinal genişliği korur, diğer sayılar belirli genişlikleri ifade eder.
• formats: ["avif", "webp", "jpeg"]: Görselin hangi formatlarda dönüştürüleceğini belirtir. AVIF ve WebP, JPEG'den daha iyi sıkıştırma oranları sunar.
• outputDir ve urlPath: İşlenmiş görsellerin nereye kaydedileceğini ve web'de hangi URL üzerinden erişileceğini ayarlar.
• Image.generateHTML(metadata, attributes): İşlenmiş görsellerin meta verilerini kullanarak otomatik olarak bir elemanı oluşturur. Bu, etiketleri aracılığıyla farklı formatları ve srcset özniteliklerini içerir.
• loading: "lazy": Tarayıcıya, görselin yalnızca görünüm alanına yakın olduğunda yüklenmesi talimatını verir, bu da başlangıç yükleme performansını artırır.

Adım 4: Shortcode'u Kullanmak

Artık Markdown veya Nunjucks şablon dosyalarınızda bu shortcode'u kullanabilirsiniz:

{# index.md veya .njk dosyanızda #}
# Duyarlı Görsel Örneği

Merhaba, bu benim web sitemdeki bir görsel:

{% image "src/assets/hero-image.jpg", "Bir dağ manzarası", [300, 600, 900, 1200], "(min-width: 900px) 900px, 100vw" %}

Bu görsel, farklı ekran boyutlarına göre optimize edilmiş olarak yüklenecektir.
    

Bu örnekte, src/assets/hero-image.jpg dosyasını kullanıyoruz. Eleventy, bu görseli 300, 600, 900 ve 1200 piksel genişliklerinde (ve orijinal genişliğinde eğer listede null varsa) WebP, AVIF ve JPEG formatlarında işleyecektir. sizes özniteliği, tarayıcıya görselin çeşitli viewport boyutlarında ne kadar yer kaplayacağını bildirir, bu da doğru srcset kaynağının seçilmesine yardımcı olur. Örneğin, "(min-width: 900px) 900px, 100vw" ifadesi, viewport 900 pikselden büyük olduğunda görselin 900 piksel genişliğinde olacağını, aksi takdirde viewport'un %100'ünü kaplayacağını belirtir.

Bu shortcode, görsellerinizi dinamik olarak işleyerek ve duyarlı HTML çıktıları üreterek web sitenizin performansını ve erişilebilirliğini artırır. Artık her görsel için elle birden fazla boyut ve format oluşturma derdinden kurtuldunuz. Eleventy, sizin yerinize bu karmaşık işi otomatikleştiriyor.

Satır İçi SVG (Inline SVG) Eleventy ile Nasıl Optimize Edilir?

Vektör grafikleri (SVG), web tasarımında esneklik, ölçeklenebilirlik ve netlik sunan güçlü bir araçtır. Özellikle ikonlar, logolar ve basit illüstrasyonlar için idealdirler. Satır içi SVG (inline SVG), SVG kodunun doğrudan HTML belgesine gömülmesi anlamına gelir. Bu yaklaşım, ayrı bir HTTP isteği yapma ihtiyacını ortadan kaldırır, bu da sayfa yükleme hızını artırır. Ayrıca, satır içi SVG'ler CSS ile kolayca stilize edilebilir, JavaScript ile manipüle edilebilir ve erişilebilirlik açısından daha fazla esneklik sunar. Ancak, büyük veya optimize edilmemiş SVG dosyalarını doğrudan HTML'e yapıştırmak, kod karmaşasına ve dosya boyutunun gereksiz yere artmasına neden olabilir. Eleventy shortcode'ları, bu sorunu çözerek SVG'lerinizi hem optimize etmenize hem de kolayca yönetmenize olanak tanır.

Adım 1: SVG Dosyasını Okuyan Bir Shortcode Tanımlama

İlk adım, bir SVG dosyasının içeriğini okuyup HTML içine yerleştirecek basit bir shortcode oluşturmaktır. Bunun için Node.js'in dosya sistemi (fs) modülünü kullanacağız.

// .eleventy.js
const fs = require("fs");
const path = require("path");

module.exports = function(eleventyConfig) {
  eleventyConfig.addShortcode("inlineSvg", function(filename, className = "") {
    let filePath = path.join("./src/assets/svg/", filename + ".svg"); // SVG dosyalarınızın yolu
    if (!fs.existsSync(filePath)) {
      console.warn([11ty] SVG dosyası bulunamadı: ${filePath});
      return ;
    }
    let svgContent = fs.readFileSync(filePath, "utf8");

    // İsteğe bağlı olarak, SVG'ye dinamik bir sınıf ekleyebiliriz
    if (className) {
      svgContent = svgContent.replace(//, );
    }

    return svgContent;
  });

  // Diğer shortcode'lar ve ayarlar...
  return {
    dir: {
      input: ".",
      output: "_site"
    }
  };
};
    

Bu shortcode:

• filename: Gömülecek SVG dosyasının adını (uzantısız) alır.
• filePath: SVG dosyasının tam yolunu oluşturur. Varsayılan olarak ./src/assets/svg/ klasörüne bakacaktır.
• fs.readFileSync: SVG dosyasının içeriğini senkron olarak okur.
• Dinamik sınıf ekleme: İsteğe bağlı olarak, SVG'nin kök etiketine bir CSS sınıfı ekleyerek stilizasyon esnekliği sağlar.

Adım 2: SVG'yi Optimize Etme (İleri Düzey)

Büyük SVG dosyaları, genellikle tasarım programlarından dışa aktarıldıklarında gereksiz meta veriler, yorumlar ve boşluklar içerebilir. Bu, dosya boyutunu artırır. Bu sorunu çözmek için svgo gibi bir SVG optimizasyon kütüphanesini shortcode'umuzla entegre edebiliriz.

npm install svgo
    

Şimdi shortcode'umuzu güncelleyelim:

// .eleventy.js
const fs = require("fs");
const path = require("path");
const { optimize } = require("svgo"); // svgo'yu içe aktarın

module.exports = function(eleventyConfig) {
  eleventyConfig.addShortcode("inlineSvg", function(filename, className = "", uniqueId = "") {
    let filePath = path.join("./src/assets/svg/", filename + ".svg");
    if (!fs.existsSync(filePath)) {
      console.warn([11ty] SVG dosyası bulunamadı: ${filePath});
      return ;
    }
    let svgContent = fs.readFileSync(filePath, "utf8");

    // SVG'yi optimize et
    const result = optimize(svgContent, {
      path: filePath, // svgo'ya dosya yolunu bildir
      // Burada optimizasyon eklentilerini özelleştirebilirsiniz
      // Varsayılan olarak birçok optimizasyon açıktır
    });

    if (result.error) {
      console.error([11ty] SVG optimizasyon hatası: ${result.error});
      return svgContent; // Optimizasyon başarısız olursa orijinal içeriği döndür
    }
    svgContent = result.data;

    // Dinamik sınıf ekleme
    if (className) {
      svgContent = svgContent.replace(//, );
    }

    // Dinamik ID ekleme (özellikle birden fazla aynı SVG kullanıldığında çakışmayı önlemek için)
    if (uniqueId) {
        svgContent = svgContent.replace(//, );
    }


    return svgContent;
  });

  // Diğer shortcode'lar ve ayarlar...
  return {
    dir: {
      input: ".",
      output: "_site"
    }
  };
};
    

Adım 3: Shortcode'u Kullanmak

Artık şablonlarınızda SVG ikonlarınızı kolayca ve optimize edilmiş bir şekilde kullanabilirsiniz:

{# index.md veya .njk dosyanızda #}
# Inline SVG Örneği

Web sitemizdeki arama ikonu:

{% inlineSvg "search-icon", "icon icon--search" %}

Sosyal medya ikonumuz:

{% inlineSvg "twitter-logo", "social-icon" %}

{% inlineSvg "settings-icon", "header-icon", "settingsIconUnique" %}
    

Bu sayede, src/assets/svg/search-icon.svg gibi bir dosyanın içeriği doğrudan HTML'inize yerleştirilecek ve icon icon--search CSS sınıfına sahip olacaktır. settings-icon örneğinde ise hem bir sınıf hem de benzersiz bir ID eklenmiştir. Bu yaklaşım, ikonları HTML'inize ayrı ayrı istekler yapmadan entegre etmenizi sağlarken, aynı zamanda CSS ile kolayca boyutlandırma, renklendirme ve diğer stil değişikliklerini uygulamanıza olanak tanır. Böylece hem performans hem de geliştirme esnekliği açısından önemli avantajlar elde edersiniz.

Gerçek Dünya Senaryoları: E-ticaret Sitesi ve Blog için Vaka Analizi

Eleventy shortcode'larının duyarlı görseller ve satır içi SVG optimizasyonundaki potansiyelini daha iyi anlamak için, bu tekniklerin gerçek dünya projelerinde nasıl uygulanabileceğine dair iki vaka analizine göz atalım. Bu senaryolar, performans sorunlarına pratik çözümler sunarken geliştirici iş akışını nasıl iyileştirebileceğimizi gözler önüne serecektir.

Vaka 1: Yüksek Çözünürlüklü Ürün Görselleriyle E-ticaret Sitesi

Problem:

Bir e-ticaret sitesi, binlerce ürüne ve her ürünün birden fazla yüksek çözünürlüklü fotoğrafına sahiptir (ürün çekimleri, farklı açılar, detay fotoğrafları). Bu görsellerin hepsi genellikle stüdyo kalitesinde olduğu için çok büyük dosya boyutlarına sahiptir. Sitenin ürün sayfalarında bu görsellerin kullanılması, özellikle mobil cihazlarda sayfa yükleme sürelerini dramatik şekilde uzatıyor, kullanıcı deneyimini kötüleştiriyor ve terk oranlarını artırıyordu. Geliştiriciler, her görsel için manuel olarak farklı boyutlar ve WebP/AVIF formatları oluşturmak zorunda kalmaktan şikayetçiydi, bu da sürekli bir iş yükü yaratıyordu.

Çözüm: Otomatik Görsel İşleme Shortcode'u ile Duyarlı Görseller

Bu problemi çözmek için Eleventy'nin image shortcode'u ve eleventy-img eklentisi kullanıldı. .eleventy.js yapılandırma dosyasında, her ürün görselinin farklı genişliklerde (örn. 300px, 600px, 900px, 1200px) ve modern formatlarda (WebP, AVIF) otomatik olarak işlenmesini sağlayan bir shortcode tanımlandı. Bu shortcode ayrıca, loading="lazy" özniteliğini ve elemanını kullanarak tarayıcıya en uygun görseli seçme yeteneğini kazandırdı.

// .eleventy.js - Basitleştirilmiş örnek
const Image = require("@11ty/eleventy-img");
eleventyConfig.addNunjucksAsyncShortcode("productImage", async function(src, alt, sizes) {
  let metadata = await Image(src, {
    widths: [300, 600, 900, 1200, "auto"], // "auto" orijinal genişliği korur
    formats: ["avif", "webp", "jpeg"],
    outputDir: "./_site/img/products/",
    urlPath: "/img/products/"
  });
  let imageAttributes = {
    alt,
    sizes,
    loading: "lazy",
    decoding: "async",
  };
  return Image.generateHTML(metadata, imageAttributes);
});
    

Ürün şablonlarında, görseller şu şekilde çağrıldı:

{# product.njk #}

  {% for image in product.images %}
    {% productImage image.src, product.name ~ " - " ~ image.altText, "(min-width: 768px) 50vw, 100vw" %}
  {% endfor %}

    

Bu entegrasyon sayesinde:

• Performans Artışı: Sayfa yükleme hızları %60'a kadar iyileşti. Mobil kullanıcılar için daha küçük görseller sunularak veri tüketimi azaldı.
• Geliştirici Verimliliği: Görsel işleme süreci tamamen otomatikleşti. Geliştiricilerin görselleri manuel olarak boyutlandırmasına gerek kalmadı, bu da yeni ürün ekleme ve mevcut ürünleri güncelleme sürecini hızlandırdı.
• SEO İyileşmesi: Daha hızlı yüklenen sayfalar ve optimize edilmiş görseller, arama motoru sıralamalarında olumlu etki yarattı.
• Kullanıcı Deneyimi: Gözle görülür şekilde daha hızlı ve sorunsuz bir alışveriş deneyimi sunuldu.

Vaka 2: Dinamik İkon Setleri ve Blog Yazıları için Satır İçi SVG

Problem:

Bir blog platformu, makalelerde sıkça kullanılan çeşitli ikonlara (oklar, sosyal medya ikonları, kategorilere özel ikonlar) sahipti. Her ikon için ayrı bir PNG veya JPEG dosyası kullanılıyordu, bu da her bir ikon için ayrı bir HTTP isteği anlamına geliyordu. İkonların renkleri veya boyutları zaman zaman değiştiğinde, tasarımcıların her bir ikon için yeni bir dosya oluşturup yüklemesi gerekiyordu. Bu durum, hem geliştirme hem de bakım sürecini yavaşlatıyordu ve esneklik eksikliği yaratıyordu.

Çözüm: Inline SVG Shortcode'u ile Optimize Edilmiş İkon Yönetimi

Bu blog platformunda, performansı artırmak ve ikon yönetimini basitleştirmek amacıyla satır içi SVG shortcode'u uygulandı. svgo kütüphanesi ile entegre edilmiş bir icon shortcode'u oluşturuldu. Bu shortcode, SVG dosyasının içeriğini okuyup optimize ederek doğrudan HTML'e yerleştiriyor ve dinamik olarak CSS sınıfları ekleme imkanı sunuyordu.

// .eleventy.js - Basitleştirilmiş örnek
const fs = require("fs");
const path = require("path");
const { optimize } = require("svgo");

eleventyConfig.addShortcode("icon", function(iconName, className = "") {
  let filePath = path.join("./src/assets/icons/", iconName + ".svg");
  if (!fs.existsSync(filePath)) {
    return ;
  }
  let svgContent = fs.readFileSync(filePath, "utf8");

  const result = optimize(svgContent, { path: filePath });
  if (result.error) {
    return svgContent;
  }
  svgContent = result.data;

  if (className) {
    svgContent = svgContent.replace(//, );
  }
  return svgContent;
});
    

Blog yazıları ve şablonlarda ikonlar şu şekilde kullanıldı:

{# article.njk #}
Yazı Başlığı {% icon "arrow-right", "heading-icon" %}


  {% icon "share", "button-icon" %} Paylaş



    

Bu çözümün faydaları:

• HTTP İstek Azaltma: Her ikon için ayrı HTTP isteği ortadan kalktı, bu da sayfa yükleme hızını doğrudan artırdı.
• Esnek Stilizasyon: CSS ile ikonların rengi, boyutu ve diğer özellikleri kolayca değiştirilebildi. Örneğin, .heading-icon { fill: blue; width: 20px; height: 20px; } gibi basit CSS kuralları yeterli oldu.
• Kolay Bakım: İkonlarda bir değişiklik gerektiğinde, yalnızca SVG dosyasını güncellemek veya CSS sınıfını değiştirmek yeterli oldu. Her ikon için yeni bir dosya oluşturma zahmeti ortadan kalktı.
• Ölçeklenebilirlik: SVG'ler vektör tabanlı olduğu için her türlü ekran boyutunda pikselleşmeden mükemmel görünürlük sağladı.

Her iki vaka analizi de Eleventy shortcode'larının, web projelerindeki karmaşık görsel ve ikon yönetimi sorunlarına nasıl zarif ve etkili çözümler sunabileceğini açıkça göstermektedir. Bu teknikler, geliştiricilere daha verimli çalışma imkanı sunarken, son kullanıcılara daha hızlı ve görsel olarak çekici bir deneyim sağlar.

İleri Düzey Optimizasyonlar ve İpuçları: Geleceğe Hazırlık

Eleventy shortcode'ları ile duyarlı görseller ve satır içi SVG'lerin temel entegrasyonunu öğrendikten sonra, web sitenizin performansını daha da ileri taşımak ve geleceğe hazırlamak için bazı ileri düzey optimizasyon tekniklerine ve ipuçlarına odaklanabiliriz. Bu stratejiler, özellikle büyük ölçekli projelerde veya daha iddialı performans hedefleri olan web sitelerinde fark yaratabilir.

1. Lazy Loading (Tembel Yükleme) Entegrasyonu

Görseller için loading="lazy" özniteliğini kullanmak, tarayıcıya, görselin yalnızca kullanıcının görünüm alanına yaklaştığında yüklenmesi talimatını verir. Bu, özellikle uzun sayfalarda veya çok sayıda görsel içeren sayfalarda ilk yükleme süresini önemli ölçüde azaltır. eleventy-img shortcode'unuzda bu zaten otomatik olarak ayarlanmıştır, ancak if koşuluyla sadece belirli görseller için etkinleştirebilirsiniz. Daha gelişmiş kontrol için Intersection Observer API'ını kullanarak kendi lazy loading mekanizmanızı da kurabilirsiniz, ancak modern tarayıcıların yerleşik desteği genellikle yeterlidir.

// Shortcode içinde loading="lazy" varsayılan olarak gelir

    

Kritik öneme sahip, yani ilk görüntüde mutlaka görünmesi gereken (Largest Contentful Paint - LCP adayı) görseller için loading="eager" veya fetchpriority="high" kullanmayı düşünebilirsiniz. Bu, tarayıcıya bu görsellerin mümkün olan en kısa sürede yüklenmesi gerektiğini işaret eder.

// LCP adayı görseller için
{% image "src/assets/lcp-hero.jpg", "Anasayfa kahraman görseli", [900, 1600], "100vw", "eager", "high" %}
    

Bu, shortcode fonksiyonunuza loading ve fetchpriority parametrelerini ekleyerek kolayca yapılabilir.

2. Görsel CDN (İçerik Dağıtım Ağı) Kullanımı

Büyük ölçekli web siteleri için görselleri barındırmak ve sunmak amacıyla bir görsel CDN kullanmak, performansı daha da artırabilir. Cloudinary, Imgix veya Akamai gibi hizmetler, görselleri dünya genelindeki sunucularında önbelleğe alarak kullanıcılara coğrafi olarak daha yakın sunuculardan teslim eder. Bu, gecikmeyi (latency) azaltır ve yükleme sürelerini hızlandırır. eleventy-img eklentisi doğrudan CDN entegrasyonu sunmazken, işlenmiş görsellerin URL'lerini CDN alan adınıza yönlendirecek şekilde yapılandırabilirsiniz. Örneğin, urlPath özelliğini bir CDN URL'sine ayarlayarak:

// .eleventy.js
let metadata = await Image(src, {
  // ... diğer ayarlar
  urlPath: "https://cdn.example.com/img/", // CDN URL'si
});
    

Bu, tüm görsellerinizin CDN üzerinden sunulmasını sağlar.

3. picture Elemanında source Sıralaması Stratejileri

elemanında etiketlerinin sırası önemlidir. Tarayıcılar, etiketlerini yukarıdan aşağıya doğru değerlendirir ve desteklediği ilk formatı kullanır. Bu nedenle, genellikle en modern ve verimli formatları (AVIF, WebP) en üste, daha geniş tarayıcı desteğine sahip ancak daha az verimli formatları (JPEG) ise en alta koymalısınız:

eleventy-img eklentisi bu sıralamayı varsayılan olarak zaten en iyi pratiklere göre yapar.

4. SVG Sprite'ları Yerine Shortcode'ların Avantajları/Dezavantajları

Satır içi SVG shortcode'ları, SVG sprite'larına bir alternatif sunar. SVG sprite'ları, tüm SVG'leri tek bir dosyada birleştirir ve referanslar aracılığıyla kullanılır. Shortcode'ların avantajları şunlardır:

• Daha Az Karmaşıklık: Her SVG'yi ayrı bir dosya olarak yönetmek ve yalnızca ihtiyaç duyulanları getirmek daha basittir.
• Kolay Stilizasyon: Her SVG'ye ayrı ayrı CSS sınıfı eklemek ve stil vermek daha kolaydır.
• Modülerlik: İkonları bağımsız modüller olarak düşünebilir ve projenizin herhangi bir yerine kolayca entegre edebilirsiniz.

Dezavantajları ise, çok sayıda küçük SVG kullanılıyorsa, her biri HTML'e gömüldüğünde HTML dosya boyutunun artabilmesidir. Sprite'lar ise bu durumda genellikle daha küçük bir toplam HTML çıktısı ve daha az HTTP isteği sağlayabilir. Seçim, projenizin büyüklüğüne, SVG sayısına ve yönetim tercihinize bağlıdır.

5. Eleventy Data Cascades ile Görsel Meta Bilgilerini Yönetme

Daha büyük projelerde, görsellerle ilgili meta bilgileri (örneğin, alternatif metinler, açıklamalar) doğrudan şablon dosyasına yazmak yerine, Eleventy'nin veri basamaklama (Data Cascades) özelliğini kullanarak yönetebilirsiniz. Örneğin, bir _data/images.json dosyası oluşturup tüm görsel bilgilerini burada saklayabilir ve shortcode'unuzun bu verilere erişmesini sağlayabilirsiniz. Bu, içeriği veriden ayırır ve daha düzenli bir yapı sağlar.

// _data/images.json
{
  "heroImage": {
    "src": "src/assets/hero.jpg",
    "alt": "Büyüleyici bir dağ manzarası"
  },
  "logo": {
    "src": "src/assets/logo.png",
    "alt": "Şirket logosu"
  }
}
    

{# Şablonunuzda #}
{% image images.heroImage.src, images.heroImage.alt, [600, 1200], "100vw" %}
    

Bu ileri düzey teknikler, Eleventy ile web sitelerinizin performansını, bakımını ve ölçeklenebilirliğini daha da artırmanıza yardımcı olacaktır. Her bir optimizasyonu dikkatle değerlendirerek projenizin özel ihtiyaçlarına en uygun çözümleri uygulayabilirsiniz.

Sonuç: Eleventy ile Performans ve Geliştirici Deneyimi

Bu makalede Eleventy shortcode'larının, modern web geliştirmenin en kritik alanlarından ikisi olan duyarlı görseller ve satır içi SVG yönetimi için nasıl güçlü bir çözüm sunduğunu ayrıntılı olarak inceledik. Gerek görsel optimizasyonuyla sayfa yükleme hızlarını artırma, gerekse SVG'leri dinamik olarak optimize ederek geliştirme sürecini basitleştirme olsun, Eleventy shortcode'ları web projelerinize hem performans hem de geliştirici deneyimi açısından önemli avantajlar katıyor.

Eleventy'nin esnekliği ve shortcode'larının modüler yapısı sayesinde, karmaşık görsel işleme ve SVG entegrasyonu görevlerini otomatikleştirerek, geliştiricilerin daha yaratıcı ve verimli olmalarını sağlıyoruz. Artık her görsel için farklı boyutlar veya her ikon için ayrı bir HTTP isteğiyle uğraşmak yerine, bu mantığı bir kez tanımlayıp her yerde tekrar kullanabiliriz. Bu da sadece zaman kazandırmakla kalmıyor, aynı zamanda web sitelerinin daha hızlı, daha güvenli ve daha ölçeklenebilir olmasını sağlayarak kullanıcı deneyimini doğrudan iyileştiriyor. Eleventy ile geleceğin web'ini inşa etmeye hazırsınız!

Sıkça Sorulan Sorular (SSS)

1. Eleventy shortcode'ları yalnızca görseller için mi kullanılır?

   Hayır, Eleventy shortcode'ları oldukça esnektir ve herhangi bir HTML, JavaScript veya hatta dinamik içerik oluşturmak için kullanılabilir. Örneğin, özel bileşenler, metin blokları, dinamik içerik listeleri veya API'lerden veri çekme gibi birçok farklı senaryoda shortcode'lardan faydalanabilirsiniz. Görsel ve SVG optimizasyonu, shortcode'ların gücünü gösteren sadece popüler örneklerdir.

2. eleventy-img eklentisini kullanmak zorunlu mu?

   Duyarlı görseller oluşturmak ve farklı formatlara dönüştürmek için eleventy-img eklentisini kullanmak zorunlu değildir, ancak şiddetle tavsiye edilir. Bu eklenti, görsel işleme sürecini büyük ölçüde basitleştirir ve performansı artıran birçok modern teknik (WebP, AVIF, srcset, ) otomatik olarak uygular. Alternatif olarak, sharp gibi bir görsel işleme kütüphanesini kendiniz entegre ederek kendi görsel işleme mantığınızı yazabilirsiniz, ancak bu daha fazla çaba gerektirir.

3. SVG shortcode'ları ile SVG sprite'lar arasındaki temel fark nedir?

   SVG shortcode'ları, her SVG dosyasının içeriğini doğrudan HTML'e gömer. Bu, her ikon için ayrı bir HTTP isteğini ortadan kaldırır ve CSS ile kolay stilizasyon sağlar. SVG sprite'lar ise, tüm SVG'leri tek bir büyük SVG dosyasında birleştirir ve etiketi ile referans verilerek kullanılır. Sprite'lar, çok sayıda küçük ikon kullanıldığında daha az toplam dosya boyutu ve daha az HTTP isteği sağlayabilirken, shortcode'lar daha kolay yönetim ve bağımsız stilizasyon esnekliği sunar. Seçim, projenin ölçeğine ve yönetim tercihine bağlıdır.

4. Shortcode'lar sayfa yükleme hızını gerçekten artırır mı?

   Evet, doğru uygulandığında shortcode'lar sayfa yükleme hızını önemli ölçüde artırabilir. Duyarlı görseller için kullanılan shortcode'lar, tarayıcının ekran boyutuna en uygun görseli indirmesini sağlayarak gereksiz veri indirimini önler. Satır içi SVG shortcode'ları ise, ayrı HTTP isteklerini ortadan kaldırarak sunucuya yapılan çağrı sayısını azaltır. Ayrıca, loading="lazy" gibi öznitelikler ve modern görsel formatları (WebP, AVIF) kullanarak dosya boyutunu küçültmek, toplam sayfa boyutunu azaltır ve bu da yükleme hızını doğrudan etkiler.