Lighthouse'ta 4/4 = 100 Nasıl Alınır? Kendi Sitemde Uyguladığım 27 Kural

Geçen hafta bilginsayar.com'u yayına aldım. Google PageSpeed Insights'a girdim, sonuç:

Performance 100 · Accessibility 100 · Best Practices 100 · SEO 100.

Bu skor benim için sürpriz değildi — çünkü siteyi sıfırdan bu hedefle tasarladım. Ama "sıfırdan" demek kolay. Asıl zor olan, 20 yıllık bilişim ve telekomünikasyon deneyimimin bana öğrettiği bir gerçeği kabul etmekti: Hızlı site sonradan hızlandırılmaz. Baştan hızlı tasarlanır.

Bu yazıda o süreçte uyguladığım 27 kuralı anlatacağım. Hepsi kanıtlı — çünkü kendi sitemde uyguladım ve ölçtüm. Hepsi ücretsiz — hiçbiri pahalı araç gerektirmiyor. Hepsi tarafsız — hiçbir markadan komisyon almıyorum.

Neden Lighthouse?

Bir sitenin başarısını ölçmenin onlarca yolu var. Ama Lighthouse'un yeri ayrı:

• Google'ın kendi aracı — arama sıralamasını doğrudan etkiliyor
• Dört kategori birden ölçer — hız, erişilebilirlik, iyi uygulamalar, SEO
• Ücretsiz ve herkese açık — Chrome DevTools'ta bile var
• Kanıtlanabilir — "benim sitem hızlı" demek yetmez, rakam göstermek gerekir

Benim için asıl mesele şu: Bir web tasarımcısı kendi sitesinde 100 alamıyorsa, müşterisine ne vaat edebilir? Bu yüzden bu skoru bir vitrin olarak görüyorum.

Ölçüm Notu

Bu yazıdaki tüm sonuçlar mobil ölçüm. Neden? Çünkü Google mobil öncelikli indeksleme yapıyor, gerçek kullanıcıların %60'ı mobil. Masaüstü skoru zaten mobilin üstünde çıkar — zor olan mobilde 100 almak.

Ölçümü 3 farklı şekilde yaptım:

