【軽量化】はてなブログで Pagespeed insights スコアをモバイル 50、パソコン 98 まで引き上げる
僕は軽いブログが好きなので、今書いている「はてなブログ」も軽量化することに。Google の Pagespeed insights スコアを参考に、あれこれカスタマイズして、モバイル 50、パソコン 98 まで行きました。試したことをまとめます。
PageSpeed Insights とは
指定したウェブサイトの読み込み速度を測定してくれる Google 製のツールです。
読み込み速度はユーザーの快適さや SEO にも繋がるため、なるべく高いスコアを出したいところです。
今回出したスコア
パソコン: 98
モバイル: 47(最高で50ですが今回は47でした)
やったこと一覧
では、高速化のためにやったことをひたすら書いていきます。
※ただし Pro 版でないと使えない機能も多々あります。
軽いテーマを選ぶ
[デザイン] > [デザインテーマ]
ブログの重さはほぼテーマで決まると思います。軽いテーマは軽いですし、重いテーマは重いです。
公式テーマは軒並み重たいので、テーマストアから探しましょう。僕は stripe というテーマを使ってます。
ソーシャルパーツはできるだけ減らす
[デザイン] > [カスタマイズ] > [記事]
ソーシャルパーツは他サイトと通信して読み込むものなので、どうしても遅くなります。
僕は「はてなブックマークボタン」と「pocket追加ボタン」以外はすべて外しました。
はてなスターを非表示にする
[デザイン] > [カスタマイズ] > [記事]
はてなスターについても、スターの分だけスターアイコンやらスターを付けた人のアバターやらを読み込みますので、非表示にした方が速くなります。
※が、実際にスコアを測ってみると大差無かったんですよね……。実は「非表示=読み込むけど表示しない」だったりするのでしょうか?でも体感的には確かに速くなってるんですが。よくわかりません。
サイドバーは必要最小限に
[デザイン] > [カスタマイズ] > [サイドバー]
サイドバーは必要最小限にしましょう。特に重たいのは以下です。
- 関連記事
- 注目記事
- カテゴリー(特に並び替え順が記事追加順や記事多い順)
要するにブログ内のデータを読み込んであれこれ計算が必要なモジュールは重たいです。
テーマのレスポンシブデザインを使う
[デザイン] > [カスタマイズ] > [スマートフォン] > 詳細設定 > レスポンシブデザイン
はてなブログではモバイル用の表示として「はてなブログが用意した仕組み」と「テーマが持つ仕組み(レスポンシブデザイン)」の二つがあります。
デフォルトでは前者になっているのですが、これがモバイル版だととても重たいです(内部的に使っている Javascript ファイルや CSS ファイルが重たい)。なので後者、レスポンシブデザインを使うようにします。これだけでモバイルのスコアは 5~7 くらいは違うと思います。
ちなみに、この設定を使う場合は、テーマ自体がレスポンシブデザインに対応していないとダメ(モバイルで見た時に表示がめちゃくちゃになる)なので注意しましょう。
広告は消す
[設定] > [詳細設定] > 広告を非表示
広告は重たいので、まあ当たり前ですよね。
記事の表示形式は全文ではなく一覧に
[設定] > [詳細設定] > トップページの表示形式
全文表示と概要表示、どちらが情報量が少ないかというと後者ですよね。
ブログが文字ばかりだと大差はありませんが、たくさんの画像を使う記事が複数ある場合、全文表示だと最悪です。
仮に記事数が 7 件表示で、1 記事平均 3 枚画像を差し込んでいるとしたら、全文だと 1 ページで 21 枚もの画像が読み込まれてしまいます。これが一覧形式だと高々 1 枚で済むので 7 枚以下で済みます。
ヘッダとフッタを表示しない
[設定] > [詳細設定] > ヘッダとフッタ
ヘッダとはページ上の帯のことです。フッタとはページ下の帯のことです。どちらも要らないと思います。
ヘッダについては、ログインリンクがあるので管理者としては地味に便利ですが、ログインは「ダッシュボード」をブックマークしておけばそれで済みます。
- ダッシュボード: https://blog.hatena.ne.jp/
モバイルはスコア 50 より高くできないの?
Ans: できないと思います。
僕ははてなブログの設定画面を一通り辿りましたが、高速化はこれくらいが限度だと思います。あとはテーマと画像(少なければ少ないほど、またサイズが小さければ小さいほどページは軽くなります)くらいでしょう。
ある程度詳しい方は PageSpeed Insights のレポートを読めば、読み込みを遅くしている原因がわかるかと思いますが、結局は はてなブログ側で内部的に使っている部分(ファイルやその読み込み方など)に起因するもの ばかりで、変えようがない……という結論に行きつくかと思います。
おわりに
というわけで、はてなブログだとモバイル 50、パソコン 98 くらいまでなら目指せるよ、という話でした。
ブログが重たい方は、一部だけでも取り入れてみると、軽くなると思います。