MR.HARIKIRI-INSIGHTS

タグ: DOM

  • [WordPress] DOMが多いと，PageSpeed Insightsが言うんだけど。 どうすんのよ? → 新しいテーマとこれまでの遺産コードを捨てる!![2023/11/12]

    [WordPress] DOMが多いと，PageSpeed Insightsが言うんだけど。 どうすんのよ? → 新しいテーマとこれまでの遺産コードを捨てる!![2023/11/12]

    はじめに

    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の整理であると思います．実践はこれからなので，予想ですが．

    方針

    DOMを少なくする方針が見えてきました．

    1. 改行もDOMに含まれるらしいので，改行させないhtmlの書き方を貫く(整えてくれるプラグインを導入する)．
    2. 不必要・不用意な文字種の変更をしないコーディング．
    3. 表示系のプラグインを増やすと，その分の新たなタグ(CSS)もDOS数増加の原因になるので，プラグインはやたらと増やさない．
    4. 表示系のプラグインを無暗に追加せず，現状で多ければ減らす．

    具体策の実施と結果

    これから，長い試行錯誤がはじまる予感 ! (2023/10/27, MRHARIKIRI)

    2023/11/12,
    WordPressのテーマを変えることにした．今日までTwenty Twentyを使ってきたが，Twenty Twenty-Twoの軽量版であるTwenty Twenty-Threeに変更した．Twenty Twentyは，長年の運用過程で，content.phpへのコードの修正追加や，function.phpへの追加コード，style.cssのコード追加など，DOMが増加する要因は沢山あった．

    思い切って，昔の遺物を捨て去って一転新規にテーマをTwenty Twenty-Threeに選定してみた．

    具体的には，

    1. Twenty Twenty-Threeのインストール
    2. 小テーマの作成 : 小テーマ用フォルダ作成，そこへ，小テーマ用Style.css作為せと保管，screenshot.pngの保管，従来のfunction.phpの保管．
    3. function.phpには，google analyticsのためのコードやgoogle adsをheaderに配置するフックコードが記述されており，軽量化はせずそのまま使用．

    その結果，PageSpeed Insightsの測定では，DOMに関する注意はできなくった．あっけなかった．従来のテーマ Twenty Twentyのstyle.cssには，小テーマ用の記述以外に，見出し文字の再定義など，多数のコードを記述していた．それがまるっきりなくなり軽量化されたこと，content.phpの修正追加コードが全くなくなったこと，によりDOMが縮小したと考えられる．当然か!

    これからは，Twenty Twenty-Threeをベースに，慎重にコード追加に励みたいと思っていする．

    JavaScript基本編 (DOMの解説) -TCD-

    全13回で解説されています．

    https://tcd-theme.com/2021/05/javascript-dom.html

    編集履歴

    2023/10/27, Mr.HARIKIRI
    2023/10/28, 追記(Webページの構造，DOM数の違いは，効果的なのは，具体策の実施と結果(の予告))
    2023/11/12, 追記(新しく軽量テーマに変更するとともに，これまで追加してきたコードを全て捨てたことでDMOは解決)

  • [用語] DOM; Document Object Model

    [用語] DOM; Document Object Model

    DOM; Document Object Model