はてなブログ｜表示速度が遅いので改善するまで足掻いてみた！

2016.10.26
スポンサーリンク

はてなブログ表示速度改善計画

はてなブログのページ読み込み速度は遅い、遅すぎます。
はてなブログが遅いと言うのは感じていましたが、それに加え、自分でも機能を拡張するために、Javascript等を使用して更に重くしている現状です。
GoogleもAMPの導入に取り組み、SEO全体の流れが「ページの表示速度」に重点を置いてきているので、このまま放置しておくと検索結果にも影響が出てきそうですね。

ページ表示速度改善計画

はてなブログでもAMP対応は進んでいますが、まだベータ版の段階で導入するにはまだ様子を見た方が良いと個人的には思っています。
そこで、はてなブログを高速化するために自分でできることをいろいろと試してみましたので紹介します。

現在の表示速度

まず現在の僕のブログの表示速度ですが、Googleの「PageSpeed Insights」とより詳細な速度計測が出来る「GT metrix」で調べてみました。
測定したのはTOPページと、比較的文字数の多い記事の2点です。

PageSpeed Insights調べ

「PageSpeed Insights」では、100点をMAXに表示速度の診断と修正箇所・修正案を出してくれます。
ちなみに85点以上がパフォーマンスの高いサイトと判断されるそうです。

計測ページパソコンモバイル
TOPページ70 / 10060 / 100
記事ページ65 / 10055 / 100

数値だけを見ると思っている程悪くないように思えますが、体感ではもっと遅いように感じます。

GT metrix調べ

「GT metrix」はPageSpeed Insightsよりも、もっと詳細に表示速度の診断と原因を調べてくれます。

■TOPページ

GT metrix調べ（TOPページ）

■記事ページ

GT metrix調べ（記事ページ）

TOPページも記事ページも評価はF。A、B、C、D、Eの次の“F“です…。
ちょっと他のはてなブログの方も調べさせて頂きましたが、僕のブログはリクエスト数が多すぎますね。つまり余計なものを入れすぎｗ
読み込み速度は約11秒となっていますが、体感ではもう少しかかっているようなイメージです。

公式テーマの表示速度

上記は僕のブログを測定した結果ですが、そもそもはてなブログ（公式のテーマをカスタマイズしていない状態）は早いの？という疑問があったので公式テーマのデフォルト状態の表示速度も測定してみました。
そもそも「はてなブログ」が遅いのなら何をしても無駄ですもんねｗ

使用したテーマは一番シンプルな「Life」です。

テーマ「life」

■基本設定
・キーワードリンク：非表示
・広告：非表示
・画像：未使用
・ソーシャルボタン：デフォルト
・はてなスター：表示
・レスポンシブ：非対応

◆PageSpeed Insights

計測ページパソコンモバイル
TOPページ81 / 10071 / 100
記事ページ81 / 10070 / 100

◆GT metrix

計測ページパソコン
TOPページC
記事ページC

まとめると、以下のようになります。

公式テーマTOP(PC)TOP(SP)記事(PC)記事(SP)
Google81 / 10071 / 10081 / 10070 / 100
GT metrixC–C–
僕のブログTOP(PC)TOP(SP)記事(PC)記事(SP)
Google70 / 10060 / 10065 / 10055 / 100
GT metrixF–F–

比べてみると、やはり公式テーマのカスタマイズしていない状態の結果は良いですね！
他のテーマでも調べてみましたが、測定結果に大きな変化はありませんでした。

つまり僕が余計なものを入れすぎていることがよくわかります^^;
デフォルト状態でも早いとは言い切れませんが、はてなブログでの目標値は上記の数値ですね！

はてなブログが遅い原因

はてなブログのページ表示速度が遅い原因としてよく言われているのが、「はてなスター」「デフォルトのソーシャルボタン」「はてなブックマークコメント」「はてブ数の表示」です。

ただ、どれも噂なので実際に自分でも調べてみました。
計測には「PageSpeed Insights」を使用しています。

はてなスター

はてなスター

「はてなスター」が遅いのは有名ですよね。
PCではそれほど感じませんが、スマートフォンページを4G回線で見ると明らかに「はてなスター」がページ全体の読み込み速度を遅くしているように感じます。

ただ、すなばいじりさん（id:psne）がおっしゃっていますが、「スクリプトが読み込まれないのでSEOでいう表示速度については特に影響はないようです。
また、はてなスターが付いているかと言って「外部へリンクを貼っている＝スパム扱い」という心配も、はてな側でrobots.txtによってブロックしているらしくGoogle側でスパムと判定されることはないようです。

はてなスターのやつ - すなばいじり
なんどめだナウシカ。というエントリー。気にせず付けておけば良いというお話です。
psn.hatenablog.jp

