SEOChina

グレートファイアウォールとSEO｜中国からサイトが遅い原因になる海外のフォント・JSの見つけ方と直し方

「サーバーは香港に移したのに、中国の取引先から『サイトが真っ白なまま開かない』と言われる」。こうした相談の原因としてよく挙がるのが、ページの中で読み込んでいる海外のWebフォントやJavaScriptです。中国本土からは、グレートファイアウォール（中国のネット検閲の仕組み）によって一部の海外サービスにつながりにくくなっています。そのサービスのファイルを読み込んでいるだけで、ページ全体の表示が遅れることがあります。

サーバーの選び方は「中国向けサイトのサーバー選び」で解説しました。この記事では、サーバー以外に原因がある場合に、どのファイルが表示を止めているのかを日本から調べる手順と、種類ごとの直し方を説明します。

なぜ海外のファイル1つでページ全体が遅れるのか

つながらないのではなく「待たされる」ことがある

グレートファイアウォールの仕組みは公表されていませんが、研究者による観測が続けられています。カナダのトロント大学の研究機関 Citizen Lab が紹介した測定プロジェクト「GFWatch」によると、検閲の対象になったドメインの名前を問い合わせると、本物とは違う偽のIPアドレスが返されます。2020年4月から12月の測定では、30万件を超えるドメインが対象になっていたと報告されています。また、TCPを使ったDNSの問い合わせには、接続を強制的に切る信号が送られるとしています。

このようにして、ブラウザは本来のサーバーにたどり着けません。すぐにエラーで終わる場合もありますが、偽の宛先からの応答を待ち続け、タイムアウトするまで先に進めない場合もあると考えられます。このとき「待たされている」ファイルが、ページの表示に欠かせないものだと問題が大きくなります。

表示を止めるファイルと止めないファイル

ブラウザは、ページを表示する前に読み込みを終えておく必要があるファイルがあると、それが届くまで画面を描きません。Chrome の Lighthouse の説明では、次のものを「表示をブロックするリソース」としています。

  • <head> の中にあり、async も defer も付いていない <script>
  • <link rel="stylesheet"> で読み込むCSS（media 属性で別の画面向けに限定していないもの）

Google Fonts を使うときに <head> に入れる <link href="https://fonts.googleapis.com/css2?..."> は、まさにこのCSSにあたります。Chinafy や AppInChina など中国向けサイトの支援会社は、Google Fonts は中国本土でブロックされていると説明しています。つまり、見た目を整えるためのフォント1つの指定が、中国からはページ全体の表示を止める原因になりえます。

一方、async や defer を付けたスクリプトや、ページの下のほうで読み込む埋め込みは、届かなくても本文の表示は先に進みます。そのため、まずは「表示を止める側」に海外のファイルが入っていないかを調べるのが近道です。

原因のファイルを日本から見つける手順

1. 読み込んでいる海外のドメインを書き出す

Chrome でページを開き、デベロッパーツール（F12キー）の「Network」パネルを表示して再読み込みします。一覧の列の見出しを右クリックすると「Domain」列を追加でき、どのドメインからファイルを読み込んでいるかが分かります。

自社のドメイン以外のものを書き出し、それぞれ何のためのものか（フォント、ライブラリ、解析タグ、チャット、地図など）を確認します。テーマやプラグインが自動で読み込んでいるものも多いので、トップページだけでなく、問い合わせページや製品ページなどの主なテンプレートごとに確かめましょう。

2. ドメインをブロックして、表示がどう変わるかを見る

Chrome のデベロッパーツールには、特定のドメインへの読み込みを止めて動作を試す機能があります。Network パネルで疑わしいファイルを右クリックして「Block request」を選ぶと、「Request conditions」の画面に、そのファイルを止める設定が追加されます。設定には *://fonts.googleapis.com のような書き方でドメインを指定できます。

書き出した海外のドメインをすべて止めて再読み込みすると、中国本土から見たときに近い状態で、レイアウトの崩れや、動かなくなるボタン・フォームがないかを確かめられます。

ただし、この方法ではブロックしたファイルがすぐにエラーになるため、「待たされる」状態までは再現できません。応答を待たされたときにどれだけ表示が遅れるかを確かめたい場合は、WebPageTest の「SPOF」テストが使えます。指定したドメインへの通信を、応答を返さないサーバーに送る仕組みなので、通常のテストと並べて比べれば、どのファイルが表示を止めているかが動画で分かります。

3. 中国本土から実際に確かめる

最後に、中国本土の測定拠点からページを開いて確かめます。17CE や ITDOG などの中国の速度測定サービスを使う方法は「中国向けサイトのサーバー選び」で紹介しています。サーバーの応答は速いのに、ページの表示が完了するまでの時間が長い場合は、ここまでの手順で見つけた海外のファイルが原因である可能性が高いと考えられます。

種類ごとの直し方

