クリスマスらしいことも正月らしいこともあまりせず２０２１年となってはや１１日目。実感を伴わない年明け。英国では新型コロナウイルス感染症の新規感染者が激増しているため、新年早々外出や移動が再び制限された。
先月の半ば頃、時間が空いたのと気を紛らすため、年末の大掃除ならぬサイトの小掃除を行おうと思い立った。具体的にこのサイトのＣＳＳの整理整頓とサイトの統一性の向上。いつか行うべきだと常々思っていたのだが、面倒くさかったのでずっと後回しにしていた。長い間その場凌ぎで次々と新しい id や class を量産した経緯があり、無駄な重複が多かった。重複は統合して、現在使用していないのは削除。こう書くと至って簡単だが、実際に行うといろいろと起こるもの。なかなか思い通りにはならなかった。統一性の向上という観点から改善すべきと一番気にしていたのは文章と画像の間。できるだけ行間など他の空間との統一性を保つように心がけた。
ＣＳＳは外部スタイルシートではなく、ＨＴＭＬページ毎に内部スタイルシートとして配置しているので、簡単に一括変換できるとはいえ、サーバーに全ＨＴＭＬファイルをアップロードする手間暇がかかる。輿論あるが、煩雑であっても内部スタイルシートを使う理由は、外部スタイルシートという読み込むファイルの数を一つ減らすことができること、そしてブラウザーが外部スタイルシートを適用するときに起こりうるリフローを防ぐため。よほどスタイルシートが大きくて複雑でなければ、外部より内部スタイルシートに分があると思っている。
単にＣＳＳを整理整頓すれば良かったのに、このような作業を一度始めると、次々と直したいところが出てくるもの。趣味で運営しているサイトだから良いが、仕事だったら途中で仕様が変更されて量もストレスも増加する嫌な状況。
まず行ったのは必要以上に細分化していた画像セクションの階層を減らすこと。これまで何層にもなっていて、分かりづらかった。なおサイト上表示される階層のことで、サーバーにあるファイルの場所は変えていない。ファイルを移動するとリダイレクトが面倒になってくる。でも当然のことだがページに表示されるリンクやメニューは変更しなければならなかった。サイトの構造を見直す良い機会になったとは思うが、全て修正したかどうか⋯⋯。まだ見落とした箇所があるかもしれないので、当分の間はログを注意して見ることになる。
また全 <img> に decoding="async" を付け加えた。恥ずかしながら decoding の存在を知らず、小掃除中に偶然 Twitter でサイト・スピードに関する呟きを読んで、簡単に追加できそうだったので、この機会に行った。以前多くの <img> に loading="lazy" を設定たので、画像は後回しそして必要に応じて読み込まれることになるはず。
他にも必要ないタグなどを削除した。だいぶすっきりしたが、かなり時間がかかって、肝心のサイト更新が滞ってしまった。何やら本末転倒のような⋯⋯。