CSS’te Özel Fontları @font-face ve font-display ile Tanımlama ve Optimizasyon
Giriş: Web Tasarımında Fontların Rolü ve Karşılaşılan Zorluklar
Web tasarımı, kullanıcı deneyiminin temel taşlarından biridir ve bu deneyimin önemli bir parçası da tipografidir. Doğru font seçimi, bir markanın kimliğini yansıtır, okunabilirliği artırır ve sitenin genel estetiğini belirler. Ancak, web’de özel fontlar kullanmak, beraberinde bazı teknik zorlukları da getirir. Tarayıcıların varsayılan fontları dışında özel bir font kullanmak istediğimizde, bu fontun kullanıcının cihazına indirilmesi ve tarayıcı tarafından doğru bir şekilde işlenmesi gerekir. Bu süreç, sayfa yükleme hızını etkileyebilir, metinlerin geçici olarak görünmez olmasına (FOIT – Flash of Invisible Text) veya stilize edilmemiş bir fontla görünmesine (FOUT – Flash of Unstyled Text) neden olabilir.
Modern web geliştirme standartları, bu sorunları aşmak ve özel fontları hem estetik hem de performans açısından en verimli şekilde kullanmak için güçlü araçlar sunar: CSS’in @font-face kuralı ve font-display özelliği. Bu makalede, @font-face kuralının temelden ileri seviyeye tüm yönlerini, farklı font formatlarını, tarayıcı uyumluluğunu ve font-display özelliğinin font yükleme davranışını nasıl optimize ettiğini detaylı bir şekilde inceleyeceğiz. Amacımız, web sitelerinizde özel fontları tanımlarken karşılaşabileceğiniz tüm senaryolara hazırlıklı olmanızı sağlamak ve en iyi uygulamaları benimsemenize yardımcı olmaktır.
@font-face Kuralına Derinlemesine Bakış
@font-face kuralı, web geliştiricilerinin kendi özel fontlarını tanımlamasına ve bir web sayfasında kullanmasına olanak tanıyan CSS kuralıdır. Bu kural sayesinde, tasarımcılar ve geliştiriciler, kullanıcının sisteminde yüklü olmayan fontları bile kullanabilirler. Ancak, bu fontların doğru bir şekilde tanımlanması ve sunulması kritik öneme sahiptir.
Temel Sözdizimi ve Bileşenleri
Bir @font-face kuralı genellikle aşağıdaki özellikleri içerir:
* font-family: Bu özellik, tanımladığınız özel fonta vereceğiniz adı belirler. Bu ad, daha sonra CSS’inizde (örneğin, body { font-family: "MyCustomFont", sans-serif; }) bu fontu çağırmak için kullanılır. Tırnak işaretleri içinde belirtilmesi tavsiye edilir, özellikle font adında boşluk varsa.
* src: Bu, font dosyasının konumunu ve formatını belirten en önemli özelliktir. Tarayıcı, burada belirtilen URL’lerden font dosyasını indirmeye çalışır. Birden fazla URL ve format belirtmek, farklı tarayıcıların farklı formatları desteklemesi nedeniyle iyi bir uygulamadır.
* url(): Font dosyasının mutlak veya göreceli yolunu belirtir.
* format(): url() ile belirtilen font dosyasının formatını tarayıcıya bildirir. Bu, tarayıcının desteklemediği formatları indirmeye çalışmasını engeller ve performansı artırır. Örnek formatlar: 'woff2', 'woff', 'truetype', 'opentype', 'svg', 'embedded-opentype'.
* local(): Bu fonksiyon, kullanıcının bilgisayarında zaten yüklü olan bir fontu kontrol etmenizi sağlar. Eğer belirtilen font yerel olarak bulunursa, tarayıcı bu fontu kullanır ve sunucudan indirme ihtiyacını ortadan kaldırarak performansı artırır.
* font-weight: Bu özellik, tanımlanan fontun hangi kalınlıkta olduğunu belirtir (örn. normal, bold, 100, 400, 700). Farklı ağırlıklar için ayrı @font-face tanımları yaparak, tarayıcının doğru font dosyasını yüklemesini sağlarsınız.
* font-style: Fontun stilini belirtir (örn. normal, italic, oblique). İtalik versiyonlar için de ayrı @font-face tanımları yapmak en iyi yaklaşımdır.
* font-stretch: Fontun genişliğini belirtir (örn. normal, condensed, expanded). Değişken fontlarla daha alakalı bir özelliktir.
* unicode-range: Bu özellik, font dosyasının kapsadığı Unicode karakter aralığını belirlemenizi sağlar. Bu, özellikle çok dilli sitelerde veya sadece belirli karakter setlerine ihtiyacınız olduğunda büyük performans avantajları sunar. Örneğin, sadece Latin alfabesi karakterlerini içeren bir font dosyası için unicode-range: U+000-5FF; belirtebilirsiniz. Bu sayede, tarayıcı yalnızca ihtiyaç duyduğu alt küme font dosyasını indirir, büyük font dosyalarının tamamını değil.
@font-face {
font-family: 'MyCustomFont';
src: local('My Custom Font'),
url('/fonts/MyCustomFont-Regular.woff2') format('woff2'),
url('/fonts/MyCustomFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; / Daha sonra detaylıca inceleyeceğiz /
}
@font-face {
font-family: 'MyCustomFont';
src: local('My Custom Font Bold'),
url('/fonts/MyCustomFont-Bold.woff2') format('woff2'),
url('/fonts/MyCustomFont-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}Yukarıdaki örnekte, aynı font-family adı altında farklı font-weight değerleri için iki ayrı @font-face kuralı tanımlanmıştır. Bu, tarayıcının CSS’te font-weight: bold; kullanıldığında otomatik olarak doğru font dosyasını yüklemesini sağlar.
@font-face ile Font Yükleme Stratejileri
Her font ağırlığı (regular, bold, light vb.) ve her stil (normal, italic) için ayrı bir @font-face bloğu tanımlamak en iyi uygulamadır. Bu, tarayıcının yalnızca ihtiyaç duyduğu font varyantlarını indirmesini sağlar. Örneğin, bir sayfada yalnızca regular ve bold font kullanılıyorsa, italic veya light varyantlarının indirilmesine gerek kalmaz. Bu, sayfa yükleme süresini önemli ölçüde azaltır.
Font Formatları ve Tarayıcı Uyumluluğu
Web fontları için birçok farklı format bulunmaktadır ve her birinin kendine özgü avantajları ve dezavantajları vardır. Tarayıcı uyumluluğunu sağlamak ve en iyi performansı elde etmek için birden fazla formatı sunmak genellikle gereklidir.
* WOFF2 (Web Open Font Format 2.0): Şu anda en iyi sıkıştırma oranına sahip ve en yeni formatıdır. Modern tarayıcılar tarafından geniş çapta desteklenir. En küçük dosya boyutunu sunduğu için ilk tercihiniz olmalıdır.
* WOFF (Web Open Font Format): WOFF2’den önce gelen, iyi sıkıştırma oranına sahip ve geniş tarayıcı desteği sunan bir formattır. WOFF2’yi desteklemeyen tarayıcılar için iyi bir yedektir.
* TTF (TrueType Font) / OTF (OpenType Font): Geniş bir kullanım alanına sahip geleneksel masaüstü font formatlarıdır. Web için sıkıştırmaları WOFF/WOFF2 kadar iyi değildir, bu yüzden genellikle daha büyük dosya boyutlarına sahiptirler. Eski tarayıcılar veya WOFF/WOFF2’yi desteklemeyen nadir durumlar için yedek olarak kullanılabilirler.
* EOT (Embedded OpenType): Microsoft tarafından geliştirilmiş, özellikle Internet Explorer 6-11 için tasarlanmış bir formattır. Modern web siteleri için önemi azalmıştır, ancak çok eski IE sürümlerini hedefliyorsanız dahil edilebilir.
* SVG (Scalable Vector Graphics): SVG formatındaki fontlar, eski iOS sürümleri (4.1 ve altı) için kullanılırdı. Günümüzde neredeyse hiç kullanılmaz.
“Bulletproof” @font-face Sözdizimi
Tarayıcı uyumluluğunu en üst düzeye çıkarmak için, font dosyalarını src özelliği içinde belirli bir sırayla listelemek yaygın bir uygulamadır. Bu stratejiye “bulletproof @font-face” adı verilir ve tarayıcıların en uygun formatı seçmesini sağlar:
@font-face {
font-family: 'MyCustomFont';
src: local('My Custom Font'),
url('/fonts/MyCustomFont-Regular.woff2') format('woff2'), / Modern tarayıcılar, en iyi sıkıştırma /
url('/fonts/MyCustomFont-Regular.woff') format('woff'), / Geniş tarayıcı desteği /
url('/fonts/MyCustomFont-Regular.ttf') format('truetype'), / Eski tarayıcılar için yedek /
url('/fonts/MyCustomFont-Regular.eot?#iefix') format('embedded-opentype'); / IE9 öncesi /
font-weight: normal;
font-style: normal;
font-display: swap;
}Bu sıralamada:
1. local(): Kullanıcının sisteminde font varsa, indirme yapmaz.
2. woff2: En yeni ve verimli format, modern tarayıcılar için.
3. woff: Daha eski ama yaygın tarayıcılar için.
4. ttf veya otf: Daha da eski tarayıcılar için genel bir yedek.
5. eot: Özellikle eski Internet Explorer sürümleri için. ?#iefix kısmı, IE’nin belirli bir hatasını aşmak için kullanılır.
Tarayıcı, src listesini yukarıdan aşağıya doğru okur ve desteklediği ilk formatı indirir. Bu sayede, her zaman en uygun formatın kullanılmasını sağlamış olursunuz.
Font Performansı ve Kullanıcı Deneyimi
Özel fontlar, tasarım açısından zenginlik katarken, sayfa yükleme süresi ve görsel kararlılık açısından da zorluklar yaratabilir. Kullanıcılar, fontların yüklenmesini beklerken metnin nasıl göründüğüne dair farklı deneyimler yaşayabilirler. Bu deneyimler genellikle üç ana kategoriye ayrılır:
* FOUC (Flash of Unstyled Content): Bu, nadiren görülen bir durumdur ve genellikle fontların CSS’ten önce yüklenmesi gerektiğinde ortaya çıkar. Sayfa ilk yüklendiğinde metin, tarayıcının varsayılan stilize edilmemiş fontuyla görünür, ardından CSS yüklendikçe aniden özel fonta geçer. Bu, görsel bir sıçramaya neden olabilir.
* FOUT (Flash of Unstyled Text): Bu, özel font yüklenirken metnin önce bir yedek (sistem) fontuyla gösterilmesi ve özel font yüklendikten sonra bu fonta geçiş yapılması durumudur. Metin her zaman görünür olsa da, font değişimi görsel bir kaymaya neden olabilir. Çoğu kullanıcı için FOIT’ten daha kabul edilebilir bir durumdur, çünkü içerik hemen okunabilir durumdadır.
* FOIT (Flash of Invisible Text): Bu, özel font yüklenene kadar metnin tamamen görünmez kalması durumudur. Font dosyası indirilip hazır olduğunda metin aniden belirir. Bu durum, özellikle yavaş internet bağlantılarında veya büyük font dosyalarında kullanıcı deneyimini olumsuz etkileyebilir, çünkü kullanıcı bir süre boş bir ekranla karşılaşabilir.
Bu sorunları yönetmek ve kullanıcı deneyimini optimize etmek için CSS’in font-display özelliği geliştirilmiştir.
font-display Özelliği ile Font Yükleme Davranışını Kontrol Etme
font-display özelliği, @font-face kuralına eklenerek, tarayıcının özel font yüklenirken metni nasıl işleyeceğini belirlemenizi sağlar. Bu özellik, FOIT ve FOUT gibi sorunları yönetmek için güçlü bir mekanizma sunar.
font-display özelliği aşağıdaki değerleri alabilir:
* auto: Tarayıcının varsayılan font görüntüleme stratejisini kullanır. Çoğu tarayıcıda bu, block değerine benzer bir davranış sergiler.
* block: Bu değer, kısa bir “blok periyodu” ve ardından bir “takas periyodu” tanımlar.
* Blok Periyodu (Block Period): Yaklaşık 3 saniye sürer. Bu süre boyunca font yüklenmezse, metin görünmez (FOIT) kalır.
* Takas Periyodu (Swap Period): Blok periyodu sona erdiğinde veya font yüklendiğinde başlar. Eğer font blok periyodu içinde yüklenmezse ve takas periyodu başlarsa, tarayıcı yedek fontu kullanır. Font yüklendiğinde, yedek font özel fontla değiştirilir.
Bu, FOIT benzeri bir deneyim sunar. Metin bir süre görünmez kalabilir.
* swap: Bu değer, “blok periyodu”nu sıfır yapar.
* Blok Periyodu: Sıfır saniyedir. Metin hemen yedek fontla gösterilir.
* Takas Periyodu: Çok uzundur (genellikle süresiz). Font yüklendiğinde, yedek font özel fontla değiştirilir.
Bu, FOUT benzeri bir deneyim sunar. Metin her zaman görünürdür, ancak font değişimi yaşanır. Çoğu web sitesi için önerilen değerdir, çünkü içerik hemen okunabilir olur.
* fallback: Bu değer, çok kısa bir “blok periyodu” ve kısa bir “takas periyodu” tanımlar.
* Blok Periyodu: Yaklaşık 100 milisaniye (çok kısa). Bu süre boyunca font yüklenmezse, metin görünmez (FOIT) kalır.
* Takas Periyodu: Yaklaşık 3 saniye sürer. Eğer font bu 3 saniye içinde yüklenirse, yedek font özel fontla değiştirilir. Eğer font bu 3 saniye içinde de yüklenmezse, tarayıcı yedek fontu kalıcı olarak kullanır ve özel font yüklenmiş olsa bile artık onu kullanmaz.
Bu, fontun çok hızlı yüklenmesi bekleniyorsa veya fontun yüklenmemesi durumunda yedek fontun kalıcı olmasını istiyorsanız kullanışlıdır.
* optional: Bu değer, sıfır “blok periyodu” ve sıfır “takas periyodu” tanımlar.
* Blok Periyodu: Sıfır saniyedir. Metin hemen yedek fontla gösterilir.
* Takas Periyodu: Sıfır saniyedir. Font arka planda yüklenmeye devam eder. Eğer font çok hızlı bir şekilde (genellikle birkaç yüz milisaniye içinde) yüklenirse, tarayıcı onu kullanır. Aksi takdirde, tarayıcı yedek fontu kalıcı olarak kullanır ve özel fontu bir sonraki sayfa yüklemesinde (önbellekten) kullanmayı düşünebilir.
Bu değer, fontun kritik olmadığı ve ağ durumuna göre esneklik sağlamak istediğiniz durumlarda faydalıdır. Özellikle yavaş ağ bağlantılarında, özel fontun indirilmesini tamamen atlayarak performansı önceliklendirir.
Hangi değeri ne zaman kullanmalı?
* font-display: swap;: En yaygın ve genellikle en iyi seçenektir. Kullanıcıların içeriği mümkün olan en kısa sürede okumasını sağlar. Font değişimi fark edilebilir olsa da, içerik görünmez kalmaz. Marka kimliği için özel fontların mutlaka gösterilmesi gerekiyorsa idealdir.
* font-display: block;: Eğer markanızın tipografisi o kadar kritikse ki, font yüklenmeden metnin gösterilmesini istemiyorsanız kullanabilirsiniz. Ancak bu, FOIT riskini beraberinde getirir ve yavaş bağlantılarda kötü bir kullanıcı deneyimine yol açabilir.
* font-display: fallback;: Fontun hızlı yükleneceğinden eminseniz veya belirli bir süre sonra yedek fonta kalıcı olarak geçiş yapılmasını tercih ediyorsanız kullanışlıdır.
* font-display: optional;: Performansın tipografik estetiğin önüne geçtiği durumlarda tercih edilir. Özellikle yavaş ağlarda veya düşük öncelikli fontlar için kullanıcı deneyimini iyileştirebilir.
Örnek kullanım:
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/MyCustomFont-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap; / Bu kuralı ekledik /
}Font Yüklemesini Daha da Optimize Etme
@font-face ve font-display güçlü araçlar olsa da, font performansını daha da ileriye taşımak için ek optimizasyon teknikleri mevcuttur.
Alt Kümeleme (Subsetting)
Bir font dosyası genellikle dünya genelindeki tüm karakterleri, sembolleri ve glifleri içerir. Ancak çoğu web sitesi, bu karakterlerin yalnızca küçük bir alt kümesini kullanır (örneğin, sadece Latin alfabesi ve birkaç özel karakter). Alt kümeleme, font dosyasından kullanılmayan karakterleri çıkararak dosya boyutunu küçültme işlemidir.
* Dinamik Alt Kümeleme: Google Fonts gibi servisler, yalnızca belirli bir sayfada kullanılan karakterleri dinamik olarak alt kümeleyebilir.
* Manuel Alt Kümeleme: FontForge veya Font Squirrel’s Webfont Generator gibi araçlarla kendi font dosyalarınızı alt kümeleyebilirsiniz. Örneğin, sadece Türkçe karakterleri (U+000-5FF ve U+100-17F gibi) içeren bir alt küme oluşturabilirsiniz. @font-face içindeki unicode-range özelliği, bu alt kümelenmiş fontların ne zaman yükleneceğini tarayıcıya bildirir.
Değişken Fontlar (Variable Fonts)
Değişken fontlar, tek bir font dosyası içinde birden fazla ağırlık, stil, genişlik ve diğer tipografik varyasyonları barındırabilen yenilikçi bir OpenType formatıdır. Geleneksel olarak, her font ağırlığı (regular, bold, light) ve stili (italic) için ayrı bir font dosyası indirmeniz gerekirken, değişken fontlar tek bir (ancak biraz daha büyük) dosya ile tüm bu varyasyonları sunar.
* Avantajları: Daha az HTTP isteği, daha esnek tipografik kontrol, potansiyel olarak daha küçük toplam font boyutu (birden fazla varyant kullanılıyorsa).
* Kullanım: @font-face kuralında font-weight, font-stretch gibi özellikleri bir aralık olarak belirtilebilir (örn. font-weight: 100 900;).
Font Yükleme API’leri (JavaScript)
Tarayıcının yerleşik Font Loading API‘si (document.fonts), JavaScript aracılığıyla font yüklemesini daha hassas bir şekilde kontrol etmenizi sağlar. Bu API ile fontların ne zaman yüklendiğini algılayabilir ve buna göre sayfa düzenini veya animasyonları tetikleyebilirsiniz.
// Font yüklemesinin tamamlanmasını bekleyin
document.fonts.ready.then(() => {
console.log('Tüm fontlar yüklendi!');
// Fontlar yüklendikten sonra yapılacak işlemler
document.body.classList.add('fonts-loaded');
});
// Belirli bir fontun yüklenmesini bekleyin
const myFont = new FontFace('MyCustomFont', 'url(/fonts/MyCustomFont-Regular.woff2)');
document.fonts.add(myFont);
myFont.load().then(() => {
console.log('MyCustomFont yüklendi!');
document.body.classList.add('my-custom-font-loaded');
});Bu, font yüklemesi tamamlandığında belirli bir sınıf ekleyerek, CSS ile geçiş efektleri veya animasyonlar uygulamanıza olanak tanır ve FOUT/FOIT etkisini daha yumuşak hale getirebilir.
preload Kullanımı
etiketi, tarayıcıya belirli bir kaynağın (bu durumda font dosyaları) mevcut sayfada yüksek öncelikli olarak ihtiyaç duyulacağını ve mümkün olan en kısa sürede indirilmeye başlanması gerektiğini bildirir. Bu, tarayıcının font dosyalarını CSS ayrıştırmasını beklemeden daha erken indirmeye başlamasına olanak tanır.
* as="font": Kaynağın bir font olduğunu belirtir.
* type="font/woff2": Fontun MIME tipini belirtir.
* crossorigin: Font dosyaları farklı bir kaynaktan (örneğin CDN) yükleniyorsa zorunludur. Aynı kaynaktan yükleniyorsa bile güvenlik nedeniyle eklenmesi iyi bir uygulamadır.
preload kullanırken dikkatli olmak gerekir; çok fazla kaynak ön yüklemek, diğer kritik kaynakların yüklenmesini geciktirebilir. Yalnızca sayfanın ilk görünümünde (above-the-fold content) kullanılan fontlar için kullanılmalıdır.
CSS font-feature-settings ve font-variant
Bu CSS özellikleri, OpenType fontlarında bulunan gelişmiş tipografik özelliklere erişim sağlar (ligatürler, sayı stilleri, küçük büyük harfler vb.). Bu özellikler, fontun görsel zenginliğini artırabilir ve daha profesyonel bir tipografi sunabilir.
p {
font-feature-settings: "liga" 1, "dlig" 1; / Ligatürleri etkinleştir /
font-variant: small-caps; / Küçük büyük harfler /
}CDN Kullanımı
Font dosyalarını bir İçerik Dağıtım Ağı (CDN) üzerinden sunmak, fontların kullanıcılara coğrafi olarak daha yakın sunuculardan indirilmesini sağlayarak yükleme sürelerini azaltabilir. Google Fonts gibi servisler zaten CDN kullanır. Kendi barındırdığınız fontlar için de bir CDN entegrasyonu düşünebilirsiniz.
Erişilebilirlik ve Yedek Fontlar
Özel fontlar ne kadar güzel olursa olsun, her zaman yedek bir planınız olmalıdır. Font yüklemesi başarısız olabilir, kullanıcının tarayıcısı fontu desteklemeyebilir veya ağ bağlantısı çok yavaş olabilir. Bu gibi durumlarda, metnin okunabilirliğini ve erişilebilirliğini sağlamak için iyi seçilmiş yedek fontlara sahip olmak kritik öneme sahiptir.
* Yedek Font Seçimi: Yedek fontlar, özel fontunuza görsel olarak en yakın sistem fontları veya web güvenli fontlar olmalıdır. Bu, font değişimi sırasında görsel sıçramayı en aza indirmeye yardımcı olur.
* Font Yığınları (Font Stacks): CSS’te font-family özelliğini tanımlarken, birden fazla fontu virgülle ayırarak bir “font yığını” oluşturabilirsiniz. Tarayıcı, listedeki ilk fontu bulmaya çalışır; eğer bulamazsa veya yükleyemezse, bir sonraki fonta geçer. En sona her zaman bir jenerik font ailesi (serif, sans-serif, monospace, cursive, fantasy) eklemek iyi bir uygulamadır.
body {
font-family: 'MyCustomFont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}Bu örnekte:
1. Tarayıcı önce MyCustomFont‘u yüklemeye çalışır.
2. Eğer MyCustomFont yüklenemezse veya bulunamazsa, Helvetica Neue‘yi arar.
3. Helvetica Neue bulunamazsa, Helvetica‘yı dener.
4. Helvetica bulunamazsa, Arial‘ı dener.
5. Son olarak, listedeki hiçbir font bulunamazsa, tarayıcı kullanıcının sistemindeki varsayılan sans-serif fontunu kullanır.
Bu yaklaşım, özel fontların yüklenmesinde bir sorun yaşandığında bile içeriğin her zaman okunabilir kalmasını garanti eder. Erişilebilirlik açısından, metinlerin asla görünmez kalmaması veya okunaksız hale gelmemesi esastır.
Sonuç
Özel fontlar, bir web sitesinin görsel kimliğini ve kullanıcı deneyimini zenginleştiren vazgeçilmez unsurlardır. Ancak bu zenginliği, performans ve erişilebilirlikten ödün vermeden sunmak, dikkatli bir planlama ve doğru tekniklerin uygulanmasını gerektirir. CSS’in @font-face kuralı, özel fontları tanımlamanın temelini oluştururken, font-display özelliği font yükleme davranışını optimize ederek FOUT ve FOIT gibi sorunları yönetmemizi sağlar.
Doğru font formatlarını seçmek, “bulletproof” @font-face sözdizimini kullanmak, fontları alt kümelemek, preload ile ön yüklemek ve değişken fontları değerlendirmek gibi ek optimizasyon teknikleri, web sitelerinizin daha hızlı yüklenmesine ve daha akıcı bir kullanıcı deneyimi sunmasına yardımcı olacaktır. Unutulmamalıdır ki, her zaman bir yedek font stratejisi belirlemek, font yüklemesi başarısız olsa bile içeriğin erişilebilir ve okunabilir kalmasını garantiler.
Sonuç olarak, @font-face ve font-display özelliklerini etkin bir şekilde kullanarak, hem estetik açıdan çekici hem de performans açısından optimize edilmiş web siteleri inşa edebiliriz. Bu teknikleri bir araya getirmek, modern web geliştiricilerinin araç kutusunda olmazsa olmaz bir beceridir.