First Contentful Paint: How to Optimize WordPress for Speed

While all websites know that speed is a factor Google uses to rank websites, the way your speed is measured has changed over the years. In 2019, Google decided it would use First Contentful Paint (FCP) and First Input Delay (FID) as performance measuring metrics.

The number of factors has grown over the years, yet FCP still accounts for around 10% of your website’s total performance when measured, thus optimizing your site to maximize FCP can help improve your load times considerably.

As with most things, you can optimize the FCP for your website to get better page speed results.

What Is First Contentful Paint (FCP)?

The First Contentful Paint is the measurement of how long it takes for visitors to see the first text or image on a post or page. In other words, FCP is how long it takes for a visitor to see any content.

According to Google, you want an FCP score that is less than 1.8 seconds. You will be penalized if it is longer.

How Can You Measure Your FCP Score?

You may be wondering how you can measure your FCP score, and the answer is pretty simple, with a website performance tool.

Everyone knows that speed is a factor that Google and other search engines use to rank websites. Naturally, there are several tools that can be used to measure their performance.

In most cases, these tools will break down each element of the page loading process so you can see where you can improve. Some will even list specific metrics that you need to focus on, and FCP is one of those metrics.

Here are some of the best tools you can use to check your current FCP score:

PageSpeed Insights

When it comes to viewing your website’s performance, Google’s PageSpeed Insights is the most popular tool. To use this tool, all you need to do is enter the URL of the website you want to check.

After a few moments, the tool will display your Core Web Vitals Assessment. This contains information like the FCP, Largest Contentful Paint (LCP), First Input Delay (FID), and more. It even shows what the acceptable ranges are.

Below this, you will find the Diagnose Performance Issues report. The tool will assign a score to your website’s Performance, Accessibility, Best Practices, and SEO. It also provides insights into how you can improve each score.

Lighthouse

Lighthouse is another tool created by Google to help check the quality of your web pages. It is available as part of the Chrome DevTools for Google Chrome, and you can start using it today for free.

When you run Lighthouse, you can see all of the core vitals of your website as well as scores similar to PageSpeed Insights. The difference is that this tool looks specifically at a single web page as opposed to an entire site.

As such, it is a great tool that can aid you in optimizing individual pages, which can make troubleshooting issues much easier as opposed to trying to fix an entire site’s worth of problems.

GTmetrix

GTmetrix is another popular tool you can use to measure your website’s performance. To use this tool, you will need to create a free account. Otherwise, you can’t see all of the details about your website.

Similar to PageSpeed Insights, all you need to do is enter the URL that you want the tool to analyze. After a few moments, it will turn up the results that include a letter ranking of your site (A, B, C, etc.) as well as core site vitals.

If there are any problems, the tool will offer a brief summary of how you may be able to correct the problem. There is also a plugin you can install in WordPress if you would rather do this directly from your site.

How to Improve Your First Contentful Paint (FCP) Score

Like most things related to your website’s performance, you can optimize your website to perform better. Getting a better FCP score is no different, thus today, we are going to cover everything you can do to improve your FCP score in WordPress.

Note: You should create a backup of your site before making any significant changes.

Step 1: Install An Optimization Plugin

For many websites, this might be the only step you need to do. WordPress has a plethora of plugins that can optimize various aspects of your website to improve site performance and subsequently, your rankings.

In many cases, these plugins will be enough to optimize your site to an acceptable level for search engines. As such, they are the easiest and quickest way to optimize your website’s performance.

Here are a few optimization plugins you may want to consider using for your site:

WP-Optimize

WP-Optimize is one of the best performance-boosting plugins you can use for WordPress. It offers everything from caching to WordPress database cleanup that can help boost your website’s performance.

What makes this one of the better choices is the fact that it is free. In most cases, optimization plugins will typically cost a premium to use, or their free versions will limit what you can do to a frustrating level. That’s not the case here.

When it comes to usability, the plugin is simple. For most actions, you just need to click a single button and the plugin will take care of the rest. There are some actions that require further input, but the plugin is very beginner-friendly.

