XF 2.1 Low Google PageSpeed Rankning on Mobile

[Shenandoah]

So the score for Mobile is a bit low. This is the result:

Spoiler: Image

This is the Xenforo forum's result:

Spoiler: Image

My question is: How can i remove or reduce render-blocking resources ? Is that possible with how XenForo is built?
Any other things we can do to improve the performance on Mobile ?

Edit

We reduced the render-blocking substantially by replacing both occurrences of:
<script src="{{ js_url('xf/preamble.js') }}"></script> to
<script src="{{ js_url('xf/preamble.min.js') }}" async></script>

Within the template helper_js_global.

This boosted our score from 65-75 to the mid 80's.

 

[tonmo]

We reduced the render-blocking substantially by replacing both occurrences of:
<script src="{{ js_url('xf/preamble.js') }}"></script> to
<script src="{{ js_url('xf/preamble.min.js') }}" async></script>

To be clear, it seems like there is only one instance of <script src="{{ js_url('xf/preamble.js') }}"></script>. Did you mean, change this:

<!--XF:CSS-->
    <xf:if is="$xf.fullJs">
        <script src="{{ js_url('xf/preamble.js') }}"></script>
    <xf:else />
        <script src="{{ js_url('xf/preamble.min.js') }}"></script>
    </xf:if>

to this:

<!--XF:CSS-->
    <xf:if is="$xf.fullJs">
        <script src="{{ js_url('xf/preamble.js') }}" async></script>
    <xf:else />
        <script src="{{ js_url('xf/preamble.min.js') }}" async></script>
    </xf:if>

?

 

[Kirby]

You can't realistically make preamble async; this is needed for feature detection and setup.
If you make it async XF might/will not initialize correctly and the UI might/will not be displayed/work properly.

 

[Shenandoah]

To be clear, it seems like there is only one instance of <script src="{{ js_url('xf/preamble.js') }}"></script>. Did you mean, change this:

<!--XF:CSS-->
    <xf:if is="$xf.fullJs">
        <script src="{{ js_url('xf/preamble.js') }}"></script>
    <xf:else />
        <script src="{{ js_url('xf/preamble.min.js') }}"></script>
    </xf:if>

to this:

<!--XF:CSS-->
    <xf:if is="$xf.fullJs">
        <script src="{{ js_url('xf/preamble.js') }}" async></script>
    <xf:else />
        <script src="{{ js_url('xf/preamble.min.js') }}" async></script>
    </xf:if>

?

Yes, that's what I meant.

You can't realistically make preamble async; this is needed for feature detection and setup.
If you make it async XF might/will not initialize correctly and the UI might/will not be displayed/work properly.

Oh, I didn't know that. That's very good to know, thank you!