Удалите webfont. js как ресурс, блокирующий рендеринг - lighthouse - PullRequest
Новая
       67

Удалите webfont. js как ресурс, блокирующий рендеринг - lighthouse

0 голосов
/ 19 июня 2020

В настоящее время я пытаюсь оптимизировать свой сайт и загружать семейство шрифтов асинхронно

Сначала это была проблема со значками материалов, как на изображении ниже

enter image description here

После избавления от этой проблемы с помощью веб-загрузчика в индексе. html Теперь у меня есть эта ошибка, избавиться от которой оказалось не так просто

enter image description here

Чтобы попытаться решить эту проблему, я изменил ссылку CDN <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script> на webfont. js на использование npm i webfontloader и локальную загрузку, но проблема все еще существует. Как я могу заставить webfont. js не блокировать рендеринг?

index. html

<!doctype html>
<html lang="en">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta charset="UTF-8">
  <title>My App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/logo.ico">


  <script src="../node_modules/webfontloader/src/core/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        families: ['Material+Icons']
      }
    });
  </script>



</head>

<body>
  <app-root>

  </app-root>
</body>


</html>
...