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