Proje: Performanslı sayfa
5 derslik projenin genel bakışı: CLS ve LCP odaklı sayfa.
Proje: Hızlı Haber sayfası
Bu 5 derslik projede Hızlı Haber adlı hızlı yüklenen bir haber sayfası yapacaksın. Her derste sayfaya bir parça ekleyecek, son derste tam bir performanslı sayfa elinde olacak.
Projede şunları kullanacaksın:
- Belge iskeleti (DOCTYPE, html, head, body)
preload,preconnect,dns-prefetchile kritik kaynak sırasısrcset,sizes,loading,decoding,width/heightile optimize görsellertemplatevenoscriptile progressive enhancementpicturevesourceile modern görsel biçimleri
Hazırsan başlayalım.
Proje yol haritası
Her ders bir parça ekler ve sonraki dersin başlangıç kodu, önceki dersin çözümünü içerir. Böylece sayfa adım adım büyür.
- İskelet: Belge iskeletini kur, head'i temel meta'larla doldur.
- Kritik kaynak sırası:
preload,preconnect,dns-prefetchile erken bağlantı kur. - Görsel optimizasyonu:
srcset,sizes,loading,decoding,width/heightekle. - Şablon ve noscript:
templatevenoscriptile progressive enhancement kur. - Proje sonu:
picture/sourceekle, yorumlarla dokümante et, sayfayı tamamla.
Bir dersi atlayıp diğerine geçemezsin; başlangıç kodu zinciri birikimlidir.
Hedef sayfada ne olacak?
Hedef sayfa bir haber ana sayfası. Head bölümünde charset, viewport, title ve kritik kaynak bağlantıları yer alır. Body başlık, ana haber görseli, ilgili haberler ve öne çıkan hikaye bölümlerini taşır.
Performans hedefleri: LCP (Largest Contentful Paint) için ana görseli preload ile erken yükler; CLS (Cumulative Layout Shift) için görsellere width/height verirsin; ekran dışı görseller loading="lazy" ile geciktirilir.
JavaScript kapalıyken de noscript ile bilgilendirme yapılır.
Uygulama Boş belge iskeletiyle başla
Projeye başlarken boş bir HTML belge iskeleti yaz. İçinde <!DOCTYPE html>, <html> (lang="tr"), <head> (charset=utf-8, viewport ve title) ve boş bir <body> bulunsun. Title içeriği: Hızlı Haber - Ana sayfa.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hızlı Haber - Ana sayfa</title>
</head>
<body>
</body>
</html>Kendini test et
-
Bu projede 2. dersin başlangıç kodu genelde ne içerir?
- 1. dersin çözümünü ve 2. dersin yeni parçası için kısa bir yorum
- Tamamen boş bir sayfa
- Yalnızca DOCTYPE satırı
- Yalnızca 2. dersin yeni eklenen parçası
Cevabı göster
1. dersin çözümünü ve 2. dersin yeni parçası için kısa bir yorum — Doğru. Başlangıç kodu önceki çözümü taşır, böylece sayfa adım adım büyür.
-
Dersleri ekledikleri parçayla eşleştir
- İskelet
- DOCTYPE, html, head, body
- Kritik kaynak sırası
- preload, preconnect
- Görsel optimizasyonu
- srcset, sizes, loading
- Şablon ve noscript
- template, noscript