Tag: performance

As your site traffic increases, you’ll want to ensure that things continue to run smoothly. If visitors have to wait more than a few seconds for your page to load, they’ll likely leave your site and may never come back.

Fortunately, there are some simple tests to evaluate your performance and, if improvements are needed, there are solutions that can almost immediately improve your loading times. 

In this post, we’ll discuss one aspect of site performance: First Input Delay. You’ll learn what it is, why it’s important, and how you can measure and improve the FID score on your WordPress site.

An introduction to first input delay

First Input Delay (FID) is the loading time a visitor experiences after interacting with your website for the first time. Essentially, when someone clicks on a link or taps a button, they have to wait for their browser to respond. If your site has a high FID score, visitors wait for longer periods.

FID is one of the main metrics of Core Web Vitals. Created by Google, this report measures the performance of web pages.

Here are the three main performance metrics that are included in the Core Web Vitals report:

• Largest Contentful Paint (LCP): this measures the time it takes your website to load after a user requests the URL.
• First Input Delay (FID): this is the time it takes your website to respond after a visitor interacts with a page.
• Cumulative Layout Shift (CLS): this measures all the layout shifts that occur while a page is loading.

Although all of these metrics evaluate your website’s user experience, your FID score is one of the most important. If your page doesn’t load quickly, it can leave a poor first impression. In fact, a one-second delay can decrease visitor satisfaction by 16 percent. 

Here are some benefits of improving your FID score:

• A boost in your visitors’ average time on page
• A reduction in your bounce rate
• An increase in conversions

Potential causes of a poor FID score

When you run a Core Web Vitals test, the report will give you a First Input Delay score. An acceptable FID is 100 milliseconds or less.

A poor FID score is anything higher than 300ms. This can be caused by a few different factors. 

One of the most common causes of high First Input Delay is heavy JavaScript code. If a browser has to execute a large JavaScript file, it can be too busy to execute other requests.

Having too many JavaScript-based plugins can negatively affect your loading times. Similarly, some themes can have complex files that cause the same problem.

Another factor can be third-party scripts. If your website has many third-party analytics codes and tags, this can increase your page’s latency. Sometimes, browsers can prioritize these scripts, delaying the loading of other content on your site.

How to measure your website’s FID score

Now that you know what First Input Delay is, it’s time to put your website to the test.

There are several Core Web Vitals tools you can use to check your FID. If you receive a poor report from any of these tools, you can take action to improve your website.

1. PageSpeed Insights

One well-known tool you can use is PageSpeed Insights. This enables you to assess your website’s performance on a variety of factors.

After you enter your website’s URL, PageSpeed Insights will give you a detailed performance analysis. At the top of the page, you can see whether your site has passed the Core Web Vitals assessment.

Using this report, you can review your website’s FID score, which will be measured in milliseconds. As we mentioned earlier, any score under 100ms will pass the test.

Note that you’ll need to check your site’s performance for both mobile and desktop browsers. You might notice slight differences in your FID score on these two devices.

This is one of the fastest ways to measure the First Input Delay on your website. If you need a quick overview of your web performance, this could be the right tool for you. 

2. Google Search Console

Similar to PageSpeed Insights, Google Search Console is a free tool that you can use to evaluate site performance. With this service, you can view traffic data for your site and troubleshoot specific issues like First Input Delay.

To start using Google Search Console, you’ll have to verify your website ownership. There are several ways to do this, but we’ll outline the HTML file upload method. Start by entering your domain or URL prefix.

Then, download the HTML file that has been generated for you. You’ll need to upload this file to your site’s root directory before you can employ the features of Google Search Console.

After verification, you’ll be able to access your dashboard. Here, you can navigate to the Core Web Vitals tab.

Unlike PageSpeed Insights, it may take some time to access your report if you’re new to this tool. Also, you may not be able to see a report if your site doesn’t get enough visitors.

Google Search Console can give you similar metrics on your FID score. You’ll receive an evaluation of Poor, Needs Improvement, or Good based on real-world usage data. 

3. Lighthouse

Lighthouse is a web development tool that you can use to audit the performance of any web page. Although it doesn’t directly measure First Input Delay, it will give you the Total Blocking Time (TBT). You can use this as a proxy for FID.

Put simply, TBT evaluates how well your site responds to user input. It measures the total time your browser is too busy (completing tasks like running JavaScript or parsing CSS) to respond to user input between FCP and TTI.

To view Lighthouse’s report on your website, you’ll need to right-click on your web page. Then, choose Inspect.

At the top of the generated code, find the double arrow icon. Then, click on it and select Lighthouse.

On the next page, you’ll see an option to generate a report. When you click on this, Lighthouse will audit your website.

After the audit is complete, you can view detailed analytics on your site’s performance. You’ll also see reports on your SEO and web accessibility.

Then, scroll down until you see Metrics. In this section, you’ll see your Total Blocking Time.

Although TBT and FID are similar, it’s important to note that FID is a field metric. Since it’s based on users in real-time, it can’t be measured in a lab setting. 

Lighthouse is a lab metric tool, so its Total Blocking Time metric won’t assess real interactivity. Fortunately, improving your TBT score can also improve your First Input Delay.  

How to reduce first input delay in WordPress

When you test your website using one of the above tools, you might receive a poor First Input Delay score. Fortunately, you can improve your score by implementing a few effective strategies. 

Let’s look at how to reduce First Input Delay in WordPress.

1. Install an optimization plugin

An easy way to get started is to install a plugin that focuses on Core Web Vitals. By doing this, you can improve your First Input Delay without any heavy lifting.

Jetpack Boost is a powerful, easy-to-use plugin that you can use to optimize your Core Web Vitals. It provides many ways to boost your web performance and improve your FID score.

After activating Jetpack Boost, the tool will automatically give your site a performance score. You can view how fast your pages load on both mobile and desktop views.

Then, you can customize its settings to optimize your files for fast loading. Deferring JavaScript will likely be the most effective in improving FID, though optimizing CSS may also save parsing some large CSS files in certain circumstances. Enable both of these, and you’re likely to see an improvement in your FID score. 

Jetpack Boost is a free plugin. If you already have Jetpack installed on your WordPress website, you can activate Jetpack Boost from the dashboard.

2. Defer render‑blocking JavaScript

Another effective way to optimize your FID score is by deferring render-blocking JavaScript. By default, all JavaScript on your website is render-blocking. This means that a browser will stop loading a certain page until it can download and execute these scripts.

In this case, you can defer JavaScript execution. This will tell the browser to render the most relevant content first. 

To identify this render-blocking JavaScript, you can use PageSpeed Insights. First, type your website’s URL into the search bar.

Then, scroll down to the Opportunities section. Here, you’ll see suggestions for improving your web performance. Find where it says Eliminate render-blocking resources.

When you expand this section, there will be a list of resources that you can defer or eliminate altogether. On the right-hand side, PageSpeed Insights will show you how these changes can impact your loading time.

Once you decide to defer non-essential JavaScript on your website, you can use a plugin to make this process simple. With Jetpack Boost, you can do this in just one step.

In your WordPress dashboard, navigate to Jetpack → Boost. Then, find the setting labelled Defer Non-Essential JavaScript.

Finally, turn on this feature. When implemented, the switch will turn green. Now, try running your website through PageSpeed Insights again to see if your FID score has improved. 

3. Defer non‑critical CSS

When you evaluate your website in PageSpeed Insights, you may also see other render-blocking resources. Similar to JavaScript, certain coding can prevent your page from loading while the browser reads them.

Just like with JavaScript, you can defer non-critical CSS. Start by running your website through a performance tool to see if your CSS needs to be optimized.

Then, you can use the Jetpack Boost plugin to optimize your CSS. In your WordPress dashboard, navigate to Jetpack → Boost. Then, find the setting labelled Optimize CSS Loading.

After you click on this option, the plugin will automatically generate the critical CSS for your website. It will move this important information to the beginning of the page, which can help your content load faster.

