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.

	// 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,

	{
	"domain_tag": "953B05AE1D",
	"domain_string": "hollandsnieuwe.nl",
	"url_string": "/",
	"url_uuid": "1f8514f2-1450-447e-9186-a9702d736613",
	"session_id": "2d9063ca-6234-4f10-87a1-62ecaa3a51fc",
	"request_id": "2ce17f35-4501-48cf-a7a3-fe963d2f955f",
	"inserts": [
	{
	"type": "request",

	// Paste code below in console after page load and
	// before interacting with page

	const getName = (node) => {
	const name = node.nodeName;
	return node.nodeType === 1
	? name.toLowerCase()
	: name.toUpperCase().replace(/^#/, '');
	};

	{
	"count": 254,
	"inp": {
	"bins": {
	"good": 86,
	"moderate": 92,
	"poor": 76
	},
	"percentiles": {
	"p25": 176,

	[
	{
	"loaf_blocking_duration": 5,
	"event_duration": 152,
	"longest_script": {
	"name": "TimerHandler:setTimeout",
	"entryType": "script",
	"startTime": 93865.89999997616,
	"duration": 48,
	"type": "user-callback",

	[
	{
	"name": "long-animation-frame",
	"entryType": "long-animation-frame",
	"startTime": 29.5,
	"duration": 646,
	"renderStart": 611.1999999880791,
	"styleAndLayoutStart": 652.5,
	"desiredRenderStart": 604,
	"firstUIEventTimestamp": 0,

	{
	"name": "long-animation-frame",
	"entryType": "long-animation-frame",
	"startTime": 84.90000000596046,
	"duration": 545,
	"renderStart": 613.5999999940395,
	"styleAndLayoutStart": 613.5999999940395,
	"desiredRenderStart": 456.90000000596046,
	"firstUIEventTimestamp": 0,
	"blockingDuration": 306,

	// Geef de HTML elementen een id
	const vulVerbruikIn = document.querySelector('#vulVerbruikIn')
	const sluitFiltersKruisje = document.querySelector('#sluitFiltersKruisje')
	const sluitFiltersToonResultaten = document.querySelector('#sluitFiltersToonResultaten')

	// Add/remove een CSS class op elementen om de show/hide van filters te doen
	function showHideFilters() {
	document.querySelector('#filters').classList.toggle('de-nieuwe-class')
	// TODO: verander met .classList.toggle ook de CSS van andere element(en) om die slide in/out animatie te doen
	}