まず始めに言っておきますが、はてなブログは読み込みがちょっと遅いです。
何も考えずにカスタマイズしまくっている読み込み速度の低下を招き、場合によっては閲覧者のストレスが溜まる原因になりかねません。
私のブログでもそこそこカスタマイズをやっているので、一時期はかなり読み込み速度が遅くなっていました。
ということで今回は、ページの読み込み速度を速くするためにこのブログで行ってきたことをまとめようと思います。
速度上げるために色々やる前は、
これで採点するとスマホで50点くらい、PCで50点後半くらいでした。めっちゃ低い…。
ページにもよりますが、今はスマホで60～65点くらいでPCなら70～75点くらいです。（ただ、コードを載せてる記事はGistを利用しているので点数がかなり低い）
はてなブログにしては高いほうだと思います。
ちなみにわざわざPageSpeed Insightsのサイトに行かなくても、自分のサイトだったらGoogleアナリティクスで簡単に見れます。
行動→サイトの速度→速度の提案
から一覧で点数が見れます。
あと、PageSpeed Insightsって「ちゃんと速度速くするために努力してるか？」ってGoogle先生が採点するだけで、実際の速度とは必ずしも一致はしません。
ということなので、点数だけを気にするのではなく、実際のスピードもちゃんと速くなるような施策もいくつかしました。
注：当記事の「点数」はPageSpeed Insightsの点数を表しています。
はてなブログの読み込み速度を上げる
いくつかの方法はすでに記事にしているので、そちらを見ていただくのが早いかと思います。
まずはこちら。
はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた | SHIROMAG
はてなブログをある程度カスタマイズしている人なら、きっとjQueryのコードをどこかで読み込んでいると思います。
そのコードをちょっと書き換えるだけで、jQueryの読み込みを速くすることができます。
YouTube動画をいっぱい貼る人はこちらがおすすめ。
YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった | SHIROMAG
ページの読み込み時は画像を表示させて、クリック時に動画を埋め込む方法。動画が多すぎるとページの読み込みがめちゃくちゃ遅くなるので、かなりオススメ。
断捨離する
まず、不要なカスタマイズから撤去していく。
ページの読み込み速度を低下させる主な原因
- シェアボタン（デフォルトは特に遅い）
- はてなスター
- Milliardなどの関連記事
- パンくずリストの設置
- サイドバーのTwitter表示
- 広告
他にも、サイドバーの固定などJavaScript（ほとんどの場合jQueryなんだが）を使うカスタマイズは読み込みを遅くする原因になります。
この中で私はMilliardを撤去しました。そもそも設置しても回遊率そんなに上がらなかったので。
Millardを外したら点数が4～5点くらい一気に上がって驚きましたね。
代わりにサイドバーにおすすめ記事を表示しています。
【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 Ver.2 | SHIROMAG
これはCSSで表示を切り替えているだけなので、速度は遅くなりません。ただただ、設置が面倒なだけです。
Twitterの表示もやめました。フォロワーが増えてもろくなことないですし（オイ）、たまに危ない発言もしますので（オイ）。
そして、アフィリエイトの広告。広告によっては、スクリプトを利用しているサービスもありますが、これも速度低下を招きます。広告の貼りすぎはSEO的にもよくありません。
売れもしない商品を貼りまくっても意味ないので外しましょう。
シェアボタンについて
シェアボタンの設置、シェア数の表示もサイトの速度を低下させる原因になります。しかし、これは外したくないので残しています。
デフォルトのシェアボタンよりはカスタマイズのシェアボタンの方が読み込みが速いのでオススメです。
コピペで簡単！はてなブログのシェアボタンをカスタマイズ | SHIROMAG
はてなスターについて
はてなスターも読み込み速度が低下する原因になります。しかし、個人的にはてなスターを外すのに抵抗があったので、これも残しています。
はてなスターというのははてな文化の一つだし、「あ、読んでくれたんだ」っていうのが分かるので嬉しいですからね。
ちなみに、はてなスターを外すと点数は1～2点上がります。
パンくずリストについて
私はパンくずリストの表示にこちらの記事のコードを利用しています。
はてなブログでGoogleにパンくずリストを認識させるカスタマイズ – 太陽がまぶしかったから
このブログパーツは素晴らしいですね。
しかし、外部のJavaScriptファイルを複数読み込んでしまうので、読み込み速度にはかなり影響が出ます。それでもSEOの効果を考えるとパンくずリストはあった方が良さそうなので、これも残してます。
試してはいないのですが、撤去すると2～3点は点数上がると思います。
さて、ここからはちょっと難易度が上がります。
CSSでの読み込み速度を低下を防ぐ
私ははてなブログのテーマを利用していません。テーマを利用してカスタマイズをすると、CSSが重複してしまうので無駄な記述が発生してしまいます。
ベースとなるCSSははてなフリーライセンスで提供されているので、こちらを利用しています。
こちらのCSSを直接書き換えてカスタマイズしています。この方がメンテナンスしやすいですからね。
しかし、まだ甘い。PageSpeed Insightsの点数を上げるには、さらに工夫が必要です。
当ブログでは、デザイン設定の「デザインCSS」の中身はほとんど空にしています。
普通にテーマを利用したり、「デザインCSS」に記述したりすると、PageSpeed Insightsで「CSSをインライン化して下さい」という指示が出ます。
どういうことかと言うと、「CSSは別ファイルにするのではなくて、html内に直接記述するとスピードが上がりますよ」ということらしい。
は？まじかよ。
ということでCSS圧縮してはhead内に入れてます。圧縮にはこちらのサイトを利用しています。圧縮すると点数が上がります。
圧縮する前に必ずバックアップはとっておきましょう。必ずですよ。
ダッシュボードの「設定」→「詳細設定」→「headに要素を追加」の中にCSSを入れてます。
正直言って、圧縮してheadに入れるのめちゃくちゃ面倒です。メンテナンスがかなり大変になります。物好きな人だけ試してみて下さい。
あと、JSのコードもできる限り圧縮しましょう。
今後改善していきたい部分
はてなでコードを載せる時にGistを利用しているのですが、これが速度の低下を招いているみたいなので、できる限りはGistでのコード掲載を減らしていきたいものですね。
Gistは多分SEO的にもあまり良くない。
あと、サイドバーも読み込みを遅くしている原因になってそうなので、項目減らしてすっきりさせたいですね。特にスマホ（スマホ閲覧時はページ下部）。
まとめ
とにかく、無駄な部分はそぎ落としてページの読み込みが速くなるようにしましょう。GoogleがAMPを推奨していることから、SEO対策においてページの読み込み速度は今後さらにシビアに評価されるのではないかと予想しています。
開いたサイトの読み込み速度が遅いとイライラいますよね？場合によっては閉じますよね？
ユーザビリティを向上させるには読み込み速度の改善は大切です。面倒くさいけど、頑張ろう。
あと、減点の原因がはてな側にもあるので、はてなさんも頑張ってください。お願いします。
余談
アナリティクスを撤去するとPageSpeed Insightsの点数が1点上がるらしい。
他にもこんな記事書いています。
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | SHIROMAG