Deferring non-critical CSS can enhance your overall performance. In some circumstances, it could also improve your FID score on PageSpeed Insights. 

4. Eliminate unnecessary JavaScript

If you installed a lot of plugins or a complex theme, your website could be running too many scripts. If a browser needs to execute a long list of scripts to load your website, it can lead to slow speeds. 

Many scripts are necessary to display your website, but chances are, you have some unnecessary CSS and JavaScript. If you’re not certain how to tell the difference, you can go back to PageSpeed Insights.

Like you did with the first three methods, scroll to the Opportunities section. This time, look for unused JavaScript and CSS.

Next to each unused script, there will be a URL that tells you where it’s coming from. In this example, Google Analytics and Google Tag Manager were creating some unnecessary JavaScript.

If you know which theme or plugins are causing the problem, you might consider deleting them. Then, you can install different versions that are well-coded and more lightweight. 

Alternatively, you can use a plugin like Asset CleanUp to remove unused CSS and JavaScript. This tool can eliminate render-blocking resources to decrease your site’s number of HTTP requests.

Once you’ve installed and activated Asset Cleanup on your site, go to Asset CleanUp → CSS/JS Manager in your dashboard. On this page, you can select different elements of your website to view its CSS and JavaScript. 

For example, you can click on Homepage, and it will display all the loaded files on this page.

This information will be listed based on location. You can scroll down the page to see scripts from your plugins, themes, core software, and third-party sources.

There are two ways to remove a piece of script. You can unload it on this specific page or site-wide.

Once you remove unused scripts, click on Update. After this, you can clear your cache to immediately apply these changes.  

5. Minify CSS and JavaScript

Although you can easily remove scripts from your site, you’ll only want to get rid of the ones you’re not using. For necessary CSS and JavaScript, you can simply minify them instead.

Jetpack Boost makes this process easy, with toggles that you can just turn on. After installing and activating the plugin, go to Jetpack → Boost in your WordPress dashboard. 

Then, turn on the options for Concatenate JS and Concatenate CSS. These tools will group your code and minify it for optimal performance.

6. Delay JavaScript execution time

To optimize your JavaScript even further, you can delay its execution time. This involves telling the browser to only load the JavaScript after a user interacts with your content. Unless a visitor scrolls down the page or clicks on a button, these scripts won’t be processed.

Note: This could potentially have the opposite effect (while helping improve your LCP score) so you may want to try other tips in this article first. If you do proceed with this, check your score right away and determine if it’s improved before proceeding with other optimization tasks. 

To do this, you can use a plugin like Flying Scripts. With this tool, you can delay the execution of JavaScript files until there’s visitor activity on your site.

After you activate Flying Scripts, go to Settings → Flying Scripts. This will open the settings page for the plugin, where you can start implementing JavaScript delays.

Start by writing keywords that identify the scripts you want to delay. For example, you can use “gtag” for a Google Tag Manager script.

Then, you can implement a timeout. Essentially, this will execute the JavaScript when there has been no activity for a certain period of time. You can set a timer for up to ten seconds. Once you’re finished, click on Save Changes.

7. Implement a content delivery network

Another effective option for improving your First Input Delay is to use a Content Delivery Network (CDN). This is a group of connected servers that can distribute your online content to users across the world. 

When using a CDN, you can decrease the distance between your server and online visitors. This is because when someone visits your site, the content is delivered from the server that’s closest to their location. If you only have a single server in one location, it can take a long time to send data to international users.

Luckily, sites that utilize Jetpack already come with a free CDN. If you navigate to Jetpack → Settings → Performance, you can turn on the Site Accelerator.

Jetpack will optimize your images and static files. Unlike with other CDN providers, there’s no file limit. Plus, you won’t have to worry about extra monthly fees or a complicated management process. 

Frequently asked questions about First Input Delay

So far, we’ve looked at how First Input Delay works and how you can improve your score. Now, let’s look at some common questions about FID. 

How can I measure my WordPress site’s FID score?

You can easily measure your website’s First Input Delay score using a tool for Core Web Vitals. PageSpeed Insights is an easy-to-use option. All you have to do is enter your site’s URL and the tool will generate a detailed report on your site’s performance.

Google Search Console functions very similarly. After you verify that you own a website, you can view your FID report based on real-world visitor data.

You can also use Lighthouse. This tool gives you your site’s Total Blocking Time (TBT). Although this won’t display results from real visitors, it can give you a better understanding of your page responsiveness.

What is a good FID score?

Put simply, your site will fall into one of three scores:

• Good: 100 milliseconds or less
• Needs Improvement: ranges from 100ms to 300ms
• Poor: greater than 300ms

After you measure your FID score, any results over 100 milliseconds will require some adjustments. 

How can I easily optimize my FID score?

You can improve your FID score by optimizing the scripts on your website. Usually, complex JavaScript and CSS files will prompt a browser to stop loading until it processes them. By removing, deferring, or minifying scripts, you can boost your site’s speed.

Although you can use different tools for this process, Jetpack Boost can help you implement multiple solutions at once. Using this plugin, you can optimize your CSS structure and defer non-essential JavaScript.

Improve your first impression

When a new visitor interacts with your website, they expect their browser to respond quickly. If your site has a high First Input Delay (FID), it can cause users to leave the page without reading your content. By focusing on your site’s response time, you can improve the user experience and retain more visitors.

Your website can have a poor FID score due to heavy and inefficient JavaScript and CSS coding. Fortunately, you can easily identify these issues using a tool like Google’s PageSpeed Insights. Then, you can install a plugin like Jetpack Boost to minify or defer CSS and JavaScript.

Measuring a website’s user experience (UX) can be a tough challenge. But that’s what Google’s attempting to do with the Core Web Vitals metrics. And scoring well on these is important because Google weighs user experience when determining search engine rankings. 

There are several metrics that are part of Core Web Vitals, and they could sound a bit intimidating. The good news is that there are several tools that make it easier to understand your score and how to improve. 

In this article, we’ll look at one particular metric: Largest Contentful Paint (LCP). This measures how long it takes your website to show the largest element that you see on the screen. 

We’ll discuss how it impacts the user experience and what causes a poor LCP score. Then, we’ll show you how to improve it.

What is Largest Contentful Paint (LCP)?

LCP is a metric that measures how long it takes for the largest element on a page to render. For most pages, the largest element is a big image or a hero section at the top of the screen.

By itself, an LCP score helps you understand how quickly your site loads visual elements. Your page can continue to load scripts in the background without impacting this metric. In a nutshell, LCP scores only relate to media and text on a given page.

LCP is one of the three Core Web Vitals that Google uses to measure a page’s UX. The other two are:

1. First Input Delay (FID): FID measures how long it takes from the time a visitor takes their first action (clicking a link, for example) and when the site responds. 
2. Cumulative Layout Shift (CLS): This metric effectively measures the degree to which your site shifts when loading. Text might appear first, but then jump down the screen when an image loads, causing visitors to lose their place. 

As a rule of thumb, you want all three Core Web Vitals scores to be as low as possible. Low scores mean that a page loads quickly and smoothly. 

In terms of numbers, here’s what Google considers to be good, acceptable, and poor Core Web Vital scores:

Keep in mind that measuring page loading times is not the same as checking your website’s Core Web Vitals. Your site might load relatively fast, but it could have poor CLS or FID scores. Ideally, you’ll measure both overall loading times and Core Web Vitals to get an accurate assessment of your site’s performance.

How does LCP impact user experience on a WordPress site?

A poor largest contentful paint score means that your pages might be taking too long to load. Keep in mind that you need to measure Core Web Vitals on a page-by-page basis. While one page might have a poor LCP score, others may be just fine.

But generally, a site will see a trend in their LCP scores because results are often tied to optimization practices that are implemented site-wide. If a site has been created with no regard for best practices, every page will likely have a score on the low side. If a site has been carefully optimized, most pages will usually score pretty well. Thoughtful developers will identify pages that score below average and make specific adjustments to improve that page’s performance. 

