Improving your Google Core Web Vitals

We realize how important it is to improve and maintain a your Core Web Vitals(CWV) so in this article we will go into detail with the best ways that we've found that are the least complicated to help improve your CWV for just about all suggestions provided by PageSpeed Insights(https://pagespeed.web.dev/). Please realize that all sites no matter how similar they may seem are very different, so while optimizations may vastly improve some, these same optimizations may not seem as good for others. We will do our very best to provide information with a 'one size fits all' approach but further tweaks may be needed even after implementing the suggestions.

When using PageSpeed Insights(https://pagespeed.web.dev/) there are 2 main areas to be aware of. The first area is usually referred to as the 'real user' or 'real world' data. This is the first section that appears at the top when you run a test on your website. This is exactly how it sounds, Google uses the data it receives from real visitors accessing your site and takes an average over a 28 day period and displays the results. If you have a newer site, you may find this is not displayed at all.

Example of what you may see where there is not enough traffic to populate the real users data:

It mentions "No data." This is perfectly normal, we just need to wait for a longer period to allow this area to populate.

Otherwise, allowing enough time and traffic to pass you will see something similar to:

These are good to pay attention to because it lets you know how your site is actually performing based on real live data. While it's good to see, you cannot improve it on the spot since its an average in which case you would use the next section which is where we will focus on since it includes the suggestions for improvement.

Before we start implementing improvements based on PageSpeed Insights suggestions, we want to point out with BigScoots what we've found to be the very best combination to deal with most CWV issues:

WP Rocket

Cloudflare Enterprise

WP Rocket is an amazing all in one caching plugin, the real optimizations however is less the caching aspect and more so all of the script optimizations it provides.

Using anyone of our Tier Cloudflare Enterprise plans in combination with WP Rocket will give you the best of both worlds as with our Cloudflare Enterplan you gain the fastest server response times around the world due to utilizing page caching over the enterprise network. You will also get always on, on the fly image optimization which includes serving images in webp format. With this combination alone you can expect to see improvements to all CWV.

With that in mind, all the suggestions mentioned below are for each specific suggested improvements by PageSpeed Insights. You can find the title of our suggestion and match it up against that of PageSpeed Insights.

Example:

If we want to improve "Serve images in next-gen formats" please go ahead and search for it below. We do our very best to give you the most optimal solution first followed by some free options as well, keep in mind with the free options you will in most cases require more than one plugin to handle multiple suggestions compared to the combination we mentioned above.

Suggestions to look for are mentioned below.

This means it took the server a long time to generate the content to start the initial load of your page.

In most cases this is from a lack of caching, without page caching the server has to generate ALL the content that is being used by your theme, plugins and database to show the viewer. Where page caching takes a snapshot of this and provides the snapshot instead which is MUCH faster. Too give you an idea, it could be a difference of a full second or more that gets added to the server response time without page caching.

Any caching plugin will do but please check the following article on what we suggest and to go into further detail: https://help.bigscoots.com/en/articles/6099914-page-html-caching

You want to ensure you are minifying your sites HTML, JavaScript and CSS, along with removing unused CSS, delaying and deferring JavaScript.

Too handle all of the above we highly recommend: WP Rocket

Alternative plugins:

https://wordpress.org/plugins/autoptimize/

https://wordpress.org/plugins/async-javascript/

While this should be happening by default, there are some instances where images will not in which a plugin may be necessary or speaking with a developer to see if the code can include the lazy tag.

Unused CSS can come from themes and plugins, in most cases it cannot be easily removed unless working with a developer.

If not already, we recommend looking into WP Rocket and using its new feature:

Some other alternatives would be

Unfortunately there is no free method that exists in a form of a plugin that we've seen.

We highly recommend utilizing our Cloudflare Enterprise service for image optimization, this will ensure image sizes are greatly reduced and are served in Googles recommended image format(webp).

Using Cloudflare Enterprise will allow you to optimize the images automatically on the fly, requires 0 server resources and does not require any additional disk space.

There are many alternatives that are "free" but in most cases these plugins require server resources to bulk generate optimized versions of all your images, they will also store backups of all the original images so in a lot of cases you will see your disk usage increase by over 50%.

The reason we say "free" is most free image optimization plugins come with credits, if you use up these free credits you need to then purchase more credits.

We see this in a lot of cases with featured images which means the image might change often and/or per page so a developer might be needed to modify the code to preload this dynamic image on each page.

If it's just a single image on the homepage, example a large banner image then a plugin can be used to adjust the HTML to preload the image.

Preload large images to allow the browser to start processing it as quickly as possible.

This means some images do not have dimensions set in the HTML. The bad thing about this is it can create CLS because the page loads first before the image so after the image loads, it can cause all your content to shift around on the page.

If you have the images set with widget/height in the HTML then the page loads with the image aspects already in place so even though the image itself may not appear the space that it will occupy is already accounted for and will prevent a shift in the page when it does load.

This in most cases will require a theme or plugin developer to ensure the dimensions are set properly however if this isn't possible there are plugins that can assist here as well.

WP Rocket is recommended for this as it includes an option specifically for this situation where the dimensions are not defined.

This means there are images that are being lazy loaded which should NOT be lazy loaded.

There are images that appear in the viewport(what we see initially when loading the page) that should load as quickly as possible, lazyloading them will cause a delay in the page load.

This can also affect CLS as it may make the page shift more dramatic since the image is loading later then it should be.

In most cases you need to speak with your themes support on how to ensure the viewport images are excluded from lazyloading, article to reference: https://web.dev/lcp-lazy-loading/

If using a plugin like WP Rocket there are ways to exclude specific images which may be all that is needed: