CLSスコア最適化のためのアストラ・テーマ・アプローチ

CLS（累積レイアウトシフト）ウェブページの読み込みの安定性を示す重要な指標です。CLSの値が低いほど、ページの読み込みパフォーマンスが向上し、検索結果でより良い位置に表示されます。アストラ このテーマでは、CLSの問題を解決するための多くの最適化機能が用意されており、ウェブサイトがページ構造の安定性を向上させるのに役立ちます。

CLSとは

CLS は、ウェブページの読み込み中に視覚的要素が予期せぬ動きをするかどうかを示します。例えば、画像、テキスト、ボタンが一貫性のない速度で読み込まれ、ページのコンテンツが上下に跳ね返る現象が発生すると、CLSのスコアが上がります。スコアが低いほどページが安定している.

CLSの一般的な原因

• 書体遅延ローディング
• 高さを固定しないSVGロゴ
• モバイルでの不安定なヘッダー表示
• 画像のサイズが合わない
• コンテンツの動的ロード
• iframe サイズ未定

Astraの最適化手法

Googleフォントをローカルに読み込む

従来のフォントは、グーグルのサーバーを呼び出してリモートで読み込むため、遅延が生じる。アストラ ローカルローディング機能を提供する：

パス：Astra > Settings > Performance, enable "Google Fontsをローカルに読み込む"

有効にすると、フォント・リソースはサイトのローカルに保存され、読み込み中のジッターや待ち時間が軽減されます。

フォントのプリロード

書体プリロードこの機能により、ブラウザは主要なフォントを優先的に表示するようになり、ページの初期レンダリングにおけるテキストの遅延を回避し、レンダリングの回数を減らすことができます。タイポグラフィ突然変異という現象。

Google Fontsがローカルに保存されているため、リモートでフォントを要求する必要がなく、フォントの読み込みが速くなり、望ましいCLSゼロスコアを達成するのに役立ちます。

SVGロゴの高さを設定する

エスブイジー 画像自体には高さデータは含まれていません。設定しないと、読み込み後にヘッドの位置が変わってしまう可能性があります。アストラ を自動的に認識し、新しい名前を追加します。 ロゴ ページヘッダーが安定するように高さを設定する。

モバイルヘッダー表示の安定化

Astraでは、静的スタイリングとレスポンシブ・ブレークポイントを使用することで、これを回避し、全体的な流動性を向上させている。

画像に寸法を追加する

サイズのない画像は、読み込んだときに位置ずれを起こしやすい。そのため アストラ ページを作成する際、幅のスケールを設定するか、画像モジュールにピクセル値を手動で入力することで、画像が読み込まれる前にあらかじめスペースが確保されます。

トップでコンテンツを動的にロードすることを避ける

一般的な通知バー、定期購読のアラート、レコメンデーションブロックをページの中央や上部に挿入すると、読み込みの遅延によりコンテンツがバウンスする可能性があります。レイアウトの変更を減らすために、そのような動的な領域をページの下部に配置することをお勧めします。

iframe 固定サイズを追加

ビデオや地図などの埋め込みコンテンツ、けいしき他 iframe要素iframeのサイズがあらかじめ決められていないと、読み込み中にページの構造が簡単に変わってしまいます。それぞれのiframeに特定の幅と高さの値を追加することで、ページ上の位置を安定させることができます。

概要

CLSを最適化するには、フォントの読み込み、画像のサイズ調整、ヘッダー構造、埋め込みコンテンツなど、いくつかの側面を同時に処理する必要がある。アストラ 関連する機能モジュールをテーマ設定で提供し、ページ読み込み時の要素の動きによる視覚的な干渉を軽減します。ページ構造をすっきりと整理しておくことで、ページ全体の品質とアクセス効率を向上させることができます。

最近の更新

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み