バイリンガルサイトでは、中国語版のページが英語版より読み込みが遅いことがよくあります。原因はほとんどの場合フォントです。中国語フォントはラテン文字フォントよりはるかに多くの文字をカバーする必要があり、中国語テキストを表示する前にブラウザがダウンロードするファイルがずっと大きくなります。解決にはデザインの変更は不要です。ページで実際に使う文字だけを配信するか、中国語本文ではダウンロードフォントを使わないようにするだけで、ほとんどのギャップが解消されます。
なぜ中国語版のページは遅く感じるのか?
英語はラテンアルファベット、数字、記号を合わせて約100文字しか必要ありません。中国語では数千の常用漢字を使います。Google公式のweb.devドキュメントによると、CJK(中日韓)フォントはラテン文字フォントの約15〜20倍の文字数をカバーするとされており、これが同じページ上で中国語フォントファイルが英語フォントよりずっと大きくなる理由です。
中小企業のサイトでも対応する価値はあるのか?
あります。メインコンテンツが表示されるまでの時間(Largest Contentful Paint)はGoogleのCore Web Vitalsの一部で、ユーザー体験と検索順位の両方に影響します。また、この問題は見落とされがちです。多くのサイト運営者は英語ページだけをテストし、中国語ページのネットワークタブを個別に確認することはほとんどありません。
最も簡単な解決策:中国語本文にフォントをダウンロードしない
主要なOSには高品質な中国語フォントが標準搭載されています。Appleデバイスの PingFang SC/TC、Windows の Microsoft YaHei、Android/ChromeOS の Noto Sans CJK です。これらのシステムフォントをカスタムフォントの前に指定すれば、ブラウザは端末に既にあるフォントで中国語を即座に表示し、ダウンロードは発生しません。
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
カスタム中国語フォントが必要な場合、軽量に保つには?
Googleは2011年から、Google Fontsのリクエストに text= パラメータを付けることで、指定した文字だけを返し、フォント全体を返さない仕組みを提供しています。これはCJKフォントにも適用されます。CSSの unicode-range と組み合わせることで、web.dev自身のドキュメントはフォント転送量を約90%削減できるとしています。
チェックリスト
- 中国語版のホームページ(英語版ではなく)をChrome DevToolsのNetworkタブで開き、「Font」でフィルタする。
- フォントの転送KBを英語版と比較する。
- すでにシステムフォントを使っているか、完全な中国語フォントをダウンロードしているか確認する。
- CSSで
font-display: swapを使っているか確認する。
よくある質問
システムフォントに切り替えるとデザインが変わりますか?
ほとんど変わりません。PingFang SC、Microsoft YaHei、Noto Sans CJK はいずれも読みやすく設計された中国語フォントです。
これは英語ページにも役立ちますか?
同じ手法はどのフォントにも使えますが、本記事で説明したサイズの差はCJKフォント特有の問題です。
サイト全体を作り直す必要がありますか?
いいえ。これはフォント読み込みとCSSの調整であり、再デザインではありません。
バイリンガルサイトの作り方はウェブデザインサービスのページをご覧ください。またはサイトのフォント読み込みの無料チェックをご依頼ください。
