多言語のWebサイトでのコアWebバイタルは、訪問者がサイトにとどまるか、すぐに出発するかを判断する上で大きな役割を果たします。ウェブサイトのパフォーマンスは、レポートの数字だけでなく、実際のユーザーエクスペリエンスです。多言語サイトの場合、翻訳から画像まで、すべての要素がページの速度と安定性に影響を与える可能性があるため、課題はさらに大きくなります。
それでは、多言語機能を犠牲にすることなく、どのようにしてCore Web Vitalsを最適化できますか？この記事では、その影響と、多言語のサイトを迅速で応答性があり、使いやすいことを保証するための最良の戦略について説明します。始めましょう！
Core Web Vitalsとは何ですか？
Core Web Vitalsは、GoogleがWebサイトでユーザーエクスペリエンスを測定するために使用するメトリックのセットです。これらのメトリックは、ページの読み込み速度、インタラクティブ性、視覚的安定性に焦点を当てています。
コアWebバイタルは、3つの主要なメトリック、すなわち最大のコンテンツフルペイント（LCP）、累積レイアウトシフト（CLS）、および次のペイント（INP）への相互作用で構成されています。これらの各メトリックは、Webページがどれだけ速く読み込まれるか、どの程度安定しているか、および相互作用の応答性を決定する役割を果たします。 3つのメトリックの詳細な説明を次に示します。
最大のコンテンツペイント（LCP）
LCPは、画像やテキストブロックなど、Webページの最大の要素がユーザーに表示される速さを測定します。このメトリックは、ページが迅速に読み込まれ、すぐに使用できるように見えるかどうかを決定します。
- 良い値：≤2.5秒
- 改善が必要：2.5〜4秒
- 貧しい：> 4秒
LCPが長すぎる場合、ユーザーはメインコンテンツを見る前にページが遅くなり、サイトを離れることがあります。
累積レイアウトシフト（CLS）
CLSは、読み込み中のページレイアウトの安定性を測定します。ページ内の要素がロード中に突然位置をシフトすることが多い場合、これによりCLSスコアが低下し、ユーザーエクスペリエンスが破壊されます。
- 良い値：≤0.1
- 改善が必要：0.1 - 0.25
- 貧しい：> 0.25
CLSスコアが高いと、ページ要素が位置を変更するにつれて、ユーザーが間違ったボタンまたはリンクを誤ってクリックする可能性があります。
次のペイントとの相互作用（INP）
INPは、コアWeb Vitalsの最新のメトリックであり、2024年3月に最初の入力遅延（FID）を置き換えます。フォームのクリックや入力など、すべてのユーザーインタラクションに対するページ応答時間を測定し、訪問中に最悪の応答時間を表示します。
- 良い値：200ミリ秒以下
- 改善が必要：200〜500ミリ秒
- 貧弱：> 500ミリ秒
INPスコアが低いほど、Webページがユーザーインタラクションに応答します。
SEOとユーザーエクスペリエンスの重要な要素ですこれらのメトリックを理解して最適化することにより、ウェブサイトのパフォーマンスを改善し、訪問者がより良い体験をするようにすることができます。
あなたのウェブサイトのコアWebバイタルをテストする方法は？
Core Web Vitalsが多言語のWebサイトにどのような影響を与えるかを知る前に、Webサイトのスコアをテストする必要があります。いくつかのツールを使用してテストを行うことができます。その1つはPagesSpeed Insightです。 [ツール]ページを開き、テストするWebサイトURLを入力し、 [分析]。
次に、結果は次のように表示されます。
多言語のWebサイトのImpact Core Web Vitalsはどのようにありますか？
コアWebバイタルが多言語サイトのパフォーマンスにどのように影響するかをいくつか紹介します。
- ユーザーエクスペリエンスへの影響 -多言語ページがゆっくりと読み込まれたり、反応しない場合、ユーザーは必要な情報を見つける前にイライラしてサイトを離れることができます。 Core Web Vitalsは、各言語バージョンが高速で便利なままであることを保証するのに役立ちます。
- SEOおよび検索ランキングへの影響- Googleは、ランキング要因としてコアWebバイタルを使用しています。 LCP、CLS、INPなどのメトリックが貧弱な場合、サイトは検索結果のランキングを失い、さまざまな国からの有機トラフィックを減らすことができます。
- すべての言語で一貫したパフォーマンス -多言語サイトでは、各言語バージョンで異なるフォント、画像、コンテンツ構造を使用します。最適化されていない場合、これにより、言語のパフォーマンスの違いとグローバルユーザーの一貫性のないエクスペリエンスにつながる可能性があります。
- より良いユーザーの変換と保持 -高速で応答性の高いサイトは、ユーザーがページに長く留まり、コンテンツを読んで、長い読み込み時間や迷惑なレイアウトの変更に気を取られることなく、購入や登録などのアクションを実行する可能性を高めます。
- 直帰率の低下 -ページが遅い場合や多くのシフト要素がある場合、ユーザーはサイトをより速く放置します。優れたコアWebバイタルは、サイトが魅力的なままであり、訪問者をより長く保持することを保証します。
多言語のウェブサイトでコアWebバイタルを改善するためのベストプラクティス
Core Web Vitalsが多言語Webサイトにどのような影響を与えるかがわかったので、LCP、INP、およびCLSから始まる各メトリックのコアWebバイタルを改善する方法を学ぶ時が来ました。
最大のコンテンツフルペイント（LCP）を最適化する
最大のコンテンツペイント（LCP）は、画像や大きなテキストブロックなど、ページに最大の要素をロードするのにかかる時間を測定するコアWebバイタルメトリックです。 LCPが遅い場合、ユーザーはサイトを遅くし、潜在的に直帰率を上げる可能性があります。 LCPを最適化するためのヒントを次に示します。
高速で信頼性の高いホスティングプロバイダーを使用します
サーバー速度は、LCPを含むページの読み込み時間に大きく影響します。遅いホスティングプロバイダーは、特に重力のある多言語のWebサイトでは、重要なコンテンツ配信を遅らせることができます。
高性能サーバー、高速、安定したアップタイムを備えた信頼できるホスティングプロバイダーを選択します。また、グローバルオーディエンスの近くにサーバーを戦略的に見つけることを検討してください。たとえば、ほとんどの訪問者がアジアから来た場合、その地域にデータセンターを備えたサーバーを選択すると、遅延を減らすことができます。
画像を最適化します
多くの場合、画像は最大のページ要素であるため、それらを最適化することでLCPを大幅に改善できます。最適化されていない画像は、ページの読み込みを遅くし、帯域幅の使用を増加させる可能性があります。
画像をより効率的にする方法は次のとおりです。
- 最新の画像形式を使用します。WebPとAvifは、PNGやJPEGよりも小さいファイルサイズの高品質を提供します。
- 画像を圧縮する - TinypngやImagifyなどのツールを使用して品質を犠牲にすることなく画像サイズを削減します。
- 画像サイズを調整します -ユーザーの表示に画像が必要以上でないことを確認してください。
- Lazy Loading -ページがロードされたときにすべてではなく、必要な場合にのみ画像をロードし、初期ページの読み込み時間を短縮します。
- 地元の視聴者向けに画像を翻訳または適応させる -画像にテキストが含まれている場合、翻訳が利用可能であることを確認するか、文化的に関連する画像を使用してください。画像翻訳をサポートするLinguiseな翻訳サービスを検討してください
キャッシュと圧縮を実装します
キャッシュと圧縮は、ページの負荷を高速化し、LCPを改善するために不可欠です。キャッシュを使用すると、ブラウザまたはサーバーがプリロードされたバージョンのページを保存できるようになり、ユーザーが同じページを再訪するたびに再処理する必要が減ります。これは、異なる言語で同じコンテンツを頻繁に表示する多言語サイトに特に役立ちます。
翻訳プラグインを使用している場合は効率的なサイト翻訳のための専用のキャッシュサーバーを備えたLinguiseなど、キャッシュを最大化することを確認してくださいこのテクノロジーを使用すると、以前に翻訳されたコンテンツがキャッシュに保存され、ページの読み込み時間を最大80％削減し、動的サイト機能を損なうことなくシームレスなユーザーエクスペリエンスを提供します。
圧縮は、ウェブサイトのパフォーマンスを改善する上で重要な役割を果たします。 GZIPやBrotli、CSS、JavaScript、HTMLファイルサイズなどのメソッドを使用して、サーバーからブラウザへのデータ転送を高速化することができます。 Linguiseによって実装されているキャッシュと圧縮の組み合わせにより、多言語のWebサイトが高速で非常に応答性が高いことを保証し、世界中のユーザーに可能な限り最高のエクスペリエンスを提供します。
CDNを使用します
コンテンツ配信ネットワーク（CDN）は、世界中の複数のサーバーにWebサイトファイルを配布することにより、ページの読み込みをスピードアップします。ユーザーは最寄りのサーバーからコンテンツにアクセスし、負荷時間を短縮します。
CDNは、多言語サイト、特にさまざまな国の視聴者がいるサイトに不可欠です。 CDNは、遠くのメインサーバーのみに依存することなく、より速いコンテンツ配信を保証します。 CloudFlareやRocketCDNなどのサービスは、コンテンツの分布を効率的に加速するのに役立ちます。
さらに、翻訳プラグインを使用している場合は、CDNが翻訳されたコンテンツを最適化して、グローバル配信を高速化するようにします。これにより、サイト上のすべての利用可能な言語で一貫したユーザーエクスペリエンスが保証されます。
次のペイントへの相互作用の改善（INP）
INPは、クリック、テキスト入力、ナビゲーションなど、ユーザーの対話にWebサイトがどれだけ速く応答するかを測定するメトリックです。 INPが高い場合、ユーザーはサイトが遅くて反応しないと感じ、経験を低下させ、直帰率を上げることさえできます。 INPメトリックを改善するためのヒントを次に示します。
非同期および延期された負荷を使用します
スクリプトを非同期（非同期）またはそれらを延期すると、JavaScriptがページレンダリングをブロックするのが防止されます。デフォルトでは、ブラウザはスクリプトを順番に処理し、画面に重要な要素を表示することが遅延を引き起こす可能性があります。
- async：スクリプトは、HTMLと一緒にロードされ、他の要素が処理が終了するのを待つことなく、ダウンロードされるとすぐに実行されます。
- 延期：スクリプトはまだHTMLとともにダウンロードされていますが、ページ全体がレンダリングが終了した後にのみ実行されます。
外部JavaScriptにこの方法を使用すると、ブロック時間を短縮し、サイト上のインタラクティブな要素が、重いスクリプトの読み込みによって中断されることなくより速く応答できるようにすることができます。
JavaScriptの実行を最適化します
遅いJavaScriptの実行は、遅延相互作用の主な原因の1つです。 JavaScriptスクリプトの実行が長すぎると、ブラウザはユーザー入力に迅速に応答するのに苦労します。 JavaScriptの実行を最適化するためのいくつかのステップ：
- メインスレッドの重いタスクを削減します - Webワーカーを使用して別のスレッドで複雑なコードを実行して、メインページのレンダリングを妨げないようにします。
- コード分割を使用します - JavaScriptを小さなチャンクに分割し、特定のページに必要なスクリプトのみをロードします。これにより、初期実行時間が短縮されます。
- 不必要なイベントリスナーを避けてください。ページの要素があまりにも多くのイベントリスナーがサイトの応答を遅くすることができます。未使用のイベントリスナーを削除するか、イベント委任で最適化します。
- に過負荷にならないように、スクロールやユーザー入力など、頻繁に呼ばれるイベントの実行を制御するのに役立ちます。
JavaScriptの実行を最適化することにより、ユーザーのインタラクションが最大の応答性を伴うことを確認できます。
ユーザーインタラクションに優先順位を付けます
ページが読み込まれると、多くの要素とスクリプトがリソースを競い合います。ユーザーのインタラクションが優先順位付けされていない場合、サイトの応答は遅くなり、反応しないと感じることがあります。
これに対処するには、ユーザーが最も対話する要素が最初にロードされていることを確認してください。適用できるいくつかの戦略：
- 入力準備 -ボタン、フォーム、ナビゲーションなどの入力要素を、ページ全体がロードが終了するのを待たずにすぐに使用できることを確認してください。
- Progressive Enhancementを適用します -すぐに使用できる基本的なサイトバージョンを作成し、JavaScriptで時間の経過とともに機能を改善します。
- プリロードにアイドル時間を使用します -ユーザーが非アクティブである場合、その時間を使用して追加のスクリプトを読み込み、次のセッションでインタラクティブ性を向上させます。
ユーザーインタラクションに優先順位を付けることにより、サイトエクスペリエンスはより速く、より直感的になります。
非必須要素の怠zyな負荷
Lazy Loadingは、絶対に必要になるまで、非必須要素の負荷を遅らせる手法です。これは、ページが最初に表示されたときにロードする必要がある要素の数を減らすことにより、初期の相互作用を高速化するのに非常に役立ちます。怠zyなロードに最適な要素には次のものがあります。
- 画面の下の画像とビデオ -画像とメディア要素にロード=“ Lazy”属性を使用して、ユーザーが関連する位置にスクロールするまでロードを防ぎます。
- 外部ウィジェット -コメント、ライブチャット、サードパーティの広告などの要素は、ユーザーがそれらと対話する場合にのみロードできます。
- 非緊急のJavaScriptおよびCSS -ページの初期外観に直接影響しないスクリプトは、DeferまたはAsyncを使用して負荷を遅らせることができます。
非緊急要素に怠zyなロードを適用することにより、初期のインタラクションをスピードアップし、ユーザーがサイトを閲覧しながらより滑らかなエクスペリエンスを確実に得ることができます。
累積レイアウトシフトの防止（CLS）
累積レイアウトシフト（CLS）は、ページのロード時に外観の安定性を測定するメトリックです。ユーザーが相互作用を開始した後にページ要素が突然シフトした場合、彼らの経験は貧弱になる可能性があります。たとえば、ユーザーが何かをクリックしようとしているときにテキストまたはボタンがシフトすると、クリックエラーとフラストレーションにつながる可能性があります。この問題を回避するために、ページのレイアウトを安定させ、ユーザーにとって便利に保つために、いくつかの戦略を実装できます。
画像とビデオの寸法を定義します
CLSの主な原因の1つは、事前定義された寸法なしでロードされる画像とビデオです。寸法が設定されていない場合、ブラウザはファイルが完全にロードされて最終サイズを知るまで待機する必要があります。これにより、他の要素がシフトする可能性があります。これを修正するには：
- HTMLの画像とビデオの幅と高さの属性を常に指定して、ブラウザがファイルをロードする前に適切なスペースを予約できるようにします。
- CSSを使用する場合は、アスペクト比を使用して要素を比例させます。例えば：
img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
- プレースホルダーまたはスケルトンの読み込みを使用して、画像やビデオがまだロードされている間、ページビューを安定させます。
フォント表示戦略を使用します
フォントをゆっくりとロードすると、「目に見えないテキストのフラッシュ」（FOIT）または「Unstyled Textのフラッシュ」（FOUT）が発生し、テキストがページのロード後にスタイルが変更され、他の要素がシフトします。この問題を解決するには：
- フォントディスプレイ、スワップを使用します。 CSSのプロパティメインフォントがロードされる前に、ブラウザにすぐにバックアップフォントを備えたテキストを表示します。例：
@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">
コンテンツを動的に注入しないでください
広告、通知、サードパーティのウィジェットなど、ページが読み込まれた後に要素を動的に追加すると、他の要素が突然シフトする可能性があります。これは、CLSの主な原因の1つであり、ニュースまたはeコマースサイトで発生することがよくあります。この問題を回避するために：
- ロードする要素のための予約スペース -ページの中央に広告またはバナーが表示される場合は、レイアウトが突然変更されないように、最小高さで空きスペースを割り当てます。
- Smooth Transition Animationsを使用します。コンテンツを動的に表示する必要がある場合は、CSSを使用して、より快適な遷移効果を提供します。
- 新しい要素が既存の要素を置き換えないようにしてください -通知メッセージまたはポップアップを表示する場合は、メインレイアウトフローの外側に配置します（例：位置：固定;）。
翻訳の読み込みは、ページのレイアウトと視覚要素の安定性に影響を与える可能性があります。簡単にセットアップできるLinguiseなどの動的翻訳をサポートするサービスを選択することが重要です高度なキャッシュシステムを使用すると、 Linguiseレイアウトを混乱させたり、CLSに影響を与える突然の変更を引き起こすことなく、リアルタイムでコンテンツを翻訳できます。
言語間で一貫したUIを確保します
多言語のサイトは、各言語のテキストの長さが異なるため、ユーザーが言語を切り替えると、レイアウトの変更をしばしば発生します。たとえば、ドイツのテキストは通常英語よりも長く、レイアウトが柔軟でない場合に要素がシフトする可能性があります。 UIが異なる言語で一貫していることを確認するには：
- テキストサイズにはEMやREMなどの相対ユニットを使用して、比例しておきます。
- ボタン、ヘッダー、およびナビゲーション要素には、テキストの長さのバリエーションに対応するための柔軟なスペースがあることを確認してください。
- CSSグリッドまたはフレックスボックスを使用して、固定サイズに依存せずにレスポンシブで動的なレイアウトを作成します。
言語間でテキストの長さのバリエーションに備えた柔軟なUIを設計することにより、ユーザーを悩ませるレイアウトシフトを回避できます。
結論
コアWebバイタルは、多言語サイトのパフォーマンスとユーザーエクスペリエンスに大きな影響を与えます。 LCP、CLS、INPなどのメトリックは、SEO、ユーザー保持、変換に影響を与えるページ速度、安定性、および応答性に影響します。画像を最適化し、キャッシュを実装し、高品質のホスティングを使用し、CDNを活用することで、サイトはロード時間を最小限に抑え、複数の言語でユーザーエクスペリエンスを向上させることができます。この戦略により、各ページは、コンテンツが豊富な多言語機能を犠牲にすることなく、高速かつ効率的なままになります。
多言語サイトの柔軟性を損なうことなくコアWebバイタルを改善するには、キャッシング、速度、帯域幅の効率をサポートする翻訳ソリューションとしてLinguise試してください専用のキャッシュサーバーを使用すると、 Linguiseページの読み込みを最大80％スピードアップでき、すべての言語でスムーズで最適化されたユーザーエクスペリエンスを確保できます。Linguiseにわたって最適化されているため、サイトのパフォーマンスを苦しめないでください！
