Aaron Peters aaronpeters

Mobile only. CrUX data shows INP is not Good on CDN Finder page, p75 is ~ 400 ms.

Page with JS is the page in production, https://www.cdnplanet.com/tools/cdnfinder/

I'm tracking worst INP with web vitals lib (with attribution).

Data shows INP is much higher for interactions with the form input field compared to clicking on the pink button. I've spent quite some time debugging (incl. turning off Google Analytics) and I don't understand the high INP. My analyis/debugging shows keydown and keyup is not the culprit, those interactions have low INP.

	#!/bin/bash

	# Use case: measure CDN change propagation time (CPT)
	# Change the CDN config in CDN control panel or API,
	# so CDN servers a new response header.
	# Next, run this script to check after how many seconds
	# the CDN serves a response with that header
	# For example, change CDN config to start serving the x-cdn header
	# Run this script then with command
	# ./check_header.sh HEADER=x-cdn DEBUG=1

	aaronpeters$ curl -svo /dev/null https://cdnplanet-vod-loc-test.lg.mncdn.com/storage-services/service/mbrs/ntscrm/00047382/00047382.mp4 -H 'range: bytes=0-1023'
	* Host cdnplanet-vod-loc-test.lg.mncdn.com:443 was resolved.
	* IPv6: (none)
	* IPv4: 185.22.163.103
	* Trying 185.22.163.103:443...
	* Connected to cdnplanet-vod-loc-test.lg.mncdn.com (185.22.163.103) port 443
	* ALPN: curl offers h2,http/1.1
	} [5 bytes data]
	* TLSv1.3 (OUT), TLS handshake, Client hello (1):
	} [512 bytes data]

	<p style="margin-bottom: 1em;">
	Op hollandsnieuwe.nl en daarbuiten laten we je
	graag persoonlijke en relevante informatie zien.
	</p>
	<p style="margin-bottom: 1em;">
	Wij (en onze partners) verzamelen en analyseren daarom internetgedrag met <a href="https://www.hollandsnieuwe.nl/cookies">cookies</a> en vergelijkbare technieken. Lees het <a href="https://www.hollandsnieuwe.nl/privacy">privacybeleid</a>.
	</p>

	<p style="margin-bottom: 1em;">
	Klik op “Accepteren” als je akkoord gaat met alle cookies.

	if (
	HTMLScriptElement.supports &&
	HTMLScriptElement.supports("speculationrules")
	) {
	const specScript = document.createElement("script");
	specScript.type = "speculationrules";
	specRules = {
	prefetch: [
	{
	where: {

	/** @type {cdn} */
	const cdn = {
	name: "Example CDN",
	cname: [
	".examplecdn.net"
	],
	ptr: ['examplecdn'],
	asns: ['1234'],
	headers: [
	{

	# Value of cookie request header is 5339 bytes:

	curl -svo /dev/null --resolve www.suitableshop.nl:443:185.100.128.41 https://www.suitableshop.nl/ -H 'cookie: SUITASESS=kmst9i3rbj2v59o4fs0t4em7o799sjt41uuq6cj01i8lbm9usik9eg7uistn6fmpb7gvumjj8nesvriuced1025q8sipblb90a4mp70s29o75u7ga422eo2fn8iscs0g; http_lndspg=m%3A2%7CyoqN%2FzSVOJE4xQ5JvItmWw%3D%3D; listing_history=m%3A1%3A2%7Czh9yuROI5AMRI9mV0n031r0bjce62JEMHUYck9fvgpxXTGVkmKaEe0N9DyNDeXTg; lstvst=1726650646674; country_check=1; searchFieldAnimateCookie=1; last_routekey=categories_id=17; scrollPosLastPage=https://www.suitableshop.nl/overhemden/; sessionSource=other; trytagging_snapshot={"userId":"0c783fd5-370b-9bf4-6e39-4648c0a4ced5","sessionId":"1726650518","sessionCount":"1","lastAccessTime":"1726650647","_fbp":"fb.1.1726650578885.278876253961962394","first_visit":"true"}; tggng_mo=eyJ1c2VyX2lkIjoiMGM3ODNmZDUtMzcwYi05YmY0LTZlMzktNDY0OGMwYTRjZWQ1Iiwic2Vzc2lvbl9pZCI6IjE3MjY2NTA1MTgiLCJzZXNzaW9uX2NvdW50IjoiMSIsImZicCI6ImZiLjEuMTcyNjY1MDU3ODg4NS4yNzg4NzYyNTM5Nj

	// purgeTime = time to purge has completed in that location
	// purgeTime.global = highest of purge times in a location
	// purgeRequest.ok = time until API has responded to the purge request
	// purgeRequest = number of times purge by API failed (error) or timed out (timeout)

	const firstData = [
	{
	"ts": "2024-03-01",
	"data": {
	"purgeTime": {

	// HTML
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<div id="example2-visualization" style="width: 600px; height: 360px; padding: 10px;"></div>
	<button id="example2-b1">Toon 21e eeuw</button>

	// JavaScript
	google.charts.load('current', {packages:['corechart']});
	google.charts.setOnLoadCallback(init);

	function init() {

	{
	"context": {
	"clientIp": "109.37.139.0",
	"country": "NL",
	"deviceMemory": 4,
	"mobile": "?1",
	"platform": "\"Android\"",
	"ua": "\"Not_A Brand\";v=\"8\", \"Chromium\";v=\"120\", \"Microsoft Edge\";v=\"120\""
	},
	"duration": 408,