Overall, a poor LCP score means that visitors might have to wait too long for your pages to fully load visually, and visitors don’t like waiting. If your pages take over two or three seconds to load, you can start turning around a lot of visitors.

It’s also worth noting that Core Web Vitals are a ranking factor in Google. Poor LCP scores can decrease rankings in the search engine results pages (SERPs), which means you’ll get less organic traffic. 

How to measure LCP scores

There are several tools that you can use to measure LCP scores. The simplest one is PageSpeed Insights. With this service, you can enter the URL for any page, and get a full report on its overall performance in a matter of seconds.

Once you enter a URL and click on Analyze, PageSpeed Insights will generate two reports for that page, one for mobile and the other for desktop performance. You can see your Core Web Vitals scores, including LCP, at the top of the report.

If you scroll down, the report also displays potential performance improvements that you can make for your website. For each suggested improvement, PageSpeed Insights gives you an estimate of the loading times that can be saved.

If you use Google Search Console, you can get access to the PageSpeed Insights reports without leaving the platform. And some WordPress plugins like Site Kit enable you to display Core Web Vitals scores right within the dashboard.

What causes a poor LCP score?

There are a lot of potential causes for a poor LCP score and long loading times. Usually, it comes down to issues with your server or a lack of optimization on your website. Let’s go over each potential cause:

1. Slow server response times. If your web host doesn’t offer good performance at the server level, there’s little that you can do to decrease your LCP scores. Slow server response times mean long waits for visitors —  even if your site is properly optimized. In this case, you might want to consider switching to a different WordPress hosting provider. 
2. Render-blocking JavaScript and CSS. In some cases, JavaScript and CSS scripts can prevent other assets on a page from rendering until they’re done loading. This is called “render-blocking” and it can increase your overall loading times.
3. Heavy files and images. If you use images with large file sizes, these may take a while to load. Ideally, you should compress and optimize the images you upload to your site.
4. Not leveraging browser caching. Browser caching saves a copy of your site’s static content in visitors’ browsers to speed up your load time for future visits. If you’re not leveraging browser caching, users will have to reload pages in full every time they stop by.
5. Not using GZIP or Brotli compression. These are software applications that compress HTTP requests and files at the server level. Most reputable web hosts should offer one of these right out of the box. Brotli tends to be more effective than GZIP, but either can improve your LCP score.

How to improve largest contentful paint in WordPress

There are several ways to reduce your WordPress website’s LCP score and improve its overall performance. Let’s take a look at the most effective methods. 

1. Use a plugin designed to help improve Core Web Vitals in WordPress

There are several plugins that are designed to help you improve your Core Web Vitals scores. One of the most powerful solutions is Jetpack Boost.

Jetpack Boost can help you implement multiple performance optimizations simply by toggling the corresponding settings. You can defer render-blocking JavaScript, enable lazy loading, and optimize CSS code within your website.

While using Jetpack Boost will help improve your LCP scores, it doesn’t mean that you should skimp on other performance optimizations. After enabling the plugin, we recommend that you also implement other strategies to improve your Core Web Vitals even further.

Learn more about Jetpack Boost here.

2. Minify your website’s CSS

When you work with code, it’s considered good practice to format it in a way that’s easy for other people to understand. This means using spaces, spreading the code over multiple lines, and structuring it in a way that makes it easier to read.

The problem with that approach is that every space and character takes up additional disk space. If we’re only talking about a few lines of code, that doesn’t have much of an impact. But when you’re dealing with dozens or hundreds of CSS files, each with hundreds of lines of code, those scripts can affect your website’s loading times and LCP scores.

One way to minimize the impact of CSS is to “minify” the code. This involves removing unnecessary characters and white spaces to reduce file size. To see how that works, here’s an example of some CSS code for styling several div elements:

div{

  border: 3px solid currentColor;

}

#div1{

  color: green;

}

#div2{

  color: blue;

}

Now, here’s how that code looks after you minify it:

div{border:3px solid currentColor}#div1{color:green}#div2{color:#00f}

Depending on the minification tool you use, it might also replace values with optimized alternatives. We mention minification tools because formatting code by hand takes too long and can lead to errors.

There are plenty of free minification tools that you can use on the web, including options like Toptal’s CSS minifier.

The free Jetpack Boost plugin can also handle this automatically for you. This allows you to simply toggle a setting rather than work directly with code or external tools.

3. Defer render‑blocking JavaScript and CSS

When you visit a website, it might not load resources in a way that reduces loading times as much as possible. In some cases, JavaScript files might cause your browser to wait until those scripts are finished loading before it continues to render other elements.

That render-blocking code increases your page’s LCP score. There are two ways to deal with this problem:

1. Eliminate render-blocking scripts.
2. Defer render-blocking scripts until other elements finish loading.

The second option is ideal if you’re handling code that your website needs for critical features. By deferring the necessary scripts, pages will finish visually rendering, and then the code will load in the background. As far as users are concerned, everything will load faster.

The easiest way to figure out what scripts block rendering is to use PageSpeed Insights. Every PageSpeed Insights report includes a section that covers recommended performance tweaks. 

After you run a test, look under the tab that says Remove render-blocking resources. Inside, you’ll see a list of JavaScript and CSS scripts that block rendering. This section will also give you an estimate of how much loading time you can shave off by deferring each one.

You can use the web.dev tool if you don’t mind editing code. Alternatively, you can once again turn to Jetpack Boost to defer render-blocking scripts. It handles multiple elements of improving Core Web Vitals all at once.

There are also several standalone plugins that defer render-blocking scripts and minify them. These include:

1. Autoptimize: You can defer render-blocking JavaScript and CSS, and enable image lazy loading for your website.
2. Fast Velocity Minify: This plugin can defer, minify, and combine JavaScript and CSS files on your website.
3. Hummingbird: This WPMU DEV plugin enables you to leverage browser caching, defer render-blocking scripts, and minify JavaScript and CSS. 

When dealing with plugins that can minify your website’s code, we recommend that you fully back up your WordPress site before activating them. That way, if the minification process breaks any core functionality within your website, you can revert to an earlier version without losing any data.

4. Optimize your site’s images

One of the main culprits behind poor LCP scores in WordPress is large image files. High-resolution images look amazing, but they also take up a lot of resources. If you’re dealing with large files and have multiple images in a single page, loading times can quickly spiral out of control.

The best way to solve this problem is to optimize your images. You can do this either before or after uploading them to WordPress. 

Optimizing images means converting them to a more efficient format or compressing them. Depending on the compression tool that you use, the process should have minimal impact on image quality, but it can greatly reduce file sizes and overall loading times.

Jetpack CDN is a great way to optimize your images, which you can enable directly in WordPress. It also automatically resizes images for mobile devices, speeding up your site across the board. 

If you want to optimize images before uploading them to WordPress, you can use free online tools like TinyPNG.

With TinyPNG, you can upload and optimize JPG and PNG files manually. The service compresses the images and then lets you download them to your computer. Afterward, you can proceed to upload the compressed images to WordPress.

5. Use a content delivery network (CDN)

A CDN is a service that provides you with access to data centers spread across strategic regions. These data centers store cached copies of your website and intercept connections for people who want to visit it.

A CDN automatically routes those connections to the data center that’s nearest each visitor. Since the site content has less distance to travel, the page will load faster. 

Moreover, CDNs are designed to serve requests as quickly as possible. This means that they usually load content much faster than the servers run by your hosting provider.

Services like Cloudflare offer limited free CDN plans that can cache a few of your site’s pages. Some managed WordPress web hosts offer built-in CDN integrations, so you don’t have to pay for a separate service. But if you use Jetpack, you also get access to a free, WordPress-specific CDN, which you can use to speed up images and website files.

Frequently asked questions about Largest Contentful Paint in WordPress

If you still have questions about how to measure and optimize your LCP score, this section will answer them. 

How can I measure my WordPress site’s LCP score?

