- \n
- What is First Input Delay?<\/a><\/li>\n\n\n\n
- How to measure First Input Delay for your website<\/a><\/li>\n\n\n\n
- Ways to reduce First Input Delay scores in WordPress<\/a><\/li>\n<\/ul>\n\n\n\n\t\t
<\/div>\n\t\t\t\n\t\t \t\n\t\t \t\tHere are some proven methods for improving the First Input Delay on a #WordPress website \ud83d\ude85<\/a>\n\t\t \t<\/div>\n\t\t \t\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n\n\n\nWhat First Input Delay is (and why it’s an important metric)<\/h2>\n\n\n\n
Every time that you visit a website, a lot goes on in the background. Before you can see a page, your browser needs to query its server, send and process requests, load elements, and so forth. For a modern website, you can have dozens of requests that your browser needs to fulfill before you see a fully rendered page that you can interact with.<\/p>\n\n\n\n
In some cases, it happens that a page looks <\/em>ready, but your browser is still processing requests and loading scripts in the background. When you try to interact with that page, you might find there’s a slight delay between you performing an action and receiving a response.<\/p>\n\n\n\n
For example, if you click a link, your browser might not process the request instantly. If you press a button, it might not do anything at first glance. That can happen with basically any interactive element on your site., and it’s your goal to reduce that first input delay as much as possible.<\/p>\n\n\n\n
Ideally, your site’s First Input Delay should be under 100 milliseconds. That’s the standard that Google deems as acceptable for websites:<\/p>\n\n\n
\n![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/09\/first-input-delay.png\")
Source<\/em>: Web.dev<\/a><\/figcaption><\/figure><\/div>\n\n\n We mention Google specifically because FID is one of the three metrics it uses to gauge positive or negative user experiences on a website. Those three metrics are called Core Web Vitals<\/a> and they also include the following two metrics:<\/p>\n\n\n\n
- \n
- Largest Contentful Paint (LCP):<\/strong> This metric measures how long it takes for the largest element on a page to load.<\/li>\n\n\n\n
- Cumulative Layout Shift (CLS):<\/strong> This measures how much a page “shifts” visually as it loads. If elements move around too much as they load, you’ll have a poor CLS score. We have a guide on fixing Cumulative Layout Shift for WordPress<\/a>.<\/li>\n<\/ol>\n\n\n\n
There are two key reasons why Core Web Vitals matter. The first is that they provide a measure of how well-optimized your site is. If your website has great scores, it means that it loads fast, it’s visually stable, and users don’t have to wait too long to interact with it. <\/p>\n\n\n\n
The second reason why Core Web Vitals matter is that they impact your site’s search engine optimization (SEO). Google uses these metrics as a small signal when determining rankings. In fact, the search engine giant has been clear that Core Web Vitals matter when it comes to SEO, though not to the same degree as content and backlinks.<\/p>\n\n\n
<\/div>\n\n\n\nHow to measure First Input Delay for your website<\/h3>\n\n\n\n
First Input Delay can be difficult to measure because you need to collect data based on your site’s real visitors, unlike other performance metrics where you can just run simulated tests using a computer.<\/p>\n\n\n\n
The easiest way to measure First Input Delay for your website is to use PageSpeed Insights<\/a>. However, PageSpeed Insights will only show the First Input Delay times if your site has enough traffic to be included in the Chrome User Experience report. <\/p>\n\n\n\n
Let’s talk about how PageSpeed Insights works first and then we’ll share some alternatives you can try if PageSpeed Insights doesn’t offer First Input Delay metrics for your site:<\/p>\n\n\n
\n![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/09\/pagespeed-insights.png\")
<\/figure><\/div>\n\n\nTo use PageSpeed Insights, go ahead and enter the URL for the page that you want to test. PageSpeed Insights will take a few moments to analyze it and then it will return a report that looks like this:<\/p>\n\n\n
\n![\"A](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/09\/pagespeed-insights-report.png\")
<\/figure><\/div>\n\n\nOverall, that website doesn’t have the best Core Web Vital scores. However, you can see that it does very well when it comes to the First Input Delay metric, with an average time below 100 ms. <\/p>\n\n\n\n
However, as we mentioned above, not all sites will see this metric. If you have a lower-traffic site, you might see something like this:<\/p>\n\n\n
\n![\"Low](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/10\/first-input-delay.png\")
<\/figure><\/div>\n\n\nIn this situation, you have two options:<\/p>\n\n\n\n
- \n
- Simple<\/strong>: You can use the Total Blocking Time<\/strong> metric from the Lab Data<\/strong> section as a rough proxy for your First Input Delay time. It’s not a perfect representation, but the Total Blocking Time metric is very similar to First Input Delay. Generally, if you improve your Total Blocking Time, you’ll also see similar improvements to your First Input Delay time.<\/li>\n\n\n\n
- Advanced<\/strong>: You can use a real user performance monitoring tool such as Request Metrics<\/a>. With these tools, you’ll need to add a tracking script to your site to collect real user data.<\/li>\n<\/ol>\n\n\n\n
Below, you can see where to find the Total Blocking Time metric in PageSpeed Insights:<\/p>\n\n\n
\n![\"Using](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/10\/total-blocking-time.png\")
<\/figure><\/div>\n\n\nNow that you know how to measure FID and other Core Web Vitals, let’s talk about how to improve them.<\/p>\n\n\n
<\/div>\n\n\n\nWays to reduce First Input Delay scores in WordPress<\/h2>\n\n\n\n
For this section, we’re going to focus on WordPress optimizations that will improve your First Input Delay scores. Some of these optimizations will also impact other Core Web Vitals positively, which makes them all the more useful.<\/p>\n\n\n\n
1. Remove unnecessary scripts from your website<\/h3>\n\n\n\n
One of the main reasons why your WordPress website might take too long to load is because it needs to execute a large list of scripts. By scripts, we mean JavaScript<\/a> and CSS, among other possible options. If you use a “complex” WordPress theme or a broad array of plugins, chances are that you might have a few too many scripts running in the background.<\/p>\n\n\n\n
Figuring out which scripts are useful and which aren’t can be a challenge, but that’s where PageSpeed Insights comes in. If you run a test for any of your site’s pages, the PageSpeed Insights report will also include an Opportunities <\/em>section:<\/p>\n\n\n
\n![\"Using](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/09\/pagespeed-insights-opportunities.png\")
<\/figure><\/div>\n\n\nThat section will point out which JavaScript and CSS files your site isn’t using. Removing those scripts<\/a> should decrease your FID scores correspondingly.<\/p>\n\n\n\n
In many cases, those scripts come from plugins. That means you need to take a long look at your plugins list and figure out which tools you don’t really need. Culling your plugins is a great way to keep your website loading as fast as possible.<\/p>\n\n\n
<\/div>\n\n\n\n2. Defer non-critical code during loading<\/h3>\n\n\n\n
It’s common to run into specific scripts or code that take too long to load. The problem is that, in some cases, your browser won’t be able to finish loading the rest of a page’s elements until it deals with those scripts.<\/p>\n\n\n\n
If those scripts aren’t “critical”, you can simply tell your browser to leave them until last so they don’t slow things down for everyone else. That’s what we call “deferring non-critical code”.<\/p>\n\n\n\n
Your first stop when figuring out what scripts you can defer should be PageSpeed Insights. Once you generate a report for a page, PageSpeed Insights will include recommendations for how to improve its scores. <\/p>\n\n\n\n
Among those recommendations, you’ll find an option that reads Eliminate render-blocking resources<\/em>. If you click on it, it will show you a list of scripts that you can defer:<\/p>\n\n\n
\n![\"Figuring](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/09\/eliminate-render-blocking-resources.png\")
<\/figure><\/div>\n\n\nThere are two ways that you can go about handling render-blocking scripts in WordPress. The first method involves using async<\/em><\/a>. This enables browsers to continue loading your website while they parse the script you specify. Alternatively, you can defer <\/em>the code so it loads after browsers render the rest of the HTML document.<\/p>\n\n\n\n
To set this up on WordPress, you can use the free Async JavaScript plugin<\/a>. Or, many WordPress performance plugins include features to defer code. If you’re willing to pay for a premium plugin, WP Rocket<\/a> has features to automatically defer non-critical CSS and JavaScript.<\/p>\n\n\n
<\/div>\n\n\n\n3. Use CSS and JavaScript minification tools<\/h3>\n\n\n\n
Although we’re all for removing unused CSS and JavaScript, there are some scripts that you won’t want to eliminate. For example, you wouldn’t want to do away with any page’s CSS stylesheet unless you want a website that feels like it was ripped from the last century.<\/p>\n\n\n\n
For those scripts that you can’t <\/em>remove, your best bet is to minify them. This means removing whitespace and unnecessary characters from the code to reduce each script’s size. There are several tools that will automatically minify scripts for you in WordPress, such as Autoptimize<\/a> and Fast Velocity Minify<\/a>:<\/p>\n\n\n
\n![\"Minification](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/09\/minification-plugins.png\")
<\/figure><\/div>\n\n\nGenerally speaking, most WordPress optimization and caching plugins<\/a> also include script minification tools. However, some of them require a lot of configuration work, so we recommend sticking with options such as Autoptimize when it comes to minification.<\/p>\n\n\n
<\/div>\n\n\n\n4. Use a content delivery network (CDN)<\/h3>\n\n\n\n
Using a CDN<\/a> is a great way to boost your website’s performance. With a CDN, you get access to a network of data centers around the world that can cache your site’s content. When a visitor tries to access your website, the CDN will process that request and serve a cached version of it.<\/p>\n\n\n\n
In most cases, using a CDN will improve your website’s loading times and FID scores. Integrating WordPress with a CDN is simple and the biggest challenge probably lies in deciding which service to use. <\/p>\n\n\n\n
If you’re looking for free CDN options<\/a>, we recommend opting for one of the following:<\/p>\n\n\n\n
- \n
- Cloudflare:<\/strong> This is one of the most popular CDNs on the market. It’s easy to integrate with WordPress<\/a> and it offers a free plan. <\/li>\n\n\n\n
- Jetpack:<\/strong> The Jetpack plugin offers a feature called Site Accelerator<\/em>, which uses the WordPress.com servers to cache static elements from your website. Although Jetpack requires a WordPress.com account, you can use it on self-hosted WordPress sites as well.<\/li>\n<\/ol>\n\n\n\n
However, for the best performance, you might want to consider a premium CDN<\/a> such as KeyCDN, StackPath, or Bunny CDN.<\/p>\n\n\n
<\/div>\n\n\n\nReduce your site’s First Input Delay today <\/h2>\n\n\n\n
- Jetpack:<\/strong> The Jetpack plugin offers a feature called Site Accelerator<\/em>, which uses the WordPress.com servers to cache static elements from your website. Although Jetpack requires a WordPress.com account, you can use it on self-hosted WordPress sites as well.<\/li>\n<\/ol>\n\n\n\n
- Advanced<\/strong>: You can use a real user performance monitoring tool such as Request Metrics<\/a>. With these tools, you’ll need to add a tracking script to your site to collect real user data.<\/li>\n<\/ol>\n\n\n\n
- Cumulative Layout Shift (CLS):<\/strong> This measures how much a page “shifts” visually as it loads. If elements move around too much as they load, you’ll have a poor CLS score. We have a guide on fixing Cumulative Layout Shift for WordPress<\/a>.<\/li>\n<\/ol>\n\n\n\n
- How to measure First Input Delay for your website<\/a><\/li>\n\n\n\n