aaronpeters

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

aaronpeters

// 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": {

aaronpeters

// 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() {

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.

aaronpeters

{
  "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,

aaronpeters

{
  "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",

aaronpeters

// 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(/^#/, '');
};

aaronpeters

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

aaronpeters

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

aaronpeters

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