First Input Delay (FID)

Philip Walton

İyi bir ilk izlenim bırakmanın ne kadar önemli olduğunu hepimiz biliyoruz. Bu önemli yeni insanlarla tanışmayı deneyebilirsiniz. yardımcı olur.

İnternet'te iyi bir ilk izlenim, belirli bir web sitesi için veya bir daha asla geri dönmeyecekleri anlamına gelir. Soru şöyle: iyi bir izlenimin ne olduğu ve ne tür bir gösterimin önemli bir adımdır.

Web'de ilk izlenimler çok farklı biçimlerde karşımıza çıkabilir. ilk izlenimlerinin yanı sıra ilk izlenimlerinin ve duyarlılık konusunda gösterim oranı.

Web API'leri ile kullanıcıların bir sitenin tasarımını ne kadar beğendiklerini ölçmek zor olsa da yanıt verme hızınızı ölçmenin pek çok yolu yoktur!

Kullanıcıların sitenizin ne kadar hızlı yüklendiğine dair ilk izlenimleri First Contentful Paint (FCP). Ancak sitenizin pikselleri ne kadar hızlı boyayabileceği hikayenin sadece bir parçası. Duyarlılık derecesi de bir o kadar önemli kullanıcıların bu piksellerle etkileşime girmeye çalıştığı sırada sitenizin ne olduğunu görebilirsiniz.

İlk Giriş Gecikmesi (FID) metriği, kullanıcınızın ilk gösterimini Sitenizin etkileşim ve yanıt verme yeteneğine

FID nedir?

FID, kullanıcının bir sayfayla ilk kez etkileşime geçtiği andan itibaren (yani bir bağlantıyı tıklarlar, bir düğmeye dokunurlar veya JavaScript destekli özel bir kontrol kullanırlar) Tarayıcının etkinlik işleyicileri işlemeye başlayabileceği zaman yanıt olarak belirir.

İyi bir FID puanı nedir?

İyi bir kullanıcı deneyimi sağlamak için siteler İlk Giriş'e sahip olmaya çalışmalıdır. 100 milisaniye veya daha kısa gecikme. Bu hedefe ulaştığınızdan emin olmak için almak istiyorsanız, ölçüm için iyi bir eşik değeri %75. mobil ve masaüstü cihazlara göre segmentlere ayrılmış şekilde sayfa yüklemeleri gösterilir.

Ayrıntılı FID

Etkinliklere yanıt veren kod yazan geliştiriciler olarak, genellikle kodumuzun etkinlik gerçekleştiği anda devreye girer. Ancak kullanıcılar olarak Bunun tam tersi bir durumla karşılaşırız: Telefonla etkileşimde bulunmaya çalıştık ve başka hiçbir şey yapmadığımızda yaşanmıştır.

Genel olarak, giriş gecikmesi (diğer adıyla giriş gecikmesi), tarayıcının ana iş parçacığı başka bir işle meşgul olduğundan (henüz) kullanıcıya yanıt veremiyor. Bunun olmasının yaygın nedenlerinden biri, tarayıcının ayrıştırma ve yürütmeyle meşgul olmasıdır. Uygulamanız tarafından yüklenen büyük bir JavaScript dosyası. Bu işlem çalışırken çalıştırılamaz her etkinlik işleyiciye gitmez, çünkü yüklediği JavaScript bir şey olur.

Tipik bir web sayfası yükleme işleminin aşağıdaki zaman çizelgesini göz önünde bulundurun:

Yukarıdaki görselleştirmede, birkaç ağ isteğinde bulunan bir sayfa gösterilir. (büyük olasılıkla CSS ve JS dosyaları) ve bu kaynaklardan sonra İndirme tamamlandığında (ana iş parçacığında işlenirler).

Bu durum, ana iş parçacığının anlık olarak meşgul olduğu dönemlere neden olur. bej renkli olduğunu görev engeller.

Uzun ilk giriş gecikmeleri genellikle First Contentful Paint (FCP) ve Etkileşime Hazır Olma Süresi (TTI) henüz güvenilir şekilde etkileşime geçmemiştir. Resim Bunun nasıl olabileceği, FCP ve TTI'nin zaman çizelgesine eklenmiştir:

Olağanüstü bir şekilde (üç uzun, görev) FCP ve TTI arasında (ör. FCP) Bu süre zarfında sayfayla etkileşimde bulunursanız (örneğin, bir bağlantıyı tıklayarak) Tıklamanın alınması ile ana iş parçacığının bunu yapması arasında yanıt verebilir.

Bir kullanıcı aynı yerin yakınındaki sayfayla etkileşimde bulunmaya çalıştığında ne olacağını en uzun görevin başlangıcı:

Giriş, tarayıcı bir görev çalıştırıldığı sırada gerçekleştiği için girişe yanıt verebilmek için görevin tamamlanmasını beklemesi gerekir. İlgili içeriği oluşturmak için kullanılan değeri, bu kullanıcının bu sayfadaki FID değeridir.

Bir etkileşimde etkinlik işleyici yoksa ne olur?