• PageSpeed Insights (Google'ın web arayüzü)
• Lighthouse CLI (yerel Node.js testi)
• Chrome DevTools (geliştirme anında anlık)

Üçünde de sonuç aynı: 4/4 = 100.

8 Ekim 2026 tarihli mobil PageSpeed Insights raporu — 4/4 tam puan.

PERFORMANCE — 8 Kural

1. Statik HTML Cache Kullanın

Dünyanın en hızlı PHP kodu, hiç çalışmayan PHP kodudur.

Benim sitemde her sayfa ilk ziyarette derlenir ve diske .html dosyası olarak yazılır. Sonraki ziyaretlerde PHP hiç çalışmaz — doğrudan statik dosya sunulur. Sonuç: 5-10 ms yanıt süresi.

Yerel testte TTFB (Time To First Byte) 16 ms çıktı. Canlı sunucuda 80-120 ms arası — yine de çok iyi.

Kritik detay: Cache invalidation (geçersiz kılma) sistemini doğru kurun. İçerik güncellendiğinde, hangi sayfaların etkilendiğini bilmeli ve sadece onları temizlemelisiniz.

2. Brotli Sıkıştırma (Gzip Yetmez)

Gzip 1990'ların teknolojisi. Brotli 2015'te Google geliştirdi ve %15-20 daha küçük çıktı üretiyor.

Cache sisteminde hem .br (Brotli) hem .gz (Gzip) versiyonu tutun.

3. Görsel Pipeline — AVIF > WebP > JPEG

Görseller bir sitenin en büyük byte kaynağıdır.

Benim sistemde bir görsel yüklendiğinde:

• 1 orijinal saklanır (yedek)
• 3 format üretilir: AVIF (75), WebP (85), JPEG (85)
• 4 boyut üretilir: 300, 640, 1024, 1920 px
• Toplam: 13 dosya

Sonuç: 1.24 MB PNG → 64 KB AVIF. %95 küçülme.

4. Lazy Loading Her Yerde

Tek satır: loading="lazy".

Kritik incelik: Above-the-fold görsellerde lazy kullanmayın — LCP kötüleşir.

5. Tek CSS + Tek JS

• Tek CSS (stil.css)
• Tek JS (ana.js, defer)

Inline değil çünkü tarayıcı cache'inde saklanamaz.

6. Harici CDN Yok

Harici kaynak: ek DNS, ek TLS, ek TCP, üçüncü taraf bağımlılığı, KVKK riski. Ben hiçbirini kullanmıyorum.

7. System Font Stack

Font yüklemek = ek dosya + FOUT/FOIT. Sistem fontu = 0 byte, 0 gecikme.

8. Preconnect/Preload Gerekmiyor

Harici kaynak yoksa bu direktifler de gereksiz.

ACCESSIBILITY — 6 Kural

9. Kontrast Oranı — WCAG AA/AAA

Erişilebilirlikte en sık atlanan konu. Metin ile arka plan arasındaki kontrast ölçülür — keyfi değil.

WCAG 2.1 standardı:

• AA (minimum): Normal metin 4.5:1, büyük metin 3:1
• AAA (ideal): Normal metin 7:1, büyük metin 4.5:1

Benim sitemde metin rengi #0b0d10, zemin beyaz #ffffff. Kontrast oranı 19.34:1 — AAA'yı rahat geçiyor.

Kontrast oranını sitemdeki WCAG Kontrast Kontrolü aracıyla test edebilirsiniz.

10. Semantik HTML

<div class="header"> yerine <header>.

<div class="nav"> yerine <nav>.

<div class="main"> yerine <main>.

Neden önemli?

• Ekran okuyucular yapıyı anlar
• Google botu içeriği daha iyi indeksler
• Klavye kullanıcıları "İçeriğe geç" linkiyle hızlı atlar
• Kod bakımı kolaylaşır

11. Alt Text — Anlamlı Yazın

Her görselin alt özelliği olmalı. Ama "resim" veya "image" yazmak işe yaramaz.

Kural:

• Anlamlı görseller: Ne anlattığını yazın.
• Dekoratif görseller: alt="" boş bırakın.
• Link olan görseller: Linkin nereye gittiğini yazın.

Benim sistemimde her görsel yüklendiğinde alt text zorunlu.

12. Focus Görünürlüğü

Klavye ile gezen kullanıcılar için odaklanan öğeyi görmek şart. Benim çözümüm:

:focus-visible sadece klavye kullanıcılarında çalışır.

13. Skip Link

Sayfa başında görünmez bir link: "İçeriğe geç".

Klavye kullanıcısı Tab'a bastığında görünür olur.

14. ARIA — Az Ama Doğru

Kural: Doğru HTML ile yapılabiliyorsa ARIA kullanmayın.

BEST PRACTICES — 7 Kural

15. HTTPS Zorunlu

2026'da HTTP site kabul edilemez.

16. Security Headers

17. X-Powered-By Kaldır

Bu, sıfır maliyetli güvenlik.

18. Console'da Hata Yok

F12'ye bastığınızda hiçbir hata olmamalı. Benim sitemde konsol sıfır hata.

19. Modern Görsel Formatları

1. AVIF (en küçük)
2. WebP (yaygın destek)
3. JPEG/PNG (fallback)

20. Aspect Ratio — CLS Önle

Her görsele width ve height verin. Benim sitemde CLS 0.

21. Permissions-Policy ile API Kısıtla

XSS saldırısı olsa bile kötü niyetli kod kamerayı açamaz.

SEO — 6 Kural

22. Canonical URL Her Sayfada

Her sayfa kendisinin "asıl URL" olduğunu beyan etmeli.

23. Title ve Description Optimizasyonu

Title: 50-60 karakter ideal

Description: 150-160 karakter ideal

24. Schema.org JSON-LD

Kullandığım tipler: WebSite, Organization, Article, BreadcrumbList, Product.

25. Open Graph + Twitter Card

og:image zorunlu: 1200×630 px ideal.

26. Sitemap + robots.txt + llms.txt

• sitemap.xml → Google/Bing'e tüm sayfalar
• robots.txt → tarama kuralları
• llms.txt → AI arama motorlarına özet

Üçü de dinamik üretiliyor benim sitemde.

27. AI İçerik Beyanı

Google'ın E-E-A-T kriterleriyle örtüşüyor.

Sonuç — 27 Kuralın Özeti

Bakın, bu kuralların hiçbiri "sihirli" değil. Hepsi kamuya açık bilgi. Ama:

1. Çoğu site 5-10 tanesini uyguluyor — 27'sini uygulayan az
2. Uygulama disiplin istiyor — tek seferlik değil, sürekli
3. Ölçüm şart — "yaptım" demek yetmez, "ölçtüm" demek gerekir

Benim için en çok fark yaratan 3 kural:

• Statik HTML cache (5-10 ms yanıt süresi)
• Görsel pipeline (%95 küçülme)
• Harici CDN yok (bağımsızlık + hız)

En zor uyguladığım kural:

• Cache invalidation. Yanlış kurulunca sayfa eski hâliyle kalıyor, dakikalarca debug yapıyorsunuz.

Peki Siz Ne Yapacaksınız?

Bu 27 kuralı kendi sitenizde uygulamaya başlayın. Ama acele etmeyin. Sırayla:

Hafta 1: Ölçün. PageSpeed Insights'a girin, mevcut skorunuzu kaydedin.

Hafta 2: Görselleri optimize edin (en hızlı kazanç).

Hafta 3: Cache katmanı kurun (en büyük kazanç).

Hafta 4: Erişilebilirlik ve SEO detaylarını düzeltin.

Her hafta yeniden ölçün. Rakamlar konuşsun.

Yardım İster misiniz?

Bu 27 kuralı kendi sitenize uygulamakta zorlanıyorsanız — ya da vakit bulamıyorsanız — konuşabiliriz. Web tasarımı, performans danışmanlığı ve SEO/GEO hizmetleri sunuyorum.

İletişime geçin →

Bu arada sitemde bu kuralları test edebileceğiniz ücretsiz araçlar var:

• Lighthouse Denetimi — Ön kontrol + Google PageSpeed
• AI-GEO Denetimi — 11 kriter AI hazırlık ölçümü
• HTTP Header Denetleyici — Güvenlik başlıkları
• Görsel Dönüştürücü — AVIF/WebP dönüşümü
• WCAG Kontrast Kontrolü — Erişilebilirlik testi

Hepsi ücretsiz, kayıt gerekmez, veri toplamaz.

Video Anlatım

Not: Bu yazıyı yazarken kendi sitemi kullandım. Tüm ölçümler canlı siteden alındı. Skoru istediğiniz zaman PageSpeed Insights'ta doğrulayabilirsiniz.