Маяк: убедитесь, что текст остается видимым во время загрузки MaterialDesignIcons Webfonts - PullRequest
Новая
       45

Маяк: убедитесь, что текст остается видимым во время загрузки MaterialDesignIcons Webfonts

0 голосов
/ 03 ноября 2019

Я хочу улучшить 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в MaterialDesignIcons css файл вроде: 

<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, чтобы текст оставался видимым при загрузке веб-шрифта ?

...