多言語ウェブサイトにおけるコアウェブバイタルは、訪問者がサイトに留まるか、すぐに離脱するかを決定する上で大きな役割を果たします。ウェブサイトのパフォーマンスは、単なるレポート上の数値ではなく、実際のユーザーエクスペリエンスです。多言語サイトでは、翻訳から画像まで、あらゆる要素がページ速度と安定性に影響を与えるため、課題はさらに大きくなります。
では、多言語機能を犠牲にすることなく、コアウェブバイタルを最適化するにはどうすればよいでしょうか？この記事では、その影響と、多言語サイトの高速性、応答性、そしてユーザーフレンドリーさを維持するための最適な戦略について解説します。さあ、始めましょう！
コアウェブバイタルとは何ですか?
コアウェブバイタルは、Googleがウェブサイトにおけるユーザーエクスペリエンスを測定するために使用する一連の指標です。これらの指標は、ページの読み込み速度、インタラクティブ性、視覚的な安定性に重点を置いています。.
コアウェブバイタルは、Largest Contentful Paint（LCP）、Cumulative Layout Shift（CLS）、そしてInteraction to Next Paint（INP）という3つの主要な指標で構成されています。これらの指標はそれぞれ、ウェブページの読み込み速度、見た目の安定性、そしてインタラクションの応答性を判断する役割を果たします。以下では、3つの指標について詳しく説明します。
最大コンテンツペイント（LCP）
LCPは、画像やテキストブロックなど、ウェブページ内の最も大きな要素がユーザーに表示される速度を測定します。この指標は、ページが迅速に読み込まれ、すぐに使用できる状態であるかどうかを判断します。.
- 良好な値: ≤ 2.5秒
- 改善が必要: 2.5～4秒
- 悪い: 4秒以上
LCP が長すぎると、ユーザーはページの表示が遅いと感じ、メインコンテンツが表示される前にサイトを離れてしまう可能性があります。.
累積レイアウトシフト（CLS）
CLSは、読み込み中のページレイアウトの安定性を測定します。ページ内の要素が読み込み中に頻繁に突然移動すると、CLSスコアが低下し、ユーザーエクスペリエンスに支障をきたす可能性があります。.
- 良好な値: ≤ 0.1
- 改善が必要: 0.1 – 0.25
- 悪い: > 0.25
CLS スコアが高いと、ページ要素の位置が変わったときにユーザーが誤って間違ったボタンやリンクをクリックする可能性があります。.
次のペイントへのインタラクション（INP）
INP は Core Web Vitals の最新の指標で、2024 年 3 月に First Input Delay (FID) に取って代わります。クリックやフォームへの入力など、すべてのユーザー インタラクションに対するページ応答時間を測定し、訪問中の最悪の応答時間を表示します。.
- 良好な値: ≤ 200 ms
- 改善が必要: 200～500ミリ秒
- 悪い: > 500 ミリ秒
INP スコアが低いほど、Web ページがユーザーの操作に応答する応答性が高くなります。.
SEOにおいて重要な要素です。これらの指標を理解し最適化することで、ウェブサイトのパフォーマンスを向上させ、訪問者のエクスペリエンスを向上させることができます。
ウェブサイトのコアウェブバイタルをテストするにはどうすればいいですか?
多言語ウェブサイトにコアウェブバイタルがどのような影響を与えるかを知る前に、ウェブサイトのスコアをテストする必要があります。テストにはいくつかのツールが使用できますが、そのうちの1つがPageSpeed Insightです。ツールページを開き、テストしたいウェブサイトのURLを入力して「分析」を。
すると、以下のように結果が表示されます。.
多言語ウェブサイトの Core Web Vitals にどのような影響がありますか?
コア ウェブ バイタルが多言語サイトのパフォーマンスに及ぼす影響をいくつか紹介します。
- ユーザーエクスペリエンスへの影響 -多言語ページの読み込みが遅かったり、応答がなかったりすると、ユーザーはイライラし、必要な情報を見つける前にサイトを離れてしまう可能性があります。Core Web Vitals は、各言語バージョンの高速性と利便性を維持するのに役立ちます。
- SEOと検索ランキングへの影響– GoogleはCore Web Vitalsをランキング要因として使用しています。LCP、CLS、INPなどの指標が低い場合、サイトは検索結果でのランキングを下げ、様々な国からのオーガニックトラフィックを減少させる可能性があります。
- 全言語で一貫したパフォーマンス –多言語サイトでは、各言語バージョンで異なるフォント、画像、コンテンツ構造が使用されることがよくあります。最適化されていない場合、言語間でパフォーマンスに差が生じ、世界中のユーザーに一貫性のないエクスペリエンスを提供する可能性があります。
- ユーザーのコンバージョンと維持率の向上 –高速で応答性の高いサイトでは、長い読み込み時間や煩わしいレイアウト変更に気を取られることなく、ユーザーがページに長く滞在してコンテンツを読み、購入や登録などのアクションを起こす可能性が高まります。
- 直帰率の低下 -ページの表示速度が遅かったり、要素が多すぎたりすると、ユーザーはサイトを早く離脱してしまいます。Core Web Vitalsを適切に設定することで、サイトの魅力を維持し、訪問者の滞在期間を延ばすことができます。
多言語ウェブサイトのコアウェブバイタルを改善するためのベストプラクティス
コア ウェブ バイタルが多言語ウェブサイトにどのような影響を与えるかがわかったので、次は LCP、INP、CLS から始めて、各指標のコア ウェブ バイタルを改善する方法を学びましょう。.
最大コンテンツペイント（LCP）の最適化
Largest Contentful Paint（LCP）は、画像や大きなテキストブロックなど、ページ上で最も大きな要素の読み込み時間を測定するCore Web Vitals指標です。LCPが遅いと、ユーザーはサイトの動作が遅いと感じ、直帰率が上昇する可能性があります。LCPを最適化するためのヒントをいくつかご紹介します。.
高速で信頼性の高いホスティングプロバイダーを使用する
サーバー速度は、LCPを含むページの読み込み時間に大きな影響を与えます。特に要素の多い多言語ウェブサイトでは、ホスティングプロバイダーの速度が遅いと重要なコンテンツの配信が遅れる可能性があります。.
高性能サーバー、高速通信、安定した稼働時間を備えた信頼できるホスティングプロバイダーを選びましょう。また、世界中のユーザーの近くにサーバーを戦略的に配置することも検討しましょう。例えば、訪問者のほとんどがアジアからの場合、その地域のデータセンターを持つサーバーを選択すると、レイテンシーの削減につながります。.
画像を最適化する
画像はページ要素の中で最も大きなサイズになることが多いため、最適化することでLCPを大幅に改善できます。最適化されていない画像はページの読み込み速度を低下させ、帯域幅の使用量を増加させる可能性があります。.
画像をより効率的にする方法をいくつか紹介します。
- 最新の画像形式を使用します。WebPと AVIF は、PNG や JPEG よりもファイル サイズが小さく、高品質を実現します。
- 画像を圧縮する – TinyPNG や Imagify などのツールを使用して、品質を犠牲にすることなく画像サイズを縮小します。
- 画像サイズを調整する –画像がユーザーの表示に必要なサイズよりも大きくならないようにします。
- 遅延読み込みを使用する –ページの読み込み時に一度にすべての画像を読み込むのではなく、必要なときにのみ読み込むため、初期のページ読み込み時間が短縮されます。
- 画像を現地のユーザー向けに翻訳または適応させる –Linguise、文化的に適切な画像を使用しているかを確認してください。Linguiseのような画像翻訳サービスの利用。
キャッシュと圧縮を実装する
キャッシュと圧縮は、ページの読み込み速度を向上し、LCP（コンテンツ品質）を向上させるために不可欠です。キャッシュにより、ブラウザやサーバーはページの事前読み込みバージョンを保存できるため、ユーザーが同じページに再度アクセスするたびに再処理する必要性が軽減されます。これは、同じコンテンツを複数の言語で頻繁に表示する多言語サイトで特に役立ちます。.
翻訳プラグインをご利用の場合は、 Linguise。Linguise は専用のキャッシュサーバーを備えており、効率的なサイト翻訳を実現します。この技術により、以前に翻訳されたコンテンツがキャッシュに保存されるため、ページの読み込み時間が最大80%短縮され、動的なサイト機能を損なうことなくシームレスなユーザーエクスペリエンスを提供できます。
圧縮はウェブサイトのパフォーマンス向上に重要な役割を果たします。GzipやBrotliなどの方法を用いることで、CSS、JavaScript、HTMLファイルのサイズを大幅に削減し、サーバーからブラウザへのデータ転送を高速化できます。Linguise Linguise実装するキャッシュと圧縮の組み合わせにより、多言語ウェブサイトの高速性と高いレスポンス性を維持し、世界中のユーザーに最高のエクスペリエンスを提供します。.
CDNを使用する
コンテンツ配信ネットワーク（CDN）は、ウェブサイトのファイルを世界中の複数のサーバーに分散することで、ページの読み込みを高速化します。ユーザーは最も近いサーバーからコンテンツにアクセスできるため、読み込み時間が短縮されます。.
CDNは多言語サイト、特に複数の国にまたがるユーザーを抱えるサイトにとって不可欠です。CDNは、遠隔地のメインサーバーにのみ依存することなく、より高速なコンテンツ配信を実現します。CloudflareやRocketCDNなどのサービスは、コンテンツ配信を効率的に加速するのに役立ちます。.
さらに、翻訳プラグインをご利用の場合は、CDNが翻訳コンテンツを最適化し、より迅速なグローバル配信を実現していることを確認してください。これにより、サイトで利用可能なすべての言語で一貫したユーザーエクスペリエンスが保証されます。.
次のペイントへのインタラクションの改善（INP）
INPは、クリック、テキスト入力、ナビゲーションといったユーザーインタラクションに対するウェブサイトの応答速度を測定する指標です。INPが高いと、ユーザーはサイトの速度が遅く、反応がないと感じ、ユーザーエクスペリエンスが低下し、直帰率も上昇する可能性があります。INP指標を改善するためのヒントをいくつかご紹介します。.
非同期および遅延読み込みを使用する
スクリプトを非同期（async）で読み込むか、遅延させることで、JavaScriptによるページレンダリングのブロックを効果的に防ぐことができます。ブラウザはデフォルトでスクリプトを順次処理するため、重要な要素が画面に表示されるまでに遅延が生じる可能性があります。.
- 非同期:スクリプトは HTML と一緒に読み込まれ、他の要素の処理が完了するのを待たずにダウンロードされるとすぐに実行されます。
- 延期:スクリプトは HTML とともにダウンロードされますが、ページ全体のレンダリングが完了した後にのみ実行されます。
外部 JavaScript にこのメソッドを使用すると、ブロック時間を短縮し、大量のスクリプトの読み込みによって中断されることなく、サイト上のインタラクティブな要素がより速く応答できるようになります。.
JavaScript実行を最適化する
JavaScriptの実行速度の遅さは、インタラクションの遅延の主な原因の一つです。JavaScriptスクリプトの実行時間が長すぎると、ブラウザはユーザーの入力に迅速に応答できなくなります。JavaScriptの実行を最適化するための手順をいくつかご紹介します。
- メイン スレッドの負荷の高いタスクを減らす – Web Workers を使用して複雑なコードを別のスレッドで実行し、メイン ページのレンダリングを妨げないようにします。
- コード分割を使用する – JavaScriptを小さなチャンクに分割し、特定のページに必要なスクリプトのみを読み込みます。これにより、初期実行時間が短縮されます。
- 不要なイベントリスナーの使用を避ける –ページ要素にイベントリスナーが多すぎると、サイトのレスポンスが遅くなる可能性があります。使用していないイベントリスナーを削除するか、イベントデリゲーションを使用して最適化してください。
- スロットリングとデバウンス技術を使用する –これは、ブラウザに過負荷をかけないように、スクロールやユーザー入力など、頻繁に呼び出されるイベントの実行を制御するのに役立ちます。
JavaScript の実行を最適化することで、ユーザー インタラクションの応答性が最大限に高まります。.
ユーザーインタラクションを優先する
ページが読み込まれると、多くの要素とスクリプトがリソースを奪い合います。ユーザーインタラクションが優先されない場合、サイトのレスポンスが遅くなり、応答がないように感じることがあります。.
これに対処するには、ユーザーが最も頻繁に操作する要素が最初に読み込まれるようにしてください。適用できる戦略としては、以下のようなものがあります。
- 入力準備を使用する –ページ全体の読み込みが完了するのを待たずに、ボタン、フォーム、ナビゲーションなどの入力要素をすぐに使用できるようにします。
- プログレッシブ エンハンスメントを適用する –すぐに使用できる基本的なサイト バージョンを作成し、その後、JavaScript を使用して徐々に機能を改善します。
- アイドル時間をプリロードに使用する –ユーザーが非アクティブなときに、その時間を利用して追加のスクリプトをロードし、次のセッションでの対話性を向上させます。
ユーザーインタラクションを優先することで、サイトエクスペリエンスはより高速かつ直感的になります。.
必須でない要素の遅延読み込み
遅延読み込みとは、必要不可欠ではない要素の読み込みを、本当に必要になるまで遅らせる手法です。これは、ページが最初に表示される際に読み込む必要がある要素の数を減らすことで、最初のインタラクションを高速化するのに非常に役立ちます。遅延読み込みに最適な要素には、以下のようなものがあります。
- 画面の下の画像と動画 –画像やメディア要素に loading=“lazy” 属性を使用して、ユーザーが関連する位置までスクロールするまで読み込まれないようにします。
- 外部ウィジェット –コメント、ライブ チャット、サードパーティの広告などの要素は、ユーザーが操作した場合にのみ読み込まれます。
- 緊急でない JavaScript と CSS –ページの最初の外観に直接影響しないスクリプトは、defer または async を使用して読み込みを遅らせることができます。
緊急でない要素に遅延読み込みを適用することで、最初のインタラクションを高速化し、ユーザーがサイトを閲覧する際のエクスペリエンスをスムーズにすることができます。.
累積レイアウトシフト（CLS）の防止
累積レイアウトシフト（CLS）は、ページの読み込み時の外観の安定性を測定する指標です。ユーザーが操作を開始した後にページ要素が突然移動すると、ユーザーエクスペリエンスが低下する可能性があります。例えば、ユーザーが何かをクリックしようとしているときにテキストやボタンが移動すると、クリックエラーやフラストレーションにつながる可能性があります。この問題を回避するために、ページレイアウトを安定させ、ユーザーにとって使いやすい状態に保つためのいくつかの戦略を実装できます。.
画像と動画の寸法を定義する
CLSの主な原因の一つは、画像や動画が事前に定義されたサイズで読み込まれていないことです。サイズが設定されていない場合、ブラウザはファイルが完全に読み込まれるまで最終的なサイズを認識できず、他の要素がずれてしまう可能性があります。これを修正するには、以下の手順を実行してください。
- ブラウザがファイルを読み込む前に適切なスペースを予約できるように、HTML 内の画像とビデオには必ず width 属性と height 属性を指定します。.
- CSSを使用する場合は、要素の比率を維持するためにアスペクト比を使用してください。例:
img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
- 画像やビデオの読み込み中にページビューを安定させるには、プレースホルダーまたはスケルトン読み込みを使用します。.
フォント表示戦略を使用する
フォントの読み込みが遅いと、「flash of invisible text」（FOIT）または「flash of unstyled text」（FOUT）が発生する可能性があります。これは、ページの読み込み後にテキストのスタイルが変わり、他の要素の位置がずれてしまう現象です。この問題を解決するには、以下の手順に従います。
- CSSのfont-display, swap;プロパティを使用すると、メインフォントが読み込まれる前に、ブラウザにバックアップフォントでテキストをすぐに表示させることができます。例：
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff2') format('woff2');
font-display: swap;
}
- カスタム フォントの読み込みの遅延を回避するには、可能な場合はシステム フォントを使用します。.
- メインフォントを以下のタグでプリロードします。<head>フォントが早くダウンロードされるようにするには:
<link rel="preload" href="customfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
動的なコンテンツの挿入を避ける
ページ読み込み後に広告、通知、サードパーティ製ウィジェットなどの要素を動的に追加すると、他の要素が突然移動してしまう可能性があります。これは、ニュースサイトやeコマースサイトでよく発生するCLSの主な原因の一つです。この問題を回避するには、以下の手順を実行してください。
- 要素を読み込むためのスペースを予約する –ページの中央に広告やバナーが表示される場合は、レイアウトが突然変わらないように、最低限の高さの空きスペースを割り当てます。
- スムーズなトランジションアニメーションを使用する –コンテンツを動的に表示する必要がある場合は、CSS を使用してより快適なトランジション効果を実現します。
- 新しい要素が既存の要素を置き換えないようにします。通知メッセージやポップアップを表示する場合は、メインのレイアウト フローの外側に配置します (例: position: fixed; を使用)。
翻訳の読み込みは、ページレイアウトや視覚要素の安定性に影響を与える可能性があります。そのため、 Linguiseのように簡単にセットアップできる動的翻訳をLinguiseリアルタイムで翻訳できます。
言語間で一貫したUIを確保する
多言語サイトでは、ユーザーが言語を切り替えると、各言語のテキストの長さが異なるため、レイアウトが変化することがよくあります。例えば、ドイツ語のテキストは通常英語よりも長いため、レイアウトが柔軟でないと要素の位置がずれてしまうことがあります。異なる言語間でUIの一貫性を保つには、以下の点に注意してください。
- テキスト サイズに比例を保つには、em や rem などの相対単位を使用します。.
- ボタン、ヘッダー、ナビゲーション要素に、テキストの長さの変化に対応できる柔軟なスペースがあることを確認します。.
- CSS グリッドまたは Flexbox を使用して、固定サイズに依存せずにレスポンシブで動的なレイアウトを作成します。.
言語間のテキストの長さの違いに対応できる柔軟な UI を設計することで、ユーザーを煩わせるレイアウトの変化を回避できます。.
結論
コアウェブバイタルは、多言語サイトのパフォーマンスとユーザーエクスペリエンスに大きな影響を与えます。LCP、CLS、INPなどの指標は、ページ速度、安定性、応答性に影響を与え、SEO、ユーザー維持率、コンバージョン率にも影響を及ぼします。画像の最適化、キャッシュの実装、高品質なホスティングの利用、CDNの活用により、サイトの読み込み時間を最小限に抑え、多言語でのユーザーエクスペリエンスを向上させることができます。この戦略により、豊富なコンテンツを備えた多言語機能を犠牲にすることなく、各ページの高速性と効率性を維持できます。.
多言語サイトの柔軟性を損なうことなく、コアウェブバイタルを向上させるには、キャッシュ、速度、帯域幅効率をサポートする翻訳ソリューション、 Linguiseをお試しくださいLinguiseページの読み込みを最大80%高速化し、あらゆる言語でスムーズで最適化されたユーザーエクスペリエンスを実現します。翻訳によるサイトパフォーマンスの低下を防ぎましょう。Linguise！