Jetpack Boost

Jetpack is often called the Swiss army knife of WordPress because it can do just about anything if you install the right module for it. Optimizing your website is no different, as that is exactly what the Boost module was created for.

Upon installing the module, the tool will scan your website to determine where it stands. You will then see all of the optimization options for things like optimizing the CSS loading, deferring non-essential JavaScripts, implementing lazy load, and more.

While this might sound complicated, don’t worry. On your end, all this boils down to is flipping a switch and the plugin will take care of the rest. The plugin is also free to use, so it’s a great choice for both monitoring and improving your site’s performance.

WP Rocket

WP Rocket is perhaps the most comprehensive optimization tool for WordPress. Unlike the others we have covered, this is not a free tool, but the good news is that it is affordable, especially when compared to other tools that do similar tasks.

It deals with every major performance issue your site will run into. This includes caching, file and image optimization, lazy loading implementation, CSS and JS optimization, and much more.

Using the plugin is very simple. In most cases, you just click an optimize button and the plugin will carry out the necessary tasks. If you do get stuck, there is a support team that can answer your questions.

Step 2: Reduce the Server Response Time

The Server Response Time, otherwise known as the Time to First Byte (TTFB), is how long it takes for the server to send the first byte of information to the visitor’s web browser. The TTFB is part of how the FCP is measured.

For reference, the FCP formula is:

FCP = TTFB + Content Load Time + Render Time

As such, directly reducing the TTFB will directly lower your FCP. One of the most effective and direct ways to improve your site’s TTFB is to choose a good web hosting company, as they are responsible for your web servers.

Web hosts are the companies that rent you web servers and maintain them. As such, they have a direct influence over the TTFB and the general speed of your website. Picking a quality web host is incredibly important, which is where a company like GreenGeeks comes in.

Here at GreenGeeks, we optimize our web servers to deliver the best possible experience when using WordPress. When paired with our SSD technology, your servers will be operating at peak performance.

Another thing you can do is purchase a WordPress CDN. A CDN, or Content Delivery Network, will help ensure that visitors access your site from the closest server to their location. This can help boost speed and ensure an optimal path for data to travel.

Naturally, this will impact the TTFB if a user tries connecting to a server farther away.

One more way you can improve the TTFP is to enable caching on your server. Caching allows you to deliver static versions of pages to users, which is much faster than loading the page entirely. This will help speed up the TTFB considerably.

Step 3: Eliminate Render Blocking Resources

Webpages are made up of different types of elements. These include HTML, CSS, and JavaScript scripts. Each element is responsible for creating different elements on your website, and thus, each one must fully load for that element to appear.

The problem is that HTML, CSS, and JavaScript do not load at the same speed. HTML loads much faster than CSS and JS. This is because the file size of HTML is much lower than the other two.

As a result, normally the HTML will load quickly, but the page must wait for the CSS and JS elements to load.

Due to this, CSS and JS are typically referred to as render-blocking resources because the page cannot load without them. So, if we want to speed up FCP, we need to eliminate all non-essential CSS and JS elements on our web pages.

Naturally, the first step is to determine which CSS and JS elements are critical. If you took my advice at the beginning and installed a plugin to optimize your site’s performance, the tool may have already optimized your site’s CSS.

This is recommended because manually editing and identifying these elements is not something a beginner can do.

If you are interested in learning more about how to identify critical elements, Google has an excellent guide.

Once you identify the elements that are not critical, you have two options.

Defer Them

This can be done by adding the defer or async attribute to that element.

The defer attribute can be added to non-critical JavaScript scripts, while the async attribute can be added to non-critical stylesheets (CSS). Doing so allows the web page to load uninterrupted by these elements, but rest assured these elements will still load.

You need to be very careful because if you defer an element that is critical for your site, you can cause the page to take even longer to load, which is what we are trying to avoid. Again, many performance-boosting plugins can do this for you.

Remove Them

