Proje sonu - Performans sayfası
Tüm performans tekniklerini birleştirip dokümante edersin.
Tüm teknikleri birleştir
Son derste sayfayı tamamlıyorsun. Elinde şunlar var:
- Head'de
preload,preconnect,dns-prefetch. - Body'de optimize
<img>(srcset, sizes, width/height, loading, decoding). - main içinde
<template>ve<noscript>.
Bu derste üç şey ekleyeceksin: <picture> ve <source> ile modern görsel biçimleri (AVIF, WebP), HTML yorumları ile performans kararlarını dokümante etme ve <footer> ile telif yılı.
Yorumlarla performans kararlarını belgele
HTML yorumları (<!-- ... -->) tarayıcıda görünmez ama kaynakta kalır. Performans kararlarını yorumla belgelemek, ekibin neden böyle yaptığını anlamasına yardımcı olur.
Bu projede üç kritik noktaya yorum ekleyeceksin: head'deki erken bağlantı kararları, LCP görseli ve <picture> bölümü. Yorumlar kısa ve öz olmalı; aşırıya kaçma.
Aynı derste <picture> ve iki <source> ile AVIF ve WebP biçimlerini de tanıtacaksın; bu modern biçimler daha küçük dosya boyutu sağlar.
Uygulama Yorum, picture ve footer ekle
Önceki dersin template ve noscript içeren sayfasını al. Üç şey ekle:
<head>'de<link rel="preconnect">'ten önce bir HTML yorumu (örnek Performans: CDN'ye erken bağlan ve LCP görselini önceden yükle).<main>içine yeni bir<section>ekle; içine h3 (örnek Öne çıkan hikaye) ve bir<picture>koy. Picture'nin içine iki<source>koy: biri type="image/avif", diğeri type="image/webp", her biri srcset ile. Picture'nin sonuna bir<img>(fallback) ekle.<body>'nin sonuna bir<footer>ekle; içine telif yılı içeren bir<p>koy (örnek © 2026 Hızlı Haber).
Ö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>
<!-- Performans: CDN'ye erken bağlan ve LCP görselini önceden yükle -->
<link rel="preconnect" href="https://cdn.hizlihaber.com">
<link rel="dns-prefetch" href="https://cdn.hizlihaber.com">
<link rel="preload" as="image" href="https://cdn.hizlihaber.com/kapak/ana-haber-960.webp">
</head>
<body>
<header>
<h1>Hızlı Haber</h1>
<p>Türkiye'nin hızlı haber kaynağı</p>
</header>
<main>
<!-- LCP görseli: srcset ile ekran genişliğine göre seçilir -->
<article>
<h2>Borsa rekor tazeledi</h2>
<img src="https://cdn.hizlihaber.com/kapak/ana-haber-960.webp"
srcset="https://cdn.hizlihaber.com/kapak/ana-haber-480.webp 480w,
https://cdn.hizlihaber.com/kapak/ana-haber-960.webp 960w,
https://cdn.hizlihaber.com/kapak/ana-haber-1440.webp 1440w"
sizes="(max-width: 600px) 100vw, 50vw"
width="960" height="540"
alt="Borsa ekranında yükselen grafik"
loading="lazy" decoding="async">
</article>
<!-- Öne çıkan hikaye: picture ile AVIF ve WebP kaynakları sunulur -->
<section>
<h3>Öne çıkan hikaye</h3>
<picture>
<source type="image/avif" srcset="https://cdn.hizlihaber.com/onecikan/hava-480.avif 480w, https://cdn.hizlihaber.com/onecikan/hava-960.avif 960w">
<source type="image/webp" srcset="https://cdn.hizlihaber.com/onecikan/hava-480.webp 480w, https://cdn.hizlihaber.com/onecikan/hava-960.webp 960w">
<img src="https://cdn.hizlihaber.com/onecikan/hava-960.jpg"
width="960" height="540"
alt="Hava durumu haritası"
loading="lazy" decoding="async">
</picture>
</section>
<!-- Son dakika şablonu: JS etkinse klonlanır, değilse noscript gösterilir -->
<template id="son-dakika-sablonu">
<article>
<h2>Son dakika başlığı</h2>
<p>Detaylar yükleniyor...</p>
</article>
</template>
<noscript>
<p>Son dakika haberleri için JavaScript'i etkinleştirin.</p>
</noscript>
</main>
<footer>
<p>© 2026 Hızlı Haber</p>
</footer>
</body>
</html>Performans sayfası tamam!
Tebrikler! 5 dersin sonunda elinde çalışan bir Hızlı Haber sayfası var: head'de kritik kaynak sırası, body'de optimize görsel, picture ile modern biçimler, template ve noscript ile progressive enhancement, yorumlarla dokümante edilmiş kararlar ve footer'da telif yılı.
Her dersin başlangıç kodu önceki dersin çözümünü taşıyordu; sen sadece yeni parçayı ekledin. Bu yapıyı alıp kendi haber sitenle doldurabilir, yeni biçimler ekleyebilir, performans ölçümleri yapabilirsin.
Kendini test et
-
Bu projede LCP görseli için en uygun yaklaşım hangisi?
- Görseli preload ile erken yükleyip eager bırakmak
- Görseli lazy yüklemek ve preload etmemek
- Görseli yalnızca CSS background-image yapmak
- Görseli JavaScript ile sonra enjekte etmek
Cevabı göster
Görseli preload ile erken yükleyip eager bırakmak — Doğru. LCP görseli preload ile erken yüklenir ve eager bırakılır; lazy yalnızca ekran dışı görseller içindir.
-
Tekniği sağladığı faydayla eşleştir
- preload
- LCP kaynağını erken yükler
- srcset + sizes
- Ekran yoğunluğuna göre seçer
- width + height
- CLS'i azaltır
- picture + source
- Modern biçimlere dönüşüm
- loading=lazy
- Ekran dışını geciktirir