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

方針

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は解決)

人気順