Устранить ресурсы, блокирующие рендеринг (маяк) - PullRequest
Новая
       8

Устранить ресурсы, блокирующие рендеринг (маяк)

1 голос
/ 14 октября 2019 
<!DOCTYPE html>
<html>
  <head>
    <title>BookNotes</title>

    <meta charset="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <meta httpEquiv="Content-Language" content="en" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

У меня есть эта html-страница, я хочу использовать таблицы стилей шрифтов Roboto, но, как я ее использую, Lighthouse выдает мне предупреждение:

enter image description here

Каков наилучший способ его оптимизации? Я читал, что могу использовать атрибут defer или async для его асинхронной загрузки после рендеринга, но если я его загрузлю после рендеринга, он не будет применять стили для моего шрифта и т. Д. Буду очень признателен за вашу помощь. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Ответы [ 2 ]

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

Я нашел лучшее решение: 

 <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      media="print"
      onload="this.media='all'"
    />

Это работает хорошо

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

Лично я думаю, что лучший способ справиться с этим - это загрузить шрифты асинхронно. Однако это может привести к миганию шрифта, что означает, что шрифт сначала является шрифтом по умолчанию, а затем перерисовывается вновь загруженному шрифту. Чтобы исправить это, вы можете скрыть содержимое страницы, пока шрифт не будет загружен, и показать его с обратным вызовом. Вы можете взглянуть на webfontloader . Вы также должны иметь запасной вариант для тех редких случаев, когда у кого-то отключен JS.

JavaScript 

var WebFont = require('webfontloader');

WebFont.load({
  google: {
    families: ['Roboto']
  }
});
document.querySelector('html').classList.remove('no-js')

CSS 

html {opacity: 0;}
html .wf-active, html.wf-inactive, html.no-js {opacity: 1;}

HTML 

<html lang="en" class="no-js">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...