Since LCP scores are part of the Core Web Vitals metrics, you need to use Google tools to measure them. Google offers three ways to measure your LCP score:

1. PageSpeed Insights: You can use this online service to measure any page’s Core Web Vitals on demand. When you analyze a page, PageSpeed Insights will also return suggestions for improving performance and overall UX.
2. Google Search Console: This service enables you to monitor your website’s search engine optimization (SEO) and overall health. Google Search Console also includes built-in recommendations and scores from PageSpeed Insights.
3. Lighthouse: You can use this Chrome extension to get access to advanced features when using the browser’s dev tools.

Google also offers an official plugin called Site Kit that you can use to access several of its services from within WordPress. With Site Kit, you can get access to PageSpeed Insights reports, including LCP scores, without leaving the dashboard.

What is a good LCP score?

According to Google, anything below 2.5 seconds is a good LCP score. Even if your website does meet that criteria, it doesn’t mean you shouldn’t optimize it further.

Ideally, you’ll want to reduce website loading times as much as possible. If you can aim for overall loading times of less than one or two seconds, you can offer a much better user experience.

How can I easily optimize my LCP score on WordPress?

The easiest and quickest way to optimize your LCP score on WordPress is to install Jetpack Boost. This plugin will also help you improve your other Core Web Vitals scores, including First Input Delay and Cumulative Layout Shift. 

Start by installing and activating Jetpack Boost on your site:

Then, navigate to Jetpack → Boost in your dashboard. Here, you’ll see options for optimizing CSS loading, deferring non-essential JavaScript, and activating lazy image loading. We recommend that you enable all options. 

Enabling lazy loading is a great way to improve your website’s LCP scores. WordPress includes lazy loading as a built-in feature, which works automatically.

By deferring the largest elements on every page, your LCP score should improve immediately.

Improve your website’s Core Web Vitals

Improving your website’s Core Web Vitals can help you offer a better user experience. LCP scores, in particular, greatly affect how happy visitors are with your site’s performance. A low score means that your website loads fast, and a fast-loading website means fewer frustrated visitors.

Let’s recap the most effective methods that you can use to improve your LCP score in WordPress:

1. Use a plugin designed to help improve Core Web Vitals.
2. Minify your CSS.
3. Defer render-blocking JavaScript and CSS.
4. Optimize your website’s images.
5. Use a content delivery network.

With Jetpack Boost, you can quickly optimize your website’s Core Web Vitals, including its LCP scores. Jetpack Boost enables you to implement multiple performance optimizations simply by toggling their corresponding settings. Plus, it’s free and works seamlessly with the rest of the Jetpack family of tools.

One of the hallmarks of a user-friendly website is that it doesn’t keep visitors waiting too long while loading. Caching static assets is a critical step to improving site performance, but it doesn’t help much to simply set this up and move on. Without an efficient WordPress caching policy, you might struggle to provide fast loading times.

Fortunately, learning how to leverage browser caching on WordPress is easier than you might think. You can configure browser caching manually, and the Content Management System (CMS) also enables you to use tools that do it for you.

In this article, we’ll explain how browser caching works and discuss its benefits. We’ll also show you how to check if caching is enabled on your site and look at different ways to turn it on. 

What is browser caching?

Browser caching is a process that saves copies of a website’s elements on your computer. When you visit a website, your browser downloads different pieces of content, like images and text. Instead of downloading this content every time you visit the site, your browser “caches” or stores some of it in case you need it later.

The next time you visit the site, your browser will check what elements are stored locally. It will then load these elements from the cache instead of requesting them from the site’s server. This can make the page load significantly faster, depending on the number of assets that are stored in the cache. 

If you had to check your browser’s cache right now, you’ll likely find a few hundred megabytes of files inside it. Most modern browsers enable you to see an overview of cached files if you go into the privacy settings.

The thing about caching is that a browser can’t decide to do it on its own. To leverage browser caching in WordPress, you’ll need to configure your website or server to do so. This means that your site controls which assets the browser caches and for how long.

What are the benefits of caching static assets?

The primary benefit of browser caching is that it can help visitors load pages faster upon returning to your site. We talk about “static assets” because it’s not possible to cache every element on a website.

Dynamic assets are elements that change every time you load a page. For example, if you log into an app that shows you a post feed in real time, like Twitter or Instagram, those assets are dynamic.

Since dynamic assets can change frequently, caching them might not serve any purpose. After all, the next time you log into Twitter or Instagram, you’ll see entirely new posts. 

Caching provides the best possible results when it’s limited to static assets. Learning how to serve static assets with an efficient cache policy in WordPress can have several benefits:

• Reducing bandwidth usage. Since cached assets are loaded from local storage, there’s less data being transferred between the server and the visitor’s device. This helps visitors with limited internet plans save on data usage.
• Decreasing the load on your server. When browsers use cached assets, the server receives fewer requests for those files. This reduces the server’s workload and can help prevent server overloads during periods of high traffic.
• Enabling partial offline browsing. In some cases, caching static assets can enable visitors to access certain parts of a website even when they’re offline. If the browser has previously cached the necessary files, it can display the content without needing an active internet connection.

Caching static assets enables you to make better use of server resources and improve the experience for visitors. All of this works by instructing your server on what assets it should tell browsers to cache.

How to check if browser caching is enabled on your site

The easiest way to check if a website leverages caching is to use browser developer tools, like the ones you find in Firefox and Google Chrome. This approach requires you to look at some code, but you don’t need to be a developer to understand it.

To do this in Google Chrome, visit the website you want to check, right-click anywhere on the page, and select the Inspect option. This will open the developer tools tab within the browser, which should look like this:

Click on the Network tab. If you see an empty list, you’ll need to reload the page with the developer tools tab open. The Network tab will display all the requests and assets the browser loads while accessing the page.

The element we’re interested in should be the first on the list. In our case, it’s Jetpack.com, and it contains the page’s headers. Select that file, and it will open a new tab to the right, jumping straight into the Headers section.

Some headers will tell us whether the site uses caching and how it’s implemented. These are:

• Cache-Control. This header specifies caching directives, like max-age (the maximum time a resource is considered fresh) or no-cache (forces caches to submit the request to the origin server for validation before releasing a cached copy).
• Expires. This header provides an expiration date and time for the resource. After this, the resource is considered stale, and the browser will revalidate it.
• ETag. This header is an identifier for a specific version of a resource. When the resource changes, the ETag changes as well, allowing browsers to determine if a cached resource is still valid.
• Last-Modified. This header indicates the last modification date of the resource. Browsers can use this information to validate if their cached version is still up-to-date.

If you can find these headers in the file, then the website uses caching. Keep in mind that specific caching configurations can vary from site to site. Some sites might tell browsers to store static files for a day, whereas others will tell them to store files for months or longer periods.

How to leverage browser caching with a plugin

The easiest way to leverage browser caching on a WordPress site is by using a plugin. There are a lot of caching plugins you can use. One great option is WP Super Cache.

Once you’ve installed and activated WP Super Cache on your site, you can implement caching using several approaches. The simplest way is to go to Settings → WP Super Cache and select the Caching On option next to Caching.

The plugin’s default settings enable caching for logged-out visitors and set a lifetime of 30 minutes for stored assets. If you want to change these settings, you’ll need to go into the Advanced tab. 

Here, you can decide which visitors to enable caching for, whether to enable dynamic caching, if the plugin should clear the cache when you update pages, and more. The plugin helps you out by recommending the most effective options.

If you don’t have a firm grasp of caching, you might want to stick with the default settings. Configuring caching settings without fully understanding how they work can lead to problems with your website.

How to leverage browser caching without a plugin

If you don’t want to use a plugin, you can enable browser caching on your website manually. This process might involve dealing with code at the server or at the site level, depending on the implementation method that you choose. 

1. Add “Cache-Control” and “Expires” Headers in NGINX

To add “Cache-Control” and “Expires” headers in NGINX, you’ll need to modify the server configuration file. This file is usually called nginx.conf, and it’s located in the main nginx directory.

