はてなブログ高速化にもう一度チャレンジしてみた

2016年9月28日

はてなブログ、重くないですか？前から重かったんですが、最近特に読み込みが遅く、コンテンツが最後まで表示されるに時間がかかっている気がします。

今回は、はてなブログ（Pro）ユーザー向けの記事になりますが、改めて高速化にチャレンジしてみた内容を書いていきます。

現状どれぐらい遅いのか計測

サイトが遅いときによくお世話になっている調査サービスのGtmetrixで計測、改善したかどうかを見ます。

トップページの流入は少ないのですが、トップページと記事ページをまず計測してみます。

Page Speed Score もYSlow Scoreも評価はF。20秒は遅すぎですよね。

そして読み込みで遅いのは、やっぱりはてなスター。

定番ですが、はてなスターを取って再計測。全然変わらない・・・。

次にiframeの読み込みは重いので外していきます。iframeは、デフォルトの「読者になる」ボタンやURLを埋め込んだ際のブログカードで使われています。

ここでは詳しく説明しませんが、読者になるボタンはカスタマイズ（リンクで対応）可能ですのでもし利用中で動作を軽くしたい方は変更してみてください。

取り急ぎ計測対象のURLのブログカードは外してみます。

ページロード時間は最初に比べると半分くらいになりましたがリクエスト数が何故か増えてます・・・。

次にスクリプト類で改善できるところを調整していきます。

まずお問い合わせ用に使用しているサービスで、右下に出てくるスクリプトを一旦外します。

次にjqueryです。はてなブログでは複数のスクリプトが読み込まれていますが、その中にjqueryもあります。以前、以下の記事を見かけたのを思い出して試しにはてなが提供しているjQueryに変更してみました。

<script src="//cdn.blog.st-hatena.com/js/vendor/jquery/jquery.min.js?version=1.9.1">

次に画像の圧縮です。何も考えずアップしていたので画像サイズが結構大きかったのでロスレス圧縮をしてみたところサイズが1/10近くまで圧縮されました。これは期待できそう

圧縮方法はとても簡単で画面の「TRY IT」をクリック

画像をドラッグ＆ドロップするか「SELECT FILE」から画像を選択

あと、Youtubeの埋め込みがあったのでようつべタグぽんを利用させていただきました。

結果は・・・あいかわらずScoreはFですがページロード時間は10秒切りました。

今までスクリプトを利用したカスタマイズのパンくずリストを使用していたのですが、それを辞めて公式のぱんくずリストに変更。

試しにAdsenseを全部はずしてみたところ・・・YSlow Scoreは若干上がったもののあんまり変わらない印象・・・でも時間は短縮されリクエスト数は100ぐらい減っている。

とは言え広告をはずすわけにもいかないので戻しますが、残りの原因をみてみると読み込み遅いのははてなのサーバー上のスクリプトなんですよね。。これはどうにもならない。しかも気になるのが2回ずつ読み込んでいるものがたくさんある。

こちらもはてな。はてなブックマーク数の疑似画像ファイルなのでこちらでは何もできず。

最終的に広告は元に戻しましたが、使ってないのに読み込んでいたスクリプトを削除したり、遅延可能なスクリプト（今回はFacebook）をフッターに移動したりしてみたところ10秒は切ったので、はてなスターを戻して今回は終了

GtmetrixでAスコアの取得は広告を複数入れている場合は現実的では無さそうです。

ただ、画像の最適化やスクリプトの読み込み順、iframeの読み込みを無くすなど、ある程度ページ表示時間を短縮することはできそうです。やっぱりはてなスターは重いな・・・。