Вам нужно предварительно загрузить шрифты в ‹head› и объявить их в CSS как font-face?

Мой вопрос возникает из-за попытки оптимизировать предварительную загрузку ключевых активов теста маяка.

Я поместил шрифты, помеченные отчетом о маяке в браузере Chrome, в ссылку в моем головном файле.

[заголовок.php]

<link rel=”preload” href=”/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf” as=”font” crossorigin=”anonymous”>

Мне все еще нужно включить его в мой файл style.css и объявить шрифт?

[стиль.css]

@font-face {
  font-family: "Roboto";
  src: url("/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf") format("truetype"); }

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

Спасибо за вашу помощь.


wordpress css lighthouse preload font-face
person ACGG    schedule 20.01.2021    source источник
comment
Убедитесь, что <link rel="preload" стоит перед объявлением шрифта. Обычно вы можете объявить шрифт как <link или в файле CSS, но опять же убедитесь, что файл CSS, который ссылается на шрифт, находится после предварительной загрузки.   -  person Graham Ritchie    schedule 20.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

Обе декларации не имеют одной и той же цели.

Значение preload атрибута rel элемента позволяет вам объявлять запросы на выборку в HTML, указывая ресурсы, которые потребуются вашей странице очень скоро, и которые вы хотите начать загружать в начале жизненного цикла страницы, до того, как сработает основной механизм рендеринга браузера.

Если вы добавите предварительную загрузку отдельно, ваш шрифт не будет учитываться. Вы также должны указать действие.

<link rel="preload" href="style.css" as="style"> <!--preload-->
<link rel="stylesheet" href="style.css"> <!--action-->

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

Как сказал Грэм в комментарии, предварительная загрузка может быть эффективной только в том случае, если она указана перед любыми действиями, связанными со шрифтом, такими как тег <link> (загрузка шрифта через html) или сам файл css.

Кроме того, ваш запрос зависит от style.css. загрузка вашего шрифта в html может значительно улучшить производительность. Либо встраивая его в тег <style>, либо загружая через тег <link>.

С недавними улучшениями в обслуживании шрифтов с использованием CDN загрузка шрифта из локально сохраненной версии стала неэффективной. Локальную версию следует использовать как запасной вариант. Я бы порекомендовал вам взглянуть на шрифты Google.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

Кстати, .ttf не следует использовать, он не оптимизирован. @ https://stackoverflow.com/a/11002874/3645650 вместо этого рассмотрите возможность использования .woff и .woff2.

(Запустите маяк в браузере в режиме инкогнито, чтобы получить достоверную информацию).

person amarinediary    schedule 20.01.2021