Category: jetpack.com

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!