Lighthouse: Ensure text remains visible during loading MaterialDesignIcons Webfonts

Question

I want to improve Google Lighthouse score of a web application built using Vuetify.

To increase the performance score, I have been trying to get rid of the diagnostics:

Ensure text remains visible during webfont load

Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more

URL: https://cdn.jsdelivr.net/npm/@mdi/font@latest/fonts/materialdesignicons-webfont.woff2?v=4.5.95 (cdn.jsdelivr.net)

This outcome was also for installing Roboto through https://fonts.googleapis.com , and it disappeared when I added display=swap to the links as follows:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link 
  rel="preload" 
  as="style" 
  href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" 
  crossorigin>
<link 
  rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" 
  crossorigin>

However, apparently, it does not make any difference to add display=swap to MaterialDesignIcons css file like:

<link 
  rel="preload"
  as="style"
  href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css?display=swap"
  crossorigin>
<link 
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css?display=swap"
  crossorigin>

Doing so, the diagnostics item does not vanish. How should I load materialdesignicons.min.css so that the text remains visible during webfont load?

Ternion

Your best option would be to use @mdi/js so you aren't using a font for icons. Vuetify now supports this natively. – Macmullin

At first I doubted if it'd bring significant overhead to the bundle size, but apparently it can perform tree-shaking. Worths a try, thanks. – Ternion

@JamesCoyle does that mean it is recommended to use svg rather than fonts for icons? I'm considering to install @mdi/svg to use it in php (since I use a static website generator anyway). – Thailand

Yes SVG is a better option as you are only serving the required icons rather than the full set every time the page is loaded. – Macmullin

Material icons font is also available from fonts.google.com/icons – Ise

Answer 1

Loading in the SVG rather than loading as a font is the best solution as it:

• Only sends the required icons to the client (tree-shaking) as James Coyle also mentions
• Has potential to be loaded inline instantly with content OR like an image

To load as a font you're downloading all of the icons which is around 400KB (larger than any modern JS framework) and can slow users on poor connections down massively even if you only use 10 of the 100s of icons. And each time new icons are added you also have to download those.

Now I would think the reason that display=swap does not make any difference with the webfont is because of how display swap works:

display=swap gives the font face an extremely small block period and an infinite swap period.

Font block period: If the font face is not loaded, any element attempting to use it must render an invisible fallback font face. If the font face successfully loads during this period, it is used normally.

Font swap period: If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.

Read more on MDN

So the block period waits for the font with an invisible font for the user, and the swap period waits for the font with a fallback font face.
However unlike swapping a fancy "a" letter with "a" in a font already on the system, there's no fallback for something like an icon of a user with a cog in the corner...
So essentially the swap period acts the same as the block period and therefore display=swap functions the same as not setting it at all (display=auto - most often similar to display=block)!

Sales