At WP Engine’s DE{CODE} 2023 event, our Director of Frontend Engineering Mike Crantea joined a panel of performance experts for an in-depth look at the best practices and tools for understanding and improving your Core Web Vitals (CWV) scores on your WordPress site. Here’s our roundup!
In this article, we’ll learn:
- Why you should care about your site’s Core Web Vitals
- The best ways of measuring your metrics
- Things you can do to positively improve your Core Web Vitals score
- If plugins are a good way to improve your Core Web Vitals score
- The unique aspects of using WordPress in terms of Core Web Vitals
Watch the Full Panel Discussion from DE{CODE} 2023
Why Should I Care About Core Web Vitals?
No one wants to wait around for a slow-loading site—and that’s only magnified when you’re operating in a highly competitive space like publishing or eCommerce. If your site appears to be loading slowly visitors are more likely to leave before they’ve had a chance to browse, which in turn, means lost conversions.
That’s why Core Web Vitals are so important. They help you measure perceived performance. This means being able to quantify how fast your site appears to have loaded, even if there are still things happening in the background. It’s a measure of what your user experiences, and that’s incredibly important to track.
Monitoring and improving Core Web Vitals impacts your entire user experience from first entry to conversion and beyond, and since Google cite Core Web Vitals as a ranking factor in SEO, there is even an opportunity to climb up those search engine results pages when you focus on improving them!
“Core Web Vitals are a great way to focus on UX while still satisfying your marketing team—and let’s face it, that’s not always an easy battle!”
Matthew Chase, Director of Development at Vital Design
What Are the Best Ways to Measure My Core Web Vitals Scores?
Google PageSpeed Insight Tool (GPSI):
The Google PageSpeed Insight tool is vital. It provides Core Web Vitals information based on real user data from the past 28 days next to a Lighthouse lab test result—making it an excellent tool for measuring a website’s real-world performance. It is important to use this tool as it gives you an idea of how well your website is performing for your users in the field and where you need to make improvements.
Google Lighthouse:
Lighthouse is a web development tool that is built into the Chrome browser. It is based on lab data, which is collected from a controlled test environment rather than real users. Lighthouse is an excellent tool for analyzing the core code of your site and testing the impact of changes immediately, whereas GPSI and Search Console take weeks to reflect changes—although it’s worth noting that your real user data is still the most useful tailored data for judging your user experience.
Search Console:
Google Search Console is a free tool that provides website owners with insights into how their website performs in Google searches. It has a user experience tool built in that allows you to monitor the long-term performance of your website. This is the best way of looking beyond the 28-day period reflection offered in GPSI while still using real user data.
“It’s also essential to monitor your server architecture. Even if you have the best Core Web Vitals scores in the world, if your server comes under heavy load and you’re unaware, you could see a drop in First Contentful Paint (FCP). Using tools like New Relic to monitor server performance can help ensure that you have the proper infrastructure to support your website’s traffic.”
Mike Crantea Director of Frontend Engineering at XWP
5 Things You Can Do That Have the Most Impact on Core Web Vitals
1. Lazy Loading:
With lazy loading, media assets are loaded only when they are needed, reducing the initial load time of the page.
2. Optimize Above-the-Fold Rendering
Above-the-fold rendering is the practice of loading the most important content on a web page first, so it appears quickly to the user. This technique ensures that users can see and interact with the most critical parts of the website as quickly as possible.
3. Caching
By using object caching, browser caching, and page caching, you can reduce average response times and improve user experience. It’s essential to have all caching layers turned on and functioning correctly to ensure optimal performance. Learn More about the object caching improvements raised by our Senior Engineer Jonny Harris in WordPress 6.2
4. Image Optimization
Images can significantly impact a website’s speed and performance. It’s crucial to compress images properly, serve them through a Content Delivery Network (CDN), lazy-load them, and serve responsive images using the source set attribute. You can use the Performance Lab plug-in to start using the webp image format today.
5. Optimize delivery of JavaScript and CSS
Minimizing JavaScript and CSS during build steps is an effective way to improve website performance. WordPress actually provides a packaged webpack system called wordpress/scripts that supports dynamic importing of of resources at runtime rather than bundling everything into one package. This allows you to fine-tune the loading of deferred scripts, improving website speed and performance, even through the implementation of concepts like Idle Until Urgent.
Are Plugins A Good Way of Optimizing Core Web Vitals?
Plugins can be a great resource, but it’s important to be cautious. They can introduce strange bugs if not used carefully, and they might not always be necessary to achieve the things you want to achieve. If you have the development expertise, it’s usually better to write your own code and make architecture changes— there’s no substitute for lean code!
That being said, if you’re just starting out, plugins can be a great way to get the job done. Just be sure to know what’s happening in the background and use them carefully. This issue is that with so many customized instances of WordPress, plugins often have to make assumptions based on what their bot can see, and that can result in getting things wrong or adding unnecessary bloat to your site.
You also might not need a plugin at all! It’s important to spend time looking into just how much can be done natively using Gutenberg. For example, there’s a lazy loading feature built in. Monitor its use and improve where necessary, then consider adding a plugin to enhance it if you need to, but don’t solely rely on plugins to handle it all.
One plugin that is worth considering, however, even if you’re an experienced developer, is the Performance Lab plugin made by the WordPress Core Performance Team.
It allows you to test drive new performance features before they’re merged into WordPress Core. But these aren’t half-baked features or proof-of-concepts, the plugin enables you to get ahead of the curve on performance with full stability in all tests, which is incredibly impressive.
What are the Unique aspects of working on WordPress specifically when it comes to Core Web Vitals?
With WordPress, you have full control over the platform because it’s completely open-source. This means that you can tailor your site to your exact needs, without red tape or closed code. This is invaluable when it comes to tweaking and fine-tuning for Core Web Vitals success.
Additionally, WordPress is worked on by a global team of Core Contributors who help keep it nimble while retaining its democratized nature. As the web landscape becomes even more competitive and Core Web Vitals are used as an even more significant measurement of which sites are providing an outstanding user experience, knowing that there is a community constantly fine-tuning the platform to account for that is incredibly important.
WordPress in particular also has some fantastic hosting providers dedicated to it, like WP Engine! This is beneficial because they focus solely on one platform, meaning there are a lot of optimizations available that you don’t have to reinvent the wheel for.
“There are a lot of hosting providers dedicated to WordPress, and because WordPress is open source, they can offer a lot of performance optimizations straight away, without you having to invent to wheel”.
Sanjucta Ghose, Senior Web Developer at WP Engine
At what stage of a project do you start to consider Core Web Vitals?
If you have the opportunity, Core Web Vitals are best used as a guideline for building rather than a thing you do to an unoptimized website.
Leaving Core Web Vitals optimizations until the end creates a huge amount of work in one go, and although it’s possible to go back and make alterations to improve your score, it means small improvements happening incrementally.
“We recommend you use Core Web Vitals guidelines from the very beginning so it’s there in every line of code you write. Then you can focus on squeezing the last drops of optimization juice at the end, which is always much better.”
Mark Davoli, Director of Web Development at Amsive Digital
Even as far back as the design process Core Web Vitals can play an important role. Communicating clearly and dictating limits in terms of CWV helps keep the end product focused. This might mean limiting the fonts used for example, or ensuring things like ads are factored into early designs (these in particular can make a huge difference to CLS), so it can help avoid surprises down the line.
It’s all about balance. For example, we can delay things like social tracking tags, which are notoriously bad for Core Web Vitals, but it’s all about what your client values the most and what they need. Perfect CWV should be aimed for, but perfection shouldn’t get in the way of something that serves its purpose well. It’s about getting it as fast as you can.
Learn more about finding your tolerance for performance in 3 Foundational Steps for Setting a Web Performance Budget.
Do you ever have problems conveying the work on core web vitals?
The panel hadn’t had many problems conveying the importance of working on core web vitals (CWV). In fact, they said more and more people are becoming interested in improving their website’s user experience and are willing to invest in it.
However, one issue that does arise often is wanting to see improvements take effect immediately. People often expect to see an immediate boost in their CWV scores after making changes— after all, we all want to see a fast return on our investment! But it’s important to manage expectations and release improvements feature by feature to see incremental improvements and prove their value.
This means it’s important to educate people on the difference between Real User Monitoring (RUM) and Lab (sometimes called Field) Data. The results of RUM are what Google uses for things like page ranking, and while Lab Data is useful in gauging the effect a change might on overall performance—but it can’t be used to judge how those changes perform in the wild.
Finally, interactivity metrics can be the most confusing to explain. They’ve been notoriously volatile, and it can be difficult to convey the variation in scores to those who don’t like to see changes. Check out our guide to Core Web Vitals for breakdowns on how you might break down what these metrics mean.
Huge thanks to Mark Davoli from Amsive Digital, Matt Chase from Vital Design, Sanjucta Ghose from WP Engine, and of course our own Mike Crantea for sharing their expertise and insights, and to Alex Zuniga from WP Engine for moderating.
