ガラパゴスタ

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

【軽量化】はてなブログで Pagespeed insights スコアをモバイル 50、パソコン 98 まで引き上げる

僕は軽いブログが好きなので、今書いている「はてなブログ」も軽量化することに。Google の Pagespeed insights スコアを参考に、あれこれカスタマイズして、モバイル 50、パソコン 98 まで行きました。試したことをまとめます。

PageSpeed Insights とは

指定したウェブサイトの読み込み速度を測定してくれる Google 製のツールです。

PageSpeed Insights

読み込み速度はユーザーの快適さや SEO にも繋がるため、なるべく高いスコアを出したいところです。

今回出したスコア

パソコン: 98

f:id:stakiran:20190105071358p:plain

モバイル: 47(最高で50ですが今回は47でした)

f:id:stakiran:20190105071349p:plain

やったこと一覧

では、高速化のためにやったことをひたすら書いていきます。

※ただし Pro 版でないと使えない機能も多々あります。

軽いテーマを選ぶ

[デザイン] > [デザインテーマ]

ブログの重さはほぼテーマで決まると思います。軽いテーマは軽いですし、重いテーマは重いです。

公式テーマは軒並み重たいので、テーマストアから探しましょう。僕は stripe というテーマを使ってます。

ソーシャルパーツはできるだけ減らす

[デザイン] > [カスタマイズ] > [記事]

ソーシャルパーツは他サイトと通信して読み込むものなので、どうしても遅くなります。

僕は「はてなブックマークボタン」と「pocket追加ボタン」以外はすべて外しました。

はてなスターを非表示にする

[デザイン] > [カスタマイズ] > [記事]

はてなスターについても、スターの分だけスターアイコンやらスターを付けた人のアバターやらを読み込みますので、非表示にした方が速くなります。

※が、実際にスコアを測ってみると大差無かったんですよね……。実は「非表示=読み込むけど表示しない」だったりするのでしょうか?でも体感的には確かに速くなってるんですが。よくわかりません。

サイドバーは必要最小限に

[デザイン] > [カスタマイズ] > [サイドバー]

サイドバーは必要最小限にしましょう。特に重たいのは以下です。

  • 関連記事
  • 注目記事
  • カテゴリー(特に並び替え順が記事追加順や記事多い順)

要するにブログ内のデータを読み込んであれこれ計算が必要なモジュールは重たいです。

テーマのレスポンシブデザインを使う

[デザイン] > [カスタマイズ] > [スマートフォン] > 詳細設定 > レスポンシブデザイン

はてなブログではモバイル用の表示として「はてなブログが用意した仕組み」と「テーマが持つ仕組み(レスポンシブデザイン)」の二つがあります。

デフォルトでは前者になっているのですが、これがモバイル版だととても重たいです(内部的に使っている Javascript ファイルや CSS ファイルが重たい)。なので後者、レスポンシブデザインを使うようにします。これだけでモバイルのスコアは 5~7 くらいは違うと思います。

ちなみに、この設定を使う場合は、テーマ自体がレスポンシブデザインに対応していないとダメ(モバイルで見た時に表示がめちゃくちゃになる)なので注意しましょう。

広告は消す

[設定] > [詳細設定] > 広告を非表示

広告は重たいので、まあ当たり前ですよね。

記事の表示形式は全文ではなく一覧に

[設定] > [詳細設定] > トップページの表示形式

全文表示と概要表示、どちらが情報量が少ないかというと後者ですよね。

ブログが文字ばかりだと大差はありませんが、たくさんの画像を使う記事が複数ある場合、全文表示だと最悪です。

仮に記事数が 7 件表示で、1 記事平均 3 枚画像を差し込んでいるとしたら、全文だと 1 ページで 21 枚もの画像が読み込まれてしまいます。これが一覧形式だと高々 1 枚で済むので 7 枚以下で済みます。

ヘッダとフッタを表示しない

[設定] > [詳細設定] > ヘッダとフッタ

ヘッダとはページ上の帯のことです。フッタとはページ下の帯のことです。どちらも要らないと思います。

ヘッダについては、ログインリンクがあるので管理者としては地味に便利ですが、ログインは「ダッシュボード」をブックマークしておけばそれで済みます。

モバイルはスコア 50 より高くできないの?

Ans: できないと思います。

僕ははてなブログの設定画面を一通り辿りましたが、高速化はこれくらいが限度だと思います。あとはテーマと画像(少なければ少ないほど、またサイズが小さければ小さいほどページは軽くなります)くらいでしょう。

ある程度詳しい方は PageSpeed Insights のレポートを読めば、読み込みを遅くしている原因がわかるかと思いますが、結局は はてなブログ側で内部的に使っている部分(ファイルやその読み込み方など)に起因するもの ばかりで、変えようがない……という結論に行きつくかと思います。

おわりに

というわけで、はてなブログだとモバイル 50、パソコン 98 くらいまでなら目指せるよ、という話でした。

ブログが重たい方は、一部だけでも取り入れてみると、軽くなると思います。

関連記事