Core Web Vitals for WordPress websites
Slobodan Mani?
Host at No Hacks Podcast | Helping you keep your ads consistent with their landing pages
So, I've seen a few posts on LinkedIn, and elsewhere on the internet where people ask about Core Web Vitals, specifically how to optimize WordPress websites. I've been working with WordPress as a developer since 2009, even contributed code to 4 major WordPress releases, and jumped on the Core Web Vitals hype train pretty much the day they were announced. I also optimized 10+ WordPress websites for Core Web Vitals, from simple to very complex and since this seems to be a hot topic that's getting hotter daily, I'd like to share some of my observations and thoughts on Core Web Vitals:
- The effect of this on rankings will not be as massive as how much people talk about it would suggest. As (I believe it was) John Mueller mentioned, this will be more like a tie-breaker for websites that rank similarly, not something that will get you from page 10 to page 1 if everything else you have to offer is poor.
- That said, this will make your website better for the users, so even if you completely ignore what Google thinks about your website, by optimizing your website for CWV you will make it better.
- Google will use field data, measured by real users visiting your website using Chrome browser to assess your website. If your users are on slow network and slow devices this means your website needs to be faster than if you had users on fast network with modern devices. Sounds unfair at first, but it makes sense - you optimize for the users you have, not for your high-speed network and fancy computer.
- WordPress gets a lot of bad publicity for how slow it is, but that is just wrong. Out-of-the-box WordPress is just killing it in this department, even with a crappy hosting plan. Green everywhere, 90+ mobile PageSpeed score, easy, almost no need to optimize anything.
- The biggest problem for WordPress websites is the way (most) plugins and themes handle their CSS and JS files. Let's say you have a slider plugin, in most cases the plugin will load its JS and CSS assets in every page. Let's say you have 20 plugins, you're looking at a bunch of JS and CSS files that are either not needed at all, or mostly not needed. It's possible to check CSS coverage for each CSS file in Google Chrome.
- Most page builders are where you'll say goodbye to good Core Web Vitals scores. I've spent a lot of time fixing websites that used one particular popular page builder at my old job, that also had a Pro and an Ultimate version plugins, and the hole those things dig for you will be to deep for most people to climb out of. Massive CSS files with 95%+ of unused CSS rules, similar thing with JS files, but also overly complex HTML structure, all of that means the browser needs to spend a lot of time rendering the page, this will hurt your LCP score badly.
- Speaking of LCP, optimizing for this metric means optimizing your critical rendering path (a great resource here worth checking out - https://developers.google.com/web/fundamentals/performance/critical-rendering-path/), this means not loading any non-essential assets before the browser can calculate the layout and render the page. With the way CSS and JS files are usually loaded in WordPress, critical-rendering path can get cluttered. A lot of people, from project managers to web developers I talked to will normally just go for more aggressive caching or more powerful servers when working on LCP and while that can help, it's usually not the main issue. Always clean up your page first by auditing all CSS and JS assets, remove what you don't need, then optimize the delivery of what's left.
- FID and its proxy TBT, you will not do great if you use a ton of resource-heavy plugins. I wish there was a catch-all rule that will tell everyone what they need to do, but seriously, if you're using third-party plugins without having someone to audit their performance, be careful about what you install. One thing I always recommend is doing a PageSpeed Insights or Lighthouse audit before and after activating a plugin. This way you know how much it will "cost" you and then you can decide if having that feature is worth it.
- CLS - there's nothing WordPress specific about it. Just need to reserve the space for all elements that will be loaded after the layout has been computed. Images, ads, iframes, videos.
I hope this helps you. If you have any other questions, please reach out, I'll do my best to help you.