The easiest way to connect to your site’s server is to use a File Transfer Protocol (FTP) client. Then, you’ll need to locate the nginx.conf file, which should be in either 

/etc/nginx/nginx.conf or /etc/nginx/sites-available/default. 

Open the file using a text editor and look for the server block of code within nginx.conf. Here, we’re going to add the following new block of code, which specifies what files the server should tell browsers to cache and how long that cache should last before it expires:

location ~* \.(jpg|jpeg|png|gif)$ {

    expires 30d;

    add_header Cache-Control "public, no-transform";

}

This code includes both the “Cache-Control” and “Expires” headers. You can modify both the expiration time range and the file types that browsers should cache.

If you can’t decide what types of files to cache, take a look at what’s in your WordPress media folder. Any static files that visitors access regularly should be cached. As for the expiration header, 30 days is generally a good timeframe for most websites.

Once you add the code, save the changes to the file and exit the editor. You’ll need to restart NGINX to apply the changes.

2. Add “Cache-Control” and “Expires” Headers in Apache

Using “Cache-Control” and “Expires” headers in Apache requires you to enable their corresponding modules. You can enable these modules by opening the terminal and running the following commands:

sudo a2enmod expires

sudo a2enmod headers

sudo systemctl restart apache2

The final command will restart Apache with both modules active. Next, you’ll need to modify the Apache configuration file, which is usually called either httpd.conf or apache2.conf. 

You can find this file in either /etc/httpd/conf/httpd.conf, /etc/apache2/apache2.conf, or 

/etc/apache2/sites-available/000-default.conf, depending on the server configuration.

Then, look for the <Directory> block within the Apache configuration file and add the following code inside it:

<IfModule mod_expires.c>

    ExpiresActive On

    ExpiresDefault "access plus 1 month"

    ExpiresByType image/jpg "access plus 1 month"

    ExpiresByType image/jpeg "access plus 1 month"

    ExpiresByType image/gif "access plus 1 month"

    ExpiresByType image/png "access plus 1 month"

</IfModule>

<IfModule mod_headers.c>

    <FilesMatch "\.(jpg|jpeg|png|gif)$">

        Header set Cache-Control "public, no-transform"

    </FilesMatch>

</IfModule>

The first part of that code governs the expiration settings for cached files. The second part indicates what file types browsers should cache. As with NGINX, you can modify these settings depending on the files you want browsers to store.

When you’re done, save the changes to the Apache configuration file and close it. You’ll need to restart Apache for the changes to take effect.

3. Use a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a network of servers that you can use to store cached copies of your website in key regions. CDNs tend to be paid services, and they help by serving cached copies of your site from the server that’s geographically closest to the visitor.

This approach lessens the load on your own servers. Moreover, CDNs tend to be optimized for top-of-the-line performance and are typically distributed across the globe, so they can serve websites from the best possible location for each visitor.

Jetpack CDN is an option that integrates seamlessly with WordPress, is easy to use, and highly effective.

Best of all, it’s a free CDN that stores images and other types of static assets from your website. Once you install and activate it, you can enable the CDN by going into Jetpack → Settings in the WordPress dashboard. 

Then, locate the Performance & Speed settings and toggle the Enable site accelerator option.

4. Host third-party scripts and assets locally (whenever possible)

Third-party scripts are elements like code from external sites, tracking pixels, fonts, and other assets that require loading to work. The more scripts and assets you load from third-party sources, the longer the process will take, which can slow down your site.

Ideally, you should look to eliminate any third-party scripts and assets you don’t use. Alternatively, you can host code and assets on your local server to reduce loading times.

You can identify third-party scripts, as well as unused JavaScript, using PageSpeed Insights. This tool highlights opportunities for improving site performance, including lists of unused code and third-party scripts that can be removed from your pages.

You can safely delete any unused third-party scripts on your website. For important scripts, you may want to consider the option of hosting them locally. 

Final step: Install a free plugin to improve Core Web Vitals

Learning how to leverage browser caching in WordPress is a key step to improving site performance. Fortunately, it’s not the only thing you can do to make the user experience better.

Google measures the quality of a site’s user experience with a set of metrics called Core Web Vitals. Key performance metrics include:

• Largest Contentful Paint (LCP). This metric measures how long it takes to load the largest asset on a page. Typically, it’s a good indicator of a page’s overall loading time.
• First Input Delay (FID). There is a delay between loading a page and it becoming interactive. You might think a page is done loading, but if it doesn’t enable you to interact with elements like forms or links, it might have a high FID.
• Cumulative Layout Shift (CLS). While a page is loading, its layout can shift, moving elements around on the browser. The more elements there are moving around, the higher the CLS score is. Ideally, this should be zero.

There are a lot of ways to improve Core Web Vitals in WordPress. The easiest approach is to use a plugin that optimizes all the variables behind these metrics.

Jetpack Boost can help you implement several strategies to improve Core Web Vitals. You can optimize CSS delivery, defer non-essential JavaScript, and enable lazy loading.

Typically, you would need to use multiple plugins to implement these configurations or do so manually. After you install and activate Jetpack Boost, you can simply enable every setting by navigating to Jetpack → Boost and toggling the corresponding options.

Frequently asked questions about WordPress browser caching

While we’ve covered the essentials of browser caching in WordPress, you may still have some questions about the process. Let’s look at some of the most common ones. 

Is browser caching secure?

Browser caching is very secure. Most of the websites you visit probably use some type of caching policy to improve performance for visitors. As a visitor, you won’t even notice it unless you go digging into the website’s headers, or you need to clear the cache.

The only way in which browser caching might not be secure is through bad implementation. If it’s not configured properly, browsers won’t be able to store assets the right way, or a page might fail to load (although this is very rare).

Browser caching vs. server caching: How do they differ?

Browser and server caching work very similarly. The only difference is that one method stores files locally, whereas the other does it on the server side.

The best example of server caching in action is a CDN. With CDNs, you can store cached copies of your site on a third-party server (or a cluster of them). When visitors try to access the website, the CDN intercepts that connection and serves the stored copy of the site.

In that scenario, visitors can still cache static content through their browsers. The experience for end users shouldn’t change in any way, except that CDNs often deliver much better loading times than traditional servers.

What else can I do to improve my site’s performance?

There are a lot of things you can do to improve your site’s performance (beyond leveraging browser caching). Some other changes you can make include eliminating render-blocking resources, minifying CSS, using a CDN, making fewer HTTP requests, and reducing TTFB and server response times.

When it comes to site performance, some changes are more effective than others. Improvements in loading times can have a significant impact on the user experience, which can lead to a higher conversion rate for your business.

Start serving static assets on your WordPress site

Leveraging browser caching in WordPress is one of the most effective ways to improve loading times. An efficient strategy will focus on static files and configure them to reload periodically. This way, visitors aren’t stuck with outdated elements.

The easiest way to implement browser caching in WordPress is by using a plugin like WP Super Cache. This plugin enables you to leverage browser caching using a set of default configurations or control every setting manually. Plus, it’s free to use.

Additionally, when you install Jetpack Boost, you can further improve your site’s performance. Check out the plugin to learn more!

Time to First Byte (TTFB) and server response times are metrics that directly correspond to your website’s perceived speed and overall performance. Optimizing your site to minimize these times can help improve Core Web Vitals scores and, consequently, edge out stiff competition for search engine ranking positions. This also helps you provide the best possible user experience for your site visitors.

Working on these metrics might sound complicated, but there are plenty of ways even beginners can reduce TTFB and server response times on WordPress. For instance, you can install optimization plugins, use a Content Delivery Network (CDN), or migrate to a faster web host.

In this post, we’ll take a closer look at TTFB and why it’s important. Then, we’ll discuss six ways to reduce your TTFB and server response times. 

What is Time to First Byte (TTFB)?

To put it simply, Time to First Byte (TTFB) refers to the time that passes between when you click on a web page to when your browser first starts to receive a response. In more technical terms, TTFB measures how long it takes for the server to deliver the first byte of data as a result of an HTTP request.

