DOM サイズが過剰

Silktide は、ページを構成する要素の数と、それらがどれだけ深く入れ子になっているかを測定します。要素が多すぎるページは、読み込みや応答に時間がかかり、訪問者のデバイスのメモリをより多く使用します。

ページ上のすべての見出し、段落、画像、コンテナは、ブラウザー内部のページモデルであるの要素です。ブラウザーは数百個程度の要素なら簡単に処理できますが、数千個あるページでは、スタイル計算、レイアウト処理、スクリプトによる更新のすべてが測定可能なほど遅くなります。

重要な理由

訪問者は、サイズが過剰なページを動作の遅さとして体験します。ページの表示に時間がかかり、スクロールが途切れ、メニューを開くといった操作にも目に見える遅延が生じます。余裕のある処理能力が最も少ないデバイス、つまり低価格帯のスマートフォンや古いコンピューターでは影響が最も大きくなります。そのため、最も遅いハードウェアを使う訪問者ほど、サイトの状態が悪くなります。

サイズの大きなページは、通常、意図的にそのように設計されたものではありません。ページビルダーがあらゆるものをコンテナの階層で囲むこと、画面サイズごとに同じコンテンツの非表示バリエーションを用意すること、訪問者が最初の画面しか見ないにもかかわらず長いリストをすべてレンダリングすることなどによって、徐々に膨れ上がります。

修正方法

ページを肥大化させている原因を特定します。よくある原因には、深く入れ子になったラッパーを生成するページビルダーのテーマ、サイト全体の構造をすべてのページに埋め込むメガメニュー、長いテーブルや商品リストをすべてレンダリングすることなどがあります。
長いリストは段階的にレンダリングします。一度に数千行をページに配置するのではなく、最初の項目を表示し、訪問者のスクロールやページ移動に応じて追加で読み込みます。
デバイスごとにコンテンツを重複させないでください。同じコンテンツについて、デスクトップ版とモバイル版を別々に非表示で配信するのではなく、で1つのコピーをスタイル設定します。
コンテンツが許す場合は、非常に長いページを複数の小さなページに分割します。

Silktide のテスト方法

速度テスト用に設定されたデバイスの種類、接続速度、テスト場所を使用して、実際のブラウザーでページを読み込みます。
によって追加されたものを含め、完全に読み込まれたページを構成する要素を数えます。
3つの統計値を測定し、それぞれの原因となる要素を特定します。ページ上の要素の総数、要素の入れ子の深さ、1つの親要素の下にある子要素の最大数です。
各統計値を評価します。要素の総数が約1,000個、入れ子の深さが約24階層、または1つの親要素に約45個の子要素がある場合、評価が下がり始めます。要素が約1,500個、32階層、または子要素が60個程度になると、評価は低くなります。

トラブルシューティング

ページが大きく見えない

要素数は、表示されるコンテンツではなく構造に関するものです。表示される各項目が多くのコンテナ階層で囲まれていたり、他の画面サイズ用のコンテンツが存在するものの非表示になっていたりすると、見た目がシンプルなページでも数千個の要素を含むことがあります。各統計値について報告される要素を見ると、実際にどこが大部分を占めているかを確認できます。

要素数が多い原因はテーマやページビルダーにある

これはよくあることで、通常、コンテンツ編集者が修正できる問題ではありません。検出結果を、サイトのテーマやテンプレートを管理している担当者に共有してください。使用していないページビルダーの機能を無効にしたり、テンプレートを簡素化したりすることで、一度に数百個の要素を削減できることがよくあります。