Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+4 votes
115 views
in Themes by

Hello gold developer. LCP and CLS is now very important factor in Google ranking. Muffin theme mobile version Very bad in LCP and CLS score. Please fix this. Please.See Core web vitals error in my search console:

You can test the muffin demo theme.https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fgdon.unaux.com%2Fmuffin%2F198%2Fis-it-possible-to-disable-favoriting-users

Good LCP Score:

 

Good CLS Score :

1 Answer

+1 vote
by

This is actually a decent, reasonable number, considering it's a CMS.
Content Management Systems usually have huge chunks of scripts and code to be loaded, in order to make a CMS, what it stands for, a CMS.

If you compare these numbers with other CMSs, these are decent numbers.
For example:

Google Search Central Blog: Also known as Google Webmasters Blog back in the days. The following page is running a CM System, and is also a single page, like Muffin's we're targeting above.
Page: https://developers.google.com/search/blog/2021/07/job-posting-updates?hl=en

Score: 45

WordPress theme: Clean single page from one of wordpress.org theme demo
Page: https://spearheaddemo.wordpress.com/2020/10/26/weekly-news-about-tech-investing-and-the-digital-age/?demo

Score: 67


Can I improve Muffin numbers?

Yes you can. Here's a deeper analysis on how to.

First Contentful Paint

Basically this is the amount of painting the browser has to do at first glance when the website is loaded. Think of it like a screenshot of the first chunk of content you see when the website is loaded.

The more content displayed at first glance, the more painting the browser has to do.
Q&A sites usually have big chunks of text to be shown. Usually comes the question, with lots of text, and then the answer, which usually also have lots of text. So there's some painting to be done. (screenshot)

  • Give a bigger space in-between text lines (line-height), so less text is shown when that first glance occurs, thus meaning less painting to be done. (example)
  • Remove colorful elements. Keep things minimal and in tones of white. Keep other colors as minified as possible.

Eliminate render-blocking resources (scripts screenshot)

These also depend on your server's response time but, Over here I guess you could remove the Theme's main font, which is Roboto, and also Arimo.
Open Muffin folder > open file  qa-theme.php  , on line 32, remove fonts Roboto and Arimo:

$this->output_raw('<link href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Arimo:400|Material+Icons" media="all" rel="stylesheet"/>');

Both fonts removed should look like:

$this->output_raw('<link href="//fonts.googleapis.com/css?family=Material+Icons" media="all" rel="stylesheet"/>');

You could also remove Material icons to even decompress it more, but that would probably require more work than just remove that line.

Removing the fonts will decrease about 630ms or more of loading time. If you still want to remove stuff and/or have a really slow server, I guess you could also replace the original jQuery provided internally by Q2A, to Google's jQuery CDN link. That might improve you a few milliseconds as well.
(I'm pretty sure there's a question around the community explaining how to do so.)

The other scripts are there because they're required for the website's proper functionality.
That's why you see scripts like " muffin-not-logged.min.js " which are targeted to run only when necessary to reduce script overloading.

Reduce unused JavaScript

These have been reduced in the theme. Although Facebook JS shows up as unused. I guess you could remove that if you're not using Facebook Login, or other Facebook features.

After doing all that, that should bring you to a closer number to the 90s.

Cheers! Nice coding!

...