Telefonunuzdan tren bileti seçtiğinizi düşünün. Güzergâh ayrıntıları görünüyor, sonraki seferi kolayca seçiyorsunuz ve devam düğmesi beklediğiniz yerde duruyor. Rezervasyonu tamamlarken her dokunuşa anlaşılır bir karşılık alıyorsunuz. Birkaç teknik süreç birlikte çalıştığı için yolculuk kolay hissettiriyor.
Bu varsayımsal deneyim web performansını somutlaştırır. Yükleme içeriği getirir, etkileşim davranışı yanıta bağlar, kararlılık okunan ve dokunulan öğelerin konumunu korur. Bu üç parçayı anlamak, bilinçli iyileştirmeler yapmanıza ve etkilerini gerçek bir görevde karşılaştırmanıza yardımcı olur.
Oluşturmak istediğiniz deneyimle başlayın
Önemli bir görev seçin ve akıcı halinin nasıl göründüğünü anlatın. Ürün sayfasında başlık, fiyat ve ana görsel, ürünü hızla anlamayı desteklemelidir. Filtre seçime açık bir karşılık vermelidir. Rezervasyon düğmesi, yardımcı bilgiler sunulurken öngörülebilir bir konumda kalmalıdır.
İnceleyeceğiniz sayfayı, cihazı, bağlantıyı ve davranışı kaydedin. Aynı ürün masaüstünde araştırma yapan ve telefonda satın alan kişilere hizmet edebilir; ilgili yolculukları ayrı inceleyin. İlk veya tekrar ziyaret, önbellek, hesap ve izin koşullarını karşılaştırmalarda tutarlı tutun. Bu ayrıntılar genel hedefi tekrar edilebilir bir deneyime dönüştürür.
Sunucudan ekrana uzanan yolu izleyin
Tarayıcı yanıtı alır, HTML’i okur; stilleri, JavaScript’i, yazı tiplerini ve görselleri keşfeder. Kaynakları getirip görünümü oluşturur. Erken keşfedilen kaynaklar yolculuğa daha erken başlayabilir; bağımlılıklar diğer işlerin sırasını belirler. Sunucu yanıtı, kaynak aktarımı ve oluşturma birlikte yararlı içeriğin görünmesini sağlar.
Yükleme sonrasında olay işleyicileri, betikler ve görüntü oluşturma işlem süresini paylaşmayı sürdürür. Odaklı işler, tarayıcıya girdiye karşılık verme ve sonraki güncellemeyi gösterme fırsatı sağlar. İçerik için yer ayırmak kaynaklar geldikçe yerleşimi sabit tutar. Bu model her tasarım tercihini sunucu, aktarım, istemci işlemesi veya sunumla ilişkilendirir.
Üç deneyim sinyalini okuyun
Core Web Vitals bu deneyimin önemli yönlerini tarif eder. Web Vitals rehberi aşağıdaki iyi referans sınırlarını verir. Gerçek kullanıcı değerlendirmesinde 75. yüzdelik dilimi esas alın ve mobil ile masaüstünü ayrı değerlendirin.
| Metrik | Yanıtladığı soru | İyi sınır |
|---|---|---|
| LCP | En büyük görünür içerik ne zaman beliriyor? | 2,5 saniye veya daha az |
| INP | Etkileşimler ne kadar hızlı yanıtlanıyor? | 200 milisaniye veya daha az |
| CLS | İçerik gelirken yerleşim ne kadar kararlı kalıyor? | 0,1 veya daha az |
Lighthouse teşhis için laboratuvar çalışması sağlar. CrUX yeterli veri varsa uygun gerçek kullanıcı deneyimlerini toplulaştırır. PageSpeed Insights'ın açıkladığı gibi kaynaklar farklı koşulları anlatır. Saha verisinin tam sayfaya mı bütün kökene mi ait olduğuna bakın. Laboratuvar testi sayfayı tekrar edilebilir koşullarda incelemeyi sağlar; saha verisi daha geniş ziyaretçi kitlesinin deneyimini ekler.
Önemli içeriği erkenden görünür kılın
LCP öğesini belirleyin ve ekrana nasıl ulaştığını izleyin. Görselse isteğin başlangıcını ve aktarılan boyutu inceleyin. Kaynağı erkenden keşfedilebilir yapın, uygun boyut ve biçim seçin, ilk ekrandaki önemli görseli hemen yükleyin. İstek zamanı ve dosya boyutu birlikte görselin ne zaman görüneceğini şekillendirir.
İlk sunucu yanıtını, veritabanı işini ve önbellekleme olanaklarını inceleyin. Ardından stillere, yazı tiplerine ve yükleme sırasındaki bağımlılıklara bakın. LCP iyileştirme kılavuzu yolculuğu yararlı aşamalara ayırır. İlk ekran dışındaki görseller uygun olduğunda sonra yüklenebilir; yerlerini ayırın ve kaydırma sırasında görünüşlerini inceleyin.
Duyarlı etkileşimler ve sabit bir yerleşim oluşturun
Önemli bir filtre veya menü etkileşimini kaydedin; sonraki görünür güncellemeyi oluşturan işi inceleyin. Olay işleyicilerini odaklı tutun, güncellemeleri verimli düzenleyin ve uzun işleri yönetilebilir parçalara bölün. Bir davranış zaman aldığında açık bir ilerleme durumu sonraki adımı anlamayı kolaylaştırır.
INP iyileştirme kılavuzu girdi gecikmesini, işlemeyi ve sunumu açıklar. Toplam engelleme süresi, laboratuvarda kendi anlamı olan ek bir tanı ölçümüdür. Kararlı yerleşim için görsel, video, banner ve gömülü içerik boyutlarını ayırın. Yazı tipi geçişlerini ve bildirimleri, rahat okumayı ve istenen öğeyi seçmeyi destekleyecek şekilde planlayın.
Deneyimi önce ve sonra karşılaştırın
- URL’yi, cihazı, zamanı, izin durumunu ve incelediğiniz görevi kaydedin.
- Ölçümü, LCP öğesi veya etkileşim kaydı gibi destekleyici ayrıntıyla saklayın.
- İlgili görsel, betik veya yerleşim bileşeninde tutarlı bir değişiklik yapın.
- Karşılaştırılabilir koşullarda birkaç laboratuvar ölçümünü tekrarlayıp genel örüntüyü inceleyin.
- Ana görevi ilgili ekran boyutlarında ve hesap durumlarında izleyin.
- Toplama dönemi değişiklik sonrası ziyaretleri içerdikçe saha verisine dönün.
Ölçümle birlikte deneyimin bütününe bakın. Görselin okunabilirliğini koruyun ve ertelenen betiğin diğer sayfalardaki görevini inceleyin. Başlangıç durumunu, bileşeni ve değişikliği belgelemek, sonucu ekip arkadaşınıza anlatmayı ve sonraki geliştirmeyi planlamayı kolaylaştırır.
Öğrendiklerinizi uygulayın
Sitelemetry, herkese açık sayfalarda mevcut performans ölçümlerini ve tanı bilgilerini bir araya getirerek geliştirme işlerini düzenlemenize yardımcı olur. Önemli bir mobil yolculuk seçin, ölçümü ilgili görsel, betik veya yerleşim bileşeniyle ilişkilendirin ve geliştirme sonrasında aynı deneyimi karşılaştırın. Kullanıcı görevini sayılarla birlikte değerlendirin.
Sık sorulan sorular
Başlamak için yararlı bir nokta nasıl seçilir?
Önemli bir müşteri görevi seçin ve onu şekillendiren görseli, etkileşimi veya yerleşim bileşenini inceleyin. Sık kullanılan sayfalardaki ortak bileşenler iyi bir ilk geliştirme olabilir.
Ölçümleri nasıl karşılaştırılabilir yapabilirim?
Benzer cihaz, ağ, önbellek ve hesap koşullarıyla birkaç ölçüm yapın. Bu ayrıntıları ve kullanıcı görevini tutarlı tutmak, ölçümler arasındaki örüntüyü görmenizi sağlar.
Laboratuvar ve saha verileri birlikte nasıl kullanılır?
Laboratuvar testleri ve etkileşim kayıtları belirli sayfayı tekrar edilebilir koşullarda incelemeye yardımcı olur. Saha verisi zaman içindeki uygun gerçek ziyaretlerin deneyimini ekler. Karşılaştırırken URL ve cihaz bağlamını kaydedin.
Kaynaklar ve ileri okuma
- Google: PageSpeed Insightsdevelopers.google.com
- web.dev: Web Vitalsweb.dev
- web.dev: Largest Contentful Paint iyileştirmesiweb.dev
- web.dev: Interaction to Next Paint iyileştirmesiweb.dev
Sitelemetry yayın ekibi tarafından hazırlanmıştır. Konuyu derinleştirmek için bağlantılı kaynakları inceleyebilirsiniz.
