におけるコアウェブバイタルは 多言語ウェブサイト 、訪問者がサイトに留まるか、すぐに離脱するかを決定する上で大きな役割を果たします。ウェブサイトのパフォーマンスは、単なるレポート上の数値ではなく、実際のユーザーエクスペリエンスです。多言語サイトでは、翻訳から画像まで、あらゆる要素がページ速度と安定性に影響を与えるため、課題はさらに大きくなります。
では、多言語機能を犠牲にすることなく、コアウェブバイタルを最適化するにはどうすればよいでしょうか？この記事では、その影響と、多言語サイトの高速性、応答性、そしてユーザーフレンドリーさを維持するための最適な戦略について解説します。さあ、始めましょう！
コアウェブバイタルとは何ですか?
コアウェブバイタルは、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など サポートする 。
キャッシュと圧縮を実装する
キャッシュと圧縮は、ページの読み込み速度を向上し、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;）。
翻訳の読み込みは、ページレイアウトや視覚要素の安定性に影響を与える可能性があります。そのため、 動的翻訳をのように LinguiseLinguiseLinguise LinguiseLinguiseLinguiseLinguise LinguiseLinguise リアルタイムで翻訳できます
言語間で一貫したUIを確保する
多言語サイトでは、ユーザーが言語を切り替えると、各言語のテキストの長さが異なるため、レイアウトが変化することがよくあります。例えば、ドイツ語のテキストは通常英語よりも長いため、レイアウトが柔軟でないと要素の位置がずれてしまうことがあります。異なる言語間でUIの一貫性を保つには、以下の点に注意してください。
- テキスト サイズに比例を保つには、em や rem などの相対単位を使用します。.
- ボタン、ヘッダー、ナビゲーション要素に、テキストの長さの変化に対応できる柔軟なスペースがあることを確認します。.
- CSS グリッドまたは Flexbox を使用して、固定サイズに依存せずにレスポンシブで動的なレイアウトを作成します。.
言語間のテキストの長さの違いに対応できる柔軟な UI を設計することで、ユーザーを煩わせるレイアウトの変化を回避できます。.
結論
コアウェブバイタルは、多言語サイトのパフォーマンスとユーザーエクスペリエンスに大きな影響を与えます。LCP、CLS、INPなどの指標は、ページ速度、安定性、応答性に影響を与え、SEO、ユーザー維持率、コンバージョン率にも影響を及ぼします。画像の最適化、キャッシュの実装、高品質なホスティングの利用、CDNの活用により、サイトの読み込み時間を最小限に抑え、多言語でのユーザーエクスペリエンスを向上させることができます。この戦略により、豊富なコンテンツを備えた多言語機能を犠牲にすることなく、各ページの高速性と効率性を維持できます。.
多言語サイトの柔軟性を損なうことなく、ウェブサイトのコアパフォーマンスを向上させるには、 お試しください Linguise キャッシュ、速度、帯域幅効率をサポートする翻訳ソリューションである LinguiseLinguiseLinguise LinguiseLinguiseLinguiseLinguise LinguiseLinguise ！
