Предварительная загрузка ключей запросов LightHouse - PullRequest
Новая
       102

Предварительная загрузка ключей запросов LightHouse

0 голосов
/ 21 октября 2019

Я использую font-awesome для значков в приложении angular. Я проверил свой веб-результат в pagespeed. У меня проблема со шрифтами.

Вот результат pagespeed.

enter image description here

указанное использование <link rel=preload>, но проблема..fonts/fontawesome-webfont.woff?v=4.7.0 доступен в CSS-файле FontAwesome. Как мне добавить предварительную загрузку для этого? или есть какое-то решение для его исправления?

Вот мой index.html, куда я включил font-awesome cdn. 

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" crossorigin />

Я думаю, вот проблема в css. 

@font-face {
    font-family: 'FontAwesome';
    src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

1 Ответ

1 голос
/ 23 октября 2019

Есть 3 способа сделать это.

  1. Используйте его на местном уровне. Вы знаете все остальное.

  2. Скажите браузеру, что «Я скоро назову эти файлы, будьте готовы».

Использование preconnect,(https://developers.google.com/web/fundamentals/performance/resource-prioritization?hl=en#preconnect)

Убедитесь, что вы используете as="font". 

<link rel="preconnect" as="font"
href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0" type="font/eot"
crossorigin />

Скажите браузеру, что «Я хочу, чтобы вы извлекли их как можно скорее».

<link rel="preload" as="font" href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0" type="font/eot" crossorigin="anonymous">

Для пунктов 2 и 3 повторите то же самое дляwoff и woff2. Объявляйте правильные типы MIME в типе.

...