Table of Contents:
What are core web vitals?
Core web vitals is a Google algorithm tracking user experience on poor-performing websites. This update targets all traffic coming from mobile devices. Machine learning makes a record every time someone clicks and browses your site, then makes an overall report of metrics.
As a website owner, you should take care of all visitors coming to your site. Let’s be honest: Who wants to wait for 10 seconds or more for a page to load and then straight away deal with unexpected design elements?
3 Main factors which Google is looking for:
- Largest contentful paint (LCP). If a visitor clicks on a link pointing to your website, what is the largest element taking the most time to load. This may be an image, embedded video, presentation, or any other element.
- First input delay (FID). If a visitor opens your website, how long it takes him/her to be able to interact with the website via browser. e.g. click a button.
- Cumulative layout shift (CLS). In short, this factor measures website design visual stability at a moment the website loads.
Time matters
Below you can see a metrics table for core web vitals. If your website doesn’t meet the criteria, then beware- some of your rankings in SERP may fall down.
Why core web vitals are important?
In 2019 Google introduced mobile-first indexing because more and more consumers use mobile devices instead of desktop/laptops. Yet, at a time it wasn’t a ranking factor looking from an SEO perspective until the start of 2021. This means you will have to take action and optimize your blog or website for the best user experience possible.
How to measure core web vitals?
There are several tools you can use to check performance and find problems:
- Google page speed insights
- Google lighthouse
- Core web vitals Chrome extension
- Web dev
- Batch speed
- Google search console | Core web vitals | Mobile usability reports (to see affected posts/pages).
You may be curious: why there are no GTmetrix on this list? That’s because the free version of GTmetrix will show you speed only on the desktop version of your website. In this case, it does not help to test and see core web vitals problems.
How to fix core web vitals?
If you are a web developer, programmer, or have enough technical knowledge to configure your server, website caching, and everything else- I can applaud. But what if you don’t? I’ve been doing research for a whole week on this topic, making experiments and this is what I can suggest to everyone, who is looking for quick core web vitals fix solutions.
I’ve started working on speed optimization with this report
1. Image optimization
By optimizing images, you can feel the effect- this is one of the largest elements affecting speed. Make sure you upload the correct size, scaled images straight to your blog. Watch this video I have made recently.
You don’t need to use photoshop or any other expensive software to compress images. Here are several tools I use:
- Squoosh app made by Google (free online tool)
- Gimp on my computer (free software on your laptop or desktop)
- For everyone who wants to add geotagging you can use free service like thexifer
2. High-performance server
My website was hosted on slow shared hosting and at first I thought a high-performance server can solve all my problems. So I picked up VPS (Virtual Private Server) with 4 cores CPU, 8Gb ram, and SSD for a month to test it out. Most of my websites are built using a WordPress content management system. So I’ve built a new site and uploaded content from my existing live website. Run a test multiple times with a variety of configuration settings.
I could write here an essay on what and how many changes I’ve made, but everyone cares about results. Only jumping to another server will not solve all of your website problems. However, if you don’t plan to use any CDN service at all,- it will be your main factor affecting loading speed.
Even if you’re just starting out a new blog/website, pick the best possible option you can find for a buck. Don’t go insane, unless you have at least 10K visitors a month, income flows already and you’re able to upgrade. I personally recommend this hosting for the best price & performance rate. (see screenshot below).
3. Utilizing content delivery network (CDN)
Most of my websites are already connected to Cloudflare (free version) for over a year. The company provides really good service for everyone around the globe. During the last couple of years, it even improved by adding great features like free SSL, minifying scripts, rocket loader, offline mode, and other features. Yet this is not enough either to meet web vitals criteria. Quick disclaimer: I haven’t tried any Pro or business plans yet.
While making all the tests I found another service, which made a huge positive impact. It is made specially to improve blog and website loading speed by looking at Google page speed insights and Lighthouse guidelines. The best part is: it can work in line with Cloudflare together.
Caching and preloading
Caching and preloading rules are super important, that’s why you want to use these.
- WpRocket took care of caching, optimizing all scripts: CSS, HTML and JS.
- Optimizing images: automatically served in WebP format when possible.
- In buid CDN to offload your website files and load it fast across the globe to reduce latency and increase speed.
- Everything else needed to achieve great results. The majority of the problems fixed (in my case).
4. WordPress fast loading theme
There are so many themes on the WordPress repository you can get lost looking for the right one. Many bloggers purchased premium products to get the latest updates and follow constantly updating standards and security bug fixes, so I did the same.
For more than 2 years I use Thrive themes. The company recently made a theme builder which is great. Over years Thrive suite improved a lot in terms of functionality, but looking at speed there is a place to make it even better.
After playing with settings this is my homepage report from lighthouse today:
There are a couple of issues I am left with now, shown in SEO, “Not crawlable menu on mobile devices”. Links that do not have descriptive text are shown near every blog post excerpt “Read more”. This I might find a way to fix…
Turns out the pick of your theme may affect speed and CLS (cumulative layout shift) factor in Google core web vitals as well (tested with a couple of themes).
I have several websites and the fastest lightweight WordPress theme that I’ve found and used is GeneratePress. I suggest using it for every blogger.
P.S. Your website will not pass the test if there will be opt-in form loading straight away. Tested using the Thrive leads “scroll mat” type option. Yet, if you use opt-in on “exit intent” it will not affect the CLS test.
Never embed Twitter tweets, pins from Pinterest, Instagram images, Facebook posts, and others, because it will increase loading time. Rather make a screenshot and add it as an image (you can link to these if needed).
If you are advertising- don’t add banners directly from advertisers, upload creatives to your own server and link them.
YouTube videos are another story because videos will load even slower from your own hosting (in most cases).
5. Delete inactive plugins
Every single line of code bloats the system. So if you have a website built on WordPress,- delete all inactive plugins and not use current themes. After doing so I ran one more test, which is batch speed. It will crawl your website and will test 15-20 URLs generating reports of your loading performance on mobile and desktop. If your page takes to load more than 3 seconds, then you have to start looking for issues.
Here are test results from the Batch speed:
You might also like: Why best WordPress hosting is not the best
Wrapping up
If you’re not super techy like me, then I hope this guide will help you to optimize for core web vitals updates and provide a better user experience for website visitors 🙂