SEO的には影響は無さそうですが体感的には、はてなスターは読み込まれるのが遅いしやっぱり気になりますよね^^;
僕も、はてなスターを外すべきか何度も悩んだ時期はありましたが、結局今も付けています。

理由は、はてなブログでブログを書いているので「はてなブログ」らしさを残しておきたいという気持ちと、純粋にはてなスターが付くと嬉しいからですｗ

ちなみに「はてなスター」がある時と無い時で調べてみると以下のようになりました。

◆はてなスターがある時

計測ページパソコンモバイル
TOPページ70 / 100（変化なし）–
記事ページ63 / 100（-2P）52 / 100（-3P）

※「+（プラス）」が改善「-（マイナス）」が遅いです。

■結論
記事ページでは下がりましたが、ぶっちゃけ影響があるのか無いのかよくわかりませんｗ

デフォルトのソーシャルボタン

デフォルトのソーシャルボタン

次にはてなブログが用意しているデフォルトのソーシャルボタンです。
これはもう明らかに重いですよね！このデフォルトボタンが重いから多くの方が、他のソーシャルボタンを使っていると思います。

このデフォルトボタンを設置した状態で測定してみると以下のようになりました。

◆デフォルトのソーシャルボタンを使った時

計測ページパソコンモバイル
記事ページ63 / 100（-2P）51 / 100（-4P）

※「+（プラス）」が改善「-（マイナス）」が遅いです。
※TOPには設置してないので計測していません。

■結論
やはりデフォルトのソーシャルボタン重いですね！いろんなブロガーさんがコピペで使えるおしゃれなソーシャルボタンを提供されているので変更した方が良いかもしれませんね！

はてなブックマークコメント

はてなブックマークコメント

はてなブックマークのコメント欄を表示することが出来る機能ですが、こちらも重いと聞いたことがあります。
このはてなブックマークのコメント欄を設置した状態で測定してみると以下のようになりました。

◆はてなブックマークコメントがある時

計測ページパソコン
記事ページ65 / 100（変化なし）

※「+（プラス）」が改善「-（マイナス）」が遅いです。
※モバイルは非対応なので計測していません。

■結論
特に数値に変化も無かったのでお好みで設置しても良いと思います。

はてブ数の表示

はてブ数の表示

サイドメニュー等でお好みで表示できるはてなブックマーク数の表示ですね！
多くブックマークされている記事があるなら見せたいのが心情ｗその気持ち凄くわかります

◆はてブ数を表示した時

計測ページパソコン
TOPページ69 / 100（-1P）
記事ページ63 / 100（-2P）

※「+（プラス）」が改善「-（マイナス）」が遅いです。
※モバイルは非対応なので計測していません。

■結論
若干ですが数値が下がりました。はてブ数の取得する為のリクエストが無くなるのでその分でしょうか。

その他の原因

その他の原因として考えられるのが広告ですね！
ただ、収益を目的としているなら広告を外すわけにもいかないので、広告については難しいところですね！
試しに、広告を全部はずした状態で計測してみました。

◆広告を外した状態

計測ページパソコンモバイル
TOPページ71 / 100（+1P）62 / 100（+2P）
記事ページ69 / 100（+4P）57 / 100（+2P）

※「+（プラス）」が改善「-（マイナス）」が遅いです。

やはり広告関係は非常に重いですね…。広告を外すと劇的に速度が上がりました。
GTmetrixでもランクがFからDに、読み込み速度も11秒から5秒に改善されました。

AdSenseはそんなに影響が無いように思えますが、その他のアフィリエイトバナーやネットワーク広告、そして楽天のウィジェット辺りは、ページの表示速度に大きな影響があると思います。

このような結果が出ても広告を全て外すという選択にはならないのが辛いところですね…^^;
それでも、広告枠を見直して効果の悪い部分は外すようにしようと思います。

他には、はてなブログではパンくずリストの機能が無かったので、ユーザーさんが考えた非公式の「パンくずリスト」を使っている人も多かったと思います。
僕もそうですが、こちらを少し前にリリースされた公式の「パンくずリスト（PCのみ）」に変更することによって無駄なスクリプトが減るので多少の変化はあるかもしれませんね。

改善策

はてなブログが遅い原因としてよく言われているものを調べてみましたが、僕が調べた限りは「デフォルトのソーシャルボタン」「広告」以外は大きな影響は無いように思えました。

ではどうすべきなのか？？

こちら側で出来ることは限られてきますが、僕は画像の見直し、CSS・JavaScriptの圧縮とCSS・JavaScriptの整理を行いました。

画像の見直し

画像の見直しというのは、画像の圧縮ではなく、ロゴ等全ページに表示される画像をサイズを抑えた状態で作り直し再掲載しました。
記事中の画像については掲載に意識してサイズを抑えていたので今回は修正していません。（本当はすべきでしょうが面倒なので放置ｗ）

