はてなブログのブログカードは重いのか?ブログカード 1枚で PageSpeed Insights スコアが何 % 下がるか調べてみた
はてなブログのブログカードがどれだけページを重くしているのかを知りたかったので、PageSpeed Insights を用いて、ブログカード時のスコアとテキストリンク時のスコアを比較してみました。
- PageSpeed Insights とは
- 対象サイト
- 比較方法
- PageSpeed Insights のスコア Before/After
- ブログカード1枚あたりのスコア減少値は?
- 結果から考える使い分け例
- おわりに
- 関連記事
PageSpeed Insights とは
予備知識として簡単に取り上げます。
PageSpeed Insights とは、Google が公開するウェブページ読み込み速度診断ツールです。診断したい URL を入力するだけの簡単操作で、読み込み速度の良し悪しをパーセンテージで表示してくれる他、読み込みが遅い原因を解析してレポートしてくれます。
読み込み速度は重要です。遅いとユーザーさんが離脱しちゃいますからね。PageSpeed Insights は、自分のブログが遅いかどうかを知るために役立ちます。
対象サイト
当ブログのアバウトページです。
stressfree-fulfilling-solo.hatenablog.com
上記ページにはコンテンツ紹介のために記事リンクを 16 個ほど書いていたのですが、すべてブログカードで配置していました。
比較方法
比較方法としては、まずこの「16枚すべてブログカード」状態でスコアを見た後、ブログカードをすべてテキストリンクに差し替え、もう一度スコアを見てみました。
差し替えは以下のようにします。
【Before】
stressfree-fulfilling-solo.hatenablog.com
【After】
PageSpeed Insights のスコア Before/After
では早速結果を見てみましょう。
(Before) ブログカードを16枚入れた記事
モバイルは 38、パソコンは 86 でした。
(After) ブログカード16枚をテキストリンクに変えると?
モバイルは 47、パソコンは 98 でした。
モバイルは 9 %、パソコンは 12 % スコアが上がっています。
ブログカード1枚あたりのスコア減少値は?
ざっくり計算すると、
- モバイルの場合、ブログカード 1 枚で 0.56% 減る
- パソコンの場合、ブログカード 1 枚で 0.75% 減る
となります。
結果から考える使い分け例
まず PageSpeed Insights が出すスコアの基準は以下のとおりです。
- 90〜100: 緑(速い)
- 50〜89: オレンジ(普通)
- 0〜49: 赤(遅い)
なので、ブログカードの使い分けは、「これらのラインを超えないこと」を目安にすれば良いと思います。たとえば、
- (普段が緑評価の人は)90% を下回らない範囲でブログカードを使う
- (普段がオレンジ評価の人は)49% を下回らない範囲でブログカードを使う
といった具合ですね。
とはいえ、1 枚では 1% も増えないので、 何枚も何枚も貼り付けない限りは気にしなくて良い ようにも思います。
おわりに
以上、はてなブログのブログカードの重さを知るために PageSpeed Insights スコアを比べてみた、という話でした。
もちろん細かい値はブログ次第で異なるとは思いますが、一つの目安として参考にしていただければ幸いです。