This process begins with an HTTP request which needs to be received by the server. The speed of this stage depends on a few factors, including the speed of the network, the distance between the client and the server, and any interruptions that might occur.

Next, the server has to process the request. This might involve running scripts, making database calls, and communicating with other network systems. Lastly, the server will deliver a response. This can be affected by the speed of the server and the user’s internet connection. The longer these stages take, the longer it takes for your page to display.

How does TTFB impact the user experience on a WordPress site?

Time to First Byte affects your overall page speed, so keeping it low can contribute to a positive user experience. And visitors are pretty demanding — when page speed increases from just one to three seconds, the probability of people leaving your site increases by 32 percent.

Since page speed is important for keeping users engaged, a good TTFB score can help you generate leads, score conversions, and make sales.

Improving your TTFB can also help you improve Core Web Vitals like Largest Contentful Paint (LCP), First Contentful Paint (FCP), and Cumulative Layout Shift. 

And since Google uses both speed and Core Web Vitals as ranking factors, a better TTFB can contribute to higher search engine results and, ultimately, help you increase organic traffic.

What causes a high Time to First Byte?

From overloaded servers and discount hosts cutting corners to more positive problems like a huge spike in the popularity of your site, there are a number of things that can contribute to high TTFB times. These include: 

• A slow server. Your server might not be optimized for WordPress, or you might be on a shared server where you have to compete with other websites for resources. 
• Servers that are located in just one area. This can cause a high TTFB score for visitors who reside farther from the data center. This is because the further away people are from your server, the higher the network latency and the longer the wait times.
• A configuration issue with your server. In this case, you’ll need to contact your web host to see what they can do.
• Server saturation. If there’s too much traffic on your website, your server won’t be able to handle the number of requests. This can be quite common if you have a basic hosting plan and experience sudden, rapid growth. 
• Slow DNS response times. Most people stick with the Domain Name System (DNS) provided by their web host. But, typically, hosting providers don’t spring for a premium DNS, which can lead to slow server response times and high latency.
• Unoptimized content. Huge files, lots of database queries, and other types of unoptimized content can result in high TTFB. 

How to improve server response times (TTFB) on WordPress (Six Ways)

Now that you know why TTFB is important, let’s take a look at six simple ways to reduce TTFB and server response times.

1. Optimize for Core Web Vitals 

If you’re not happy with your TTFB score, the best place to start is by installing a plugin that targets an improvement in Core Web Vitals. These are separate metrics that Google uses to determine site performance and user experience. While this could potentially improve your TTFB, it will also improve the visitor experience overall and compensate for any harm done by a low TTFB score.

With Jetpack Boost, you can optimize your Core Web Vitals and the overall speed of your website.

Developed by Automattic (the company behind WordPress.com), Jetpack Boost is free, open-source, and beginner-friendly. It’s a powerful optimization tool that enables you to improve SEO and Core Web Vitals, targeting specific metrics like LCP and FCP.

To get started, all you need to do is install and activate the plugin in WordPress. Go to Plugins → Add New. Then, you can search for “Jetpack Boost” and click Install now → Activate.

If you have the Jetpack plugin, you can also add Jetpack Boost as a feature. 

Once you’ve activated the plugin, you’ll get an instant performance score for desktop and mobile. There are also several features you can take advantage of.

To get started, your only decision is what toggles to activate. You can: 

• Optimize CSS loading. This ensures that your important styling information loads first.
• Defer non-essential JavaScript. This is a great way to speed up content delivery since you’ll be able to load images and styles more quickly. 
• Turn on lazy image loading. With this feature enabled, your images will only load as they appear on the screen, rather than a browser rendering all the images on a page at once.

2. Use a Content Delivery Network (CDN)

Another easy way to reduce TTFB and server response times is to add and use a Content Delivery Network (CDN) in WordPress. CDNs are a cluster of servers, located at strategic locations to speed up the delivery of static content like images and scripts.

CDNs enable you to eradicate the issue of latency and improve your loading times. For instance, your web host’s servers might be in the United States, but you may have lots of visitors based in Europe.

In this instance, TTFB will likely be high for your European visitors since they’re located far away from the server. To combat this, you can use a CDN that uses multiple servers, including one that’s closer to your visitor’s location.

There are a number of CDN providers, but Jetpack CDN is the ideal choice for WordPress.

Jetpack CDN is beginner-friendly and doesn’t involve any complicated configuration or installation steps. Better yet, it’s free, it’s automatic, and there’s no cap on the number of static files you can serve through the CDN. Additionally, Jetpack CDN takes extra measures to improve loading times by automatically resizing images for mobile devices.

While CDNs are a great way to reduce TTFB and server response times, they also enable you to stabilize your site. For example, if one of your web host’s servers goes down, you can continue serving content from the CDN. In fact, even if the entire data center crashes, you can rely on CDNs to keep your website available.

3. Leverage page caching 

Page caching speeds up your website’s loading times, but it also reduces the server processing time. This targets the middle part of the TTFB process. 

Without caching, WordPress has to execute PHP and MySQL queries every time a new request is made. This can be a time-consuming process. 

So instead, you can use caching to generate HTML files directly, rather than generating them from PHP every time. As a result, it takes much less time for you to display your pages to visitors. 

Some web hosts like DreamHost offer built-in caching with their managed WordPress hosting plans. If this is the case, you may just need to reach out and ask the host to activate it for you. 

Otherwise, there are plenty of free plugins you can use to add caching to your site, like WP Super Cache. This plugin is suitable for all kinds of users. 

If you’re comfortable editing PHP files, you can use the Expert caching method, which is the quickest available.

Or, beginners can stick with the Simple caching mode, which enables you to keep portions of your page dynamic. 

What’s more, you can schedule Garbage Collection at regular intervals to free up space on your server. Meanwhile, you can activate Preload Mode to conserve resources while serving static content at fast speeds.

4. Migrate to a faster web host 

If you’re not happy with your current performance, and you think your host’s servers may be to blame, you can migrate to a new web host or server to reduce TTFB. Even if you’re on a budget, you should still prioritize choosing a quality WordPress host with reliable service.

Shared hosting is usually the cheapest option. Meanwhile, dedicated hosting sits at the pricier end of the scale. That’s because, with shared hosting, your website will be on a server with many other websites. So, response times can be slow, and your server is less equipped to handle sharp traffic spikes. 

It can be best to opt for a managed WordPress package. The servers used for these plans are optimized specifically for WordPress, and you’ll likely get some sophisticated built-in features for fast performance.

Some quality web hosts even give you the option to automatically minify CSS or JavaScript code, which is a quick and easy way to improve your site’s performance. But fancy features aren’t the only important factor to consider.

Before you make a decision on hosting, it’s a good idea to find out where your host’s servers are located. If most of your customers are based in Europe, it isn’t ideal to choose a web host with data centers scattered around the United States.

On top of that, it’s important to make sure your host’s plans are scalable. For instance, if you’re expecting your business to grow rapidly, your host should easily be able to scale up your resources. This way, you’re able to maintain a good TTFB score and enjoy fast server response times.

5. Use the latest PHP version 

Another way to reduce TTFB on WordPress is to make sure you’re running the latest PHP version. Hypertext Preprocessor (PHP) is the programming language that WordPress is built upon. 

With each new version of PHP, you can access tighter security measures that reduce the possibility of hacking attempts. But, you can also access new features that expand the functionality of your site or improve its performance. 

For example, the more advanced versions of PHP can handle more requests per second. Therefore, to reduce TTFB and server response times, you can check and update your website’s PHP version. 

It’s important to make sure you’re running the latest versions of all software on your site, including themes and plugins. This way, you can strengthen your site’s security and improve overall performance. 

To do this, head to Dashboard → Updates.

Here, you can view any updates that are available. You can also enable automatic updates for WordPress security releases. Plus, if you scroll further down, you can see whether there are updates available for any plugins and themes on your site.

