Optimizing IPS for Mobile Pagespeed Insights?

[Clover13]

A consideration that has been voiced here before by others but I haven't really found a solution to, is how can we best optimize IPS for Mobile usage such that we can maximize our PageSpeed Insights scores which directly correlate to potential ad revenue/rpms for those of us that are using Google Adsense (or similar)?

Desktops scores are fairly high (85-95), but Mobile scores are very low (25-40).  Some of this is impacted by factors outside of IPS (network, server, etc) but a lot of it is code sided (CSS, JS) that impact CLS, FCP, TTI, TBT, etc) and these are all directly tied to the score which is directly tied to ad RPM.  We may not be able to reach Desktop score level, but there are likely some improvements to be had to help elevate the Mobile scores.

1. What can we do as customers to optimize Mobile scores?
2. What is out of customers' hands whereas customers are reliant on IPS to improve their code to elevate Mobile scores?

 

Edited September 17, 2021 by Clover13

[Jim M]

Very interesting topic and while I fear, I may not be a direct help, as there are a lot of things which may be better served from a hosting perspective or otherwise fall outside our scope of support, I hope clarifies some of what you asked. (Of course invite others to chime in.) 

1. The biggest impact of the "score" that I see a lot are actually from third party services/resources being integrated. This includes all around from your server, to within our software, to even Javascript you load into the software. Even using Google's own PageSpeed tool, it will flag and bring down your score for using AdSense and some more of it's own products (which I always thought to be ironic). Everything will need to be weighed on whether or not you need the integration and what impact it brings to your goals.
2. There are some items like "Remove unused CSS or Javascript", "Eliminate render blocking resources", etc... basically, anything that requires editing our core code will not be something which we support so these items would be up to us under our support policy to help improve. 

While, I do not believe this may have been the answer you were looking for, I hope it helps.

 

[Adlago]

My mobile is now in the 88-93 range.
But after 75-80 results, climbing up is increasingly difficult, and requires multiple analyzes and tests to avoid unwanted experiences.
Otherwise, to meet the requirements of Web Vitals, speed as a result of PSI is not important, but all the specified parameters.

[Adlago]

PS.Use the optimization tool Chrome development, you will find many of your mistakes, as well as options for improving your site.

[Charles]

I lost 😞 I had under 15 minutes for Adlago to post in this topic.

[Adlago]

7 minutes ago, Charles said:

I lost 😞 I had under 15 minutes for Adlago to post in this topic.

I received a good offer from PM, to hurry ... ha ha, now I understand why.😇

[Clover13]

54 minutes ago, Jim M said:

The biggest impact of the "score" that I see a lot are actually from third party services/resources being integrated. This includes all around from your server, to within our software, to even Javascript you load into the software. Even using Google's own PageSpeed tool, it will flag and bring down your score for using AdSense and some more of it's own products (which I always thought to be ironic). Everything will need to be weighed on whether or not you need the integration and what impact it brings to your goals.

I agree to a large degree, there are some things we have to balance out and accept score degradation because the things that rely on optimal score are also causing the score to be reduced (ala Adsense).

I think there should be a baseline of scores of a fresh/clean install of IPS across it's suite (Forums, Pages, etc) with a reasonable use case set of data to test.  Even third party customizations should ideally align with similar coding practices that don't result in a scoring penalty.  I know I'm making this a bit simpler than it probably is, but the nuts and bolts of it is that customers who rely on ads are leaving money on the table without those scores being optimal and that also translates to potential revenue for IPS (or an advantage a competitor gains if they can achieve it and offer that revenue upside to customers).

As an example of this page (and I know @Adlagohas done similar identification before, he was one I thought would chime in here), I believe IPS' own page should have close to optimal scores and anything that doesn't allow for this should be reviewed and improved upon.

In the case of this page, the Desktop score is top-notch (but this is also not an image heavy format and a pretty basic topic page, no sidebars, nothing intricate, all sites can't be generic in this same way).  Despite the Desktop score and simplicity of the page, the Mobile score is significantly lower and this isn't a linear scale, so even at 60 I would think getting into the upper 70s-80s should be easy and increasingly harder after that (per @Adlago's point below).

 

 

50 minutes ago, Adlago said:

PS.Use the optimization tool Chrome development, you will find many of your mistakes, as well as options for improving your site.

Is this specifically the scope of what you did, using Chrom Dev Tools to identify the problems and was it within your code or did you make alterations to the underlying IPS core libraries?

[Adlago]

Only for theme.

This is LCP and FCP

For mobile, it is important to do TBT in less than 200 milliseconds.
It turns out that using the JS prefetch does this successfully.

It's not very popular, but when using an external JS prefetch, it forces the browser to use an JS from cache, and this create less than 200 milliseconds of TBT.

[David..]

2 hours ago, Adlago said:

It turns out that using the JS prefetch does this successfully.

How do you do this?

[Adlago]

18 hours ago, David.. said:

How do you do this?

Open includeJS for editing,

Find this code

{{foreach array_unique( array_filter( \IPS\Output::i()->jsFiles ), SORT_STRING ) as $js}}
{{$js = \IPS\Http\Url::external( $js );}}
<script src='{{if $js->data['host'] == parse_url( \IPS\Settings::i()->base_url, PHP_URL_HOST )}}{expression="$js->setQueryString( 'v', \IPS\Output\Javascript::javascriptCacheBustKey() )"}{{else}}{expression="$js"}{{endif}}' data-ips></script>
{{endforeach}}

and replace with

{{foreach array_unique( array_filter( \IPS\Output::i()->jsFiles ), SORT_STRING ) as $js}}
{{$js = \IPS\Http\Url::external( $js );}}
<script src='{{if $js->data['host'] == parse_url( \IPS\Settings::i()->base_url, PHP_URL_HOST )}}{expression="$js->setQueryString( 'v', \IPS\Output\Javascript::javascriptCacheBustKey() )"}{{else}}{expression="$js"}{{endif}}' data-ips></script>
<link rel="prefetch" href='{{if $js->data['host'] == parse_url( \IPS\Settings::i()->base_url, PHP_URL_HOST )}}{expression="$js->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}{{else}}{expression="$js"}{{endif}}' as='script'>
{{endforeach}}

Note that if you use 3rd party plugins, or use ads, you will need to make another template in which to include all external java scripts, which also create a TBT increase.