Я пытаюсь оптимизировать время первой загрузки моей веб-страницы (созданной с помощью React), когда я использую Google Fonts, и я попробовал два способа загрузки шрифтов. Сначала была встроенная загрузка Google Font, где я поместил правила @ font-face внутри тегов стиля в заголовке документа html. Затем я попробовал второй вариант для самостоятельного размещения своих шрифтов, поэтому я загрузил их в свой проект и поместил правила @ font-fase в файлы s css. Удивительно, но я заметил более высокую производительность при использовании первого варианта, и я немного запутался, потому что URL-адреса перенаправляются на серверы Google, а во втором варианте они направляют в папки, где шрифты уже загружены, поэтому теоретически второй вариант должен быть быстрее, или, может быть, я что-то упустил ,
Первый вариант:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<style>
/* latin */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Caveat Regular'), local('Caveat-Regular'), url(https://fonts.gstatic.com/s/caveat/v7/Wnz6HAc5bAfYB2Q7ZjYY.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<title>Title</title>
</head>
<body>
{...}
</body>
</html>
Второй пример варианта для файла c s css:
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Montserrat Regular'), local('Montserrat-Regular'),
url('../fonts/montserrat-v14-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/montserrat-v14-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
Каждый из них работает нормально, но я Вы задаетесь вопросом, почему производительность первого варианта лучше, и если это хорошая практика, так загружать шрифты в производственной сборке? Я опираюсь на результаты PageSpeed Insights.