Sahada yavaş etkileşimler bulun

Alan verileri: the Gerçek kullanıcıların web sitenizi nasıl deneyimlediği konusunda yetkili kaynak. Tek başına laboratuvar verilerinde göremeyebileceğiniz sorunları ortaya çıkarır. Etkileşimler laboratuvar tabanlı araçlarda simüle edilebilirken, laboratuvardaki her bir etkileşimi, sahadaki kullanıcıların deneyimlediği şekilde yeniden üretemeyeceksiniz. Interaction to Next Paint (INP) için alan verilerinin toplanması, sayfanızın gerçek kullanıcılar için ne kadar duyarlı olduğunu anlamak açısından kritik öneme sahiptir ve deneyimlerini daha da iyi hale getirecek ipuçları içerir.

Sahada ne toplamalı ve neden #

Sahada INP verilerini toplarken, etkileşimlerin neden yavaş olduğuna bağlam vermek için aşağıdakileri yakalamak isteyeceksiniz:

• INP değeri. Bu, toplamanız gereken temel veri parçasıdır. Bu değerlerin dağılımı, sayfanın INP eşiklerini karşılayıp karşılamadığını belirleyecektir.
• Sayfanın INP’sinden sorumlu öğe seçici dizesi. Bir sayfanın INP’sini bilmek iyidir, ancak tek başına yeterince iyi değildir. Bundan hangi unsurun sorumlu olduğunu bilmeden karanlıkta kalacaksın. Öğe seçici dizelerini günlüğe kaydederek, etkileşimlerden tam olarak hangi öğelerin sorumlu olduğunu bileceksiniz.
• Sayfanın INP’si olan etkileşim için sayfanın yüklenme durumu. Bir sayfa yüklenirken, daha yüksek etkileşim gecikmesine neden olabilecek daha fazla ana ileti dizisi etkinliği olduğunu varsaymak mantıklıdır. Sayfa yükleme sırasında, devam eden HTML ayrıştırma, stil sayfası ayrıştırma ve JavaScript değerlendirmesi ve yürütmesi vardır. Bir etkileşimin sayfa yükleme sırasında mı yoksa sonrasında mı gerçekleştiğini bilmek, etkileşimlerin ana ileti dizisinde daha hızlı çalışması için daha fazla alana sahip olması için daha hızlı başlatma için optimize etmeniz gerekip gerekmediğini veya sayfanın INP’sinden sorumlu etkileşimin kendi başına olup olmadığını anlamanıza yardımcı olur. ne olursa olsun yavaş.
• Etkileşimin startTime. Etkileşimin günlüğe kaydedilmesi startTime performans zaman çizelgesinde etkileşimin tam olarak ne zaman gerçekleştiğini bilmenizi sağlar.
• Olay türü. bu etkinlik tipi etkileşimin bir sonucu olup olmadığını size söyleyeceğinden bilmek iyidir. click, keypressveya diğer uygun etkinlik türü. Bir kullanıcı etkileşimi birden fazla geri arama içerebilir ve etkileşimde tam olarak hangi olay geri aramasının en uzun sürdüğünü belirlemenize yardımcı olabilir.

Bunların hepsi dikkate alınması gereken çok şey gibi görünse de, oraya ulaşmak için tekerleği yeniden icat etmeniz gerekmez. Neyse ki, bu veriler web-vitals JavaScript kitaplığıve bir sonraki bölümde onu nasıl toplayacağınızı öğreneceksiniz.

ile sahadaki etkileşimleri ölçün. web-vitals JavaScript kitaplığı #

bu web-vitals JavaScript kitaplığı, büyük ölçüde sağlama yeteneği sayesinde, alandaki yavaş etkileşimleri bulmanın harika bir yoludur. ilişkilendirme onlara neden olan şey için. INP, aşağıdakileri destekleyen tarayıcılarda toplanabilir: Olay Zamanlama API’sı ve Onun interactionId mülk.

kullanarak Gerçek Kullanıcı İzleme (RUM) INP almak için sağlayıcı en uygun olanıdır, ancak her zaman bir seçenek değildir. Örneğin, durumunuz buysa, web-vitals INP verilerini toplamak ve daha sonra değerlendirilmek üzere Google Analytics’e iletmek için JavaScript kitaplığı:

