Lighthouse: убедитесь, что текст остается видимым во время загрузки веб-шрифтов MaterialDesignIcons

Question

Я хочу улучшить оценку Google Lighthouse веб-приложения, созданного с использованием Vuetify.

Чтобы повысить оценку производительности, я пытался избавиться от диагностики:

Убедитесь, что текст остается видимым во время загрузки веб-шрифта

Используйте функцию CSS отображения шрифтов, чтобы текст был виден пользователю во время загрузки веб-шрифтов. Учить больше

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

Этот результат был также для установки Robotoчерез https://fonts.googleapis.com/, и он исчез, когда я добавилdisplay=swap по ссылкам следующим образом:

<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>

Однако, видимо, нет никакой разницы добавитьdisplay=swapв файл CSS MaterialDesignIcons, например:

<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>

При этом пункт диагностики не пропадает. Как мне загрузитьmaterialdesignicons.min.cssчтобы текст оставался видимым во время загрузки веб-шрифта?