多言語での表示中にページ遷移をすると元言語がチラついてしまいます

最終更新: 2026年8月29日Markdown で開く

Autolingualは、お客様のサイトが返した元言語のコンテンツを、ブラウザ上で事後的に翻訳して表示する仕組みです。そのため、ページの読み込み直後のごく短い時間だけ、翻訳前の元言語のテキストが表示される場合があります。ページ遷移のたびに新しいHTMLが読み込まれ、そのつど翻訳処理が実行されるため、遷移のたびに同じ現象が発生します。

サーバーサイドで翻訳する方式であれば、レスポンスのHTMLドキュメント自体が最初から翻訳後の言語になるため、この現象は原理的に発生しません。一方、Autolingualのようにブラウザ側で翻訳を適用する方式では、構造上チラつきが発生しうる前提があります。

ただし、表示までの各処理を高速化することで、見かけ上「最初から翻訳後の言語で表示されている」状態に近づけることが可能です。以下の順にご確認ください。

#1. 元サイトのページ読み込み速度をご確認ください

チラつきの長さは、元サイト自体のページ読み込み速度に大きく依存します。 Autolingualの翻訳処理は元のコンテンツが読み込まれたあとに実行されるため、元サイトの表示が遅いほど、翻訳が適用されるまでの時間も長くなります。

サーバー応答時間（TTFB）の改善
レンダリングをブロックするスクリプト・スタイル・フォントの削減
CDNやキャッシュの活用

まずはこちらの改善をご検討ください。元サイトの表示が速くなるほど、以下の設定による効果も大きくなります。

#2. 初期表示をウェイトする機能をご利用ください

Autolingualには、翻訳の適用が完了するまでページの表示を待機させる機能があります。翻訳前のコンテンツが表示されないため、チラつきそのものを回避できます。

言語切り替え時のちらつき防止設定

待機している間はページの表示が始まらないため、表示開始までの体感時間は長くなります。チラつきを避けるか、表示開始を早めるかのバランスでご検討ください。
上記1のページ読み込み速度が遅い場合、待機時間もその分長くなります。

#3. スクリプトタグの埋め込み位置をご確認ください

Autolingualのスクリプトが早く実行されるほど、翻訳の適用も早くなります。埋め込み位置を見直すことでパフォーマンスが改善する場合があります。

</body> ではなく、<head> 内に配置する
<head> 内でも、できるだけ上部（早い段階で実行される位置）に配置する

html

<head>  <meta charset="utf-8">  <script src="..."></script>  <!-- できるだけ上部に -->  ...</head>

#翻訳がまだ生成されていないページの場合

そのページの翻訳がまだ生成されていない段階では、翻訳処理そのものに時間がかかるため、通常よりチラつきが長くなります。

公開前や検証時には、対象のページを一度ご覧いただき、翻訳が生成された状態で改めてご確認ください。初回アクセス時の表示速度をもって判断されると、実際の閲覧者の体験より遅く見える場合があります。

#上記でも解決しない場合

以下の情報をあわせてサポートまでお知らせいただけますと、調査がスムーズです。

事象が発生しているURL（言語別URL）
発生日時と、ご利用のブラウザ・端末
チラつきが発生している時間の長さ（画面録画をいただけると確実です）
初回アクセス時のみか、2回目以降も発生するか
Autolingualのスクリプトタグの埋め込み位置・方法（タグマネージャ経由かどうかを含む）
特定のページのみで発生するか、サイト全体で発生するか