How to Improve Core Web Vitals for Your Wordpress Site
Google’s implementation of Core Web Vitals is still coming, but the good news is you now have until mid-June before the gradual rollout begins. At that time, Google will begin slowly incorporating page experience as part of its ranking system with the full implementation expected at the end of August. CWV is evaluating 3 components of the user experience—Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS)—and if your website conforms within Google’s recommended ranges, then it will be ranked higher in search results. If your website doesn’t conform, you’re not alone but you should start planning for remediation now. In this guide we’ll go over how to improve core web vitals and how to set your WordPress website up for long term success.
Preparing for Core Web Vitals on WordPress
After you have measured how your website stacks up to CWV and used our tracker to prioritize and create a backlog of tasks, use this article as a reference guide for improving your site’s performance—how fast your site responds and how quick it is for users to access and interact with your site. We’ll advise developers on how to improve and establish a 90+ score for both mobile and desktop. Note that while this information can apply to Drupal and other content managed sites, our remediation guidance will focus on websites built on WordPress.
WordPress Core Web Vitals Tracker
We’ve created a free tool to aid in preparing your website for these changes. Our Core Web Vitals Tracker will help you measure your site’s health, record your findings, and prioritize which tasks to execute first.
Begin with Measurement Tools
There are many tools at your disposal to evaluate your website, which can seem overwhelming at first. Here’s a look at some of our favorite tools.
- Google Search Console – This is a must-have, so start here if you’re not already using it. Among other more general search optimization tools and reports, Search Console also tracks CWV. It will alert you of any violations so you can better prioritize the fixes your site needs most.
- Google PageSpeed Insights – This is the most hostile of tools in that it tends to give the harshest scores, so brace yourself. This is likely due to the fact that it doesn’t take into account the location of the search. Regardless, we consider Google PageSpeed Insights to be the second most important to Search Console
- Google Lighthouse – This tool can be helpful when trying to get an actual score on a problem you are fixing on your local environment. Helpful tip: you should run in incognito, because browser cache could affect results.
- GTmetrix – This is a highly accurate tool as it allows you to set screen size and location. It is also reactive to what you’ve fixed, showing the realtime impact of remediations your team is making. Whereas the other Google-based tools are free, GTmetrix’s professional plans have a monthly fee.
Now that you’ve measured your website’s compliance with CWV, tracked and prioritized your issues, it’s time for remediation.
How to Improve Core Web Vitals with the Right Infrastructure
You can’t have quality performance without quality hosting. We often advise our WordPress and Drupal clients to move to Pantheon hosting as it is fast, reliable, secure, and offers automated workflows and tools to ensure updates or changes to your site are seamless. Tools such as built-in caching, a Content Delivery Network (“CDN”), integrated version control, and multiple cloud environments provide an infrastructure that allows you to move efficiently while minimizing or eliminating hiccups along the way. For hosting providers that don’t have these tools built in, we’ll recommend services you can add on to achieve the same results.
Caching is a critical component of your infrastructure that needs to be addressed. It allows your site to deliver repeat pageviews from the cache, taxing your system far less than delivering a page from its original source repeatedly. If you’re currently on Pantheon, you can enable their Advanced Page Caching and set to a 1 day refresh. If your site has a reason to need more frequent updates than that (e.g., your site displays dynamic content) then adjust accordingly, but most sites will operate well with a 1 day refresh rate. Additionally, we recommend enabling Pantheon’s Object Cache to handle items such as menus and filters, the loading of which can sometimes cause delays. Not on Pantheon? We recommend popular plugins like WP Rocket or W3 Total Cache for page and object caching.
Next on the list is an effective Content Delivery Network. A CDN helps to ensure a faster site experience for your users by delivering images in next-gen formats optimized for speed and responsiveness. A CDN can also help prevent site crashes in the event of traffic surges. Cloudflare as a standalone provider will certainly do the job; we often recommend adding Cloudflare to sites that already have Pantheon’s Global CDN for added caching and speed optimization.
The final general site settings you should consider to aid performance are related to stylesheets and scripts. There are three different best practices we implement when looking to optimize site speed and performance.
- Enqueue – This practice ensures that stylesheets and script files in WordPress are added to a queue and waiting for the correct moment to use them.
- Remove – Many times plug-ins add their own JS or CSS file. This means you then have to contend with what they load which slows down your overall page load. For those unnecessary stylesheets and scripts, we recommend you deregister or dequeue them.
- Minify – Compile and minify code in your web pages and script files. This is one of the primary methods used to reduce load times and bandwidth usage on sites.
Working through Your Opportunities List
Load time for a website is critical—so much so that a majority of us will leave a website if it takes longer than 3 seconds to load. We’re not a patient bunch, are we? Some of these remediations will require a sharp eye towards your code. Shortcuts in code or a lack in solid development practices will cause far more problems in the long run than time it may have saved in an initial build. The following are some remedies we apply to WordPress sites to improve performance.
Remove Unused CSS or JavaScript
Ensuring unnecessary code is off your site is one of the most important items to check off on your “how to improve Core Web Vitals” checklist. Remove any unused CSS or JavaScript, which will slow down page loads, with the obvious exception of the main.css and main.js files which must remain. This task must be done on a file by file basis and will help simplify your code and reduce the overall size. Additionally, you can consider breaking out essential scripts on a per page/template basis to reduce the size of the main files.
Preload Key Requests
Another common issue is the Preload key request, typically applying to font requests and which can delay the rendering of the page if overused. While the preload key request can be useful if your site contains a few complex fonts by commanding the browser to load the particular font at the start, overusing the request can overly tax the system, negatively impacting page speed. For those URLs causing an issue, you can specify the URL as preload in the header section of each page by adding the script “rel=preload”. Be sure to clear your cache after modifying the header and retesting.
Defer Offscreen Images
Deferring offscreen images will improve the user experience by saving bandwidth for important content first. “Lazy loading” is an effective method of doing that and if executed properly, should not prevent the images from being indexed for SEO consideration. We prefer to use the WP Rocket LazyLoad plug in as lazy loading in the browser doesn’t automatically affect the background images. To remedy that, you’ll need to load background images through the style attribute.
Properly Sized Images
One of the not so secret strategies on how to improve Core Web Vitals is simply reducing the file size of the images on your website.. If properly sized images is a recurring flag, make sure you use the add_image_size function to register necessary image sizes. This will enable the images to load properly. You should also consider having your designer systematize image sizes so that one-off sizes don’t cause unexpected lags in load. Lastly, loading images into templates properly and not just loading on the full image will also ensure images don’t slow down load times.
Next-Gen Image Formats
Serving images in next-gen formats, rather than JPEG or PNG, means that they will load faster and consumer less data. Next-gen formats, such as JPEG 2000, JPEG XR, and WebP have greater compression and quality characteristics. The best way to solve this issue is to activate Cloudflare and enable the Polish feature. This allows for automatic conversion to WebP of images on your site.
Eliminate Render-Blocking Resources
As for the most prominent issue we find on sites, render-blocking resources is the top of this list. Your Lighthouse report will list the specific pages that block the first paint of your page; those URLs are flagged for two different types of render-blocking: scripts and stylesheets. First, you need to identify what’s critical CSS or JS and what’s not. For any unnecessary code, it can be pushed to the footer. The best way to do this is to enqueue and use the “in footer” parameter. Next, for CSS or JS added by plugins, dequeue and deregister it and re-enqueue it in the footer. Lastly, for third-party code, weigh it’s contribution and value to your website. If the third-party code provides essential functionality or features to your site, you may decide to sacrifice a small amount of performance in order to maintain that functionality.
Working down Diagnostics
Once you’ve worked through your opportunities list, you may have some additional opportunities for improving your site’s overall performance, and thus increasing its CWV score. Here are some ways to take advantage of those opportunities.
Passive Listeners
If you’re not using passive listeners to improve scrolling performance, your site will get flagged. While touch and wheel event listeners can provide useful data on user interactions and allow for a more custom scrolling experience, they can also delay page scrolling, which is a no-no for CWV. Switching to passive listening can provide a major potential boost to scroll performance by letting you dictate that an event listener should never prevent or delay scrolling. PageSpeed Insights will give you the script file that is in violation; from there you will need to locate the issue and then simply add the passive:true parameter to the eventListener.
Reduce JavaScript Execution Time
Reduce your JavaScript execution time. When your JavaScript takes a long time to execute, it is usually a sign your JS isn’t compiled and minified. It can slow down your page performance in several ways including network cost, parse and compile cost, execution cost, and memory cost. If, after you compress and minify your JS, you don’t see enough drastic improvement, you may need to implement code splitting and only send the code that your users need.
Minimize Main-Thread Work
Minimizing the work your main thread has to carry is another way to decrease a page’s load time. By default, the browser uses a single thread to run and render all JavaScript and other requirements on your page. If your main thread is being asked to do too much, that can result in a slow or unresponsive page. Using Google Lighthouse, take a look at where CPU time is spent during a page load; this can help you identify the sources of load on your main thread so that you know which areas need the most focus.
Explicit Image Sizing
Image or video elements that do not have explicit dimensions can cause problems with the content layout shift as the image or video will be loaded without any parameters. This is a quick fix in WordPress by using the wp_get_attachment_image() function which will always grab the width and height size attributes to your image and video elements. One file type that may need additional attention—via a conditional or media library rule—beyond that WordPress function is SVGs, so be sure to check their dimensions.
Third-Party Code
When you’ve optimized your code but still face slow load times, you should look into any third-party code that may be slowing you down. Often times, third-party scripts such as ads, analytics, widgets, or social sharing buttons, while making your site more dynamic and interactive, may actually be negatively impacting a page’s critical rendering path. PageSpeed Insights can provide diagnostic information to help you identify how many third party scripts are loaded by your site and which take the most time to execute. From there, you can disable any bad third-party code. In the event you cannot remove the code, a deeper exploration will be required.
Visible Text During Load
The last recommended remedy for your diagnostic violations is to ensure the text on a page remains visible during webfont load. You can simply add a font-display descriptor to dictate how a font face is displayed based on whether and when it is downloaded. In this case, you want to select the “swap” value which instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. Depending on whether you use Adobe fonts, Google fonts, or something else, exactly where or how you add this parameter will vary, but the value you want to select in each case is “swap” (e.g., in Google fonts, you’ll add the parameter ‘&display=swap’).
With the right tools, some intentional tracking and prioritizing, and planning, you can make significant headway into preparing your organization’s website for Google’s impending Core Web Vitals and its performance-related metrics. As with anything on the web though, we recommend being agile in your approach. Create a system for measuring, analyzing, and iterating so that you are constantly on top of your site’s performance and areas for improvement. As quickly as CWV is approaching, so too will it evolve—e.g., some evaluation categories may become stricter, the weighting of various components may become more clear, then they may change, etc. You get the picture, it’s a moving target. Start now by measuring your site’s performance and implement changes to your organization’s WordPress site that will improve its performance and conformity to Google’s Core Web Vitals.