FID, bir giriş etkinliğinin alındığı zaman ile ana etkinliğin ileti dizisi sonraki boşta. Bu, bir olayın gerçekleşeceği durumlarda bile FID'nin ölçüleceği anlamına gelir. dinleyiciniz kaydedilmedi. Bunun nedeni, çoğu kullanıcı etkileşiminin etkinlik işleyiciye ihtiyaç duymaz ancak ana iş parçacığının boşta kalmasını gerektirir belirlemektir.

Örneğin, aşağıdaki HTML öğelerinin tamamının kullanıcıya yanıt vermeden önce ana iş parçacığında tamamlanması gereken ve devam etmekte olan görevler etkileşimler:

• Metin alanları, onay kutuları ve radyo düğmeleri (<input>, <textarea>)
• Açılır listeleri seçin (<select>)
• bağlantılar (<a>)

Neden yalnızca ilk girişi dikkate almalısınız?

Herhangi bir girişteki gecikme kötü kullanıcı deneyimine yol açsa da öncelikle birkaç nedenden dolayı ilk giriş gecikmesini ölçmenizi öneririz:

• İlk giriş gecikmesi, kullanıcının sitenize ilişkin ve ilk izlenimler genel performansımızı şekillendirmemizde güvenilir bir site olup olmadığını anlamamıza yardımcı olur.
• Bugün web'de gördüğümüz en büyük etkileşim sorunları, yükleyin. Bu nedenle, başlangıçta sitenin ilk kullanıcılarını iyileştirmeye odaklanmaya inanıyoruz. etkileşiminin genel performansı iyileştirmede en büyük daha fazla bilgi edindiniz.
• Sitelerin yüksek ilk giriş gecikmelerini nasıl düzelteceği için önerilen çözümler (kod bölme, önceden daha az JavaScript yükleme vb.) her zaman doğru olmayabilir aynı çözümler, sayfa yüklendikten sonra yavaş giriş gecikmelerini düzeltmek için de geçerlidir. Her bir Bu metrikler açısından değerlendirildiğinde performansla ilgili daha spesifik web geliştiricilere özel olarak hazırlandı.

Neler ilk giriş olarak sayılır?

FID, bir sayfanın yükleme sırasında yanıt verme düzeyini ölçen bir metriktir. Dolayısıyla, yalnızca tıklama, dokunma ve tuş gibi ayrı işlemlerden gelen giriş etkinliklerine odaklanır basar.

Kaydırma ve yakınlaştırma gibi diğer etkileşimler ise sürekli eylemlerdir ve tamamen farklı performans kısıtlamaları (ayrıca, tarayıcılar, bunları ayrı bir iş parçacığında çalıştırarak gecikmelerini gizleyebilirsiniz).

Başka bir deyişle, FID, RAIL'deki R'ye (duyarlılık) odaklanır performans modeli kullanırken kaydırma ve yakınlaştırma A (animasyon) ile daha çok ilişkilidir. ayrı ayrı değerlendirilmelidir.

Kullanıcı sitenizle hiç etkileşime girmediyse ne olur?

Kullanıcıların tümü, her ziyaretlerinde sitenizle etkileşime geçmeyecektir. Ayrıca hepsinin etkileşimleri FID ile alakalıdır (bir önceki bölümde belirtildiği gibi). İçinde Ayrıca, bazı kullanıcıların ilk etkileşimleri kötü zamanlarda olacaktır (ana kullanıcıların iş parçacığı uzun bir süre meşgulse) ve bir kullanıcının ilk kez etkileşimlerin iyi zamanlarda (ana iş parçacığı tamamen boşta olduğu) olacaktır.

Bu, bazı kullanıcıların FID değerlerinin olmadığı, bazı kullanıcıların ise düşük FID değerine sahip olacağı anlamına gelir değerlerine sahip olduğundan bazı kullanıcılar muhtemelen yüksek FID değerlerine sahip olacaktır.

FID'yi izleme, raporlama ve analiz etme biçiminiz muhtemelen epey farklı olacaktır karşılaştırmalar yapabilirsiniz. Bir sonraki bölümde bu bu.

Neden yalnızca giriş gecikmesini dikkate almalısınız?

Yukarıda belirtildiği gibi, FID yalnızca "gecikme"yi yardımcı olur. Ulaşıyor toplam etkinlik işleme süresini veya etkinlik süresini ölçmez. etkinlik işleyicileri çalıştırdıktan sonra kullanıcı arayüzünü güncellemek için tarayıcı.

Bu süre kullanıcı için önemli olsa ve deneyimi etkilese de bu metrik, geliştiricileri teşvik edebilir. Bu nedenle, metrik diğer bir deyişle, bu siteler arasında geçiş yapmak yerine deneyimi daha da kötüleştiren olay işleyici mantığını eşzamansız bir geri çağırmayla sarmalayabilir ( setTimeout() veya requestAnimationFrame()) kaldırın. etkinlikle ilişkilidir. Sonuç olarak metrikte bir iyileşme olur puan, ancak kullanıcının algılandığı şekilde daha yavaş bir yanıttır.