If there are, simply check the box besides the software you want to update. Then, click on Update. Keep in mind, it’s always a good idea to make a fresh backup of your site before running updates in case something goes wrong. 

6. Use a premium DNS provider 

Upgrading your Domain Name System (DNS) provider is another easy way to reduce TTFB and server response times on WordPress. Even though some web hosts offer a DNS, most don’t give you access to a premium provider.

DNS works by translating domain names into computer-friendly IP addresses so that browsers can load internet resources like web pages. The process takes place automatically as far as the user is concerned, so it’s not something you need to actively initiate.

Premium DNS providers tend to use a global network of DNS servers, enabling you to answer DNS queries with low latency. This way, you can serve content more quickly, improving SEO and Core Web Vitals. 

To take things up a notch, you can even enable DNS prefetching on your site. With this, you can instruct the browser to perform DNS lookups on a page while the user is browsing.

Frequently asked questions about TTFB

Although we’ve tried to provide an in-depth look at how to reduce TTFB and server response times, you might still have some questions. In this section, we’ll answer the most common questions concerning TTFB.

How can I measure my WordPress site’s TTFB score?

Before you start implementing tips from this post, you can measure your site’s current TTFB using some handy tools. PageSpeed Insights is your best bet, since it’s free, fast, and easily accessible. All you need to do is enter your site’s URL and click on Analyze.

Then, you’ll receive a Core Web Vitals assessment for desktop and mobile. Here, you can see clear scores for each of the metrics including Total Blocking Time and FCP. Below this, you’ll also find diagnostics information and advice on how to improve your accessibility rating.

Google Search Console (GSC) is another useful tool to measure TTFB. But, to get started with GSC, you’ll first need to create an account.

Alternatively, you can use Lighthouse, which you can run in Chrome DevTools from the command line or as a Node module. This way, you can access an advanced page audit and generate a free report to improve the quality of your web pages. 

This audit will include an assessment of plenty of useful metrics including TTFB and Time to Interactive (TTI).

What is a good TTFB score?

According to Google, most websites should aim for a TTFB score of 0.8 seconds. Anything over 800 milliseconds (ms) needs improvement. Scores above 1800 ms are considered very poor. If this is the score you receive, you should take steps to reduce your TTFB right away.

How can I easily account for a low TTFB score?

The best place to start is with a free plugin like Jetpack Boost. Not only is this method the most beginner-friendly, it’s also super quick to set up. It works automatically in the background of your site and requires very little configuration. 

It works to improve the overall performance of your site and your Core Web Vitals score, immediately going to work to counteract a poor TTFB result. 

Plus, you can target important Core Web Vitals straight from your WordPress dashboard. To get started, head to Plugins → Add New in WordPress. Then, search for “Jetpack Boost.” Click install now → Activate.

Then, from your WordPress dashboard, visit Jetpack → Boost to view your performance score. This is also where you can tweak settings to boost your Core Web Vitals and improve SEO. For example, you can enable Lazy Loading so that your images only load when they’re needed. 

Additionally, you can defer non-essential JavaScript to prioritize the loading of styles and images. The plugin is super simple to use, and if you change your mind about one of the settings, you only need to return to this page and use the toggle to disable the feature. 

Reduce TTFB and server response times now

If you’re looking to improve the user experience and boost your Core Web Vitals, you might want to reduce Time to First Byte (TTFB). Fortunately, there are tons of ways to reduce server response times and power up the performance of your WordPress website. 

To recap, here are six ways to improve your site performance, TTFB, and server response times:

1. Install an optimization plugin like Jetpack Boost.
2. Use a Content Delivery Network like Jetpack CDN.
3. Leverage page caching.
4. Migrate to a faster web host.
5. Use the latest PHP version.
6. Use a premium DNS provider.

No matter your site, you can always benefit from a quick boost in performance. If you’re on WordPress, that power comes in a handy plugin. Get Jetpack Boost today!

Using web fonts, CSS, and JavaScript can make your website more unique and interactive. But waiting for these file types to load can be frustrating for your site’s visitors.

This is where preloading key requests in WordPress can come in handy. By telling browsers to download these file types earlier in the request chain, they’ll be on hand when the browser is ready to render the content. In turn, this can speed up your perceived page load time and provide a better overall web experience. 

In today’s guide, we’ll discuss what preloading key requests means, along with the potential performance benefits for your website. Then, we’ll explain how to do this on your WordPress site with Google Fonts, Font Awesome, CSS, and JavaScript.

What does “preload key requests” mean in WordPress?

When someone visits your website, their browser will send multiple HTTP requests to your site’s server, asking it for the files that make up your content. The server will take a certain amount of time to start responding to these requests and sending information to the browser, which is referred to as the Time to First Byte (TTFB). 

Next, the browser will start downloading content (PHP, JavaScript, and CSS) from your site files and rendering it to display viewable pages (HTML) on the front end. Once this process has been completed, the visitor can see your fully-loaded webpage.

A browser will use a ‘request chain’ to ask for and render content in a sequence. That means there are multiple steps of smaller requests within the larger ones, with the end result being that a visitor can view the content on your site.

Essentially, ‘preloading’ means telling a user’s browser to download essential files first instead of waiting until the end of the loading process. These are typically fonts (particularly web fonts), CSS, JavaScript, and sometimes images. 

Key requests are unique because your browser wouldn’t typically request these files until later in the loading process. So, there will be a delay when the browser gets to that point and discovers that it must request the files. By telling the browser to load these files first, it will have them handy when it needs to render them.

What are the benefits of preloading key requests?

The main benefit of preloading key requests is improving the perceived performance of your site. This means that a user’s browser can render your content more quickly, and visitors will feel like your site is faster. But, your site is really just preloading essential content to make it appear that way.

Furthermore, preloading requests is essential to your Core Web Vitals scores. These Google metrics measure your site’s loading performance, interactivity, and visual stability, giving you a score that signifies your website’s overall user-friendliness.

These are the three Core Web Vitals:

• Largest Contentful Paint (LCP): How long it takes for the largest element on your page to load. 
• First Input Delay (FID): How long it takes for the browser to respond to user interaction with your content. 
• Cumulative Layout Shift (CLS): How much the elements move around while the page is loading. 

In particular, preloading key requests can have a significant impact on your LCP score. By preloading images, fonts, and other large files, you’ll be able to reduce the time it takes for them to render. 

Additionally, preloading can affect your First Contentful Paint (FCP) score. This metric measures how long it takes for the first HTML element on your page to be displayed. If you can preload that element, the browser will be able to show the initial parts of your content more quickly. 

What’s more, search engines, like Google, favor fast-loading and interactive content. Therefore, beyond providing a better user experience, improving these performance metrics can boost your website’s Search Engine Optimization (SEO). 

Essentially, performance improvements can help push your site’s pages up in the rankings and get your content in front of more users. Plus, preloading key requests is relatively easy. Later on in this post, we’ll show you exactly how to do it!

Are there disadvantages of preloading key requests?

Preloading requests might sound like a great idea from a performance perspective. That being said, trying to preload too many elements can work against you.

A browser can only process so many requests at once. So, if you tell it to preload multiple elements, it could create a ‘bottleneck’ that works against your site’s page load time.

Therefore, it’s worth carefully choosing which elements should be preloaded for the greatest impact. In most cases, these will be web fonts, CSS, and JavaScript, since these tend to be the heaviest files. 

How to check if your site is preloading key requests

A couple of different tools can identify whether your site is preloading requests and suggest elements that could benefit from this optimization technique. For example, PageSpeed Insights is one of the most popular options for identifying performance problems on your website. 

To use this free tool, simply enter your site’s URL and click on Analyze. This will generate a detailed performance report.

Scroll down to see the performance opportunities, diagnostics, and passed audits. You should be able to find the Preload key requests suggestion in one of these sections.

