{"id":35447,"date":"2022-03-13T15:00:45","date_gmt":"2022-03-13T14:00:45","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=35447"},"modified":"2022-03-11T16:31:30","modified_gmt":"2022-03-11T15:31:30","slug":"how-to-reduce-first-input-delay-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-reduce-first-input-delay-in-wordpress\/","title":{"rendered":"How to Reduce First Input Delay in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]User experience is at the center of many activities that form the daily routine of website administrators and optimization specialists. Better user experience is a reason to <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-website-navigation\/\">improve website navigation<\/a>. It\u2019s also why you might want to improve <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-improve-mobile-page-load-speed-in-wordpress\/\">website loading speeds<\/a>, or even make sure you <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-maintenance\/\">stick with a maintenance schedule<\/a> \u2013 all of these things will help users find your website more enjoyable and easy to use.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The things you can do to improve the user experience on your website are many. Reducing the First Input Delay, or FID, of your WordPress website is one of them. Still, you can be forgiven for not having heard of FID, or not being sure what it is and why you should care about it \u2013 let alone how to optimize it. But don\u2019t worry \u2013 we\u2019re here to help![\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll show you:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-first-input-delay-is-and-what-its-not\">What First Input Delay Is and What It\u2019s Not<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-is-measuring-and-reducing-fid-important\">Why Is Measuring and Reducing FID Important?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-reduce-fid-in-wordpress\">How to Reduce FID in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-first-input-delay-is-and-what-its-not\"><\/a>What First Input Delay Is and What It\u2019s Not<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-First-Input-Delay-Is-and-What-Its-Not.jpg\" class=\"attachment-full size-full\" alt=\"What First Input Delay Is and What It\u2019s Not\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-First-Input-Delay-Is-and-What-Its-Not.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-First-Input-Delay-Is-and-What-Its-Not-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-First-Input-Delay-Is-and-What-Its-Not-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-First-Input-Delay-Is-and-What-Its-Not-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First Input Delay is a metric \u2013 a measurement \u2013 that describes a specific aspect of a website\u2019s interactivity. When someone visits your website and they interact with an element like a link or a button for the first time, you want them to experience your website as responding instantaneously.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Usually, however, that\u2019s not what happens \u2013 <strong>there\u2019s a small delay even before the website starts processing the request<\/strong>. That delay is what First Input Delay measures. <strong>Specifically, it\u2019s the delay that occurs with the very first interaction with a page on your website.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>You should note, however, that the First Input Delay isn\u2019t the same as the time it takes for a page to become fully interactive.<\/strong> There\u2019s a metric called Time to Interactive \u2013 TTI \u2013 that measures it, and there\u2019s no reason why the first interaction with the website, when FID is measured, cannot happen while the website is still not fully interactive.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The First Input Delay isn\u2019t the loading time, either.<\/strong> It\u2019s not Total Blocking Time \u2013 TBT \u2013 which is a metric that measures how long the main thread is blocked so that it causes a website to become unresponsive. These two metrics are similar, though, as both measure the amount of time a website isn\u2019t being interactive. <strong>The difference is that FID measures the lack of interactivity after user input, while TBT measures it in general, without user input.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-is-measuring-and-reducing-fid-important\"><\/a>Why Is Measuring and Reducing FID Important?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Why-Is-Measuring-and-Reducing-FID-Important.jpg\" class=\"attachment-full size-full\" alt=\"Why Is Measuring and Reducing FID Important\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Why-Is-Measuring-and-Reducing-FID-Important.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Why-Is-Measuring-and-Reducing-FID-Important-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Why-Is-Measuring-and-Reducing-FID-Important-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Why-Is-Measuring-and-Reducing-FID-Important-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First Input Delay is one of the three metrics Google included into its <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-wordpress-website-for-google-core-web-vitals\/#why-are-they-important\">Core Web Vitals<\/a> \u2013 <strong>a group of core metrics that signal to the search engine the quality of user experience a page provides.<\/strong> When Google says it pays attention to a metric and even considers it when judging the quality of your website \u2013 you take notice of that.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are other practical reasons to keep an eye on your website\u2019s FID. As opposed to the other two Core Web Vitals metrics \u2013 the Largest Contentful Paint (LCP) and the Cumulative Layout Shift (CLS) \u2013 as well as TBT, FID is a fielding metric. <strong>It\u2019s measured only when a user is viewing the website and cannot be recreated in a test environment as the lab metrics can.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The threshold of 100ms for a \u201cgood\u201d delay length is what people can tolerate before they start noticing that the website isn\u2019t reacting to their activities instantaneously.<\/strong> Anything more than 300ms, and the FID is considered poor and detrimental to user experience.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Finally, FID measures the delay of the very first user interaction with your website \u2013 when first impressions are forged.<\/strong> That\u2019s a crucial time when a small error can send the user looking for other websites before you\u2019ve had a chance to win their trust.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The First Input Delay isn\u2019t a perfect metric.<\/strong> Google even stated that it has plans to replace it and reduce some of its shortcomings, and those shortcomings are plenty. Scrolling, for example, doesn\u2019t count as an event to measure FID. Measuring only the delay of the event, and not its full duration isn\u2019t ideal. <strong>For now, however, FID will have to do.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-reduce-fid-in-wordpress\"><\/a>How to Reduce FID in WordPress<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/How-to-Reduce-FID-in-WordPress.jpg\" class=\"attachment-full size-full\" alt=\"How to Reduce FID in WordPress\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/How-to-Reduce-FID-in-WordPress.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/How-to-Reduce-FID-in-WordPress-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/How-to-Reduce-FID-in-WordPress-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/How-to-Reduce-FID-in-WordPress-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can measure your website\u2019s FID using <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed Insights<\/a>. You can also find information about it in the Core Web Vital Report in <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-wordpress-to-google-search-console\/\">Google\u2019s Search Console<\/a>. In case you notice that the FID on the pages on your website tends to wander north of 100ms, you should react.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Remove Scripts and Minify Code<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>The reasons for a long First Input Delay are often that there\u2019s simply too much going on for the website to be free to respond to a visitor\u2019s command.<\/strong> Just think about all those JavaScript-heavy plugins you might be running, the complex theme you have chosen for your website, or all the fancy interactivity and animation features. The more you give the page to load when it\u2019s first opened, the more likely it is it will increase the FID.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This problem is caused by both CSS and JavaScript, although JavaScript tends to be the bigger problem of the two. <strong>So, as part of your FID-reducing endeavor, you should assess the impact of your theme, the plugins, and the design choices on the input delay.<\/strong> You can try a lightweight theme like our <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\" target=\"_blank\" rel=\"noopener\">Qi Theme<\/a> instead of a heavy, complex theme. As for the plugins, removing the ones you don\u2019t need and finding low-impact alternatives for the ones you do is an option.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You should also consider <a href=\"https:\/\/qodeinteractive.com\/magazine\/minify-css-javascript-files-in-wordpress\/\">minifying the code<\/a> on your website. You cannot possibly get rid of all the CSS, but you can make sure that it\u2019s as streamlined as possible.<strong> Minifying the code won\u2019t have the biggest impact on the FID, but everything that helps is more than welcome.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Selective Loading of JavaScript<\/h3>\n<p>[\/vc_column_text][vc_column_text]Some WordPress plugins will be too useful to remove or substitute yet still bog your website down with JavaScript. <strong>Page builders tend to be like that \u2013 they load JavaScript even on the pages that don\u2019t use them. And they\u2019re not the only culprit.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Luckily for you, you can use WordPress performance plugins such as <a href=\"https:\/\/wordpress.org\/plugins\/wp-asset-clean-up\/\" target=\"_blank\" rel=\"noopener\">Asset Clean Up<\/a> that can help you recognize which scripts are loading with your pages and simply choose not to load the ones you don\u2019t need.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Defer and Async JavaScript<\/h3>\n<p>[\/vc_column_text][vc_column_text]The practice of deferring code means reducing its priority during loading, effectively making them load the last.<strong> This can come in handy if you want to deal with some render-blocking code or scripts, the type of code that will stop the website from rendering while it\u2019s being executed.<\/strong> If the code or script isn\u2019t critical for the workings of the page, you might use the \u201cdefer\u201d attribute to run the code or script the last. Plugins like <a href=\"https:\/\/wordpress.org\/plugins\/hummingbird-performance\/\" target=\"_blank\" rel=\"noopener\">Hummingbird<\/a> will do it for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Alternatively, you can also use the \u201casync\u201d attribute to execute some scripts as soon as possible.<\/strong> Again, you can add the attribute yourself, or use a plugin like <a href=\"https:\/\/wordpress.org\/plugins\/async-javascript\/\" target=\"_blank\" rel=\"noopener\">Async JavaScript<\/a> to help you out. Async JavaScript will also let you choose which scripts to award the \u201cdefer\u201d attribute, too.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Unless you have a static website without a single interactive element on it, the First Input Delay is a metric that\u2019s worthy of your attention. Thanks to it, you can get a sense of the quality of user experience your website is providing to people the first time they see each page. If you notice something\u2019s wrong and some pages have a delay that\u2019s bigger than a hundred milliseconds, you can do several things to try and get the delay under control.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Having problems with the first input delay on your WordPress website? We&#8217;ll show you a couple of tried and tested ways you can deal with it!<\/p>\n","protected":false},"author":9295,"featured_media":35455,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[163,151,4],"class_list":["post-35447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-performance","tag-speed","tag-tips"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=35447"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35447\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/35455"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=35447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=35447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=35447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}