Em vs px for font sizing matters to loading speed

Configuration Frontend
1

I used custom:digital-clock but I tried this with an entity card and sensor.time as well, with a very similar result.

I like a large digital clock at the top of my dashboard; 6em for the phone and 10em for the tablet. I replaced these with similar values in px (60px, 96px) and the largest contentful paint time in console (I’m using chrome; this is a normal measure of page loading time) went from 1.3 sec to 0.3 sec.

This improvement is really noticeable on my phone if I’m connected with wifi, even if I’m using the nabu.casa link and not homeassistant.local, which I use for seamless access roaming.

I’ve preferred em for web design because it accommodates different screens better, but for sizing a clock, it hardly matters.

YMMV.

Correction: it was font size which unfortunately I didn’t hold constant in my experiment, attributing to em a larger font. But still notable is that a large font size renders a lot slower, in the experiment below, .15 sec vs .7 sec.

2

I use em almost exclusively to due its dynamic sizing capability, but 1 second due to a simple digital clock is pretty big. Guess I’m experimenting next weekend.

3

That is true.
The rensering happens on the device and not the server, so you need to look at what can be done there.
An old or underpowered device will be more affected than a new flagship phone.

4

I spent more time, enough to correct the title. It isn’t em vs px, it is large vs small. Here is my experiment:

views:
  - title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            entity: sensor.time
            show_icon: false
            show_label: false
            show_name: false
            show_state: true
            styles:
              state:
                - font-size: 12em
                - line-Height: 12em
                - font-weight: bold
                - text-transform: uppercase
              card:
                - border: 0px solid rgb(255, 255, 255)
                - height: 240px
          - type: custom:button-card
            entity: sensor.date
            show_icon: false
            show_label: false
            show_name: false
            show_state: true
            styles:
              state:
                - font-size: 6em
                - line-Height: 6em
                - font-weight: bold
                - text-transform: uppercase
              card:
                - border: 0px solid rgb(255, 255, 255)
                - height: 120px
    type: panel
title: RPM

vs

views:
  - title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            entity: sensor.time
            show_icon: false
            show_label: false
            show_name: false
            show_state: true
            styles:
              state:
                - font-size: 2em
                - line-Height: 2em
                - font-weight: bold
                - text-transform: uppercase
              card:
                - border: 0px solid rgb(255, 255, 255)
                - height: 80px
          - type: custom:button-card
            entity: sensor.date
            show_icon: false
            show_label: false
            show_name: false
            show_state: true
            styles:
              state:
                - font-size: 2em
                - line-Height: 2em
                - font-weight: bold
                - text-transform: uppercase
              card:
                - border: 0px solid rgb(255, 255, 255)
                - height: 80px
    type: panel
title: RPM

The large font takes a half second (average .55 in five runs) longer than the smaller font. The gap appears larger when I use custom:digital-clock, which was my normal one and why I was seeing a full second.

5

BTW, the time lag appears to be present in both the web app and the companion app. My focus was primarily on improving the responsiveness of the companion app, so that I can quickly execute a button.