In some cases, you may just have elements within a web page that are unused. Yet, because the lines exist within the web page, it still slows down the entire process. As such, you need to delete any traces of elements that are not currently in use.

To do this, you would need to examine all of the elements on a web page and delete the unnecessary ones. It is recommended to create a backup of everything before attempting this as it is easy to make a mistake and delete something you didn’t intend to.

Once again, many plugins will delete render-blocking resources for you. They will even show you which ones they will delete before it is done so you can manually review the information. WP Rocket is really good at this.

Step 4: Optimize Existing CSS and JavaScript

We just talked about how you can defer non-critical CSS and JS elements, but you now need to focus on the ones you want to show.

The truth is that some pages are built around these elements and deferring them does not make sense. For example, let’s say you created a custom pricing table for your pricing page. Deferring that pricing table makes no sense since it is the most important part of the page.

As such, you need to optimize your critical CSS and JS to ensure they load as much as possible.

One of the simpler ways to do this is to minify the CSS and JS on your site. By shrinking the size of these files, you will significantly speed up the time it takes for these elements to load, as smaller files take less time to load.

Again, most website performance tools will be able to automatically shrink poorly optimized CSS and JS files for you.

A more in-depth way is to set up a Critical Path CSS, which tells the page the bare minimum CSS that must be loaded before a visitor sees the page. While these are highly effective, creating one is not easy.

As such, it is highly recommended to use a tool like WP Rocket which can create a critical Path CSS for you. There are other tools, but WP Rocket really is one of the better options available.

Step 5: Optimize Your Sites DOM

The Document Object Model, or DOM, displays all of the objects on your webpage. Every HTML object is represented by a node, which can lead to other elements on a page. The number of nodes on a single branch is known as node depth.

A DOM can make it easier to modify specific elements within a page due to how it is structured, but sometimes developers can get carried away. As a result, many DOMs end up containing too many nodes that are not visible to users during the initial load.

For this reason, it can significantly slow down your FCP. Not only this, but Google will actually flag pages that have more than 1,500 nodes. Thus, it can further hurt your website’s SEO.

When it comes to a DOM in WordPress, this is usually generated by a theme, page builder, or plugin.

To optimize one, you would want to edit the DOM and remove nodes that are not necessary. Unfortunately, this does require you to understand how the page loads and what every element is on a page. Thus, it is not something you can do quickly.

Another approach would be to break up larger pages into smaller ones. This will reduce the number of nodes a page will have because there will simply be less content on the page. Generally speaking, smaller pages are faster to load.

In many cases in WordPress, the DOM is generated by a theme or page builder. Naturally, that means picking an optimized theme like Astra can help shrink your DOM, and likewise a great page builder like Elementor can help.

Step 6: Avoid Multiple Page Redirects

Have you ever loaded a page where you are bounced from one redirect to another? This can happen for a variety of reasons, especially on older websites, but this is something that can slow down your FCP.

You see, a redirection requires a browser to make another HTTP request to a different URL. Naturally, this request will slow down how long it takes for content to appear by a large amount.

Luckily, this can be easily solved by ensuring that all redirects lead to the final destination and not into a second redirect.

So, now you are wondering, how can I find any redirects that lead into another redirect? Simply put, most web page speed tests will identify these pages for you. One such tool is Lighthouse.

It will highlight the URL that is undergoing multiple redirections for you. After that, you need to use the redirection tool you are using to locate the redirection and make sure that each redirection points to the final location.

In some cases, certain redirection tools will point out when a redirection will lead to another redirection, so be on the lookout for these warnings as they will help you avoid the problem before it ever becomes one.

Step 7: Optimize Lazy Loading

Lazy Loading is a technique every website uses. It will tell your site to not load images or video content until a user can see or interact with that content. For example, if you have an image at the bottom of a post, it will not load until a user scrolls to it.

Naturally, this can help speed up your website, especially when you have a lot of media content.

While this might sound like it will improve your FCP, that’s actually not the case if you don’t optimize it. You see, lazy loading works by using JavaScript before the web browser begins rendering any images. This can delay your FCP.

