React'te Görüntü ve Yazı Tipi Optimizasyonu
Doğru boyutlar, biçimler (AVIF/WebP) ve font-display ile next/image veya tembel yüklenen kullanın.
React'te Görüntü ve Yazı Tipi Optimizasyonu, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
Görseller Neden Kritiktir?
Görseller genellikle bir sayfadaki en büyük kaynaklardır. Optimize edilmemiş görseller kötü LCP'ye, yavaş sayfa yüklemelerine ve yüksek bant genişliği maliyetlerine neden olur; özellikle mobil cihazlarda.
Next.js Image Bileşeni
next/image görselleri otomatik olarak optimize eder: varsayılan olarak tembel yükleme, duyarlı srcSet, modern biçimler (WebP/AVIF) ve CLS'yi önlemek için doğru boyutlar.
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // preload above-the-fold images
sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>Yalın React'te Tembel Yükleme
Yerel <img> öğelerine loading='lazy' ekleyin. Tarayıcı, ekranın dışındaki görsellerin yüklenmesini, görüntü alanına yaklaşıncaya kadar erteler.
// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />
// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />Modern Görsel Biçimleri
JPEG/PNG yerine WebP veya AVIF sunun. AVIF, aynı kalitede JPEG'den %50 daha küçüktür. Biçim anlaşması ve yedekler için bir <picture> öğesi kullanın.
<picture>
<source srcSet="/hero.avif" type="image/avif" />
<source srcSet="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>srcSet ile Duyarlı Görseller
Tarayıcının ekran için uygun çözünürlüğü seçebilmesi amacıyla birden çok boyut sağlayın; böylece 400px'lik bir mobil ekran için 2000px'lik bir görselin indirilmesini önlersiniz.
<img
src="/photo-800.jpg"
srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Photo"
/>Blurhash / İskelet Yer Tutucuları
Düzen kaymasını önlemek ve algılanan performansı iyileştirmek için görsel yüklenirken bulanık bir yer tutucu gösterin.
// With next/image blur placeholder:
<Image
src="/photo.jpg"
alt="Photo"
width={800}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>Yazı Tipi Yükleme Stratejisi
Yazı tipleri görüntülemeyi engeller. Özel yazı tipi yüklenirken yedek bir yazı tipi göstermek ve FOIT'yi (Görünmez Metin Flaşını) azaltmak için font-display: swap kullanın.
/* In global CSS: */
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2');
font-display: swap; /* show fallback, swap to MyFont when ready */
}Next.js Yazı Tipi Optimizasyonu
next/font, Google Fonts yazı tiplerini derleme zamanında yükler, bunları kendi sunucunuzda barındırır ve yazı tipi değişimlerinden kaynaklanan CLS'yi ortadan kaldırmak için font-display: optional uygular.
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function RootLayout({ children }) {
return <html className={inter.variable}><body>{children}</body></html>;
}Yazı Tiplerini Alt Kümelere Ayırma
Yalnızca ihtiyacınız olan karakter alt kümelerini yükleyin. Tam bir Unicode yazı tipi 1MB veya daha büyük olabilirken Latin alt kümesi genellikle 30–80KB boyutundadır.
// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });Kritik Yazı Tiplerini Önceden Yükleme
Ekranın ilk görünür bölümünde kullanılan yazı tiplerini önceden yükleyin; böylece HTML ayrıştırmasıyla paralel olarak yüklenir ve görüntülemeyi engelleyen süre azalır.
<link
rel="preload"
href="/fonts/MyFont.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>CDN ve Önbelleğe Alma
Görselleri ve yazı tiplerini uzun önbellek yaşam sürelerine sahip bir CDN'den sunun (Cache-Control: max-age=31536000, immutable). İçerik karması içeren dosya adları, yeni dosyaların önbelleği atlayarak alınmasını sağlar.
Hızlı Kontrol
font-display: swap, web yazı tipleri için ne yapar?
Özet
Otomatik optimizasyon için next/image veya yalın React'te yerel loading='lazy' + srcSet kullanın. AVIF/WebP'yi <picture> yedekleriyle sunun. Web yazı tipleri için font-display: swap uygulayın, Google Fonts'u kendi sunucunuzda barındırmak için next/font kullanın ve ekranın ilk görünür bölümündeki kritik kaynakları önceden yükleyin.
Sıkça Sorulan Sorular
“React'te Görüntü ve Yazı Tipi Optimizasyonu” dersi ücretsiz mi?
Evet — “React'te Görüntü ve Yazı Tipi Optimizasyonu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“React'te Görüntü ve Yazı Tipi Optimizasyonu” dersinde ne öğreneceğim?
Doğru boyutlar, biçimler (AVIF/WebP) ve font-display ile next/image veya tembel yüklenen kullanın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“React'te Görüntü ve Yazı Tipi Optimizasyonu” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- React Uygulamalarında Temel Web Ölçümlerini Ölçme
- Paket Analizi ve Kod Bölme Stratejisi
- React'te Görüntü ve Yazı Tipi Optimizasyonu
- INP'yi Azaltma: Olay İşleyicisi Optimizasyonu