Angular Academy · Ders

Temel Web Verilerini Ölçme

Performans ölçümlerini izleyip iyileştirin

Temel Web Verilerini Ölçme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Web Verileri Neden Önemlidir

Core Web Vitals, Google'ın kullanıcı odaklı performans ölçümleridir. Yükleme, etkileşim ve görsel kararlılığı sayısallaştırır; hem kullanıcı deneyimini hem de arama sıralamasını etkiler.

Üç Ölçüm

Bu üçlü; LCP (En Büyük İçerikli Boyama), CLS (Kümülatif Düzen Kayması) ve INP (Sonraki Boyamaya Etkileşim) ölçümlerinden oluşur. Her biri algılanan performansın farklı bir yönünü hedefler.

LCP

LCP, görünür en büyük öğenin (öne çıkan görsel veya başlık) oluşturulmasının ne zaman tamamlandığını ölçer. İyi değer 2,5 saniyenin altıdır. SSR, bu içeriği ilk HTML içinde sunarak yardımcı olur.

CLS

CLS, sayfa yüklenirken beklenmedik düzen kaymalarını ölçer. İyi değer 0,1'in altıdır. Görseller ve reklamlar için yer ayırın, mevcut içeriğin üzerine yeni içerik eklemekten kaçının.

<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->

INP

INP, sayfanın kullanım ömrü boyunca kullanıcı etkileşimlerine verilen yanıt hızını ölçer ve eski FID ölçümünün yerini alır. İyi değer 200 ms'nin altıdır. Ana iş parçacığındaki ağır JS, INP'yi olumsuz etkiler.

SSR Web Verilerine Nasıl Yardımcı Olur

SSR, içeriği daha erken görüntüleyerek LCP'yi iyileştirir ve kararlı düzeni erkenden sunarak CLS'yi azaltabilir. Artımlı hydration, başlangıçta daha az JavaScript göndererek INP'yi iyileştirir.

Laboratuvar ve Gerçek Kullanıcı Verileri

Laboratuvar verileri, kontrollü bir ortamda Lighthouse gibi sentetik araçlardan elde edilir. Gerçek kullanıcı verileri (CrUX, RUM) gerçek kullanıcılardan gelir. Her ikisini kullanarak iyileştirme yapın; sıralamada kullanılan veriler gerçek kullanıcı verileridir.

Lighthouse ile Ölçüm

Laboratuvar LCP ve CLS değerlerini, INP için toplam engelleme süresi vekil ölçümünü ve uygulanabilir tanı bilgilerini almak için Lighthouse'ı Chrome DevTools'ta veya CI ortamında çalıştırın.

// npx lighthouse https://example.com --view

web-vitals Kitaplığı

Tarayıcıda gerçek kullanıcı web verilerini web-vitals kitaplığıyla toplayıp analiz uç noktanıza gönderin.

import { onLCP, onCLS, onINP } from 'web-vitals';

onLCP(console.log);
onCLS(console.log);
onINP(console.log);

JavaScript'i Azaltma

Daha küçük paketler INP'yi ve etkileşime kadar geçen süreyi iyileştirir. Gönderilen JS miktarını azaltmak için rota düzeyinde tembel yükleme, @defer, artımlı hydration ve ağaç sallama kullanın.

Yineleme ve Doğrulama

Performans çalışması; ölçmek, değiştirmek ve yeniden ölçmektir. SSR, hydration veya defer'ı etkinleştirdikten sonra gerçek kazanımları doğrulamak için Lighthouse'ı yeniden çalıştırın ve gerçek kullanıcı verilerinin haftalar içindeki eğilimini izleyin.

Hızlı Kontrol

Core Web Vitals konusundaki bilginizi kontrol edin.

Özet

Core Web Vitals'ı (LCP, CLS, INP), SSR ve artımlı hydration'ın bunları nasıl iyileştirdiğini, laboratuvar ve gerçek kullanıcı verileri arasındaki farkı, Lighthouse ve web-vitals kitaplığıyla nasıl ölçüm yapılacağını ve yeniden ölçümle nasıl yineleme yapılacağını öğrendiniz.

Sıkça Sorulan Sorular

“Temel Web Verilerini Ölçme” dersi ücretsiz mi?

Evet — “Temel Web Verilerini Ölçme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Temel Web Verilerini Ölçme” dersinde ne öğreneceğim?

Performans ölçümlerini izleyip iyileştirin Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Temel Web Verilerini Ölçme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön