はじめに
blogサイトの速度を測定してくれる「PageSpeed Insights」というWebツールがあります．サイトのレスポンスを改善するためにAMP化した時などの評価に使用しますが，DOMが多いとか注意を受けてしまいす．どうしましょうか．
どうやら「DOM」について良く知らないと，解決策を提示されても理解ができません．まずは，知識の補充から．
DOM
DOMとは，「Document Object Model」の略号です．webページの表示についてあれこれ操作する場合に，JavaScriptが使用されているのですが，このプログラミング言語は，オブジェクトを扱えるようですね．とっかかりとしては何となくわかった感じです．
参考文献には，「DOM はページの HTML の構造を表すものであり、JavaScript と CSS がページの構造とコンテンツにアクセスできるようにします。」と説明しています．
DOM サイズの大きいことがインタラクティビティに及ぼす影響と対処方法 -web.dev-
https://web.dev/articles/dom-size-and-interactivity?hl=ja
Webページの構造
Webページは，html文で書かれているのですが，<html>…</html>という構造です．これをタグ文字といいます．そのほか，この<html>…</html>の構成要素には，<head>…</head>, <body>…</body>， その他，背景色，改行，文字種・色・大きさなど，様々な文字や表示体裁を操作するもの，CSSで定義している場合は，その新たな構造も追加されDOMが増加します．
文字の大きさは，<h1></h1>, <h2></h2>…などです．アンダーラインは，<u></u>です．CSSでは，これらの表現様式を新たに定義できますが，DOMが増えます．
以上が，DOMを構成する構成要因たちの概要です．
余談ですが，
30年も40年も前の大昔は，これらのタグ文字によりhtml文を待て入力でコーディングしていたました．そのご，Home Page BuilderなるものがIBMから出たのでそれを使用して，これまでより楽にページを作れるようになりました．当時は，Webサーバーとの連携というよりは，自分の仕事のまとめとして，リンクを張ったりして，普通の文書を作るように活用していました．必要な内容はリンクで繋げてやるとナレッジが膨らんでいくという作り方です．
そして，現在はWebサーバーとの連携を前提にしていますが，「WordPress」という無料のページ作成アプリ(?)があります．MRHARIKIRIがWordPressを知ったのは2018年でした．IO-DATAのおもちゃのNASからSynology NASに乗り換えることを考えていたころです．すごいですね．浦島太郎の気分でした．
解決の糸口
DOM treeという概念も知識として必要です．例えば，<html></html>の内部に<h1>，<h2>などがありプレーンテキストとして<p>があるとして，これら全ての要素が，tree(ツリー, 木)の構成要素になり得ます．改行など構成要素になっていまうので，そうならないような記述の仕方がありす．それを採用すれば，DOM数を多少は少なくすることも可能です．
例えば以下の2つの例で考えてみます．以下の(1)1行で書く，(2)見やすく書くのそれぞれで使用されているDOM数にカウントされるタグは，同じ数になっています．しかし，書き方(コーディング)でDOM数に違いがでてます．
- 1行で書く
- <html><head>…</head><body><h1>Title</h1><br><h2>Section</h2><br></body></htm>
- 見やすく書く
- <html>
- <head>…</head>
- <body>
- <h1> Title </h1>
- <br>
- <h2> Sectoin </h2>
- <br>
- <body>
- </html>
(1)1行で書く場合と(2)見やすく書く場合でDOM数は，見やすく書く場合の方が多くなります．改行がDOM数にカウントされるためです．
DOM数の違いは，
- <head>…</head>に沢山の情報を埋め込むとDOS数は増える
- 1行で書くよりも，見やすく書くの方が，改行した分だけ増える．
ふむ．なんとなくわかってきた-^;
ということは，DOMを二次元で考えればいいことになりますね．同レベルの要素が(横の相に, 例えばh1, h2…)増えると1次元目のDOMは増える．そのレベルに属する要素が(下層に，例えば)増えると2次元目のDOMが増える．このよなイメージでDOMが増えていくというわけです．それをTreeといっている訳です．
効果的なのは
やはり効果的なのは，CSSの整理であると思います．実践はこれからなので，予想ですが．