ミコトホドでは現時点で、9つのWEBツールを固定ページで、4つのWEBツールをLPページで公開しています。
WEBツールの内容によってはコードはとても長くなりますが、その長いコードを使ったページのパフォーマンスはどれ程のものになっているのか、そしてミコトホドの現在の軽量化に関わる設定を公開したいと思います。
キャッシュおよび遅延設定
現在のテーマはSWELLですが、テーマ側の機能で使っているのは下記のとおりになります。
- ヘッダーをキャッシュする
- サイドバーをキャッシュする
- コンテンツに合わせて必要なCSSだけを読み込む
- フッター付近のCSSを遅延読み込みさせる
サーバーのConoHa WINGでもキャッシュの設定を行っています。
コンテンツキャッシュ
- ON（HTML／CSS/JS以外静的コンテンツのみ）
ブラウザキャッシュ
- ON
CSSの遅延読み込みはさせても、コンテンツ自体の遅延読み込みはさせません。記事下コンテンツやフッターの遅延読み込みなどがありますが、スクロールした時に遅延が働いているせいでページのスクロールに多少の引っ掛かりを見せてしまう挙動を好まないからです。
オブジェクトキャッシュのプラグインAPCu Managerは入れていますが、現在は無効にしています。測定ではもちろんこのプラグインは無効状態です。
PSIで見るパフォーマンス数値｜LPページ
まずはLPページで作った「タイル型リンクカードジェネレーター」のスマホ測定値を見ていきます。
続いては同じくLPページで作った「タイル型リンクカードジェネレーター」のPC測定値を見ていきます。
比較すると多少の違いはありますが、過剰に気にするほどの違いはありません。
ユーザー補助の数値が他とは違って低いですが、ツールの設定入力欄の幅や色に反応してます。
ツール自体のコード文字数は全部で21344文字（改行・空白除く）で、行数は全部で931行となっています。データ量としては約 29KBでかなり軽いです。
PSIで見るパフォーマンス数値｜固定ページ
次に固定ページで作った「phpMyAdmin用SQLクエリ生成ツール」のスマホ測定値を見ていきます。
続いては同じく固定ページで作った「phpMyAdmin用SQLクエリ生成ツール」のPC測定値を見ていきます。
こちらも今すぐに対処しなければいけない程の結果ではありませんが、スマホからの計測値でSpeed Indexが3.5 秒とLPページよりも目立っています。これは固定ページではサイドバーを表示しているためです。
ツール自体のコード文字数は全部で6214文字（改行・空白除く）で、行数は全部で368行となっています。データ量としては約 9.1KBで、こちらもかなり軽いです。
JavaScriptを含むWEBツールでもページは重くなりすぎない
この記事では、LPページと固定ページの2つのページをPSIで計測し、パフォーマンス数値を見比べました。計測結果には、SWELLやConoHa WINGで設定している最低限のキャッシュ設定も影響しています。
現在のミコトホドのトップページでは画像を4つほど使っていますが、その状態のPSIの数値と、この記事で比較したLPページの数値には大きな差がありませんでした。
LPページで使っているコードは、改行・空白を除いて21344文字あります。原稿用紙にすると、コードを全角文字として換算した場合で約27枚分です。
それだけの文字数を使えば、当然ページは縦に長くなりますし、表示速度への影響も考える必要があります。ただし、それはあくまでも21344文字をそのまま1ページ内で使い切った場合の話です。
実際には、JavaScriptを含むWEBツールであっても、コードの容量自体が極端に大きくなければ、PSIの数値に大きく響くとは限りません。画像の扱い、テーマ側の読み込み、サイドバーの有無、キャッシュ設定など、他の要素もあわせて見た方が現実に近い判断になります。
普段とは少し見せ方を変えたページ作りをしたい場合、LPページをあまり特別扱いしすぎる必要はありません。固定ページとは違う見せ方を試したいときは、LPページも選択肢に入れてよいと感じました。
コメント