AO decreases my Mobile page score?

I was just about to answer your mail Tim ??

Anyway; the main issue seems to be that the Critical CSS that is added is simply wrong (it is _very_ short) and that leads to huge “cumulative layout shift”.

The weird thing is that when generating CCSS for e.g. your homepage I do not see that same “broken” CCSS, so I’m guessing you entered something in the “above the fold CSS”/ “default critical CSS” box? If so, can you remove that for starters?

Hello, thank you for your reply!

Thank you for the explanation, that makes sense (although as I mentioned, I’m not too technical, so go easy on me!)

The default CSS box is empty, but the “Inline and Defer CSS?” option was enabled automatically I think when I subscribed to the criticalcss website.

I’m not sure what I’m looking at in the criticalcss page – I saw the help, but it doesn’t make too much sense to me.

There are two Entries in Rules (both say Auto R) for is_front_page and is_single
And there is a long list in the Jobs box which doesn’t seem to clear.

Maybe there is an issue with that?

Thank you
Tim

the problem seems to be that something (cloudflare or a security component/ plugin) is blocking the criticalcss.com bot from accessing the page (returning a 403 “forbidden” error) which results in the jobs not finishing and few rules you have being plain wrong.

do you in cloudflare (or in a security plugin or at hoster level) have logic active to stop bots from accessing the site, because it looks like that is what’s stopping criticalcss.com from being able to generated (correct) critical CSS for your site?

So, I did add a Firewall Rule to Cloudflare.
And checked with my host to see if there was a Firewall.
But then I found a Plugin called Cleantalk AntiSpam which is used to prevent comment Spam. I didn’t realise that has a tick box called “Anti-Crawler” so I whitelisted the criticalcss.

When I log into criticalcss and generate a page, that seems to work, but there is no change in the plugin. Still the same two rules and a long list in the queue. Do I need to purge it somehow?

Thank you, I appreciate your help.

yeah, clear both all rules and jobs and give it some time to start regenerating, we can reconvene tomorrow? ??

Sounds like a plan. Thanks ??

OK so a quick update before I go to work.
It looks like the CSS has generated and the performance is much better.

I’m now scoring upper 50, early 60’s in Mobile Pagespeed ??

I really appreciate your help in getting this working.

you’re welcome Tim ??

further improvements can still be made by e.g. removing all non-essential JS-integrations (facebook like-box maybe?) and by setting the font-display property in your CSS (see https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)

have a great day!

frank

Hi Frank,

Thank you for all your help. I’m learning things too ??

I removed facebook like to make another improvement.

The font-display property is a little confusing, I understand what it’s saying but have no clue how to implement something like that. Do you have any further tips I can read of how to implement?

While testing pages on mobile for a few hours last night, (the most boring part?) I stumbled across a problem.

While on a post page, with ‘Optimise Javascript Code’ enabled, the Mobile site ‘Hamburger Menu’ and Table of Contents ‘drop down menu’ wasn’t working (both should drop down when tapped).

Further experimenting with the plugin found that it happens when “Aggregate All JS Files” is ticked.

I ticked “Do not Aggregate but Defer” instead and that fixes it.

To round up for anyone else browsing this thread, Mobile score is now 70, far better than I hoped and I will keep looking for ways to tweak this a little further.

Thank you again Frank ??

The font-display property is a little confusing, I understand what it’s saying but have no clue how to implement something like that. Do you have any further tips I can read of how to implement?

re. the font-display: that requires you (to ask the developers of the offending plugins/ theme) to make changes to the CSS, adding font-display:swap; to each @font-face block.

Thank you again Frank

you’re welcome, feel free to leave a review of the plugin and support here! ??