How to Debug Core Web Vital issues on your site in less than 10 minutes + SEO weekly News
Good morning. More than a week since my previous post, but this one will be extra beefy. News wise, the last couple of weeks has been packed full of them.
As per usual, some of them were exploded out of proportion while some of them were never even mentioned.
Here's a list of some of the news that I found extremely interesting from last week.
"content-visibility" the new CSS property that boosts your rendering performance. The "content-visibility" is a new CSS properly launching with Chromium 85 that can improve initial load time by skipping the rendering of off-screen content.
Check out the image below as an example.
Bing has rolled out the new Webmasters dashboard to everyone. The UI feels like Google Search Console but with an extra couple of tools with promises for more.
Google bug makes everyone go crazy. The obvious "SEO Gurus" overreaction took this overboard and started talking about some crazy theories. As per usual, after it was marked as a bug, the same people ... "knew if from the start".
Several A/B tests running on SERPs UI with some of them bringing the "People also asked" section floating on the right of the results, which might increase the number of those boxes to three or four per page. My personal view? Please refrain from clicking in case they consider it the winning variant of the tests.
The 10 Minute CWV Debugging
Earlier this year, Google announced the Core Web Vitals (CWV). The CWV initiative is meant as universal guidance for quality signals that Google considers essential for excellent user experience on the web. Even though not currently a ranking factor, Google has made it clear that it will become a ranking signal next year.
If you've created a website before 2020, incorporating CWV into your website's core might require a lot of going back and fixing issues that you might never consider them as an issue. (You can see if something is considered an issue via your GSC Core Web Vitals report).
So how can you figure out which specific element is causing problems for your site?
Check out the gif below
Here's a step by step guide to help you replicate the above gif on your own site.
- Open the pages marked as having issues in GSC.
- Open the chrome dev tools
- Go to performance and if you want to see some handy screenshots make sure to ✅ the screenshot option
- Optional - Open up the "Customize and control" setting (three vertical bullets next to the spinning wheel menu)
- Optional - Select the "More Tools" drop down menu and then "Rendering"
- Optional - ✅ the "Layout Shift Regions" option
- Hit the "Start profiling and reload page" or Ctrl-Shift-E.
Once the profiling finishes, Google has now categorized all of your Layout Shift issues under the label "Experience". If you click in one of the red marked labels you will be able to see the element that is causing the layout shift issues move directly on the page. If you had the screenshots enabled you will be able to see how it actually looked during the loading stages.
Now all you have to do is find a solution depending the problem. Here are some common issues.
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamically injected content
- Web Fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM
Find solutions for the above problems directly from Google right here.
Have fun debugging!
Talk soon,
Angelos
PS.
If you like the compact level of details and the extra tip or case study that I usually add in my posts, consider signing up to my Weekly Newsletter
