このブログは「はてなブログ」で運営しています。
はてなブログはエディターが書きやすいし、素敵なデザインがいっぱいあるし、アクセス過多にも耐えられる堅牢さが素晴らしい。
これで月額￥1,000ほどってホントにありがたいサービスですよね。
でもそんなはてなブログにも弱点があります。
それが「読み込みスピード」
サイトにアクセスしてから実際に画面が表示されるまでの時間です。
ウェブサイトの読み込みスピードを計測する代表的なツール「PageSpeed Insights」で我がブログを計測してみると…
ご覧のとおり、赤（0～49）の値だと十分なスピードとは言えません…。
特にモバイル版はツラいですね…。
それが以下のカスタマイズを施すことで、ここまで持ち直しました！
いや、まだ遅いですけどね(笑)
とは言えPCはかなり良好。
まだ改善の余地はありますが、とりあえず現時点での高速化ワザを以下から詳しくご紹介します！
上から順に影響が大きかったカスタマイズです。
はてなブログを高速化する方法①：デザインテーマを「soboku」に変える
まずもっとも影響が大きかったのがデザインテーマの変更です。
Neutral→sobokuに変更しました。
これだけでPC版は30以上値が改善。
はてなブログ公式テーマであるNeutralはカッコいいのですが、どうやらフォントにGoogle web Fontの「Noto Snas JP」を読み込ませているようでした。
基本的に外部から読み込む仕組みが入っていると、表示スピードは低下します。
多分、Google web Fontの遅さって有名ですよね？
デザイン的には好きだったんですが…。
NeutralのCSSを自分でいじる根性もなかったので、いさぎよくテーマ変更。
いくつかチェックしてみると「soboku」というシンプルなテーマが良かったです。
その名の通り素朴で、文章主体のブロガーには合っていそう。
制作者は、すい (id:suito15)さんという方です。
あとは公式テーマの中では「Report」も軽いみたいですね。
好きな方を実装してPageSpeed Insightsを試してみて下さい。
はてなブログを高速化する方法②：シェアボタンをカスタマイズする
はてなブログで読み込みが遅いのが何といっても「シェアボタン」
そこで、シェアボタンをデフォルトの機能で使わずに、HTMLとCSSで実装します。
個人的には無くても良いかな？と考えている部分でもあるのですが、あんがいブックマークしてくださる方もいるので、はてブ、Facebook、LINE、POKETの4つのシェアボタンをつけました。
参考にした記事は以下の2つ。
参考サイト：【はてなブログ】シェアボタンのカスタマイズ（Minimalism対応） - Takeuchi BLOG
参考サイト：コピペで簡単！はてなブログのSNSシェアボタンをカスタマイズ | SHIROMAG
参考記事との違いはFont Awesomeを使わなかったことです。
Font Awesomeはアイコン画像を外部から読み込んでくれる機能。
やはり先ほどのGoogle web Fontといっしょで、なければない方が高速化には良いと思われます。
そもそもはてなブログには独自で読み込めるアイコンが用意されていたんですね。
参考サイト：はてなブログで使えるアイコンフォント（Webフォント）123種類 - FOXISM
こっちを使った方がいくらかは良いだろうということで、<i-class>の値を「はてなブログで使えるアイコンフォント」の方で指定してあげます。
はてなブログを高速化する方法③：サイドバーのモジュールをシンプルにする
これもシェアボタンと同じ理屈なのですが、とにかく「読み込むもの」を少なくすることが高速化には役立ちます。
サイドバー（スマホ版は画面下部）は自動で読み込むタイプのモジュールを使わず「HTML」で各モジュールをそれらしく実装しました。
例えば「カテゴリー」と表示されている部分はこんな感じでHTMLベタ打ち。
「年別アーカイブ」と表示されている部分も同じ要領です。
元々の「カテゴリー」モジュールは記事数を自動で取得したりします。
その動作が表示スピードを遅くさせる原因になり得るようです。
こうすると、カテゴリーを変更した時に手動で書き換えないといけないメンドクササはありますが、まぁ、そんなに頻繁にイジる部分でもないですし。
「読者登録」のボタンもはてなが提供しているボタンを使わずに、HTMLで実装しています。（CSSなしでどシンプル）
同じように「読者数」など特にいらないものを自動で読み込ませないためです。
唯一「検索」モジュールだけは使っています。
はてなブログを高速化する方法④：画像を圧縮する
これは日々の記事執筆時にやっておくべきことなのですが、画像の圧縮もクリティカルに効いてくる部分です。
まずはてなブログ（はてなフォトライフ）にアップロードする前に予め圧縮ツールにかけておきます。
こちらがおすすめ。
またフォトライフの設定で「画質」を落としてあげるのも効果があるようです。
わたしはとりあえず80％に設定。
あんまり解像度が落ちても見にくいので、ケースバイケースですが100％にしなくても良いような気がします。
はてなブログを高速化する方法⑤：CSSを圧縮する（Minifier）
CSS Minifierというツールを使うとCSSを圧縮して短くしてくれます。
それに伴って表示スピードが上がるとされています。
ただわたしの場合は、それほど影響は見られませんでした。（あくまでPageSpeed Insightsの数値ですが）
圧縮されたCSSは追記が困難です。
ですから、圧縮する前で元のCSSを何かにコピーしておく必要があります。
まだデザインが固まっていない人はいちいち圧縮するのはめんどうかもしれないので、ここは先送りして良いかもしれませんね。
こだわる人はどうぞ！
ページの表示スピードが遅いとこんなにも損！でもどこまでやるか…それが問題だ
わたしはブロガー歴5年以上になりますが、高速化ってPVとか、収益とか、数字に対してクリティカルに効いてくるんですよね…。
実際にあらゆるところで高速化の重要性は語られています。↓
Google調査ではページの反応（表示速度）が0.5秒遅いだけでアクセス数が20%低下の結果
Amazon調査ではページ表示速度が0.1秒遅いだけで売り上げが1%低下の結果
Pingdom調査（2017年）では閲覧者が待つのは2秒まで。3秒から離脱率が上昇するという結果
米Aberdeen Group調査（2008年）では表示速度が1秒遅いとそれぞれPVが11%、コンバージョンが7%、顧客満足度が16%低下の結果
このブログもまだまだモバイルの値が45と不十分。
スマホ表示を抜本的に早くするにはAMPを使うという手段もあります。
ただAMPはクセがあるので、初心者にはあまりおすすめできません。
※追記 2021年10月現在、AMPを使っています。こちらの関連記事も参考に。
参考記事：はてなブログのAMP機能まとめ。メリット、デメリットやアフィリエイトリンクについて
スピード目的でWordPressに移行したら以降したで、その後の保守管理がめんどくさいというジレンマ。
結局、ある程度カスタマイズしたら、あとは「株式会社はてな」にがんばってもらうしかないですね(笑)
以上、現在わたしのブログで使っている「はてなブログを高速化する方法」をご紹介しました！
参考になったらうれしいです。
はてなブログのパワーアップはこちら
基本設定からカスタマイズ術、収益アップ、SEO対策など、ワンランク上のはてなブログを運営する方法をまとめました。
ぜひ合わせてチェックしてください。
関連記事：はてなブログの始め方。アカウント登録、記事の書き方、収益化まで
