Задать вопрос
@wakenbyWork
html

Из за загрузки шрфитов падает Largest Contentful Paint?

Оптимизирую сайт с помощью google page speed. И никак не могу исправить проблему со шрифтами. Из за загрузки шр шрифтов падает Time to Interactive и Largest Contentful Paint и First Contentful Paint

Вот как я подключаю шрифты:

Способ 1 - Подключение со своего сервера:

styles.scss

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('/assets/fonts/Montserrat-Thin.woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('/assets/fonts/Montserrat-ExtraLight.woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/Montserrat-Light.woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/Montserrat-Regular.woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/Montserrat-Medium.woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/Montserrat-SemiBold.woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/Montserrat-Bold.woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/fonts/Montserrat-ExtraBold.woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/Montserrat-Black.woff2');
}


index.html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="preload" href="/assets/fonts/Montserrat-Thin.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="/assets/fonts/Montserrat-ExtraLight.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="/assets/fonts/Montserrat-Light.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="/assets/fonts/Montserrat-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="/assets/fonts/Montserrat-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="/assets/fonts/Montserrat-SemiBold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="/assets/fonts/Montserrat-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="/assets/fonts/Montserrat-ExtraBold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="/assets/fonts/Montserrat-Black.woff2" as="font" type="font/woff2" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>


Результат

61605499365db798003323.png


Способ 2 - Подключение с google fonts:

fonts.scss

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');


index.html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>


Результат

616056a282d38751575325.png
  • Вопрос задан
  • 130 просмотров
1 комментарий
Подписаться 3 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@romant094
Frontend-developer
Я бы попробовал грузить шрифты асинхронно.
Сначала показать контент с дефолтными шрифтами, а после загрузки первого экрана (см. critical css) подгружать шрифты кастомные.
Вот тут про это можно найти https://habr.com/ru/post/436966/.

Вообще, чтобы делать полноценную оптимизацию, нужно понимать, как браузер ведет себя когда юзер перешел на сайт. Об этом можно почитать тут: https://habr.com/ru/post/320430/
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка сайта под ключ на CMS Bitrix или Wordpress по готову дизайн
22 нояб. 2024, в 14:05
100000 руб./за проект
Написание статей в нужном стиле ( интерьер, дизайн спальни )
22 нояб. 2024, в 13:52
2000 руб./за проект
Необходимо доработать расширение для Google Chrome
22 нояб. 2024, в 13:51
5000 руб./за проект
Ещё заказы