{"id":2233,"date":"2023-06-15T05:04:57","date_gmt":"2023-06-15T05:04:57","guid":{"rendered":"https:\/\/ewebtoolz.com\/blog\/first-input-delay-fid-defined-measured-how-to-fix\/"},"modified":"2023-06-15T05:04:57","modified_gmt":"2023-06-15T05:04:57","slug":"first-input-delay-fid-defined-measured-how-to-fix","status":"publish","type":"post","link":"https:\/\/ewebtoolz.com\/blog\/first-input-delay-fid-defined-measured-how-to-fix\/","title":{"rendered":"First Input Delay (FID) \u2013 Defined, Measured, &#038; How to Fix"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div id=\"\">\n<p>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 is one of the three Core Web Vitals metrics Google uses to measure page experience.<\/p>\n<p>Example interactions include:<\/p>\n<ul>\n<li>Clicking on a link or button.<\/li>\n<li>Inputting text into a blank\u00a0field.<\/li>\n<li>Selecting a drop-down menu.<\/li>\n<li>Clicking a checkbox.<\/li>\n<\/ul>\n<p>Some events like scrolling or zooming are not counted.<\/p>\n<p>Let\u2019s look at how fast your FID should be and how to improve it.<\/p>\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><\/p>\n<p><h2 class=\"wp-block-heading\">What\u2019s a good FID\u00a0value?<\/h2>\n<\/p>\n<\/div>\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\u00a0ms.<\/p>\n<p>Your page may be classified into one of the following buckets:<\/p>\n<ul>\n<li>Good: &lt;=100\u00a0ms<\/li>\n<li>Needs improvement: &gt;100 ms and &lt;=300\u00a0ms<\/li>\n<li>Poor: &gt;300\u00a0ms<\/li>\n<\/ul>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"1634\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1.png\" alt=\"FID thresholds for good, needs improvement, and poor\" class=\"wp-image-161265\" 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=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"1634\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-1.png\" alt=\"FID thresholds for good, needs improvement, and poor\" class=\"lazyload wp-image-161265\" 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\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\n<h3 class=\"wp-block-heading\">FID data<\/h3>\n<p>95.3% of sites are in the good FID bucket as of April 2023.\u00a0This is averaged across the site. As we mentioned, you need 75% of interactions to respond in less than 100 ms to show as good\u00a0here.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"1540\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023.png\" alt=\"Percentage of good FID values from CrUX CWV data (April 2023)\" class=\"wp-image-161201\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-442x425.png 442w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-768x739.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-1536x1478.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"1540\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023.png\" alt=\"Percentage of good FID values from CrUX CWV data (April 2023)\" class=\"lazyload wp-image-161201\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-442x425.png 442w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-768x739.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-fid-april-2023-1536x1478.png 1536w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\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 will be replacing 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\u00a0makes.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"1523\" 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)\" class=\"wp-image-161203\" 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=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"1523\" 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)\" class=\"lazyload wp-image-161203\" 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\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\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<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"2760\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-by-device.png\" alt=\"Breakdown of FID by device\" class=\"wp-image-161205\" 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=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"2760\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-by-device.png\" alt=\"Breakdown of FID by device\" class=\"lazyload wp-image-161205\" 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\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\n<p>Few sites need to worry about FID, even on slower connections, as most of their pages are passing.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"1404\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-connection-type-1.png\" alt=\"Breakdown of FID by connection type\" class=\"wp-image-161268\" 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=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"1404\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/fid-connection-type-1.png\" alt=\"Breakdown of FID by connection type\" class=\"lazyload wp-image-161268\" 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\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\n<p>Our page-level data from the study told the same story. FID doesn\u2019t seem to be a concern for most\u00a0pages.<\/p>\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\u00a0data.\u00a0<\/p>\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 Core Web Vitals.\u00a0<\/p>\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\u00a0FID.\u00a0<\/p>\n<h3 class=\"wp-block-heading\">Measuring FID for a single URL<\/h3>\n<p><a href=\"https:\/\/pagespeed.web.dev\/\">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\u00a0TBT.<\/p>\n<h3 class=\"wp-block-heading\">Measuring FID for many URLs or an entire site<\/h3>\n<p>You can get CrUX data in Google Search Console that is bucketed into the categories of good, needs improvement, and\u00a0poor.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1437\" height=\"1490\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-5.png\" alt=\"Core Web Vitals data in Google Search Console\" class=\"wp-image-161209\" 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=\"(max-width: 1437px) 100vw, 1437px\"\/><\/noscript><img decoding=\"async\" width=\"1437\" height=\"1490\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-5.png\" alt=\"Core Web Vitals data in Google Search Console\" class=\"lazyload wp-image-161209\" 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\" data-sizes=\"(max-width: 1437px) 100vw, 1437px\"\/><\/figure>\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\u00a0group.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1714\" height=\"1689\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-5.png\" alt=\"FID issue URL groups in GSC\" class=\"wp-image-161211\" 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=\"(max-width: 1714px) 100vw, 1714px\"\/><\/noscript><img decoding=\"async\" width=\"1714\" height=\"1689\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image5-5.png\" alt=\"FID issue URL groups in GSC\" class=\"lazyload wp-image-161211\" 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\" data-sizes=\"(max-width: 1714px) 100vw, 1714px\"\/><\/figure>\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<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"644\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image3-5.png\" alt=\"Core Web Vitals data in Ahrefs' Site Audit\" class=\"wp-image-161213\" 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=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"644\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image3-5.png\" alt=\"Core Web Vitals data in Ahrefs' Site Audit\" class=\"lazyload wp-image-161213\" 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\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\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\u00a0API.<\/p>\n<p>JavaScript competing for the main thread. There\u2019s just one main thread, and JavaScript competes to run tasks on\u00a0it.<\/p>\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\u00a0cook.<\/p>\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\u00a0user.\u00a0<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-4.png\" alt=\"Long tasks vs. short tasks on the main thread\" class=\"wp-image-161215\" 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=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-4.png\" alt=\"Long tasks vs. short tasks on the main thread\" class=\"lazyload wp-image-161215\" 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\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/web.dev\/vitals\/\">web.dev<\/a>.<\/figcaption><\/figure>\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<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.\u00a0<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1999\" height=\"1502\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-6.png\" alt=\"Issues related to TBT in Google PageSpeed Insights\" class=\"wp-image-161217\" 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=\"(max-width: 1999px) 100vw, 1999px\"\/><\/noscript><img decoding=\"async\" width=\"1999\" height=\"1502\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-6.png\" alt=\"Issues related to TBT in Google PageSpeed Insights\" class=\"lazyload wp-image-161217\" 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\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\"\/><\/figure>\n<p>Most pages pass FID checks. However, if you need to work on FID, there are just a few items you can work\u00a0on:\u00a0<\/p>\n<h3 class=\"wp-block-heading\">1. Reduce the amount of JavaScript<\/h3>\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<h3 class=\"wp-block-heading\">2. Load JavaScript later if possible<\/h3>\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<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<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1309\" height=\"1600\" 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\" class=\"wp-image-161219\" 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=\"(max-width: 1309px) 100vw, 1309px\"\/><\/noscript><img decoding=\"async\" width=\"1309\" height=\"1600\" 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\" class=\"lazyload wp-image-161219\" 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\" data-sizes=\"(max-width: 1309px) 100vw, 1309px\"\/><\/figure>\n<p>Which should you use? For anything that you want earlier or that has dependencies, I\u2019d lean toward async.\u00a0<\/p>\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\u00a0add.\u00a0<\/p>\n<p>Check out these examples:<\/p>\n<p>Normal:<\/p>\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\"&gt;&lt;\/script&gt;<\/code><\/p>\n<p>Async:<\/p>\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\" async&gt;&lt;\/script&gt;<\/code><\/p>\n<p>Defer:<\/p>\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\" defer&gt;&lt;\/script&gt;<\/code><\/p>\n<h3 class=\"wp-block-heading\">3. Break up long\u00a0tasks<\/h3>\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<h3 class=\"wp-block-heading\">4. Use web workers<\/h3>\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\u00a0run.<\/p>\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\u00a0doing.<\/p>\n<h3 class=\"wp-block-heading\">5. Use prerendering or server-side rendering (SSR)<\/h3>\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<h2 class=\"wp-block-heading\">Final thoughts<\/h2>\n<p>Even though FID is being replaced by INP in March 2024, it\u2019s still worth working on improving FID. The same things you work on to improve TBT and FID should also improve INP.<\/p>\n<p>If you have any questions, message me <a href=\"https:\/\/twitter.com\/patrickstox\">on Twitter<\/a>.<\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><br \/>\n<br \/><br \/>\n<br \/><a href=\"https:\/\/ahrefs.com\/blog\/first-input-delay-fid\/\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 is one of the three Core Web Vitals metrics Google uses to measure page experience. Example interactions include: Clicking on a link or button. Inputting text into a blank\u00a0field. Selecting [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2234,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-2233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"_links":{"self":[{"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/posts\/2233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/comments?post=2233"}],"version-history":[{"count":0,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/posts\/2233\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/media\/2234"}],"wp:attachment":[{"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/media?parent=2233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/categories?post=2233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/tags?post=2233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}