Lighthouse 4/4 = 100 — 27 Kural Kontrol Listesi

Bu kaynak kimin için?

• Web sitesi yavaş açılan işletme sahipleri
• Lighthouse puanını 100'e çıkarmak isteyen geliştiriciler
• Core Web Vitals sorunlarını çözmek isteyenler
• SEO ve performans iyileştirmesi yapan içerik üreticileri

Ne işe yarar? 27 kuralı uygulayarak sitenizin hızını, erişilebilirliğini ve SEO'sunu iyileştirebilirsiniz. Liste, Lighthouse denetimindeki tüm kategorileri kapsar.

Lighthouse 4/4 = 100 İçin 27 Kural

Bu kontrol listesi, bilginsayar.com'da Lighthouse'un dört kategorisinde de 100/100/100/100 almak için uyguladığım 27 kuralı içeriyor. Her kural, gerçek ölçümlerle test edilmiştir.

---

⚡ Performans (7 Kural)

1. Harici CDN Kullanma

Font, JS, CSS — hepsi kendi sunucumdan servis ediliyor. Harici CDN, ekstra DNS lookup ve bağlantı gecikmesi demek.

2. Görselleri AVIF + WebP + JPEG × 4 Boyut Üret

Her görsel için 13 dosya: 1 orijinal + 3 format × 4 boyut. Tarayıcı hangisini destekliyorsa otomatik seçer.

3. Görselleri Lazy Load Et

loading="lazy" ile ekran dışındaki görseller yüklenmez. İlk boyama (FCP) hızlanır.

4. Font Subset Kullan

Türkçe karakterler + Latin alfabesi yeterli. Tam font dosyası 200 KB iken, subset 25 KB.

5. Kritik CSS'i Inline Et

İlk render için gerekli CSS <head> içinde, geri kalanı harici dosyada.

6. JS'i Defer/Async Yükle

<script defer> veya <script async> — render-blocking JavaScript yok.

7. Brotli + Gzip Çift Sıkıştırma

HTML, CSS, JS dosyaları hem .br hem .gz olarak üretilir. Tarayıcı hangisini destekliyorsa alır.

---

♿ Erişilebilirlik (7 Kural)

8. Renk Kontrastı WCAG AA Minimum

Metin/arka plan kontrast oranı en az 4.5:1. Büyük metinler için 3:1.

9. Her Görsele Alt Metin

Anlamlı açıklama. Dekoratif görsellerde alt="" (boş bırak).

10. Form Etiketleri (Label)

Her <input> için <label> veya aria-label. Placeholder metin yeterli değil.

11. ARIA Rolleri Doğru Kullan

role="navigation", role="main", role="banner" gibi anlamsal roller. Ama gereksiz ARIA kullanma.

12. Klavye Navigasyonu Tam Çalışsın

Tab tuşuyla tüm etkileşimli öğelere erişilebilmeli. tabindex doğru kullanılmalı.

13. Heading Hiyerarşisi (h1-h6)

Bir sayfada tek h1. Sıralı h2, h3 — atlama yok.

14. Focus Göstergeleri Görünür

Klavye ile gezinirken :focus stili net görünmeli. outline: none yasak.

---

🛡️ En İyi Uygulamalar (7 Kural)

15. HTTPS Kullan

Tüm trafik şifreli. HTTP → HTTPS yönlendirmesi aktif.

16. Console'da Hata Olmasın

JS hataları, 404 kaynaklar, uyarılar temizlenmeli.

17. Eski JS API'leri Kullanma

document.write, XMLHttpRequest yerine modern fetch, querySelector.

18. Güvenlik Header'ları (CSP, HSTS)

Content-Security-Policy, Strict-Transport-Security, X-Frame-Options.

19. Kaynak Sürümü Belirt (/?v=)

CSS ve JS dosyalarına versiyon parametresi. Cache busting için.

20. 404 Sayfası Özel

Varsayılan "Not Found" yerine site tasarımıyla uyumlu özel sayfa.

21. Deprecated API Kullanma

document.querySelectorAll gibi modern API'ler. Kaldırılmış API'lerden kaçın.

---

🔍 SEO (6 Kural)

22. Benzersiz Title + Meta Description

Her sayfa için özgün. Başlık ≤ 70 karakter, açıklama ≤ 170 karakter.

23. Canonical URL Belirt

<link rel="canonical"> ile sayfanın asıl adresi. Kopya içerik engellenir.

24. Structured Data (JSON-LD)

Article, BlogPosting, Organization schema'ları. Google zengin sonuçlar için.

25. robots.txt + sitemap.xml

Dinamik üretim. sitemap.xml arama motorlarına otomatik gönderim.

26. Mobil Uyumlu (Responsive)

<meta name="viewport"> + esnek grid. Mobile-first tasarım.

27. Internal Linking

Sayfalar arası anlamlı bağlantılar. Her sayfa en az 2-3 iç link.

---

🎁 Bu Kontrol Listesini Nasıl Kullanırsın?

1. Lighthouse aç → test et → puanları not et
2. Bu listedeki 27 kuralı sırayla uygula
3. Her kural sonrası tekrar test et
4. Sonuç: 4/4 = 100

Not: Bu listedeki her kuralı, kendi sitemde test ettim ve ölçtüm. Sonuç: bilginsayar.com Lighthouse 4/4 = 100/100/100/100.

---

📊 Ölçüm Sonuçları

TTFB: 3-4 ms arası (statik cache sayesinde)

LCP: 1.2 saniye

CLS: 0.00

FID: 8 ms