Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+5 votes
578 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
edited by

This is not that bad of a number, comparing it with other CMS'.
 

For example:

Google Search Central Blog: Also known as Google Webmasters Blog back in the days. The following page is running a Content Management System, and is also a single page, like Muffin's page 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 loads of text, and then the answer. So there's quite 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 black & white. Keep other colors as minified as possible.

Eliminate render-blocking resources (scripts screenshot)

Over here I guess you could remove the Theme's main font, which is Roboto, and also Arimo. Other internal file requests will depend on your server's response time.

Open Muffin folder > open file  qa-theme.php  , on line 32, remove both 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 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 shave you a few milliseconds as well.
(I'm pretty sure there's a question around, 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 those if you're not using Facebook Login, or other Facebook features.

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

Happy coding! Cheers!

by
can you please tell me how to remove material icon with out braking the site.
...