Веб-дизайн

Почему китайские страницы двуязычного сайта загружаются медленнее — и 3 способа исправить шрифты

Китайские страницы двуязычного сайта часто загружаются медленнее английских, потому что китайским шрифтам нужно покрывать гораздо больше символов. По данным web.dev от Google, шрифт CJK покрывает примерно в 15–20 раз больше символов, чем латинский — и три решения (системный шрифт, подмножества символов и unicode-range) устраняют разрыв без редизайна сайта.

На двуязычных сайтах китайские страницы часто загружаются медленнее английских, и причина почти всегда — шрифт. Китайскому шрифту нужно покрывать гораздо больше символов, чем латинскому, поэтому файл, который браузер скачивает перед отображением китайского текста, оказывается намного тяжелее. Решение не требует редизайна: достаточно отправлять только те символы, которые реально используются на странице, либо вовсе не загружать отдельный шрифт для китайского текста.

Почему китайская версия моего сайта кажется медленнее?

Английскому языку достаточно около 100 символов — латинский алфавит, цифры и пунктуация. Китайский использует тысячи распространённых иероглифов. Согласно официальной документации Google на web.dev, шрифт CJK (китайский/японский/корейский) покрывает примерно в 15–20 раз больше символов, чем латинский шрифт — именно поэтому файл китайского шрифта на той же странице часто в несколько раз тяжелее английского.

Стоит ли это исправлять для сайта малого бизнеса?

Да. Скорость появления основного контента (Largest Contentful Paint) — часть Core Web Vitals Google, влияющая и на опыт пользователя, и на позиции в поиске. Кроме того, проблему легко не заметить: большинство владельцев сайтов тестируют только английскую версию и никогда отдельно не открывают вкладку сети на китайской странице.

Самое простое решение — не загружать шрифт для китайского текста

Каждая современная операционная система уже включает качественный китайский шрифт: PingFang SC/TC на устройствах Apple, Microsoft YaHei на Windows, Noto Sans CJK на Android/ChromeOS. Если указать эти системные шрифты перед любым кастомным шрифтом, браузер сразу отобразит китайский текст тем шрифтом, что уже есть на устройстве — без какой-либо загрузки:

font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

Если кастомный китайский шрифт всё же нужен, как сделать его лёгким?

С 2011 года Google позволяет добавить параметр text= к запросу Google Fonts, чтобы API возвращал только указанные символы, а не весь файл шрифта — это работает и для шрифтов CJK. В сочетании с CSS-свойством unicode-range собственная документация web.dev утверждает, что такой подход может сократить объём передаваемого шрифта примерно на 90%.

Короткий чек-лист

  • Откройте китайскую домашнюю страницу (не английскую) в Chrome DevTools, вкладка Network, фильтр «Font».
  • Сравните объём переданных килобайт шрифтов с английской версией.
  • Проверьте, используется ли уже системный шрифт или загружается полный китайский шрифт.
  • Убедитесь, что в CSS используется font-display: swap.

Часто задаваемые вопросы

Изменится ли дизайн при переходе на системный шрифт?

Совсем немного. PingFang SC, Microsoft YaHei и Noto Sans CJK — чёткие, легко читаемые китайские шрифты по своей природе.

Поможет ли это и английским страницам?

Те же техники применимы к любому шрифту, но разница в размере, описанная здесь, специфична именно для шрифтов CJK.

Нужно ли переделывать весь сайт?

Нет. Это изменение загрузки шрифтов и CSS, а не редизайн.

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

Источники