[WASM] - Custom Fonts loading time about compose-multiplatform HOT 7 CLOSED

An improvement:

internal val labelTypography: Typography
    @Composable
    get() {
        val ff = helveticaNeueFontFamily // call getter only once, so the `fetch` wan't happen every time
        return Typography(
            displayLarge = MaterialTheme.typography.displayLarge.copy(fontFamily = ff),
            displayMedium = MaterialTheme.typography.displayMedium.copy(fontFamily = ff),
            displaySmall = MaterialTheme.typography.displaySmall.copy(fontFamily = ff),
            headlineLarge = MaterialTheme.typography.headlineLarge.copy(fontFamily = ff),
            headlineMedium = MaterialTheme.typography.headlineMedium.copy(fontFamily = ff),
            headlineSmall = MaterialTheme.typography.headlineSmall.copy(fontFamily = ff),
            titleLarge = MaterialTheme.typography.titleLarge.copy(fontFamily = ff),
            titleMedium = MaterialTheme.typography.titleMedium.copy(fontFamily = ff),
            titleSmall = MaterialTheme.typography.titleSmall.copy(fontFamily = ff),
            bodyLarge = MaterialTheme.typography.bodyLarge.copy(fontFamily = ff),
            bodyMedium = MaterialTheme.typography.bodyMedium.copy(fontFamily = ff),
            bodySmall = MaterialTheme.typography.bodySmall.copy(fontFamily = ff),
            labelLarge = MaterialTheme.typography.labelLarge.copy(fontFamily = ff),
            labelMedium = MaterialTheme.typography.labelMedium.copy(fontFamily = ff),
            labelSmall = MaterialTheme.typography.labelSmall.copy(fontFamily = ff),
        )
    }

Also, give 1.7.0-dev1721 a try. It has this change: #4893 which might help a bit. (using kotlin = "2.0.20-Beta2")

Also, using rel=preload for the resources such as fonts might be beneficial: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload

from compose-multiplatform.

So, my final report:

Using rel="preload" and storing the fontFamiliy as a val inside the composable function improves significantly the performance. But combining it with 1.7.0-dev1721 removes any font lag.

Tested on the slowest physical device I have:

• Allwinner T8100 (T8100C045298)
• Android 10 API 29
• Chrome 126.0.6478.71
• Power save mode ON

No optimizations:

Optimizations + 1.6.11:

Optimizations + 1.7.0-dev1721:

@eymar I think we can close this issue and possible reopen if next Beta or RC breaks this, but I believe it would be very beneficial that this optimisations hints (especially the html one) could be documented.

from compose-multiplatform.

This is an example from a different app:

<link rel="preload" href="./composeResources/username.composeapp.generated.resources/font/FiraMono-Regular.ttf" as="fetch" type="font/ttf" crossorigin/>

from compose-multiplatform.

Anything that involves network requests (including fonts loading) will take some time to complete. Therefore, it can be barely noticeable if the connection is fast and the latency is low. But If the connection is not so fast, the UX is indeed affected.

What are the options to improve the situation:

• There is an experimental Local Fonts API available only in Chrome: https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API - so you might avoid the network request. Not all fonts will be available though (depends on the system).
• Alternatively, it's worth to preload the fonts during the app initialization - before displaying the content.

Could you please point to the place in code where you currently do Fonts loading?

from compose-multiplatform.

The tests were conducted in the same network and the fonts are local resources in the project, therefore I believe the problem remains with hardware and possible code optimisations.

I'm using composeResources so I believe the loading operations are automatic:

• Type.kt
• Theme.kt
• Fonts

from compose-multiplatform.

Nice tips, thanks!

val ff = helveticaNeueFontFamily // call getter only once, so the `fetch` wan't happen every time

✅ - this one shows significant improvements

Also, give 1.7.0-dev1721 a try. It has this change: #4893 which might help a bit. (using kotlin = "2.0.20-Beta2")

✅

Also, using rel=preload for the resources such as fonts might be beneficial: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload

Where should I apply this one? The only <link> I have is <link rel="icon" type="image/x-icon" href="icon.png">

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Who'sNext</title>
        <link rel="icon" type="image/x-icon" href="icon.png">
        <script type="application/javascript" src="skiko.js"></script>
        <script type="application/javascript" src="browserApp.js"></script>
        <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3, user-scalable=yes" name="viewport">
    </head>
    <body>
        <canvas id="WhosNext"></canvas>
    </body>
</html>

from compose-multiplatform.

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.

from compose-multiplatform.