Core Web Vitals and Q2A site issue

Question

If you have a website, you may notice that Google now integrate Core Web Vitals into Google Webmaster Search Console. This thing can be the next requirement to Search engine optimization or at least may be the next requirement for Google to include your site in top stories.

There is one main issue with Q2A site is the large DOM size. There are two many unnecessary DIVs and Span in qa-theme-base layout, such as <div class="head-clear"></div> <div class="nav-clear"></div> or abundant codes like <span class="qa-avatar-pad"> <span class="qa-when-pad"> <span class="qa-who-pad"> <span class="qa-stats-data">

This artificially inflates the number of DOMs, if you list more than 25 questions per list.

This also create a burden on CSS files, and hence the new measurement called "layout shift" as the CSS files also have a large number of DOMs. You can't blame the theme developers.

I can manually simplify my Q2A site bit by bit. But my suggestion to core developers is that may be you should reduce or simplify the basic layout to increase page load as the bogey Google wishes. The Reddit system is basically just like us, they can even have functional AMP version.

Answer 1

Hi, thanks for the question. It's a complex situation because most of the elements are there to aid theme/plugin customization. For example, the *-pad classes allow you to style prefixes/suffixes differently like the "N votes" where the number is bigger. So most of them are necessary.

The *-clear classes are a legacy for older browsers that didn't support clearfix hacks. The newer themes don't use them so we can probably update the older themes to use clearfix and then remove the elements.

The elements don't affect layout shift either since the HTML is sent from the server, not loaded on-the-fly with Javascript. I get a CLS of 0.02 on this site, and 0 on my own site. (I think the 0.02 is due to the dropdown banner that appears at the top of the page, which you can turn off in settings, and users can close themselves.)

Also when I test in Google's PageSpeed Insights, the DOM size warning is under a Diagnostics sections that it says doesn't affect the performance score. The pages I tested had scores over 95 for desktop, although a bit lower for mobile.

If you have any more ideas on which elements to remove I'd be happy to discuss them.

Comments

Hey Scott see I have implemented  AMP in q2a maybe this is the solution
Super-optimized AMP + SEO +Accessibility + Performance theme : https://www.question2answer.org/qa/85043/super-optimized-amp-seo-accessibility-performance-theme

Answer 2

Super-optimized AMP + SEO +Accessibility + Performance theme : https://www.question2answer.org/qa/85043/super-optimized-amp-seo-accessibility-performance-theme

Comments

Sir do by any chance found a way to fix this Core web vitals that have affected a lot of pages on website. I tried to visit the page you shared above but it seems to be hiden by you. Can you please help