Web performansı temelleri
Lighthouse ve geliştirici araçlarıyla Core Web Vitals ölçütlerini ölçer; görsel, yazı tipi, betik ve önbellek iyileştirmeleriyle sayfaları ölçülebilir biçimde hızlandırırsın.
Seviye 301 · 18 ders · 15 pratik lab
Dersler
Ölçmek
- Hız neden önemli ve nasıl algılanır
- Core Web Vitals: LCP, INP ve CLS
- Laboratuvar verisi ve saha verisi
- Lighthouse çalıştırmak ve raporu okumak
- Şelale grafiğini okumak
- Kısa görev: bir sitenin hız taban çizgisini çıkar
İyileştirmek
- Görselleri iyileştirmek
- Yazı tiplerini iyileştirmek
- Betikleri azaltmak ve ertelemek
- Üçüncü taraf betiklerin maliyeti
- Önbellek ve sıkıştırma
- LCP’yi iyileştirmek
- Yerleşim kaymasını gidermek
- Etkileşim gecikmesini azaltmak
- Kısa görev: bir ürün sayfasını hızlandır
Sürdürmek
- Performans bütçesi
- Gerçek kullanıcı ölçümü: web-vitals
- Bitirme görevi: bir haber sitesini ölç ve hızlandır
Pratik lablar
- Lighthouse raporundan üç öncelik çıkar: Bir kırtasiye mağazasının Lighthouse raporunu okuyup en çok kazanç getirecek üç işi seç.
- Şelale grafiğinde bekleyen zinciri bul: Ağ şelalesinde birbirini bekleyen istek zincirini bulup ana içeriği neyin geciktirdiğini açıkla.
- Laboratuvar ve saha verisini uzlaştır: Lighthouse'ta iyi ama saha verisinde kötü görünen LCP'nin nedenini cihaz, ağ ve önbellek farklarını inceleyerek bul.
- Dev ana görseli küçült: 4 MB'lık ana görseli doğru boyut ve modern biçimle yeniden üretip yükleme süresindeki farkı ölç.
- Yazı tipi yüzünden görünmeyen metni gider: Yazı tipi yüklenene kadar boş görünen başlıkları font-display, ön yükleme ve alt kümeyle düzelt.
- Emlak ilan sayfasının görsel yükünü yarıya indir: Bir emlak ilan sayfasının toplam görsel ağırlığını duyarlı görseller ve tembel yüklemeyle yarıdan aşağı indir.
- Başlıktaki engelleyen betiği ertele: Başlıkta senkron yüklenen analiz betiğini defer ile erteleyip ilk çizimdeki farkı ölç.
- Üçüncü taraf betiklerin maliyetini ölç: Sohbet, reklam ve harita betiklerini tek tek engelleyerek her birinin yükleme ve etkileşim maliyetini tabloya dök.
- Kullanılmayan JavaScript'i ayıkla: Kapsam panelinde ana pakette kullanılmayan kodu bulup sayfa bazında bölerek ilk yükü küçült.
- Kayan reklam alanına yer ayır: Yüklenince içeriği aşağı iten reklam alanına önceden yer ayırıp CLS değerini düşür.
- LCP öğesini erkenden yükle: Bir ürün sayfasında LCP öğesini bulup önceliğini artırarak ve onu geciktiren zinciri kırarak süreyi düşür.
- Sepete ekle tıklamasını hızlandır: "Sepete ekle" tıklamasında 500 ms'yi aşan INP'yi uzun görevleri bölüp işleri erteleyerek 200 ms altına indir.
- Ana sayfa için performans bütçesi yaz: Bir haber sitesinin ana sayfası için JS, görsel ve LCP sınırlarını içeren bir bütçe dosyası hazırla.
- web-vitals ile saha verisi topla: Sayfaya web-vitals kütüphanesini ekleyip LCP, INP ve CLS değerlerini lab'daki toplama uç noktasına gönder.
- Bütçeyi aşan değişikliği yakala: Bütçe kontrolünü derleme sürecine bağlayıp büyük bir kütüphane ekleyen değişikliğin derlemeyi durdurduğunu göster.
Kurs hakkında
Lighthouse ve geliştirici araçlarıyla Core Web Vitals ölçütlerini ölçer; görsel, yazı tipi, betik ve önbellek iyileştirmeleriyle sayfaları ölçülebilir biçimde hızlandırırsın.
Ne öğreneceksin
- Ölçmek
- İyileştirmek
- Sürdürmek
Ön koşullar
Aynı yolun 101 ve 201 düzeyindeki konularına hâkim olmalısın.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 301 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.