If you prefer not to navigate back and forth between your site and PageSpeed Insights, consider installing the Google Lighthouse Chrome extension. It enables you to generate reports from within the browser and view a page’s performance metrics.

Similarly, GTMetrix can generate detailed performance reports for any site. It lets you analyze pages from multiple locations and track their performance over time. 

Under GTMetrix’s Structure tab, you’ll be able to see whether preloading key requests could help your site’s performance.

How to preload key requests in WordPress

Before making any significant changes to your WordPress site, like adding custom code, it’s always worth making a complete backup. This safety precaution means you’ll have a functional version of your website on hand if you make any mistakes.

This is where Jetpack VaultPress Backup comes in handy. This user-friendly plugin automatically creates comprehensive backups of all your data, including its files, database tables, and WooCommerce product information. These backups are saved in real time and stored securely in the cloud. You can restore them in just a few clicks — even if you’re on the go or can’t access your site at all.

1. Fonts

Sometimes, fonts can get buried within other files on your website, including CSS and JavaScript files. Unfortunately, this can slow down the page rendering process.

To preload requests with fonts in WordPress, copy and paste this code into the <head> section of your page:

<head>

 <!-- ... -->

 <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin>

</head>

Remember to substitute “Font-Name” for the name of your font. Furthermore, including “crossorigin” is essential if your font comes from a third-party source because it tells the browser that it needs to load the file from an external server. 

2. Google Fonts

Google Fonts includes an open-source library of nearly 1500 font families. If you’re looking for custom web fonts to use on your site, you can likely find one there.

Using Google Fonts can help bring a unique design to your site, but the browser must also download the font files when rendering the content. Depending on your font, this can increase your page load time.

When preloading Google Fonts, it’s also a good idea to ‘preconnect’ them first. This step tells the browser in advance that it will need to connect to a third-party site (e.g., Google Fonts) to retrieve a resource. 

Additionally, after adding your preloading code, it’s worth including a link to its stylesheet. That way, if your user’s browser is unable to preload the font in question, it will still be able to render it.

Simply add the following code to the <head> section of your page:

<link rel=”preconnect”

      href=”https://fonts.gstatic.com”

      crossorigin />

<link rel=”preload”

      as=”style”

      href=”$fontURL&display=swap” />

<link rel=”stylesheet”

      href=”$fontURL&display=swap”

      media=”print” onload=”this.media=’all'” />

<noscript>

  <link rel=”stylesheet”

        href=”$fontURL&display=swap” />

</noscript>

Within your code, you’ll need to substitute “$fontURL” for a link to your Google Font. For instance, it might look like this: 

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

Then, just make sure to save your edits!

3. Font Awesome

Font Awesome is a great resource for custom icons and fonts, with both free and premium options within its library. You might use some of these icons to supercharge the design within your menus, headers, footers, and content areas. 

Like Google Fonts, preloading Font Awesome icons can be a good idea for speeding up the perceived page load time. Just add this code to the <head> section of the page:

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

<link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

You’ll need to swap out the file path for the font or icon you’re using on your website. Then, save your changes!

4. CSS 

Cascading Style Sheets (CSS) is a design language that works together with HTML to determine a web page’s style and presentation. With custom CSS, you can quickly change the appearance of different elements.

Each styled HTML page on your website will have a corresponding stylesheet with all of your CSS. A browser needs to load this file when rendering a web page, so it’s worth telling the browser that it should preload this resource.

Fortunately, there’s an easy way to preload CSS. Simply add this code to the <head> section of your page: 

<head>

  <link rel="preload" href="styles.css" as="style" />

</head>

Make sure to substitute “styles.css” for the name of the stylesheet. Additionally, keep in mind that while this code will work in Google Chrome, it isn’t supported by all browsers.

5. JavaScript

JavaScript is another one of the common scripting languages used in WordPress. It lets you create dynamic content like animations, moving carousels of images, and automatically-updating feeds. 

Rendering JavaScript is typically more complex because its files are comparatively heavy, requiring a longer process to display content. That’s why telling a browser to preload heavy JavaScript can be beneficial for speeding up page load time.

Like with CSS, you’ll just need to add this simple line of code to the <head> section of the page:

<head>

  <link rel="preload" href="ui.js" as="script" />

</head>

As before, substitute “ui.js” for the name of the JavaScript file, and save your changes. 

Bonus: Install a free plugin to improve Core Web Vitals

Preloading requests is just one technique you can use to improve your WordPress site’s Core Web Vitals scores.

If you’re looking for a more comprehensive (and free!) solution, consider installing Jetpack Boost. This tool is developed by Automattic, the same company behind WordPress.com.

This user-friendly plugin scans your entire website and gives you a score on desktop and mobile devices. Furthermore, Jetpack Boost isn’t just useful for the three Core Web Vitals. Its optimization methods can improve other metrics, including Time to Interactive (TTI) and Total Blocking Time (TBT). 

You’ll be able to use a simple toggle system to optimize CSS loading, defer non-essential JavaScript, and lazy load images. The premium version of the plugin will also automatically generate critical CSS whenever you make changes to your website.

Alternatively, Jetpack Complete can take your WordPress site to an entirely new level. This plan contains multiple tools for performance, including access to Jetpack’s image Content Delivery Network (CDN), which can both save bandwidth and improve your page load time. Plus, you’ll get advanced WordPress security and growth tools. 

Frequently asked questions about preloading key requests

At this point, you should have a good understanding of how to preload key requests in WordPress. Still, we’ll go over some frequently asked questions just to be sure!

Does preloading requests improve user experience?

Preloading requests can improve the user experience by decreasing your site’s perceived loading times. Since visitors won’t have to wait as long for your content to render, they’ll be less likely to feel frustrated and potentially leave your website for a different one. 

Does preloading requests improve Core Web Vitals?

Preloading key requests in WordPress can improve your Core Web Vitals scores, particularly, when it comes to Largest Contentful Paint (LCP). In fact, when you decide on which elements to preload, it would be wise to include your ‘largest’ or ‘main’ content, as this is what would likely benefit most from it.

Preload key requests vs. preload critical assets

It’s worth noting that preloading key requests means the same as preloading critical assets. Both terms refer to telling a browser to load particular resources in advance to render a page’s content more quickly.

Preload vs. preconnect vs. prefetch

Preloading, preconnecting, and prefetching might seem like similar concepts, but they actually mean slightly different things. They are all tags that instruct a browser in which order to load content, but they serve distinct functions.

First, preloading involves loading content needed to render the page within a user’s browser. It’s a high-priority tag that will get a resource ready within a few seconds. 

By contrast, prefetching concerns the subsequent elements that might need to be loaded. The browser will look for resources in advance and store them in its cache. It’s a very low-priority tag, so you shouldn’t use it for urgent resources.

Finally, preconnecting is used when you want to tell a browser to connect to a particular domain. If your site uses a resource from a specific third-party site (like Google Fonts), preconnecting tells the browser that it will need to connect to that domain at some point in the loading process. 

What else can I do to improve my site’s performance?

Various tasks can help improve your WordPress site’s performance, including:

• Using a CDN to serve your content to visitors worldwide
• Deferring (or deleting) unused CSS
• Eliminating render-blocking resources
• Minifying CSS and other resources 
• Making fewer HTTP requests

It’s also worth choosing a high-quality WordPress host that will provide you with performance-optimization features like dedicated caching, an uptime guarantee, and a vast network of data centers worldwide. 

Improve your WordPress site’s performance by preloading key requests

Page load times can significantly impact your website’s user experience and search engine rankings. So, you’ll want to do everything in your power to speed up the time it takes for a browser to display your site’s content.

When you preload key requests within your pages, a visitor’s browser will have resources (like fonts, CSS, and JavaScript) at the ready. Then, there won’t be a delay while loading your content and making it accessible to users. 

Preloading key requests is just one step toward improving your site’s performance. Using Jetpack Boost, you can easily configure your website to lazy load images, defer non-essential JavaScript, and more. Better yet, the plugin is free to use. Check out Jetpack Boost today!