11

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?

Community
  • 1
  • 1
vahdet
  • 6,357
  • 9
  • 51
  • 106
  • 1
    Your best option would be to use [@mdi/js](https://www.npmjs.com/package/@mdi/js) so you aren't using a font for icons. [Vuetify now supports this natively](https://www.npmjs.com/package/@mdi/js). – James Coyle Nov 05 '19 at 22:17
  • 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. – vahdet Nov 06 '19 at 14:54
  • @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). – molerat Jul 31 '20 at 09:58
  • 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. – James Coyle Jul 31 '20 at 13:12
  • Material icons font is also available from https://fonts.google.com/icons – saravana priyan Feb 21 '23 at 11:51

0 Answers0