Web sitenizin alan verilerindeki yavaş etkileşimleri nasıl bulacağınızı öğrenin, böylece sonraki boyamayla etkileşimi iyileştirme fırsatlarını belirleyebilirsiniz.
Alan verileri, gerçek kullanıcıların web sitenizle ilgili deneyimleri konusunda güvenilir kaynaktır. Yalnızca laboratuvar verilerinde göremeyebileceğiniz sorunları gösterir. Etkileşimler laboratuvar tabanlı araçlarda simüle edilebilse de laboratuvardaki her etkileşimi, sahadaki kullanıcıların deneyimlediği şekilde yeniden oluşturmanız mümkün değildir. Sonraki Boyamayla Etkileşim (INP) için alan verilerini toplamak, sayfanızın gerçek kullanıcılara ne kadar duyarlı olduğunu anlamak açısından çok önemlidir ve kullanıcı deneyimini daha da iyileştirecek ipuçları içerir.
Alanda neyi, neden toplamalısınız?
Alanda INP verilerini toplarken, etkileşimlerin neden yavaş olduğuyla ilgili bağlam sağlamak için aşağıdakileri yakalamanız gerekir:
- 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ı belirler.
- 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 öğenin sorumlu olduğunu bilmezseniz karanlıkta kalırsınız. Öğe seçici dizelerini günlüğe kaydederek etkileşimlerden tam olarak hangi öğelerin sorumlu olduğunu bilirsiniz.
- 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 iş parçacığı etkinliğinin gerçekleştiğini varsaymak mantıklıdır. Sayfa yükleme sırasında HTML ayrıştırma, stil sayfası ayrıştırma ve JavaScript değerlendirme ve yürütme işlemleri devam eder. Bir etkileşimin sayfa yükleme sırasında mı yoksa sonrasında mı gerçekleştiğini bilmek, daha hızlı başlatma için optimizasyon yapmanız gerekip gerekmediğini, böylece ana iş parçacığında etkileşimlerin hızlı bir şekilde devam etmesi için daha fazla alan olup olmadığını veya sayfanın kendi başına INP'sinden sorumlu etkileşimin yavaş olup olmadığını anlamanıza yardımcı olur.
- Etkileşimin
startTime. EtkileşiminstartTimedeğerini günlüğe kaydetmek, etkileşimin performans zaman çizelgesinde tam olarak ne zaman gerçekleştiğini bilmenizi sağlar. - Etkinlik türü. Etkileşimin
click,keypressveya başka bir uygun etkinlik türünden kaynaklanıp kaynaklanmadığını belirlediği için etkinlik türünü bilmek önemlidir. Kullanıcı etkileşimi birden fazla geri çağırma içerebilir ve bu da etkileşimdeki hangi geri çağırma işleminin en uzun sürdüğünü tam olarak belirlemenize yardımcı olabilir.
Tüm bunlar dikkate alınması gereken çok fazla şey gibi görünse de amacınıza ulaşmak için tekerleği yeniden icat etmek zorunda değilsiniz. Neyse ki bu veriler web-vitals JavaScript kitaplığında gösteriliyor. Bu verileri nasıl toplayacağınızı bir sonraki bölümde öğreneceksiniz.
web-vitals JavaScript kitaplığıyla alandaki etkileşimleri ölçün
web-vitals JavaScript kitaplığı, büyük ölçüde bunlara neden olan sorunlara ilişkilendirme sağlayabilmesi sayesinde, alandaki yavaş etkileşimleri bulmanın harika bir yoludur. INP, Event Timing API'yi ve interactionId özelliğini destekleyen tarayıcılarda toplanabilir.
INP'yi edinmek için Gerçek Kullanıcı İzleme (RUM) sağlayıcısı kullanmak en uygun yöntemdir ancak her zaman bu seçenek değildir. Bu durumda örneğin, INP verilerini toplayıp daha sonra değerlendirmek üzere Google Analytics'e iletmek için web-vitals JavaScript kitaplığını kullanabilirsiniz:
// 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 kullanıyorsanız ve web sitenizde bu önceki kodu çalıştırıyorsanız, yalnızca sayfanın INP'sini değil, aynı zamanda yavaş etkileşimleri optimize etmeye nereden başlayacağınızı daha iyi anlamanızı sağlayabilecek bağlamsal bilgileri de ayrıntılı bir şekilde görebilirsiniz.
onload tarihine kadar değil, tüm oturum süresini izleyin
Daha önce belirtildiği gibi, web-vitals JavaScript kitaplığının kullanılması, Google Analytics'e birden fazla analiz etkinliğinin gönderilmesine neden olabilir. Mevcut sayfa için web-vitals kimliği aynı kalacağı ve Google Analytics önceki verilerin üzerine yazmanıza izin vereceği için bu bir sorun değildir.
Ancak tüm RUM sağlayıcıları bu şekilde çalışmadığından kendi RUM toplama çözümünüzü oluşturuyorsanız bunu göz önünde bulundurmanız gerekir. Mevcut analiz sağlayıcınız mevcut kayıtların üzerine yazılmasına izin vermiyorsa bir metrik için tüm delta değerlerini (yani bir metriğin geçmiş ve mevcut durumları arasındaki farkı) kaydetmeniz ve bunları web-vitals kitaplığı tarafından sağlanan aynı kimliği kullanarak iletmeniz gerekir. Sonrasında kimlikte gruplandırarak bu değişiklikleri toplayabilirsiniz. Daha fazla bilgi için web-vitals dokümanlarının delta yönetimiyle ilgili bölümüne bakın.
CrUX ile saha verilerine hızlıca ulaşın
Chrome Kullanıcı Deneyimi Raporu (CrUX), Web Verileri programının resmi veri kümesidir. Tek başına CrUX'ten alınan veriler, belirli INP sorunlarını gidermek için ihtiyacınız olan tüm bilgileri size sağlamaz ancak her şeyden önce bir sorununuz olup olmadığını bilmenizi sağlar. Hâlihazırda bir RUM sağlayıcısı aracılığıyla alan verileri topluyor olsanız bile, kullandıkları metodolojiler arasında farklılıklar olduğundan, bu verileri web sitenizin CrUX verileriyle (varsa) karşılaştırı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 edilen web siteleri için sayfa düzeyinde alan verileri sağlayabilir. Bir URL'yi PageSpeed Insights ile denetlemek için https://pagespeed.web.dev/ adresine gidin, test edilecek URL'yi girin ve Analiz et düğmesini tıklayın.
Değerlendirme başladığında, Lighthouse (bir laboratuvar aracı) çalışırken CrUX verileri anında kullanılabilir olur.
Lighthouse değerlendirmesini tamamladığında PSI, değerlendirmeyi Lighthouse denetimleriyle doldurur.
Alan verilerim yoksa ne olur?
Alan verilerinin olmadığı veya bile toplayamadığınız bir durumda olabilirsiniz. Durumunuz bu duruma uygunsa yavaş etkileşimleri bulmak için yalnızca laboratuvar araçlarından yararlanabilirsiniz. Laboratuvar testleri hakkında daha fazla bilgi için Laboratuvarda INP'nin zayıflamasına yol açan nedenleri manuel olarak teşhis etme başlıklı makaleyi okuyun.
Sonuç
Alan verileri, alandaki gerçek kullanıcılar için hangi etkileşimlerin sorunlu olduğunu anlamak söz konusu olduğunda faydalanabileceğiniz en iyi bilgi kaynağıdır. PageSpeed Insights'ta bulunan bilgilerden yararlanarak veya web-vitals JavaScript kitaplığı (ya da RUM sağlayıcınız) gibi alan verisi toplama araçlarından yararlanarak, en sorunlu etkileşimlerin hangileri olduğu konusunda daha emin olabilirsiniz. Daha sonra, laboratuvardaki sorunlu etkileşimleri yeniden oluşturup bunları düzeltmeye geçebilirsiniz.
Unsplash'tan Federico Respini'nin hazırladığı hero resim.