[Suggestion] Better JS/CSS optimization and Mobile First

[SeNioR-]

Hi Guys. I've tested a few different forum topics for mobile friendliness, and it turns out that many self-hosted forums don't meet the mobile-friendly requirements. It seems that Google is blocking many necessary resources (CSS Framework and JS Libraries) so such a topic is devoid of a stylesheet and does not meet the criteria for "Core Web Vitals" and has a low "Page Experience" value.

If we look for an indexed topic and check its cache version, we'll see that it doesn't have a stylesheet. Not in all cases, but in many.

I hope that v5 will be better optimized and will not load so much unnecessary code that the Googlebot is unable to handle.

BTW: In 2024, Google is expected to introduce a INP.

Edited June 25, 2023 by SeNioR-

[Grafidea]

Agree 100%. I hope that V5 will be able to boast a high PageSpeed. A friend transferred a very large forum from free phpBB to IPS and users complain that the forum loads much longer 3-4s, and earlier on the free script 1-2s.

[Adlago]

4 hours ago, SeNioR- said:

Hi Guys. I've tested a few different forum topics for mobile friendliness,

Which test did you use, could you provide a link?

[SeNioR-]

https://search.google.com/test/mobile-friendly

[aXenDev]

 

[Marc Stridgen]

On 6/25/2023 at 2:15 PM, SeNioR- said:

hope that v5 will be better optimized

Us too! 🙂 

[Matt]

You just need to set up your server correctly, it's not just CSS/JS size. 

We have optimised our cloud platform to ensure CSS/JS is served via gzip and cached correctly and Google is more than happy with it.

Invision Community 5 is removing a lot of redundant JS and CSS, and eventually we want to remove things like jQuery, but it will be a process, so it won't be done for 5.0.0 (or we wouldn't release for another year!). Likewise, user generated content generates a lot of DOM elements and a broad platform such as a forum needs a lot of CSS and JS. 

But just setting up your server correctly will get you passing core web vitals and fetching a solid score on Page Speed tests.

[Grafidea]

I took the test twice, once positive and once negative.

[Kirill Gromov]

2 hours ago, Matt said:

and eventually we want to remove things like jQuery, but it will be a process, so it won't be done for 5.0.0 (or we wouldn't release for another year!)

Over time, does IPS migrate to pure JS or something else?

[Adlago]

1 hour ago, Kirill Gromov said:

Over time, does IPS migrate to pure JS or something else?

Have you tried using..."<link rel="prefetch"...." e.t.c.  for your JS?
You'll be surprised how well an JS created by IPS works...

 

[Matt]

2 hours ago, Kirill Gromov said:

Over time, does IPS migrate to pure JS or something else?

Native JS. Anything new in 5 is native.

[Adlago]

4 minutes ago, Matt said:

Native JS. Anything new in 5 is native.

Also think about this - if instead of 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}}

put this in include JS

{{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\Output\Javascript::javascriptCacheBustKey() )"}{{else}}{expression="$js"}{{endif}}'>
{{endforeach}}

speed indicators are improving sharply ...

[Grafidea]

19 hours ago, Matt said:

You just need to set up your server correctly, it's not just CSS/JS size. 

We have optimised our cloud platform to ensure CSS/JS is served via gzip and cached correctly and Google is more than happy with it.

Invision Community 5 is removing a lot of redundant JS and CSS, and eventually we want to remove things like jQuery, but it will be a process, so it won't be done for 5.0.0 (or we wouldn't release for another year!). Likewise, user generated content generates a lot of DOM elements and a broad platform such as a forum needs a lot of CSS and JS. 

But just setting up your server correctly will get you passing core web vitals and fetching a solid score on Page Speed tests.

The result on the computer is quite good, while on mobile devices it is average at best.

[Matt]

Average out of the box is fine, we'll take that. It passes all core web vitals tests and gets a solid average score on mobile.

We continue to improve the mobile experience with v5.