The good news is that most of the major lazy loading tools already have this built-in to avoid negatively impacting your site. That said, since the plugin library is so vast in WordPress, you might be using a plugin that doesn’t do this.

You can usually identify these plugins if they do not have any tools that allow you to exclude certain images.

It’s also worth pointing out that WordPress itself added lazy loading natively in WordPress as of version 5.5. This will give you the options you need, thus having a dedicated lazy loading plugin is no longer necessary, but sites that already have one may want to review their tool.

Step 8: Get Rid of Custom Fonts

Some sites like to get creative by using unique fonts or custom fonts you can find on the internet. And while I will say some of these look fantastic, it is no secret that these fonts can slow down your website, which is why you should avoid them.

The reason these custom fonts slow down your website is because the web browser needs to find where they originate from and download them before the site can load any content. Naturally, your FCP will suffer for using them.

Now, if you are very adamant about using a non-standard font, the impact of one should not be that impactful.

However, you absolutely should avoid using multiple fonts on a single page or post. This is because each font needs to load separately, thus you are essentially forcing the browser to stop and load each font you are using before the page can begin loading.

If you are going to use a custom font, I would recommend using the Google Fonts. These are your best bet to limit the impact on your site’s performance, but make no mistake, it will slow down you site if you choose to use one.

Step 9: Do Not Place JavaScript Elements Above the Fold

We’ve already pointed out that JavaScript elements slow down your website, but one way you can mitigate this is by placing them below the fold. Above The Fold simply means at the top of the page where it will be loaded immediately on a post or page.

In other words, it is the elements that are seen when someone views your website without scrolling.

While this may sound simple, the truth is that many WordPress themes have JS elements above the fold.

For example, have you ever seen a theme that has a slider or some type of animation built at the top of a homepage? It is very common and can end up impacting your FCP score because of the JS within.

That said, it is not always the result of a theme. Another prime example would be social media share buttons. Nearly every website today has a social media plugin that they use to place share buttons on their content.

It is very common to find these buttons at the top of a page or post to encourage users to share content. These buttons negatively impact the FCP when placed above the fold. And there are plenty of other elements that you should avoid.

Simply put, if it has JS in it, it should not be above the fold.

Step 10: Compress Your Images

We’ve mentioned images several times while using lazy loading or placing them below the fold. However, the truth is that you will have images appear above the fold in a variety of ways, thus, you need to compress them.

For example, think about your menu icons. These icons are images, and they will appear at the top of your posts and pages. In other cases, you may have a banner image, logo, or background image that needs to load.

Images are great and can really enhance your site design, however, they slow down your website.

The simplest way to combat this is to ensure that all of your images are compressed. The smaller their file size, the quicker they can load. Luckily, WordPress has several image compression tools that you can use for free.

These tools will scan your media library, detect all of the unoptimized images, and compress them for you. It is worth noting that premium tools often have higher levels of compression available, so they are usually a better choice.

A more direct approach to image compression is to handle it when you create the image.

Many beginners tend to create images that are larger than they need. As a result, the files are much larger. Properly sizing any image you create is a simple, but highly effective way to reduce the file size.

It’s also worth mentioning that the file format you use to save your images matters. JPEG and PNG are still some of the most popular choices, but converting images to WebP format is a better choice as far as compression goes.

First Contentful Paint FAQ

Improve Your FCP Today to Improve Rankings

As you can see, there is a lot you can do to improve your site’s FCP score. Doing so can benefit your site’s rankings as this is a factor that Google uses to rank your site. It also improves the user experience because no one likes a slow website.

Many of these methods require technical knowledge to pull off manually, but by installing a website performance plugin for WordPress, you can get some pretty good results without a lot of work.

I hope you found this tutorial helpful in learning how to improve your first contentful paint score for WordPress.

What plugin do you use to boost your site’s performance? Have you noticed any increases in your rankings?

The post First Contentful Paint: How to Optimize WordPress for Speed appeared first on GreenGeeks.