Ancak FID yalnızca "gecikme"yi ölçerken bölümü, geliştiriciler ve daha fazla etkinlik izlemek isteyen kullanıcılar, Etkinlik Zamanlaması API. Özel metrikleri inceleyin.

FID ölçümü nasıl yapılır?

İGG, yalnızca ilk 6 ay içinde ölçülebilen bir metriktir. gerçek bir değer gerektirdiğinden kullanıcıların sayfanızla etkileşime girmesine izin verir. FID'yi aşağıdaki araçlarla ölçebilirsiniz.

Alan araçları

• Chrome Kullanıcı Deneyimi Bildir
• PageSpeed Insights
• Search Console (Core Web Vitals) raporu)
• web-vitals JavaScript kitaplığı

JavaScript'te FID'yi ölçme

JavaScript'te FID'yi ölçmek için Event Timing'i kullanabilirsiniz API. Aşağıdaki örnekte, oluştur PerformanceObserver dinleyen first-input giriş yapıp bunları konsola kaydeder:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

Yukarıdaki örnekte, first-input girişinin gecikme değeri şu şekilde ölçülür: girişin startTime ile processingStart arasındaki delta alınıyor ekleyebilirsiniz. Çoğu durumda bu FID değeri olacaktır; ancak hepsinin FID ölçümü için first-input giriş geçerlidir.

Aşağıdaki bölümde, API'nin raporla ile nasıl raporladığı arasındaki farklar listelenmiştir. metrik hesaplanır.

Metrik ile API arasındaki farklar

• API, yüklenen sayfalar için first-input giriş gönderir yer alır, ancak FID hesaplanırken bu sayfalar göz ardı edilmelidir.
• Sayfa arka plana alınmışsa API first-input girişi de gönderir önce yapılır, ancak bu sayfalar da yoksayılmalıdır dikkate alındığında (girişler yalnızca, sayfa ilk ziyaret belirli bir süre boyunca ön planda kalır).
• API, sayfa şuradan geri yüklendiğinde first-input girişlerini bildirmez: geri-ileri önbellek sağlar ancak FID'in kullanıcılar tarafından ayrı bir sayfa olarak algılandığından, bu durumlarda ölçülmelidir. gösterir.
• API, iframe'ler içinde oluşan girişleri raporlamaz ancak metrik, Bunlar, sayfanın kullanıcı deneyiminin bir parçası. Bu CrUX ve RUM arasında bir fark olduğunu görebilirsiniz. İGG metriği doğru ölçmek için bunları göz önünde bulundurmalısınız. Alt çerçeveler API'yi kullanabilir için first-input girişlerini toplama için üst çerçeveye raporlayabilir.

Geliştiriciler tüm bu ince farkları ezberlemek yerine web-vitals JavaScript kitaplığını aşağıdaki farkları sizin için ele alan FID'yi ölçün (mümkün olduğunda, iframe sorununun ele alınmadığını unutmayın):

import {onFID} from 'web-vitals';

// Measure and log FID as soon as it's available.
onFID(console.log);

Web sitemiz g.co/newsinitiative/labs üzerinden onFID() inceleyebilirsiniz.

FID verilerini analiz etme ve raporlama

İGG değerlerinde beklenen varyans nedeniyle FID için değerlerin dağılımına bakar ve daha yüksek yüzdelik dilimlere odaklanırsınız.

Seçim tümü için yüzdelik dilim Core Web Vitals eşikleri, özellikle FID için 75. sırada yer alıyor. 95.-99. yüzdelik dilimlere bakmanızı öneririz, çünkü bunlar yaşadıkları kötü ilk deneyimlerin bilincinde olmanız gerekir. Bu da size en çok iyileştirme gereken alanları gösterebilir.

Raporlarınızı cihaz kategorisine veya türe göre segmentlere ayırsanız bile bu durum geçerlidir. Örneğin, Örneğin, masaüstü ve mobil için ayrı raporlar çalıştırırsanız en çok önemsediği kısım masaüstü kullanıcılarının yüzde 95-99'luk dilimidir. Mobilde en çok önem verdiğiniz FID değeri, 95.-99. aralığında olmalıdır. mobil kullanıcıların yüzdelik dilimi.

FID nasıl iyileştirilir?

Bu metriği iyileştirmeye yönelik teknikler konusunda size yol göstermek için FID'yi optimize etme ile ilgili tam kapsamlı bir kılavuz mevcuttur.

Değişiklik günlüğü

Hatalar bazen metrikleri ölçmek için kullanılan API'lerde ve bazen metriklerin tanımlarında keşfedilir. Sonuç olarak, bazen değişikliklerin yapılması gerekir. Bu değişiklikler, dahili raporlarınızda ve kontrol panellerinizde iyileştirmeler veya regresyonlar olarak görünebilir.

Bu metrikleri yönetmenize yardımcı olmak amacıyla, söz konusu metriklerin uygulanmasında veya tanımında yapılan tüm değişiklikler bu Değişiklik Günlüğü'nde gösterilecektir.

Bu metriklerle ilgili geri bildirimlerinizi web-vitals-feedback Google grubunda paylaşabilirsiniz.