北上研究所

2025年06月24日　近代化改修2

Kitakami Yuma Project.のyumaです。

今回、このホームページを少しリニューアルしました。
まあ目で見てわかるような部分じゃないんですが……。

今回リニューアルした内容は、CSSの機能追加とiframeの変更です。
具体的に言うと『<pre>、<code>、<blockquote>のスタイルの追加』『Twitter、noteの埋め込みへの対応』『タイトルの色の簡略化』『<iframe>にtitle要素』などです。

何を変更したのかを説明する前に、改修するに至った経緯を説明します。

これまでの方針として『CSSには最低限のスタイルのみを書いてあまり使わないタグのスタイルはその都度別のCSSや<style>で記入する』というものがありました。
これは必要最低限のスタイルを読み込むことで、特殊なことを行わないページでの読み込み速度を向上させるのが目的でした。

この方針はこの日記だけにとどまらず、このサイト全体、ひいては表のサイトやそれ以外の僕が作ったサイト全ての方針です。
例えばトップページの場合はnormalize.css、common.css、index.cssの3つを読み込み、日記ではnormalize.css、common.css、diary.cssを読み込みます。

ちなみにnormalize.cssはブラウザ間での違いを統一するためにあるCSSです。
最近はもっと優れたCSSがあるみたいですが、ファイルサイズが大きくなるので今もこれを使用しています。

基本的には別のCSSに記入しますが、日記や表のNEWSやEVENTのようにファイルを増やし続けたらややこしくなる場合は<style>で記入しています。
具体例は2024年03月28日　あねもねぐりっちやPASO紅白2023 - 北上ゆま 公式HPなどで単体のCSSではなく<style>で直接記述しています。

とはいえこのサイトを始めたのは2年前の10月です。
これだけ長く続けていたら、より良い方法を知ったり不都合なことも生じます。

まず<code>、<blockquote>のスタイルを毎回<style>で書いてたんですよね。
全く同じなのに毎回<style>で書くのは効率悪いです。

特にこの2つはnormalize.cssでフォントが指定されており、毎回フォントまで変更するのは非常に効率が悪かったです。

また<code>の中に<p>を入れてたんですが、どうやら<code>の中に<p>は入れてはいけないのが判明しました。
また複数の行にわたって<code>を記入する時、<pre>を使った方が良いということもわかりました。

タイトルの色は元々style="color:#0f0"と指定していました。
この方が予めCSSで色を指定するより1ページに使用する容量が減ると考えたからです。

ですが後述の理由によって予めCSSで色を指定するクラスを用意する方が、より表示速度を早くできるとわかりました。

というわけでcommon.cssやdiaries.cssに<code>と<blockquote>のスタイルを指定して色を指定するクラスを作成し、ついでに<pre>のスタイルも追加しました。
追加に踏み切ったのには理由があり『キャッシュの存在』と『そもそものファイルが小さい』ことが挙げられます。

現在のブラウザにはキャッシュというものが存在し、一度読み込んだソースはしばらくの間ブラウザに保存されます。
そのため赤や緑といったよく使う色は予めCSSでクラスを用意する方が、結果的に速度が向上するとわかりました。

というかこれまで躍起になって1ページに使うファイルのサイズを小さくしていたのはキャッシュを無効化した状態での速度を速めるためだったんですよ。
ただ現代のブラウザはキャッシュが当たり前にありますし、キャッシュを無効化した環境は実際に見る人の環境とは異なるというのを最近理解しました。
まあキャッシュ無効化で速いと初めて開いた時に速くなるってメリットはあるけどね！

あとそもそも根本的にファイルのサイズが小さいので、これくらいのことなら例え追加したとしても影響は少ないんですよね。
うちの環境ではトップページを150ms～200msくらいの速度で表示することができるんですが、その大部分はサーバーの応答時間です。

サーバーに「○○を送ってね～」ってリクエストしてから最初の1バイトが送られてきた時間を専門用語でTTFBと言います。
トップページはこのTTFBが大体30ms～140msあります。

こちらのサイトによるとTTFBは200ms未満が目安なので決して悪い数値ではありません。
ですがそれ以上にファイルをダウンロードする時間が圧倒的に短いんです。

その速さ0.65ms

速すぎる……！
速すぎるよ……！

120FPSの動画で1フレームが表示される時間は0.0083秒=8.3msなんですが、余裕でこっちの方が速いです。
流石にこの速さはあのYouTubeでも勝てません。

なので多少ファイルサイズが大きくなっても問題はないと判断しました。
増やしてもパケットのサイズよりずっと小さいですしね。

あとついでに左のメニューの<iframe>にtitle要素を追加しました。

<iframe>はこのサイトを作る時に初めて使いました。
そのため動かすのに必要な最低限しか行わず、アクセシビリティなどは無視してました。

ですが何気なしにPageSpeed Insightsで測定したところ、ユーザー補助でこれが1つ引っかかって9点も持ってかれてました。
流石にtitle要素の有無だけで9点も持ってかれたらたまったものじゃないです。

なのでtitle要素を追加しました。
<iframe>って奥が深いんですね。

というわけで近代化改修を行いました。
ちなみに過去の日記の<iframe>はあとでゆっくり変更していきたいと思います。

今回はこれで終わりますが、前回と異なり今回は不完全燃焼な感じです。
また近々大きな変更を加えるかもしれませんね。