ガラパゴスタ

万年平社員の独身ぼっちでも楽して楽しく。

はてなブログのブログカードは重いのか?ブログカード 1枚で PageSpeed Insights スコアが何 % 下がるか調べてみた

はてなブログのブログカードがどれだけページを重くしているのかを知りたかったので、PageSpeed Insights を用いて、ブログカード時のスコアとテキストリンク時のスコアを比較してみました。

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 でした。

f:id:stakiran:20190105071328p:plain

f:id:stakiran:20190105071337p:plain

(After) ブログカード16枚をテキストリンクに変えると?

モバイルは 47、パソコンは 98 でした。

f:id:stakiran:20190105071349p:plain

f:id:stakiran:20190105071358p:plain

モバイルは 9 %、パソコンは 12 % スコアが上がっています。

ブログカード1枚あたりのスコア減少値は?

ざっくり計算すると、

  • モバイルの場合、ブログカード 1 枚で 0.56% 減る
  • パソコンの場合、ブログカード 1 枚で 0.75% 減る

となります。

結果から考える使い分け例

まず PageSpeed Insights が出すスコアの基準は以下のとおりです。

  • 90〜100: 緑(速い)
  • 50〜89: オレンジ(普通)
  • 0〜49: 赤(遅い)

なので、ブログカードの使い分けは、「これらのラインを超えないこと」を目安にすれば良いと思います。たとえば、

  • (普段が緑評価の人は)90% を下回らない範囲でブログカードを使う
  • (普段がオレンジ評価の人は)49% を下回らない範囲でブログカードを使う

といった具合ですね。

とはいえ、1 枚では 1% も増えないので、 何枚も何枚も貼り付けない限りは気にしなくて良い ようにも思います。

おわりに

以上、はてなブログのブログカードの重さを知るために PageSpeed Insights スコアを比べてみた、という話でした。

もちろん細かい値はブログ次第で異なるとは思いますが、一つの目安として参考にしていただければ幸いです。

関連記事