inp.html

---
layout: page
title: INP Simulator
page-class: page--inp-simulator
meta: "A small interactive demo for simulating sluggish interactions and delayed feedback when exploring INP."
permalink: /inp-simulator/
lux: INP Simulator
main: "/wp-content/uploads/2026/05/inp-main.png"
---

<p>INP, or <em>Interaction to Next Paint</em>, is one of Google’s three <a
href="https://web.dev/articles/vitals">Core Web Vitals</a>: a measure of how
responsive your site feels once someone actually starts using it. Poor INP
scores are a sure sign of user frustration. This simulator allows you to
experience the same kinds of delays that your users are feeling.</p>

<p>If your site feels sticky, sluggish, or slow to react, this is exactly the
sort of problem I <a href="/consultancy/">help teams</a> <a
href="/performance-audits/">diagnose and fix</a>. <a href="/contact/">Let’s
talk!</a></p>

<style>
  .c-inp-simulator-controls {
    padding: 24px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom: 24px;
  }

  .c-inp-simulator-controls > :last-child {
    margin-bottom: 0;
  }

  .c-inp-simulator-slider {
    width: 100%;
    accent-color: #f43059;
  }

  .c-inp-simulator-delay {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  .c-inp-simulator-delay-rating--good {
    color: #09ce6b;
  }

  .c-inp-simulator-delay-rating--needs-improvement {
    color: #ffa400;
  }

  .c-inp-simulator-delay-rating--poor {
    color: #ff4e42;
  }

  .c-inp-simulator-toggle {
    margin-bottom: 24px;
  }

  .c-inp-simulator-panel {
    padding: 24px;
    border: 1px solid #f43059;
    border-radius: 3px;
    background-color: #fff;
  }

  .c-inp-simulator-panel > :last-child {
    margin-bottom: 0;
  }

  .c-inp-simulator-panel[hidden] {
    display: none;
  }

  .c-inp-simulator-input {
    width: 100%;
    min-height: 7.5rem;
    resize: vertical;
  }

  .c-inp-simulator-output {
    min-height: 1.5em;
    margin-bottom: 0;
    color: #666;
  }

</style>

<div class="c-inp-simulator-controls">
  <p>
    <label for="jsInpDelay">Delay amount:</label>
    <input type="range" id="jsInpDelay" class="c-inp-simulator-slider" min="0" max="1500" value="200" list="jsInpDelayStops">
    <datalist id="jsInpDelayStops">
      <option value="200" label="Needs Improvement"></option>
      <option value="500" label="Poor"></option>
    </datalist>
    <span class="c-inp-simulator-delay"><output id="jsInpDelayValue" for="jsInpDelay">200</output>ms &ndash; <span id="jsInpDelayRating">Needs Improvement</span></span>
  </p>

</div>

<p class="c-inp-simulator-toggle">
  <button class="btn  btn--full" id="jsInpToggle" type="button" aria-controls="jsInpPanel" aria-expanded="false">Click me…</button>
</p>

<div class="c-inp-simulator-panel" id="jsInpPanel" hidden>
  <p>
    <label for="jsInpInput">Start typing…</label>
    <textarea class="c-input-text  c-inp-simulator-input" id="jsInpInput" rows="4" cols="50" placeholder="Type here…"></textarea>
  </p>

  <p><strong>Mirrored output:</strong> <output id="jsInpOutput" class="c-inp-simulator-output"></output></p>
</div>

<script>
(() => {

  const clampDelay = (value) => Math.max(0, Math.min(1500, Number.parseInt(value, 10) || 0));

  function longTask(ms) {
    const start = Date.now();

    while (Date.now() - start <= ms) {
      true;
    }
  }

  const delayInput = document.getElementById('jsInpDelay');
  const delayValue = document.getElementById('jsInpDelayValue');
  const delayRating = document.getElementById('jsInpDelayRating');
  const toggle = document.getElementById('jsInpToggle');
  const panel = document.getElementById('jsInpPanel');
  const input = document.getElementById('jsInpInput');
  const output = document.getElementById('jsInpOutput');

  if (!delayInput || !delayValue || !delayRating || !toggle || !panel || !input || !output) return;

  let delay = clampDelay(delayInput.value);
  let timeoutId;

  const renderDelay = () => {
    let rating = 'Good';
    let ratingClass = 'c-inp-simulator-delay-rating--good';

    if (delay === 404) {
      rating = 'Interaction Not Found';
      ratingClass = 'c-inp-simulator-delay-rating--needs-improvement';
    } else if (delay > 500) {
      rating = 'Poor';
      ratingClass = 'c-inp-simulator-delay-rating--poor';
    } else if (delay >= 201) {
      rating = 'Needs Improvement';
      ratingClass = 'c-inp-simulator-delay-rating--needs-improvement';
    }

    delayValue.textContent = delay;
    delayRating.textContent = rating;
    delayRating.className = ratingClass;
  };

  renderDelay();

  // Allow folk to hot-link a specific delay
  const urlParams = new URLSearchParams(window.location.search);
  const delayParam = urlParams.get('delay');

  if (delayParam !== null) {
    delay = clampDelay(delayParam);
    delayInput.value = delay;
    renderDelay();
  }

  delayInput.addEventListener('input', () => {
    delay = clampDelay(delayInput.value);
    renderDelay();
  });

  toggle.addEventListener('click', () => {
    panel.hidden = !panel.hidden;
    toggle.setAttribute('aria-expanded', String(!panel.hidden));

    longTask(delay);

    if (!panel.hidden) {
      input.focus();
    }
  });

  input.addEventListener('input', () => {
    clearTimeout(timeoutId);

    const inputValue = input.value;

    timeoutId = window.setTimeout(() => {
      output.textContent = inputValue;
    }, delay);
  });

})();
</script>