STDIO

システム開発やフクロウ、節約などの情報をI/Oするためのブログ

トップ > ブログ > 「はてなブログ」高速化・GTmetrixでA評価達成！

「はてなブログ」高速化・GTmetrixでA評価達成！

ブログ

はてなブログの表示速度は、あまり速くはありません。

初期設定で様々な機能が有効化されており、ページの表示に多くの通信・データ取得が必要となることが原因です。

サーバーの性能が不足しているわけではないので、不要な機能を無効化し、上手にカスタマイズすれば改善することができます。

今回、表示速度のチューニングを行い、「GTmetrix」でA評価（最高ランク）を達成できましたので、変更内容をご紹介いたします。

実はちょっとカラクリもあるのですが...

【2016/09/17追記】
最近、この記事を紹介いただく機会が多かったので改めてGTmetrixを測定したところ、評価がC〜Dまで下がっていました。

ブログの設定は大きく変更しておらず、実際の表示速度は低下していないので、評価基準が厳しくなったものと想定されます。

ここで紹介する高速化の方法は現在も有効ですが、A評価の獲得は困難になっています。

【2016/10/29更新】
はてな版jQueryのURL変更に対応しました。

この記事を参考にはてな版jQueryを導入されている方は、お手数ですが新URLに変更をお願いいたします。

当ブログの概要

  • はてなブログPro
  • 独自ドメイン（VALUE-DOMAIN）
  • レスポンシブデザイン有効
  • Google AdSense 広告表示（合計3つ、内1つはJavaScriptで記事内に配置）

GTmetrixの測定結果

※2016年6月27日時点の結果です。

GTmetrix A評価

A評価達成のカラクリ

冒頭でカラクリがあるとお伝えした理由は次の2点です。

  • 毎回A評価が出るわけではない（2〜3回に1回くらい）
  • 他の記事と比較して、この記事の評価が高い

「A評価達成！」と言うには少しズルい気もしますが、測定結果のブレはGoogle AdSenseの表示広告の差異が主な原因ですので、ご容赦いただければと思います。

また、この記事の評価が他の記事よりも高い理由は、次のような「ブログカード」を使用していないためです。

ブログカードはリンク先の情報をわかりやすく伝えられるため、当ブログでも活用していますが、GTmetrixでは減点の対象となります。

ブログカードのソースは次のようになっており、独立したページを「iframe」で記事内に埋め込んでいます。（"src="に指定されているURLをブラウザのアドレスバーに入力すれば、単独で表示可能）

<p><iframe src="http://www.stdio.jp/embed/excel_vba/different-version-release" title="「Excel VBA」異なるバージョンの利用者に配布するときの注意点 - STDIO" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe></p>

単純なリンクではないため、ページ移動時に余計な通信が発生します。 そのため、ブログカードを貼った分だけ「Minimize redirects」のスコアが下がっていきます。

参考までに、上記記事の「Minimize redirects」はA(92)ですが、ブログカードを7個使用した次の記事ではF(39)まで低下していました。

はてなブログをはじめて3ヶ月・アクセス数アップの工夫

ブログカードは便利な機能ですが、表示速度を重視するのであれば多用は避けたいです。

表示速度ってそんなに重要？

Webサイトにとって表示速度は重要です。

遅いページは訪問者を待たせてしまい、ストレスの原因になります。 あまり遅いと表示される前に他のサイトに行ってしまったり、ブラウザを閉じてしまう可能性も高まります。

極端に遅くなければ大丈夫では？と思われるかもしれません。

ところが、スマホなどのモバイル端末が普及した現在においては、通信速度が十分でない利用者にも考慮する必要があります。

地下鉄など電波の届きづらい場所や、回線の混雑時（特に昼12時台の格安SIM）など、通信速度が低下するケースは様々です。

私が使用しているmineoも、通常20Mbps以上の通信速度が昼の混雑時には1Mbps未満になることもあります。（自宅の光回線の1/100未満）

ページの表示に必要な通信の回数・データ量を削減し、表示速度を高めることは、上記のような低速なモバイル環境の利用者にとって特にメリットがあります。

PCでは気づかない程度の速度差でも、モバイル環境では大きな差となる場合もあります。

おすすめ設定

特にデメリットもなく、速度改善効果が期待できるおすすめの設定です。

ソーシャルボタンのカスタマイズ

はてな標準のソーシャルボタン（ソーシャルパーツ）は遅いです。

ソーシャルボタン（はてな標準）