// Be sure to import from the attribution build:
import {onINP} from 'web-vitals/attribution';
function sendToGoogleAnalytics ({name, value, id, attribution}) {
// Destructure the attribution object:
const {eventEntry, eventTarget, eventType, loadState} = attribution;
// Get timings from the event timing entry:
const {startTime, processingStart, processingEnd, duration, interactionId} = eventEntry;
const eventParams = {
// The page's INP value:
metric_inp_value: value,
// A unique ID for the page session, which is useful
// for computing totals when you group by the ID.
metric_id: id,
// The event target (a CSS selector string pointing
// to the element responsible for the interaction):
metric_inp_event_target: eventTarget,
// The type of event that triggered the interaction:
metric_inp_event_type: eventType,
// Whether the page was loaded when the interaction
// took place. Useful for identifying startup versus
// post-load interactions:
metric_inp_load_state: loadState,
// The time (in milliseconds) after page load when
// the interaction took place:
metric_inp_start_time: startTime,
// When processing of the event callbacks in the
// interaction started to run:
metric_inp_processing_start: processingStart,
// When processing of the event callbacks in the
// interaction finished:
metric_inp_processing_end: processingEnd,
// The total duration of the interaction. Note: this
// value is rounded to 8 milliseconds of granularity:
metric_inp_duration: duration,
// The interaction ID assigned to the interaction by
// the Event Timing API. This could be useful in cases
// where you might want to aggregate related events:
metric_inp_interaction_id: interactionId
};
// Send to Google Analytics
gtag('event', name, eventParams);
}
// Pass the reporting function to the web-vitals INP reporter:
onINP(sendToGoogleAnalytics);

Google Analytics’e sahipseniz ve önceki kodu web sitenizde çalıştırıyorsanız, yalnızca sayfanın INP’sinin ayrıntılı bir raporunu değil, aynı zamanda yavaş etkileşimleri optimize etmeye nereden başlayacağınız konusunda size daha iyi bir fikir verebilecek yararlı bağlamsal bilgileri de alırsınız.

Yalnızca oturum süresini değil, tam oturum süresini izleyin onload #

Kullanmak web-vitals JavaScript kitaplığı, daha önce belirtildiği gibi, birden çok analiz olayının Google Analytics’e gönderilmesine neden olabilir. Kimlik olarak bu iyi web-vitals geçerli sayfa için oluşturulanlar aynı kalır ve Google Analytics, önceki verilerin üzerine yazmanıza izin verir.

Ancak, tüm RUM sağlayıcıları bu şekilde çalışmaz, dolayısıyla kendi RUM toplama çözümünüzü oluşturuyorsanız, bunu hesaba katmanız gerekir. Mevcut analitik sağlayıcınız mevcut kayıtların üzerine yazılmasına izin vermiyorsa, tüm verileri kaydetmeniz gerekir. delta değerleri (yani, bir metriğin geçmiş ve mevcut durumları arasındaki fark) bir metrik için ve bunları, tarafından sağlanan aynı kimliği kullanarak iletin web-vitals kütüphane; daha sonra kimlik üzerinde gruplayarak bu değişiklikleri toplayabilirsiniz. Daha fazla bilgi için web-vitals belgeler deltaları işleme bölümü.

CrUX ile saha verilerini hızla alın #

bu Chrome UX Raporu (CrUX) Web Vitals programının resmi veri kümesidir. CrUX’tan alınan veriler tek başına size belirli INP sorunlarını gidermek için ihtiyaç duyduğunuz tüm bilgileri vermese de, bir sorununuz olup olmadığını en baştan bilmenizi sağlar. Halihazırda bir RUM sağlayıcısı aracılığıyla saha verilerini topluyor olsanız bile, kullandıkları metodolojilerde farklılıklar olduğundan, bunları web siteniz için (varsa) CrUX verileriyle karşılaştırmayı düşünün.

PageSpeed ​​Insights’ı (PSI) kullanarak web sitenizin INP’sini değerlendirebilir ve CrUX verilerini görüntüleyebilirsiniz. PageSpeed ​​Insights, CrUX veri kümesine dahil olan web siteleri için sayfa düzeyinde alan verileri sağlayabilir. PageSpeed ​​Insights ile bir URL’yi denetlemek için test edilecek bir URL’ye gidin ve Analiz et düğme.

Değerlendirme başladıktan sonra, Lighthouse (bir laboratuvar aracı) çalışırken CrUX verileri anında kullanılabilir olacaktır.

Lighthouse değerlendirmesini bitirdiğinde, PSI değerlendirmeyi Lighthouse denetimleriyle dolduracaktır.

Ya saha verilerim yoksa? #

Saha verilerinin olmadığı hatta toplayamadığın bir durumda olabilirsin. Bu, durumunuzu açıklıyorsa, yavaş etkileşimleri bulmak için tamamen laboratuvar araçlarına bağımlı olacaksınız. Laboratuvar testleri hakkında daha fazla bilgi için Laboratuvarda zayıf INP’ye neyin neden olduğunu nasıl teşhis edeceğinizi okuyun.

Çözüm #

Sahadaki gerçek kullanıcılar için hangi etkileşimlerin sorunlu olduğunu anlamak söz konusu olduğunda, saha verileri yararlanabileceğiniz en iyi bilgi kaynağıdır. PageSpeed ​​Insights’ta bulunan bilgilerden yararlanarak veya aşağıdakiler gibi saha veri toplama araçlarına güvenerek: web-vitals JavaScript kitaplığı (veya RUM sağlayıcınız), hangi etkileşimlerin en sorunlu olduğu konusunda daha emin olabilir ve ardından laboratuvarda sorunlu etkileşimleri yeniden oluşturmaya ve ardından bunları düzeltmeye devam edebilirsiniz.

Gönderen kahraman resmi Unsplashile Federico Respini.