種類 よくある例 主な直し方
Webフォント Google Fonts 自社サーバーから配信する。端末の標準フォントで表示する
JavaScript ライブラリ 海外の公開CDNから読み込む jQuery など ファイルを自社サーバーに置いて配信する
解析タグ・広告タグ 海外の解析・広告サービス async で読み込む。中国向けの解析サービスを併用する
埋め込み 地図、動画、フォームの認証 中国で使えるサービスに置き換える

Webフォントは自社サーバーから配信する

Google Fonts などのフォントを使い続けたい場合は、フォントのファイルを自社のサーバーに置き、CSSも自社のサーバーから読み込むようにします（フォントごとのライセンスは事前に確認してください）。Chinafy は、あわせて次の工夫を勧めています。

  • CSS の font-display: swap を指定し、フォントが届くまでは端末のフォントで文字を表示する
  • 使う文字や太さだけに絞り込み（サブセット化）、WOFF2 形式にしてファイルを小さくする

中国語のフォントは文字の数が多くファイルが大きくなるため、Webフォントを使うかどうかの判断は「日本企業が中国語（簡体字）サイトを作るときのSEOチェックリスト」も参考にしてください。

JavaScript は「よそのCDN」に頼らない

jQuery などのライブラリを海外の公開CDNから読み込んでいる場合は、同じファイルを自社のサーバーに置いて配信するのが確実です。

中国からつながりやすい公開CDNに差し替える方法もありますが、他社が運営するCDNには別のリスクがあります。2024年6月、多くのサイトが読み込んでいた polyfill.io のドメインが、所有者の変わったあとにマルウェアを配信していたことが、セキュリティ会社 Sansec によって報告されました。Sansec は、同じ運営者が少なくとも2023年6月からマルウェアの配信に使っていたドメインとして、bootcdn.net や staticfile.org なども挙げています。表示を速くするための差し替えが、別の問題を招かないよう注意しましょう。

解析タグと埋め込みは用途ごとに見直す

解析タグや広告タグは、async を付けて読み込めば、届かなくても本文の表示は止まりません。ただし、中国本土からの訪問が計測から抜け落ちる可能性はあるので、百度统计などの中国向けの解析サービスの併用も検討します。地図・動画・フォームの認証（reCAPTCHA）の置き換え先は、「日本企業が中国語（簡体字）サイトを作るときのSEOチェックリスト」でまとめています。

百度のSEOとの関係

海外のファイルが読み込めなくても、ページのHTML自体は百度のクローラーに届くため、それだけで収録されなくなるとは限りません。影響が大きいのは、中国本土の訪問者がページを待てずに離れてしまうことと、表示速度の評価です。百度は表示の速さを評価に使う方針を示してきました（「中国向けサイトのサーバー選び」「百度のモバイル対応の進め方」参照）。

なお、ボタンを押すと本文が表示される仕組みなど、本文の表示を JavaScript に頼っている場合は、そのスクリプトが読み込めないと、訪問者には中身のないページに見えてしまいます。重要な本文はHTMLに直接書いておくのが安全です。

直したあとの確認

修正したら、手順1〜3をもう一度行い、海外のドメインが減ったこと、中国本土からの表示時間が短くなったことを確かめます。テーマやプラグインの更新で外部ファイルの読み込みが元に戻ることもあるため、サイトを更新したときは、海外のドメインが増えていないかを定期的に確認しましょう。

あわせて、表示の改善が検索順位にどう表れたかも記録しておくと、次の施策を決めるときの判断材料になります。

まとめ

  • グレートファイアウォールにかかったドメインには、偽のIPアドレスが返されたり、接続が切られたりする。応答を待たされると表示が遅れる
  • <head> の中のCSSや、async・defer のないスクリプトは、届くまでページ全体の表示を止める。Google Fonts のCSSはその代表例
  • Chrome の Network パネルで海外のドメインを書き出し、「Block request」で止めて表示の変化を確かめる。待たされたときの影響は WebPageTest の SPOF テストで確かめられる
  • フォントとライブラリは自社サーバーから配信する。他社の公開CDNへの安易な差し替えは避ける
  • 修正後は中国本土から速度を測り直し、更新のたびに外部ファイルの増減を確認する

SEOChinaでできること

SEOChina は、日本語で使える百度の順位チェックツールです。表示速度を改善したあと、狙っているキーワードの順位が変わったかを毎日の記録で確かめられます。

  • 登録したドメインとキーワードについて、百度PCの順位を毎日自動で記録します
  • 順位は50位まで取得し、ランクインしたURLも記録します
  • 期間を指定して、改善の前後の推移を表やグラフで比べられます（有料プランは期間の制限なく保存します）

Free プランは無料で、1ドメイン・日次順位監視10枠（履歴30日保存）から始められます。登録はこちらから行えます。

参考

ブログ一覧へ戻る