{"id":161192,"date":"2023-06-15T00:04:57","date_gmt":"2023-06-15T05:04:57","guid":{"rendered":"https:\/\/ahrefs.com\/blog\/?p=161192"},"modified":"2025-01-22T18:30:07","modified_gmt":"2025-01-22T23:30:07","slug":"first-input-delay-fid","status":"publish","type":"post","link":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/","title":{"rendered":"Improving First Input Delay (FID): Tips For Faster Interactions"},"content":{"rendered":"\n<div class=\"intro-txt\">First Input Delay (FID) is the time from when a user first interacts with your page to when the page responds. It measures responsiveness and used to be one of the three Core Web Vitals metrics Google uses to measure page experience. FID has been replaced by Interaction to Next Paint (INP) as of March 12th,&nbsp;2024.<\/div>\n\n\n\n<p>Example interactions include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clicking on a link or button.<\/li>\n\n\n\n<li>Inputting text into a blank&nbsp;field.<\/li>\n\n\n\n<li>Selecting a drop-down menu.<\/li>\n\n\n\n<li>Clicking a checkbox.<\/li>\n<\/ul>\n\n\n\n<p>Some events like scrolling or zooming are not counted.<\/p>\n\n\n\n<p>Let\u2019s look at how fast your FID should be and how to improve it.<\/p>\n\n\n\n<div class=\"intro-tok\" id=\"intro_tok\" style=\"display:none;\"><div class=\"intro-title\">Contents<\/div><a href=\"#\" class=\"expand-dots\"><span><\/span><span><\/span><span><\/span><\/a><\/div>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"What\u2019s a good FID value?\" data-section=\"good-fid-value\">\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s a good FID&nbsp;value?<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>A good FID value is less than 100 ms and should be based on Chrome User Experience Report (CrUX) data. This is data from actual users of Chrome who are on your site and have opted in to sharing this information. You need 75% of interactions to respond in less than 100&nbsp;ms.<\/p>\n\n\n\n<p>Your page may be classified into one of the following buckets:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Good: &lt;=100&nbsp;ms<\/li>\n\n\n\n<li>Needs improvement: &gt;100 ms and &lt;=300&nbsp;ms<\/li>\n\n\n\n<li>Poor: &gt;300&nbsp;ms<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1634\" class=\"wp-image-161265\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1.png\" alt=\"FID thresholds for good, needs improvement, and poor\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1-416x425.png 416w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1-768x784.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1-1504x1536.png 1504w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">FID data<\/h3>\n\n\n\n<p>95.3% of sites are in the good FID bucket as of April 2023.&nbsp;This is averaged across the site. As we mentioned, you need 75% of interactions to respond in less than 100 ms to show as good&nbsp;here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1540\" class=\"wp-image-161386\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-1.png\" alt=\"Percentage of good FID values from CrUX CWV data (April 2023)\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-1.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-1-442x425.png 442w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-1-768x739.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-1-1536x1478.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>The majority of pages on most sites pass the CWV check for FID. I don\u2019t believe this is really the best method to measure responsiveness, and Google replaced FID with Interaction to Next Paint (INP) in March 2024. Instead of looking at only the first input, INP looks at the latency of all the interactions a user&nbsp;makes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1523\" class=\"wp-image-161203\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-values-cwv.png\" alt=\"Percentage of good FID values from CrUX CWV data (November 2019 to April 2023)\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-values-cwv.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-values-cwv-446x425.png 446w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-values-cwv-768x731.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-values-cwv-1536x1462.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>When we ran a <a href=\"https:\/\/ahrefs.com\/blog\/core-web-vitals-study\/\">study on Core Web Vitals<\/a>, we found that almost no one needs to worry about FID on desktop connections, and very few need to worry about it on mobile.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"2760\" class=\"wp-image-161205\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-by-device.png\" alt=\"Breakdown of FID by device\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-by-device.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-by-device-246x425.png 246w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-by-device-768x1325.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-by-device-890x1536.png 890w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-by-device-1187x2048.png 1187w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>Few sites need to worry about FID, even on slower connections, as most of their pages are passing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1404\" class=\"wp-image-161268\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-connection-type-1.png\" alt=\"Breakdown of FID by connection type\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-connection-type-1.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-connection-type-1-484x425.png 484w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-connection-type-1-768x674.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-connection-type-1-1536x1348.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n\n\n<p>Our page-level data from the study told the same story. FID doesn\u2019t seem to be a concern for most&nbsp;pages.<\/p>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"How to measure FID\" data-section=\"how-to-measure-fid\">\n\n\n\n<h2 class=\"wp-block-heading\">How to measure FID<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>The only FID number that matters comes from the <a href=\"https:\/\/developer.chrome.com\/docs\/crux\/\">Chrome User Experience Report (CrUX)<\/a>, which is data from real users of Chrome who choose to share their&nbsp;data.&nbsp;<\/p>\n\n\n\n<p>This is called field data and gives you the best idea of real-world FID performance across different network conditions, devices, caching, etc. It\u2019s also what you\u2019ll actually be measured on by Google for <a href=\"https:\/\/ahrefs.com\/blog\/core-web-vitals\/\">Core Web Vitals<\/a>.&nbsp;<\/p>\n\n\n\n<p>For consistent, repeatable tests, there\u2019s also lab data, which tests with the same conditions. FID isn\u2019t available in lab tests because the testing tools don\u2019t click anything. However, you can use Total Blocking Time (TBT) as an alternative metric. By improving the processes that are blocked, you will also be improving your&nbsp;FID.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Measuring FID for a single URL<\/h3>\n\n\n\n<p><a href=\"https:\/\/ahrefs.com\/blog\/pagespeed-insights\/\">Pagespeed Insights<\/a> pulls page-level field data that you can\u2019t otherwise query in the CrUX dataset. It also gives you origin data so you can compare page performance to the entire site and runs lab tests based on Google <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\">Lighthouse<\/a> to give you&nbsp;TBT.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Measuring FID for many URLs or an entire site<\/h3>\n\n\n\n<p>You can get CrUX data in Google Search Console that is bucketed into the categories of good, needs improvement, and&nbsp;poor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1437\" height=\"1490\" class=\"wp-image-161209\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-5.png\" alt=\"Core Web Vitals data in Google Search Console\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-5.png 1437w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-5-410x425.png 410w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-5-768x796.png 768w\" sizes=\"auto, (max-width: 1437px) 100vw, 1437px\"><\/figure>\n\n\n\n<p>Clicking into one of the issues gives you a breakdown of page groups that are impacted. The groups are pages with similar values that likely use the same template. You make the changes once in the template, and that will be fixed across the pages in the&nbsp;group.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1714\" height=\"1689\" class=\"wp-image-161211\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-5.png\" alt=\"FID issue URL groups in GSC\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-5.png 1714w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-5-431x425.png 431w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-5-768x757.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-5-1536x1514.png 1536w\" sizes=\"auto, (max-width: 1714px) 100vw, 1714px\"><\/figure>\n\n\n\n<p>If you want both lab data and field data at scale, the only way to get that is through the PageSpeed Insights API. You can connect to it easily with Ahrefs\u2019 <a href=\"https:\/\/ahrefs.com\/site-audit\">Site Audit<\/a> and get reports detailing your performance. This is free for verified sites with an <a href=\"https:\/\/ahrefs.com\/webmaster-tools\">Ahrefs Webmaster Tools<\/a> (AWT) account.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"644\" class=\"wp-image-161213\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image3-5.png\" alt=\"Core Web Vitals data in Ahrefs' Site Audit\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image3-5.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image3-5-680x274.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image3-5-768x309.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image3-5-1536x618.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\"><\/figure>\n\n<div class=\"highlighted-section\"><!-- Title Section -->\n<h4 class=\"section-title\">Check your CWVs including FID for Free with Site&nbsp;Audit<\/h4>\n<!-- Form Section --><form class=\"form-section\">\n<div class=\"input-button-wrapper\">\n<div class=\"input-container\"><input type=\"text\" placeholder=\"Enter domain\"><\/div>\n<a class=\"start-button\" href=\"\/signup?plan=awt&amp;return=site-audit\">Start for&nbsp;Free<\/a><\/div>\n<div class=\"tooltip-container\">Free for websites with verified ownership<span class=\"info-icon\">i<\/span>\n<div class=\"tooltip-content\">\n<p>Ownership verification can be done&nbsp;by:<\/p>\n<ul>\n<li>Connecting Google Search Console (recommended);<\/li>\n<li>Uploading an HTML&nbsp;file;<\/li>\n<li>Adding a TXT record to your DNS configuration;<\/li>\n<li>Adding an HTML meta tag to your homepage.<\/li>\n<\/ul>\n<a href=\"https:\/\/help.ahrefs.com\/en\/articles\/3275938-verifying-ownership-of-your-project-or-website\" target=\"_blank\" rel=\"noopener noreferrer\">Learn more<\/a><\/div>\n<\/div>\n<p class=\"webmaster-tools-info\">Signing up here gives you access to <a href=\"https:\/\/ahrefs.com\/webmaster-tools\" target=\"_blank\" rel=\"noopener noreferrer\">Ahrefs Webmaster Tools \u2197<\/a> for&nbsp;free<\/p>\n<\/form><\/div>\n<p><style>\n  \/* Highlighted Section with Gray Border *\/\n  .highlighted-section {\n    border: 1px solid #ddd; \/* Light gray border *\/\n    border-radius: 8px;\n    padding: 15px 20px; \/* Adjusted padding to reduce top spacing *\/\n    background-color: #f9f9f9; \/* Light background for contrast *\/\n    max-width: 600px;\n    margin: 20px auto; \/* Center alignment *\/\n  }\n\n  \/* Section Title *\/\n  .section-title {\n    font-size: 24px; \/* Larger font size *\/\n    font-weight: bold;\n    color: #333;\n    margin-bottom: 15px;\n    margin-top: 0; \/* Remove extra spacing above the title *\/\n    text-align: center;\n  }\n\n  .form-section {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .input-button-wrapper {\n    display: flex;\n    gap: 10px; \/* Space between input and button *\/\n    align-items: center;\n  }\n\n  .input-container input {\n    padding: 10px;\n    font-size: 16px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    width: 100%;\n  }\n\n  .tooltip-container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 14px;\n    color: #555;\n    cursor: help;\n  }\n\n  .tooltip-container .info-icon {\n    color: #0073e6;\n    font-weight: bold;\n    font-size: 12px;\n    position: relative;\n    top: -5px;\n    display: inline-block;\n    text-decoration: none;\n    cursor: help;\n  }\n\n  .tooltip-content {\n    position: fixed; \/* Ensure tooltip can break out of its container *\/\n    top: 50px; \/* Adjust based on trigger position *\/\n    left: 50%; \/* Center horizontally *\/\n    transform: translateX(-50%);\n    background: white;\n    border: 1px solid #ddd;\n    border-radius: 5px;\n    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\n    padding: 15px;\n    font-size: 14px;\n    display: none; \/* Initially hidden *\/\n    z-index: 1000;\n    min-width: 300px;\n    max-width: 400px; \/* Optional width for better readability *\/\n    white-space: normal;\n  }\n\n  .tooltip-container:hover .tooltip-content {\n    display: block;\n  }\n\n  .tooltip-content ul {\n    list-style-type: disc;\n    padding-left: 20px;\n  }\n\n  .tooltip-content a {\n    color: #0073e6;\n    text-decoration: none;\n  }\n\n  .webmaster-tools-info {\n    color: #333;\n    font-size: 14px;\n    margin-top: 10px;\n  }\n\n  .start-button {\n    background-color: orange;\n    color: white;\n    padding: 10px 20px;\n    text-decoration: none;\n    font-weight: bold;\n    border-radius: 5px;\n    white-space: nowrap; \/* Ensure text doesn\u2019t break into a second line *\/\n  }\n<\/style><\/p>\n\n<p>Note that the Core Web Vitals data shown will be determined by the user-agent you select for your crawl during the setup. If you crawl from mobile, you\u2019ll get mobile CWV values from the&nbsp;API.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Free tool: Check CWVs and Lighthouse metrics for desktop and mobile for up to 10 pages or websites<\/h3>\n\n\n\n<p>Here\u2019s another free tool that you can use to check up to 10 pages or websites at once to see how you compare to your competitors.<\/p>\n\n\n\n<p><strong>Setup:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enter your Google PageSpeed Insights API key into the designated input field. (Learn how to generate an API key <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/v5\/get-started\">here<\/a>.)<\/li>\n\n\n\n<li>Add the URLs you want to analyze (one per&nbsp;line).<\/li>\n<\/ul>\n\n\n\n<p><strong>Run the Analysis:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the <strong>\u201cCheck CWV\u201d<\/strong> button to start fetching metrics. A progress indicator will show the status of the requests.<\/li>\n<\/ul>\n\n\n\n<p><strong>View Results:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The results are displayed in neatly categorized scorecards:&nbsp;<ul class=\"wp-block-list\">\n<li><strong>Desktop CWV for the&nbsp;Page<\/strong><\/li>\n\n\n\n<li><strong>Desktop CWV for the Origin<\/strong><\/li>\n\n\n\n<li><strong>Desktop Lighthouse<\/strong><\/li>\n\n\n\n<li><strong>Mobile CWV for the&nbsp;Page<\/strong><\/li>\n\n\n\n<li><strong>Mobile CWV for the Origin<\/strong><\/li>\n\n\n\n<li><strong>Mobile Lighthouse<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Each metric is color-coded to show performance:&nbsp;<ul class=\"wp-block-list\">\n<li><strong>Green:<\/strong> Good<\/li>\n\n\n\n<li><strong>Yellow:<\/strong> Needs Improvement<\/li>\n\n\n\n<li><strong>Red:<\/strong> Poor<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<div id=\"cwv-tool\">\n<h4 class=\"title\">Core Web Vitals Bulk Checker<\/h4>\n  <form id=\"cwv-form\">\n    <input id=\"apiKey\" required type=\"text\" placeholder=\"Enter your PageSpeed Insights API key\">\n    <textarea id=\"urls\" required placeholder=\"Enter up to 10 URLs, one per line\"><\/textarea>\n    <button type=\"button\" onclick=\"checkCWV()\">Check CWVs<\/button>\n  <\/form>\n  <div id=\"progress\"><\/div>\n  <div id=\"results\"><\/div>\n<\/div>\n\n<script>\nasync function checkCWV() {\n  const apiKey = document.getElementById(\"apiKey\").value.trim();\n  const urls = document.getElementById(\"urls\").value.split(\"\\n\").map(url => url.trim()).filter(url => url);\n  const progress = document.getElementById(\"progress\");\n  const resultsContainer = document.getElementById(\"results\");\n\n  if (!apiKey || urls.length === 0) {\n    alert(\"Please provide an API key and at least one URL.\");\n    return;\n  }\n\n  progress.textContent = \"Fetching data...\";\n  resultsContainer.innerHTML = \"\";\n\n  const results = {\n    desktopPageCWV: [],\n    desktopOriginCWV: [],\n    desktopLighthouse: [],\n    mobilePageCWV: [],\n    mobileOriginCWV: [],\n    mobileLighthouse: []\n  };\n\n  for (const [index, url] of urls.entries()) {\n    progress.textContent = `Processing ${index + 1} of ${urls.length}...`;\n    try {\n      const desktopData = await fetchData(url, \"desktop\", apiKey);\n      const mobileData = await fetchData(url, \"mobile\", apiKey);\n\n      results.desktopPageCWV.push({ url, metrics: parseCWVMetrics(desktopData?.loadingExperience) });\n      results.desktopOriginCWV.push({ url, metrics: parseCWVMetrics(desktopData?.originLoadingExperience) });\n      results.desktopLighthouse.push({ url, metrics: parseLighthouseMetrics(desktopData?.lighthouseResult) });\n\n      results.mobilePageCWV.push({ url, metrics: parseCWVMetrics(mobileData?.loadingExperience) });\n      results.mobileOriginCWV.push({ url, metrics: parseCWVMetrics(mobileData?.originLoadingExperience) });\n      results.mobileLighthouse.push({ url, metrics: parseLighthouseMetrics(mobileData?.lighthouseResult) });\n    } catch (error) {\n      console.error(`Error fetching data for ${url}: ${error.message}`);\n    }\n  }\n\n  progress.textContent = \"Rendering results...\";\n  renderResults(results);\n  progress.textContent = \"Completed!\";\n}\n\nasync function fetchData(url, strategy, apiKey) {\n  const response = await fetch(`https:\/\/www.googleapis.com\/pagespeedonline\/v5\/runPagespeed?url=${encodeURIComponent(url)}&strategy=${strategy}&key=${apiKey}`);\n  if (!response.ok) throw new Error(`Failed to fetch data for ${url}`);\n  return await response.json();\n}\n\nfunction parseCWVMetrics(data) {\n  const metrics = data?.metrics || {};\n  return {\n    LCP: applyColorBox(formatMetric(metrics[\"LARGEST_CONTENTFUL_PAINT_MS\"]?.percentile, \"ms\"), \"LCP\"),\n    INP: applyColorBox(formatMetric(metrics[\"INTERACTION_TO_NEXT_PAINT\"]?.percentile, \"ms\"), \"INP\"),\n    CLS: applyColorBox((metrics[\"CUMULATIVE_LAYOUT_SHIFT_SCORE\"]?.percentile \/ 100).toFixed(2), \"CLS\"),\n    FCP: applyColorBox(formatMetric(metrics[\"FIRST_CONTENTFUL_PAINT_MS\"]?.percentile, \"ms\"), \"FCP\"),\n    TTFB: applyColorBox(formatMetric(metrics[\"EXPERIMENTAL_TIME_TO_FIRST_BYTE\"]?.percentile, \"ms\"), \"TTFB\")\n  };\n}\n\nfunction parseLighthouseMetrics(data) {\n  if (!data) return {};\n  return {\n    Score: applyColorBox(Math.round(data.categories?.performance?.score * 100) || \"N\/A\", \"Score\"),\n    FCP: applyColorBox(formatMetric(data.audits?.[\"first-contentful-paint\"]?.numericValue, \"ms\"), \"FCP\"),\n    LCP: applyColorBox(formatMetric(data.audits?.[\"largest-contentful-paint\"]?.numericValue, \"ms\"), \"LCP\"),\n    CLS: applyColorBox(data.audits?.[\"cumulative-layout-shift\"]?.numericValue?.toFixed(3) || \"N\/A\", \"CLS\"),\n    TBT: applyColorBox(formatMetric(data.audits?.[\"total-blocking-time\"]?.numericValue, \"ms\"), \"TBT\"),\n    \"Speed Index\": applyColorBox(formatMetric(data.audits?.[\"speed-index\"]?.numericValue, \"ms\"), \"Speed Index\")\n  };\n}\n\nfunction formatMetric(value, unit) {\n  if (value === undefined || value === null || isNaN(value)) return \"N\/A\";\n  const numericValue = unit === \"ms\" ? value \/ 1000 : value;\n  return `${numericValue.toFixed(2)}s`;\n}\n\nconst thresholds = {\n  LCP: [2.5, 4], \/\/ Thresholds in seconds\n  INP: [0.2, 0.5], \/\/ INP in seconds\n  CLS: [0.1, 0.25], \/\/ CLS is unitless\n  FCP: [1.8, 3],\n  TTFB: [0.8, 1.8],\n  TBT: [0.2, 0.6], \/\/ TBT in seconds\n  \"Speed Index\": [3.4, 5.8],\n  Score: [90, 50] \/\/ Updated: 90+ (good), 50-89 (needs improvement), <50 (poor)\n};\n\nfunction applyColorBox(value, metricType) {\n  if (value === \"N\/A\") return `<div class=\"box neutral\">${value}<\/div>`;\n\n  const [good, moderate] = thresholds[metricType] || [Infinity, Infinity];\n  const numericValue = parseFloat(value);\n\n  let colorClass = \"poor\"; \/\/ Default to poor\n  \n  if (metricType === \"Score\") {\n    \/\/ Lighthouse score logic: good is green (90+), needs improvement is orange (50-89), poor is red (<50)\n    if (numericValue >= good) colorClass = \"good\";\n    else if (numericValue >= moderate) colorClass = \"moderate\";\n  } else {\n    \/\/ Other metrics: good is green (lower is better), needs improvement is orange, poor is red\n    if (numericValue <= good) colorClass = \"good\"; \/\/ Green for good (lower is better)\n    else if (numericValue <= moderate) colorClass = \"moderate\"; \/\/ Orange for needs improvement\n  }\n\n  return `<div class=\"box ${colorClass}\">${value}<\/div>`;\n}\n\nfunction renderResults(results) {\n  const resultsContainer = document.getElementById(\"results\");\n  resultsContainer.innerHTML = \"\";\n\n  resultsContainer.innerHTML += renderTable(\"Desktop CWV (Page)\", results.desktopPageCWV);\n  resultsContainer.innerHTML += renderTable(\"Desktop CWV (Origin)\", results.desktopOriginCWV);\n  resultsContainer.innerHTML += renderTable(\"Desktop Lighthouse\", results.desktopLighthouse);\n\n  resultsContainer.innerHTML += renderTable(\"Mobile CWV (Page)\", results.mobilePageCWV);\n  resultsContainer.innerHTML += renderTable(\"Mobile CWV (Origin)\", results.mobileOriginCWV);\n  resultsContainer.innerHTML += renderTable(\"Mobile Lighthouse\", results.mobileLighthouse);\n}\n\nfunction renderTable(title, data) {\n  if (data.length === 0) return \"\";\n\n  let table = `<h2>${title}<\/h2><div class=\"table-container\"><table><thead><tr><th>URL<\/th>`;\n  const sampleMetrics = data[0]?.metrics || {};\n  for (const metric in sampleMetrics) {\n    table += `<th>${metric}<\/th>`;\n  }\n  table += `<\/tr><\/thead><tbody>`;\n\n  for (const item of data) {\n    table += `<tr><td>${item.url}<\/td>`;\n    for (const metric in item.metrics) {\n      table += `<td>${item.metrics[metric]}<\/td>`;\n    }\n    table += `<\/tr>`;\n  }\n\n  table += `<\/tbody><\/table><\/div>`;\n  return table;\n}\n<\/script>\n\n<style>\n#cwv-form {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  align-items: stretch;\n}\n\n#apiKey,\n#urls {\n  font-size: 16px;\n  padding: 12px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n#urls {\n  min-height: 150px;\n  resize: vertical;\n}\n\nbutton {\n  font-size: 18px;\n  padding: 12px;\n  background-color: #007bff;\n  color: #fff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n  background-color: #0056b3;\n}\n\n#cwv-tool {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: #f9f9f9;\n  border-radius: 10px;\n  font-family: Arial, sans-serif;\n}\n\n.title {\n  text-align: center;\n  font-size: 24px;\n}\n\n.box {\n  padding: 5px;\n  border-radius: 4px;\n  display: inline-block;\n  width: 100%;\n}\n\n.box.good { background-color: #d4edda; color: #155724; }\n.box.moderate { background-color: #fff3cd; color: #856404; }\n.box.poor { background-color: #f8d7da; color: #721c24; }\n.box.neutral { background-color: #e2e3e5; color: #6c757d; }\n\n.table-container { overflow-x: auto; margin: 20px 0; }\ntable { border-collapse: collapse; width: 100%; }\nth, td { border: 1px solid #ddd; padding: 8px; text-align: center; }\nth { background-color: #f4f4f4; font-weight: bold; }\n<\/style>\n\n\n<p>This is an example output to show you how the speed scorecards look. You can use it as a standalone tool: <a href=\"https:\/\/ahrefs.com\/blog\/bulk-pagespeed-insights-website-speed-test\/\">website speed test<\/a>.<\/p>\n\n\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-scaled.jpg\" alt=\"output of the bulk page speed test tool showing cwv and lighthouse desktop and mobile metrics\" width=\"548\" height=\"2560\" class=\"alignnone size-full wp-image-184636\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-scaled.jpg 548w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-91x425.jpg 91w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2025\/01\/website-speed-test-329x1536.jpg 329w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\">\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"What causes the delay?\" data-section=\"what-causes-the-delay\">\n\n\n\n<h2 class=\"wp-block-heading\">What causes the&nbsp;delay?<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>JavaScript competing for the main thread. There\u2019s just one main thread, and JavaScript competes to run tasks on&nbsp;it.<\/p>\n\n\n\n<p>JavaScript has to take turns to run on the main thread. It\u2019s like a one-burner stove where you have to cook one item at a time, but you have multiple dishes to&nbsp;cook.<\/p>\n\n\n\n<p>While a task is running, a page can\u2019t respond to user input. This is the delay that is felt. The longer the task, the longer the delay experienced by the&nbsp;user.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"900\" class=\"wp-image-161215\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-4.png\" alt=\"Long tasks vs. short tasks on the main thread\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-4.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-4-680x383.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-4-768x432.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-4-1536x864.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\">\n<figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/web.dev\/vitals\/\">web.dev<\/a>.<\/figcaption>\n<\/figure>\n\n\n\n<p>The breaks between tasks are the opportunities that the page has to switch to the user input task and respond to what they wanted to do. This is worse on slower devices, as JavaScript can take longer to process and cause longer delays.<\/p>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"How to improve FID\" data-section=\"how-to-improve-fid\">\n\n\n\n<h2 class=\"wp-block-heading\">How to improve FID<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>In PageSpeed Insights, you\u2019ll see a TBT tab that has issues related to the main thread being blocked. These are the issues you\u2019ll want to solve in order to improve FID.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1502\" class=\"wp-image-161217\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-6.png\" alt=\"Issues related to TBT in Google PageSpeed Insights\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-6.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-6-566x425.png 566w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-6-768x577.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-6-1536x1154.png 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p>Most pages pass FID checks. However, if you need to work on FID, there are just a few items you can work&nbsp;on:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Reduce the amount of JavaScript<\/h3>\n\n\n\n<p>If you can reduce the amount of JavaScript running, do that first. Focus on the JavaScript early on in the page load. If there hasn\u2019t been a lot of optimization done, the early part of the load process can be filled with a ton of JavaScript all trying to run on that single main thread.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Load JavaScript later if possible<\/h3>\n\n\n\n<p>Any JavaScript you don\u2019t need immediately should be loaded later. There are two main ways to do that\u2014defer and async attributes. These attributes can be added to your script tags.<\/p>\n\n\n\n<p>Usually, a script being downloaded blocks the parser while downloading and executing. Async will let the parsing and downloading occur at the same time but still block parsing during the script execution. Defer will not block parsing during the download and only execute after the HTML has finished parsing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1309\" height=\"1600\" class=\"wp-image-161219\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-4.png\" alt=\"Graph showing how async and defer impact the loading of a page\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-4.png 1309w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-4-348x425.png 348w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-4-768x939.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-4-1257x1536.png 1257w\" sizes=\"auto, (max-width: 1309px) 100vw, 1309px\"><\/figure>\n\n\n\n<p>Which should you use? For anything that you want earlier or that has dependencies, I\u2019d lean toward async.&nbsp;<\/p>\n\n\n\n<p>For instance, I tend to use async on analytics tags so that more users are recorded. You\u2019ll want to defer anything that is not needed until later or doesn\u2019t have dependencies. The attributes are pretty easy to&nbsp;add.&nbsp;<\/p>\n\n\n\n<p>Check out these examples:<\/p>\n\n\n\n<p>Normal:<\/p>\n\n\n\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\"&gt;&lt;\/script&gt;<\/code><\/p>\n\n\n\n<p>Async:<\/p>\n\n\n\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\" async&gt;&lt;\/script&gt;<\/code><\/p>\n\n\n\n<p>Defer:<\/p>\n\n\n\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\" defer&gt;&lt;\/script&gt;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Break up long&nbsp;tasks<\/h3>\n\n\n\n<p>Another option is to break up the JavaScript so that it runs for less time. You take those long tasks that delay response to user input and break them into smaller tasks that block for less time. This is done with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Code_splitting\">code splitting<\/a>, which breaks the tasks into smaller chunks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Use web workers<\/h3>\n\n\n\n<p>There\u2019s also the option of moving some of the JavaScript to a <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/primers\/service-workers\">service worker<\/a>. I did mention that JavaScript competes for the one main thread in the browser, but this is a workaround that gives it another place to&nbsp;run.<\/p>\n\n\n\n<p>There are some trade-offs as far as caching goes. And the service worker can\u2019t access the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\">DOM<\/a>, so it can\u2019t do any updates or changes. If you\u2019re going to move JavaScript to a service worker, you really need to have a developer who knows what they are&nbsp;doing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Use prerendering or server-side rendering (SSR)<\/h3>\n\n\n\n<p>If you\u2019re on a JavaScript framework, there\u2019s a lot of JavaScript needed for the page to load. That JavaScript can take a while to process in the browser, and that can cause delays. If you use prerendering or SSR, you shift this burden from the browser to the server.<\/p>\n\n\n\n<div class=\"further-reading\"><div class=\"reading-title\">Further reading<\/div><div class=\"reading-content\">\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/web.dev\/optimize-fid\/\">Optimize First Input Delay<\/a><a href=\"https:\/\/web.dev\/optimize-lcp\/\"> \u2013<\/a><a href=\"https:\/\/web.dev\/optimize-fid\/\"> web.dev<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ahrefs.com\/blog\/core-web-vitals\/\" data-ahr=\"https:\/\/ahrefs.com\/blog\/advanced-pagespeed-guide\/\">How to Improve Page Speed From Start to Finish<\/a><a href=\"https:\/\/web.dev\/optimize-lcp\/\"> \u2013<\/a><a href=\"https:\/\/ahrefs.com\/blog\/core-web-vitals\/\" data-ahr=\"https:\/\/ahrefs.com\/blog\/advanced-pagespeed-guide\/\"> Ahrefs<\/a><\/li>\n<\/ul>\n\n\n\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Final thoughts<\/h2>\n\n\n\n<p>Even though FID was replaced by INP in March 2024, it\u2019s still worth working on improving FID. Many of the same things you work on to improve TBT and FID should also improve INP.<\/p>\n\n\n\n<p>If you have any questions, message me <a href=\"https:\/\/twitter.com\/patrickstox\">on Twitter<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Example interactions include: Some events like scrolling or zooming are not counted. Let\u2019s look at how fast your FID should be and how to improve it. A good FID value is less than 100 ms and should be based on<span class=\"ellipsis\">\u2026<\/span><\/p>\n<div class=\"read-more\">Read more \u203a<\/div>\n<p><!-- end of .read-more --><\/p>\n","protected":false},"author":150,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":""},"categories":[329],"tags":[],"coauthors":[377],"class_list":["post-161192","post","type-post","status-publish","format-standard","hentry","category-technical-seo","odd"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Improving First Input Delay (FID): Tips For Faster Interactions<\/title>\n<meta name=\"description\" content=\"First Input Delay is the time from when a user first interacts with your page to when the page responds, and it&#039;s a CWV metric Google uses.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Improving First Input Delay (FID): Tips For Faster Interactions\" \/>\n<meta property=\"og:description\" content=\"Learn all about it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/\" \/>\n<meta property=\"og:site_name\" content=\"SEO Blog by Ahrefs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Ahrefs\/\" \/>\n<meta property=\"article:author\" content=\"patrickstox\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-15T05:04:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-22T23:30:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1634\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Patrick Stox\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Learn all about it.\" \/>\n<meta name=\"twitter:creator\" content=\"@patrickstox\" \/>\n<meta name=\"twitter:site\" content=\"@ahrefs\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/first-input-delay-fid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/first-input-delay-fid\\\/\"},\"author\":{\"name\":\"Patrick Stox\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/person\\\/14bf754248f3c561786477e4e5fd2067\"},\"headline\":\"Improving First Input Delay (FID): Tips For Faster Interactions\",\"datePublished\":\"2023-06-15T05:04:57+00:00\",\"dateModified\":\"2025-01-22T23:30:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/first-input-delay-fid\\\/\"},\"wordCount\":1681,\"publisher\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/first-input-delay-fid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/improving-first-input-delay-fid-tips-by-patrick-stox-technical-seo.jpg\",\"articleSection\":[\"Technical SEO\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/first-input-delay-fid\\\/\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/first-input-delay-fid\\\/\",\"name\":\"Improving First Input Delay (FID): Tips For Faster Interactions\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/first-input-delay-fid\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/first-input-delay-fid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/fid-1.png\",\"datePublished\":\"2023-06-15T05:04:57+00:00\",\"dateModified\":\"2025-01-22T23:30:07+00:00\",\"description\":\"First Input Delay is the time from when a user first interacts with your page to when the page responds, and it's a CWV metric Google uses.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahrefs.com\\\/blog\\\/first-input-delay-fid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/first-input-delay-fid\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/fid-1.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/fid-1.png\",\"width\":1600,\"height\":1634},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/\",\"name\":\"SEO Blog by Ahrefs\",\"description\":\"Link Building Strategies &amp; SEO Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\",\"name\":\"Ahrefs\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/ahrefs-logo.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/ahrefs-logo.png\",\"width\":2048,\"height\":768,\"caption\":\"Ahrefs\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Ahrefs\\\/\",\"https:\\\/\\\/x.com\\\/ahrefs\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/ahrefs\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/ahrefscom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/person\\\/14bf754248f3c561786477e4e5fd2067\",\"name\":\"Patrick Stox\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Screenshot-2019-11-06-at-00.57.29.pngbade1fd182f70b6825c334271c12533e\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Screenshot-2019-11-06-at-00.57.29.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Screenshot-2019-11-06-at-00.57.29.png\",\"caption\":\"Patrick Stox\"},\"description\":\"Patrick Stox is a Product Advisor, Technical SEO, &amp; Brand Ambassador at Ahrefs. He was the lead author for the SEO chapter of the 2021 Web Almanac and a reviewer for the 2022 SEO chapter. He also co-wrote the SEO Book For Beginners by Ahrefs and was the Technical Review Editor for The Art of SEO 4th Edition. He\u2019s an organizer for the Triangle SEO Meetup, the Tech SEO Connect conference, he runs a Technical SEO Slack group, and is a moderator for \\\/r\\\/TechSEO on Reddit.\",\"sameAs\":[\"https:\\\/\\\/patrickstox.com\\\/\",\"patrickstox\",\"https:\\\/\\\/x.com\\\/patrickstox\"],\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/author\\\/patrick-stox\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Improving First Input Delay (FID): Tips For Faster Interactions","description":"First Input Delay is the time from when a user first interacts with your page to when the page responds, and it's a CWV metric Google uses.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/","og_locale":"en_US","og_type":"article","og_title":"Improving First Input Delay (FID): Tips For Faster Interactions","og_description":"Learn all about it.","og_url":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/","og_site_name":"SEO Blog by Ahrefs","article_publisher":"https:\/\/www.facebook.com\/Ahrefs\/","article_author":"patrickstox","article_published_time":"2023-06-15T05:04:57+00:00","article_modified_time":"2025-01-22T23:30:07+00:00","og_image":[{"width":1600,"height":1634,"url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1.png","type":"image\/png"}],"author":"Patrick Stox","twitter_card":"summary_large_image","twitter_description":"Learn all about it.","twitter_creator":"@patrickstox","twitter_site":"@ahrefs","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/#article","isPartOf":{"@id":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/"},"author":{"name":"Patrick Stox","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/person\/14bf754248f3c561786477e4e5fd2067"},"headline":"Improving First Input Delay (FID): Tips For Faster Interactions","datePublished":"2023-06-15T05:04:57+00:00","dateModified":"2025-01-22T23:30:07+00:00","mainEntityOfPage":{"@id":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/"},"wordCount":1681,"publisher":{"@id":"https:\/\/ahrefs.com\/blog\/#organization"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/#primaryimage"},"thumbnailUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/improving-first-input-delay-fid-tips-by-patrick-stox-technical-seo.jpg","articleSection":["Technical SEO"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/","url":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/","name":"Improving First Input Delay (FID): Tips For Faster Interactions","isPartOf":{"@id":"https:\/\/ahrefs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/#primaryimage"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/#primaryimage"},"thumbnailUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1.png","datePublished":"2023-06-15T05:04:57+00:00","dateModified":"2025-01-22T23:30:07+00:00","description":"First Input Delay is the time from when a user first interacts with your page to when the page responds, and it's a CWV metric Google uses.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/#primaryimage","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1.png","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1.png","width":1600,"height":1634},{"@type":"WebSite","@id":"https:\/\/ahrefs.com\/blog\/#website","url":"https:\/\/ahrefs.com\/blog\/","name":"SEO Blog by Ahrefs","description":"Link Building Strategies &amp; SEO Tips","publisher":{"@id":"https:\/\/ahrefs.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahrefs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ahrefs.com\/blog\/#organization","name":"Ahrefs","url":"https:\/\/ahrefs.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/ahrefs-logo.png","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/ahrefs-logo.png","width":2048,"height":768,"caption":"Ahrefs"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Ahrefs\/","https:\/\/x.com\/ahrefs","https:\/\/www.linkedin.com\/company\/ahrefs\/","https:\/\/www.youtube.com\/c\/ahrefscom"]},{"@type":"Person","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/person\/14bf754248f3c561786477e4e5fd2067","name":"Patrick Stox","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-06-at-00.57.29.pngbade1fd182f70b6825c334271c12533e","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-06-at-00.57.29.png","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2019\/11\/Screenshot-2019-11-06-at-00.57.29.png","caption":"Patrick Stox"},"description":"Patrick Stox is a Product Advisor, Technical SEO, &amp; Brand Ambassador at Ahrefs. He was the lead author for the SEO chapter of the 2021 Web Almanac and a reviewer for the 2022 SEO chapter. He also co-wrote the SEO Book For Beginners by Ahrefs and was the Technical Review Editor for The Art of SEO 4th Edition. He\u2019s an organizer for the Triangle SEO Meetup, the Tech SEO Connect conference, he runs a Technical SEO Slack group, and is a moderator for \/r\/TechSEO on Reddit.","sameAs":["https:\/\/patrickstox.com\/","patrickstox","https:\/\/x.com\/patrickstox"],"url":"https:\/\/ahrefs.com\/blog\/author\/patrick-stox\/"}]}},"_links":{"self":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts\/161192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/users\/150"}],"replies":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/comments?post=161192"}],"version-history":[{"count":0,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts\/161192\/revisions"}],"wp:attachment":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/media?parent=161192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/categories?post=161192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/tags?post=161192"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/coauthors?post=161192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}