これは単なるボタンではなく、シェア件数を取得して表示するため時間がかかります。

当ブログでは、ゆきひーさん（id:ftmaccho）の記事を参考に、次のようなソーシャルボタンを導入し、表示速度を改善しました。

ソーシャルボタン（カスタマイズ）

はてな標準ボタンと同様にシェア件数も表示されるため、機能面でのデメリットはありません。 デザインも良くなるので、是非おすすめしたいです。

詳細は次の記事にまとめていますが、GTmetrixの「PageSpeed Score」がB(82%)からB(87%)に改善しています。

できればやっておきたい設定

ある程度の速度改善効果がありますが、一部デメリットもある設定です。

はてなスターの無効化

はてなスターを無効化することで、通信データ量（Total Page Size）とサーバーへの要求回数（Requests）を削減できます。

頑張って書いた記事にスターを付けていただくのは嬉しいことですが、ページの表示速度に対しては残念ながらデメリットとなります。 各ユーザーのアイコンを表示するために、サーバーへの要求と画像のダウンロードが必要になります。

検索エンジンからのアクセスが多い場合は、無効にしてしまっても良いと思います。 一般のユーザーにとってはスターの存在よりも、ページの表示時間や通信データ量が少ない方がメリットが大きいです。

一方、はてなユーザー同士の交流手段としては優れた機能ですので、一概に無効が良いとは断言できません。

無効にする場合は、ブログ管理画面より[デザイン]→[カスタマイズ]を開き、[記事]→[ソーシャルパーツ]→[はてなスター]のチェックボックスを外し、 [変更を保存する]をクリックします。

※既に存在するスターが消えてしまうわけではないので、設定を戻せば再び表示されます。

はてなブログ はてなスターの無効化

jQueryの取得先を統一

ソーシャルボタンやナビゲーションバーなど、ブログのカスタマイズでも活躍する「jQuery」。

使用する場合はブログ内のヘッダやフッタに次のようなコードを追加し、jQuery本体を取得します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jQueryは複数のサイトが提供しており、上記例ではGoogleから取得しています。

ところがこの状態ではGTmetrixの「Serve resources from a consistent URL」という項目が減点されてしまいます。

内容は次の通りです。

The following resources have identical contents, but are served from different URLs.
Serve these resources from a consistent URL to save 1 request(s) and 90.5KiB.

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://cdn7.www.st-hatena.com/js/jquery-1.9.1.min.js

上記の最終行は「はてな」が提供するjQueryで、ユーザーが指定しなくてもブログに組み込まれます。

※2016年10月29日に確認したところ、「https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3」に変更されていました。

結果的に、jQueryのファイルを2ヶ所からダウンロードしています。

自動で組み込まれる部分は変更できないので、自身で組み込むjQueryをはてな版に変更することで、サーバーへの要求回数とデータ取得量を削減することができます。

<script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>

上記変更により、「Serve resources from a consistent URL」がC(78)からA(100)に改善されました。

当初「自動で組み込まれるなら、自身で追加した分は削除すれば良いのでは？」と思ったのですが、単純に消してしまうとソーシャルボタンのシェア件数が取得できませんでした。

この方法のデメリットは、はてな版jQueryのバージョンやパスが変わった際に効果がなくなることです。

表示速度に影響しそうな設定（はてなブログProのみ）

当ブログでは今回のチューニング以前に行っていた設定で、表示速度に影響すると思われる項目です。

個別の検証は行っていませんが、機能を無効化するだけなので遅くなることはないはずです。

各項目はブログ管理画面より、[設定]→[詳細設定]内で変更を行い、画面最下部の[変更する]で保存されます。

当ブログの設定は次の記事にまとめていますので、よろしければ参考にしてみてください。

キーワードリンク

[記事にキーワードリンクを付与しない]にチェック

※既に投稿済みの記事は、更新するまで反映されません。

広告を非表示

[はてなによる広告を表示しない]にチェック

※当ブログではGoogle AdSenseの制限（1ページあたり3つまで）を守るために設定。

ヘッダとフッタ

[ブログにヘッダとフッタを表示しない]にチェック

まとめ

初期設定ではちょっと遅めな「はてなブログ」ですが、速度低下の原因を分析し対応することで、ある程度の改善はできます。

速度を限界まで追求するのであれば、設定の自由度が高い他のサービスを利用するべきですが、「はてなブログをできるだけ速くしたい！」という方にとって参考になれば幸いです。

はてなブログ関連の記事