Kendi sitemdeki kontrast hatasını paintcheck ile yakaladım

Yeni hasanyahsi.com, beğendiğim bir portföy şablonunun düzenini örnek alan bento yerleşimiyle yayına girdi. Yayından önce başkalarına önerdiğim iki kontrolü çalıştırdım: paintcheck (kendi kontrast aracım) ve Lighthouse. İkisi de bir şey buldu.

paintcheck: vurgu rengi

Referans tasarım beyaz kartlar üstünde bağlantı ve düğmeler için parlak bir mavi kullanıyor: #4770ff. Gözle bakınca sorun yok. Boyanan piksellerden ölçünce var:

! [contrast] section.hy-kart > div.hy-kart-bas > a.hy-ok
    "More About Me"
    16px — 4.09:1 — needs 4.5:1
    rgb(73,114,255) on rgb(255,255,255)
! [contrast] div.hy-profil-dugmeler > a.hy-dugme
    "Write to me"
    16px — 4.16:1 — needs 4.5:1
    rgb(254,254,255) on rgb(71,112,255)

Ana sayfada on iki, hakkımda sayfasında altı, iletişim sayfasında altı bulgu. Hepsinin sebebi aynı: beyaz üstünde mavi metin ya da o mavi üstünde beyaz metin, 4,5:1 eşiğine karşı 4,09 ile 4,18 arasında. Bu düz zemin durumu; CSS aritmetiği burada kesindir, axe-core da yakalardı. Ben henüz hiçbir şey çalıştırmamıştım.

Düzeltme: açık temada metin ve düğme zemini için vurgu #3457e8 oldu (beyazda 5,8:1), koyu temadaki siyah kartlarda metin için daha açık #6b8cff. Gözle fark küçük. Değişiklikten sonra paintcheck dört sayfada da sıfır kontrast bulgusu veriyor. Kalan bulgular, etiketli seçim çiplerinin içindeki görünmez radyo girdileri için target-size notları; tıklama hedefi etiketin kendisi, girdi bilerek 1×1.

Lighthouse: var olmayan dosyalara 26 istek

Ana sayfada masaüstü Lighthouse: performans 96, erişilebilirlik 96, en iyi uygulamalar 96, SEO 100. "Konsolda hata" denetimi çalışma sırasında on tane 404 listeledi; bağlantıların üstünde gezen bir puppeteer betiği tam bir ziyarette 26 saydı.

İstekler /about/__next.!KGVuKQ.about.__PAGE__.txt gibiydi. Next.js 16.2 static export, segment ön yükleme dosyalarını iç içe klasör olarak yazıyor (out/about/__next.!KGVuKQ/about/__PAGE__.txt), istemci ise noktalı düz adı istiyor. Her ön yükleme başarısız oluyor, her istemci tarafı geçiş tam sayfa yüklemeye düşüyordu.

Bunun için bir yapılandırma anahtarı bulamadım; derleme artık her iç içe dosyayı düz adıyla kopyalayan 30 satırlık bir betik çalıştırıyor. Sonrası: sıfır 404, istemci geçişlerinde sondaki eğik çizgi korunuyor, masaüstü Lighthouse 95 / 100 / 100 / 100, LCP 1,5 s, CLS 0.

Lighthouse mobil: fotoğraf

Mobil çalışma performansta 76 verdi; Lighthouse'un benzetilmiş yavaş 4G'sinde LCP 7,1 s. En büyük öğe kendi fotoğrafımdı: 800×800 WebP, üstelik loading="lazy". Ekrandaki ilk şeyi tembel yüklemek tam tersi bir hata; özniteliği sayfanın aşağısında da kullanılan bir bileşenden kopyalamıştım.

Düzeltme: profil fotoğrafı artık hemen yükleniyor, fetchpriority="high" ile; telefon genişlikleri için srcset üzerinden 480 px sürüm sunuluyor. Yeniden ölçünce benzetilmiş mobil LCP 7,1 s'den 6,2 s'ye, puan 76'dan 77'ye geldi. Küçük bir hareket ve ayrıntı sebebini söylüyor: görselin kendisi yaklaşık 120 ms'de yükleniyor; gecikme 173 KB'lık HTML belgesinde ve öncesindeki çizim işinde, fotoğrafta değil.

Belgeyi de denedim. Logo yolları her logo için iki kez gömülüydü: bir kez işaretlemede, bir kez Next'in satır içi veri yükünde. Onları tek bir dış SVG sprite dosyasına taşımak ana sayfayı 170 KB'tan 82 KB'a indirdi. Başka hiçbir şey çalışmazken iki kez ölçtüm: mobilde 78 ve 74, LCP 5,9 s ve 6,1 s. Belge yarıya indi, LCP aynı. Kaldıraç başka yerde; bu gece tahmin etmeyi bıraktım. Küçülen sayfa yine de kalmaya değer.

Güncelleme, 16 Eylül 2026. Kaldıraç yerel sunucuymuş. Yukarıdaki mobil sayıların hepsi dizüstümdeki serve ile alındı; o da HTML'i sıkıştırmadan ve önbellek başlığı olmadan gönderiyor. Aynı derleme Firebase Hosting'de, canlı hasanyahsi.com üzerinde Lighthouse 12 ile: mobil 90 / 100 / 100 / 100, LCP 2,4 s; masaüstü 99 / 100 / 100 / 100, LCP 0,6 s. 6 saniye hiçbir zaman sayfa değildi, sunuş biçimiydi. Yayındaki siteyi ölçmek son adım değil ilk adım olmalıydı.

Mobildeki erişilebilirlik denetimi menü bağlantılarını da işaretledi: 1100 px altında etiket metnini display: none ile gizlemiştim, bu erişilebilir addan da siliyor. Artık yalnızca görsel olarak gizli; mobil erişilebilirlik puanı 100.

Bu not ne değil

Bu sayıların hiçbiri belge değil. Lighthouse tek makinede benzetilmiş kısıtlamayla çalışıyor; paintcheck tek bir anda tek bir görünümü ölçüyor. Mesele daha küçük: referanstan bir renk kopyaladım, kendi aracımın var olma sebebi olan eşikte kaldı ve bunu yalnızca aracı çalıştırdığım için öğrendim.