8 Lessons Learned When Updating Core Web Vitals
Google is starting to include “core web vitals” as part of their search results ranking algorithm. To slightly oversimplify, core web vitals measure aspects of user experience such as load time, responsiveness, and whether or not parts of the page shift around while it’s loading. There are different scores for how your site loads on a mobile device versus a desktop.
I’ve recently spent some time trying to improve the core web vitals of my own site and here are some of the lessons I learned. Keep in mind this is one person’s experience on a very small and simple site. I hope this can be useful to others, but those with larger and more complex sites are likely to have different experiences.
Core Web Vitals Lessons Learned
- The lower your starting score, the longer it’s going to take to fix everything. It’s unlikely you’ll be able to resolve everything in one sitting. I started with scores of 71 on desktop and 42 on mobile. I’ve been working on this in my limited spare time for about 6 weeks.
- There are two main ways to test your site. The first is with PageSpeed Insights and the second is with Lighthouse, which is a new tool available through Chrome (More Tools > Developer Tools > Lighthouse). I found that scores and results fluctuate wildly between the two tools and even with the same tool. Once I ran it and got 90 for mobile (which was the highest it had been) and then a few minutes later with no changes I got a score of 70. PageSpeed Insights seems to consider a few more things than Lighthouse (ie. whether or not you are using next-gen image formats). For more on the differences, check out this post.
- Desktop issues were easier to resolve than mobile. Most of my desktop issues revolved around image sizes and formats which I was able to resolve by installing Smush and changing how I save images from Photoshop.
- Switching to a different theme automatically boosted my score by about 15 points (it also helped a bit more with SEO and accessibility). If you have the option of custom-building your theme, you will be better able to control all of the little details about how and when various assets load. If you don’t have that option, find a theme with the least amount of bloat possible.
- Google doesn’t give its own products a pass. If Google Analytics, Tag Manager, or Google Fonts are taking a while to load, you will get dinged in Core Web Vitals. At one point I got a score of 50 because the Google servers were taking too long to respond. I was able to change my tag manager configuration to help speed things up as well (see the solution).
- Also, if you are using Google Fonts, you can add the font-display parameter to the URL, which then includes that property in the CSS to control how text is displayed while the fonts are being loaded. If you are using a custom theme, it’s easy to include this parameter manually. I ended up needing to use a WordPress hook for the particular theme I’m using.
- Cache, minimize and in other ways optimize how assets are loaded. I ended up using a combination of plugins to do this. Hummingbird has the option to load selected CSS files inline instead of as an external file (part of core vital recommendations).
- Continuously monitor, test, and refine, especially each time you add a new post, feature, plugin, or integration. This should become part of your standard website maintenance activities alongside backups and plugin updates. Every time you want to add something new to the site, consider the impact on speed and the amount of content you are asking someone on a mobile device to download. Is a loss of a few points worth it?
In addition to working on my site, I have been helping some others as well. On one site, we made a 20 point improvement by just removing unused plugins and old tracking pixels.
Website Management Services
Elevage Digital offers Technical SEO and custom WordPress website services which include optimizing your page speed and Core Web Vital scores. Request a Quote today to start the conversation.