[Resolved] Mobile: Google PageSpeed score very low

[Michael]

Hi

I have read through a couple posts here already and checked this page as well – no luck yet.

My goal is to get a much higher score on Google PageSpeed for mobile. I have taken many steps already, but none of them seem to work the way I would like to.

The website is using an nginx server. This is why my webhoster does not recommend using Autoptimize.
Also, I discovered that server cache should be disabled before opening a support issue. Why is that? Asking because my website has server caching enabled.

Very glad for any helpful tips you can give me here in order to make this awesome theme perform faster on mobile. Also have PWA in use, however the normal mobile version should perform better.

Thanks in advance
Michael

[Sebastian]

Hi,
What website do you have an issue with? Can you share your lighthouse score and report? https://web.dev/measure/

The website is using an nginx server. This is why my webhoster does not recommend using Autoptimize.

Autoptimize concatenates and minimises js and css files, allows you to control Google font loading, lazy load images and use short pixel CDN to load the images. This can improve website performance on any server software. So I don’t understand where the myth comes from. However if your host was using litespeed there is a better plugin to use specifically for litespeed but that’s not the case here.

Also, I discovered that server cache should be disabled before opening a support issue. Why is that?

I think that’s to make sure that the cache is not serving stale responses and many issues can be solved by clearing the cache. It also makes debugging issues easier.

[David]

Hi there,

Thanks Sebastian –
re: NGINX / Autoptimize – not sure the reasoning here either. Maybe worth asking Frank at Autoptimize his view on this.
re: Disabling Caches – Sebastian is correct. In this instance disabling caches is not a requirement.

First off – until Google gets some realworld data, PageSpeed insights is brutal on mobile speed. What it is simulating is the lowest performance devices on the slowest of networks. You can run the same test in the Chrome Developer Tools > Audits – where you will see results measured in your own locale. As a note your site is loading in under 2secs for me on an iPhone 7 across a 3G european network.

So the big red flag is Render blocking resources: The biggest culprit looks to be GhostKit – its requesting multiple JS and CSS files that i am not sure are even being used anywhere. For example: Are you using FontAwesome icons ? I cannot see them on screen or in the HTML but it accounts for 50% of the delays that Google is reporting.
Might be worth checking in the GhostKit settings or with the Author if these can be disabled.

One thing regarding GeneratePress – in Customizer > General you can change the Icon Type to SVG this will eliminate one network request for the GP icon font.

[Michael]

Hi guys

Sebastian: Thanks so much for your input, appreciate it.
I have adjusted a few things now and improved the performance value via web.dev from 26 to 53 (which is great I think).
My hoster support just added that I should only use Autoptimize with caching disabled (or disable their server side caching). Otherwise it is very likely that some issues are caused due to the fact that two cached versions of some files are available.

David: Thank you for your really quick response. I asked Frank from AO about the combination NGINX/Autoptimize. Here is what he wrote:

Well, I use nginx + AO myself, don’t see how one would exclude the other really.

Most important things would be
* to activate JS optimization as that will lead to almost all JS being optimized & loaded late (deferred, so not render-blocking).
* to activate CSS optimization, enable “inline & defer CSS” and to either provide “above the fold CSS” yourself (which will be applied to all pages) or to use the automatic “critical CSS power-up” which will create rules with specific “above the fold CSS” for each page (but which requires an account at criticalcss.com). That will make the CSS non-render-blocking and should greatly improve the first paint times.

Next to that some (further) image optmization might help too, but that not the first concern here.

Furthermore, I disabled FontAwesome icons via GhostKit like you said. What happened is great: Loading time improved by -0.4 seconds and the performance value increased like I described above. No downsides visible so far in the frontend, which I like a lot.

Thank you very much for your support!

Cheers
Michael

[David]

Awesome – glad we could be of help and thanks for providing Franks feedback, i am sure others will find that useful.

[Author]

Posts