CSS・Javascriptの圧縮

こちらは某有名サイトのCSSの一部です。

CSS

見てもらったらわかるように、暗号のようにスタイルシートの記述が並んでいますよね！
無駄なスペースや改行を削除するだけでもファイルサイズを約70％に抑えられました。
管理面ではわかりにくくなりますが、絶対この方が良いと思います。
JavascriptのコードもCSSと同様に無駄なスペースや改行を削除する事でサイズを抑えることが出来ます。

CSS・Javascriptの圧縮方法についてはこの記事が参考になると思います。

LINK
【CSS/JS】ファイルを圧縮する三大手法 – Qiita

CSSとJavascriptの整理

ブログを初めて時間が経過すればするほど、より良くするためにデザインや機能をいじることが多いと思います。
そうすると知らないうちに、使っていないCSSやJavascriptの記述が残っていることがあります。
僕も今回整理している中で、不要な記述が結構ありました^^;
それを削除するだけでも、無駄なアクションが無くなるので読み込み速度は早くなると思います。

CSSとJavascriptを外部ファイルに

外部ファイルについては、ファイルを保管できるサーバーを持っている方が対象ですが、CSSとJavascriptを外部に置いて外部ファイルとして読み込むことでブラウザのキャッシュを利用しよう！という方法です。
ブラウザのキャッシュ機能は、閲覧者のローカルのパソコン上に一度開いたページを記録する事で、次に訪問した場合には以前のデータを元にページを表示させるのでページの表示が早くなるという感じですね！

CSSやJavascriptは「.htaccess」で有効期限を設定するのもアリですね！
僕はCSSに1日、Javascriptを30日の有効期限を設定しました。

そして外部ファイルにする場合、CSSは一つのファイルでしょうが、Javascriptも一つのファイルに収めた方が良いと思います。
ブログ上で複数の機能を追加するためにいろんなスクリプトを使っている方も多いと思いますが、その場合もそれぞれの外部ファイルを作るのではなく、1つのファイルにそれぞれのスクリプトをまとめた方が読み込み速度は早くなると思います。

他にも外部ファイルのメリットは、デザインを変更する場合に、わざわざ編集画面に入ってCSSを「修正→保存→確認」を繰り返さなくてもCSSを編集してサーバーにアップするだけで編集できるのでデザインを触るときには非常に便利です。

高速化の為に実施したことまとめ

上記で書いた以外にも細々といろいろやってみたことをまとめました。

  • 画像の見直し（PC・SP）
  • パンくずリストを公式に変更（PC）
  • CSS・Javascriptの圧縮（PC・SP）
  • CSSとJavascriptの整理（PC・SP）
  • CSSとJavascriptを外部ファイルに（PC・SP）
  • CSSとJavascriptのキャッシュ設定に有効期限設定（PC・SP）
  • ソーシャルボタンのカウントスクリプト削除（PC・SP）
  • 広告一部見直し（PC・SP）

最終的な測定結果

広告を削除することは出来ませんが、画像の見直し、CSSとJavascriptの整理・圧縮等いろいろとやってみました。
その結果、最終的な測定結果は以下のようになりました。

TOP(PC)TOP(SP)記事(PC)記事(SP)
PageSpeed Insights73 / 100(+3P)62 / 100(+2P)71 / 100(+6P)55 / 100(+2P)
GT metrixF（変化なし）–F（変化なし）–

※「+（プラス）」が改善「-（マイナス）」が遅いです。

大きな変化とまではいかなかったですが、多少は変化があったように思います。
ただGT metrixでは相変わらずの”F”ランクでちょっとへこんでます…。

僕の場合は、間違いなく広告ですね！少し減らしましたが、今後は各広告枠の効果を見ながら見直していきたいと思います。
それにしても遅い…。どうにかならないものでしょうかねぇｗ

まとめ

今回、はてなブログの高速化の為にいろいろとやってみましたが、なかなか思うようには速度は改善しませんね！
原因としてはっきりとしている「広告」をいかに抑えつつ、無駄なスクリプトを入れないが、高速化のための第一歩だと思います。
広告は自分の責任ですが、機能面についてはもう少しはてなさんにも頑張ってもらいたいですね！（特にスマートフォン！）

今後も様子を見ながら、はてなブログの高速化については取り組んでいこうと思います。

comment

  1. ぐっちぃ より:
    2016年10月28日 6:51 AM

    はじめまして。
    最近、始めて色々な所を見ていると、表示速度のやけに遅い処があるのがわかってきました。
    とても勉強になりました！

  2. kasakasa7970 より:
    2016年10月28日 8:30 AM

    >ぐっちぃさん
    参考にして頂きありがとうございます。
    僕のブログもまだまだ遅いですが、お互い頑張りましょう！

タイトルとURLをコピーしました