サイトの表示速度の測定方法と改善したこと【はてなブログ】

こんにちは、ゆるミニマリスト主婦のくうかです。

ご自分のサイトの表示速度が気になったことはありますか？

あまりにも遅いとイラッとしてしまい、離脱してしまうことも多々あります。

現在はワードプレスに移行していますが、以前は当ブログははてなブログでした。
はてなブログは、基本遅いですよね…汗

表示速度の測定方法と、はてなブログの時に私が実際に試した対策をご紹介していきます。

サイトの表示速度の測定方法

まず自分のサイトがどの程度なのか知りたいと思いました。
調べてみて、２つほど方法があることがわかりました。

グーグルアナリティクス

アクセス解析にグーグルアナリティクスを使ってる方も多いと思います。

知っている方も多いかもしれませんが、アナリティクスの機能の中にサイトの速度がわかる項目があります。

『行動』＞『サイトの速度』＞『概要』を見てみると、【平均読み込み時間（秒）】がわかります。

当サイトは平均4.40秒のようです。

とは言っても他のサイトさんと比べたことがないので、速いか遅いか判断がつきません(;´Д｀)
アナリティクスがサンプルページで行った平均なので、完全な数値ではないのかな。
※翌日に再度確認したら5.9秒でした（がーん）

この概要ページの２つほど下にある、『速度についての提案』ページを開くと、ページごとの平均読み込み秒数やPageSpeedの提案なる項目が見られます。

PageSpeedの提案をクリックすると、次にご紹介するサイトに飛びます。

PageSpeed Insights

＞＞PageSpeed Insights
こちらもGoogleのサイトです。
サイトURLを入力するだけで速度を測定してくれます。

とりあえずトップページのURLを入力してみました。
パソコンとモバイルで分かれて速度スコアが出るので、興味深い結果が出ました。

まずパソコンの速度スコアです。

88点ですよ！平均の範囲にいますね。
あと2点で速いグループに入れるのに～～～(; ･`д･´)

ではモバイルはどうかな？

うっわ！ひっど！笑
遅い中でもかなり遅いほうじゃないの、これは( ﾟДﾟ)
即ページ離脱しちゃうレベルだったりするのかな。

PCとモバイルでこんなに差がつくもの…？

表示速度アップのために実際に改善したこと

では実際に私がやってみたことをご紹介します。

画像の圧縮（できればやったほうがいい）

当ブログの写真は大体がスマホで撮影した写真です。
サイズは1MB～2MBほどです。
圧縮したほうがいいことを知らず、以前はそのままアップしていました…。

記事によっては５枚以上アップしていることもあります(;’∀’)
ミラーレス一眼で撮影した写真なんて5MB以上もありました。
それをそのまま載せてたなんて～～～(>_<)見てくれてた方スミマセン。。。

画像を圧縮できるサイト

パンダさんのサイトが１番メジャーかな？
ドラッグ＆ドロップで簡単に圧縮できます！

はてなフォトライフの設定を変更する

はてなフォトライフが使いづらくてGoogleフォトに浮気してたんですが、この設定を知って戻りました。笑

フォトライフを開いて、設定画面を開きます。

これは驚きの機能でした。知りませんでした。
かなりサイズが小さくなりますよ！
398KB→22KBになりました。
画質も私にはそんなに変わったようには見えません。

アップロード済の画像には反映されません。
これからアップロードする画像にはこの設定が適用されます。
アップロード済の画像に設定を適用したい場合は、上書きでアップロードすればいいようです。

なお、はてなブログ編集画面からの『写真を投稿』でのアップロードでは上記の設定は適用されないとか。
少々面倒ですがはてなフォトライフを開いてのアップロードをおすすめします。

余計な機能を外す

少しでも速度アップになればと余計なものを外してみました。

シェアボタンをデフォルトのものを使わず、カスタマイズする

はてなブログのシェアボタンは、デフォルトのままだと表示されるまでに時間がかかります。

私はシェアボタンをカスタマイズして使用しています。
はてブ数なども表示されない、非常にシンプルで軽いとボタンです。

はてなブログのデフォルトのボタンより、カスタマイズのボタンを使用すると少し速くなります。
CSSをいじるので、導入は少々面倒ですが…(^^;

はてなブックマークコメントを表示しない

だいぶ前から非表示にしてあります。
見られると便利なんですけどね…。

はてなブックマーク数を表示しない

サイドバーの注目記事や新着記事にはてブ数を表示できますが、外してしまいました。
はてブがつくととっても嬉しいので、表示があったほうが個人的には好きなんですが、速度改善のために外しました。

WEBフォントのアイコンは、置き換えられるものははてなブログアイコンへ

ブログでよく使われている【Font Awesome】を使うと、head内に読み込みの記述を入れなければならなくなり、多少遅くなります。

しかし似たようなアイコンがはてなブログにデフォルトで用意されているのです。
これを使えば読み込みの記述は省くことができるということで、代替できる部分はデフォルトのものに変更しました。

参考になりました！

トップページ・サイドバーでJavascriptを読み込まない

画像圧縮の次に速度に影響があったのがこれです。

トップページとサイドバーでJavascriptを読み込まないようにすること。

トップページとサイドバーでJavascriptを読み込んでしまうと、どのページを開く際にも読み込みが行われてしまうんですよね。
遅くなる大きな原因となります。

具体的に行ったことを記載しておきます。

アドセンスの自動広告を外す

これはかなり勇気のいることです。笑
自動広告を外してしまうと、アンカー広告やポップアップ広告も出なくなりますからね。
外すかどうかはご自分の判断でっ。

しかし記事内に広告をまとめたことにより、トップページの読み込みがかなり速くなりました！

サイドバーにもJavascriptを入れない

サイドバーもどのページの読み込みにも関係してくるのでJavascriptを外しました。
私が入れていたサイドバーのJavascriptは、

1. 楽天モーションウィジェット
2. ブログ村へのリンク

です。
楽天アフィリエイトのモーションウィジェットは、割とクリック率が高く、完全に外したくはありませんので、楽天に関する記事内に貼り付けるようにしました。

次にブログ村のPVランキングに参加するためには、ブログパーツを貼らなければいけませんが、こちらのパーツならただのリンクなので安心です＾＾
※ランキングが表示されるパーツはJavascriptを使っています。

大きさが押しやすくて好きなボタンです。笑

jQueryもできれば読み込まない

よく『トップに戻るボタン』をページの右下に表示させているブログも多いかと思います。
このボタンを入れるためにjQueryを読み込んでいますよね。

このような、動きのあるページを作るためにjQueryを使うそうなんです。
中身はJavascriptってことでいいですかね(; ･`д･´)←あまりわかってない

私はあまりこのボタンを押したことがありません。
記事を読んでいる途中に誤って押してしまったことはあります。
しかし読んでいる途中なのにトップに戻されてしまっては切ない(/ω＼)
ということもあり、読み込みも遅くなるのならと私は外してしまいました。
（見た目はとてもかっこいいんですけどね・・・）

速度改善後のスピードを測定したよ！

PageSpeed Insightsで、改善策を施した後にどの程度速度が変わったかをお見せします！

パソコン版は【８８】だったのが、

【９０】になりました。

さほど変わりはありませんね(笑)
12月以降、数値は安定していませんでしたが、改善後は安定しています。

目に見えて遅かったのがモバイル版です。
改善前は【２５】でとっても遅い判定だったのが、

なんと【５４】まで改善されました！

やっと平均速度になってくれたぁぁぁ！！感無量！！

まとめ

サイトが重すぎて離脱されないように、表示速度アップのためにやったこと。

画像圧縮は目に見えて結果に出るので、興味がある方はやってみる価値はあると思います！
余計な機能を外す、という部分は自己満足の範囲になってきますので、色々と試してみたい方はやってみるのもいいと思います。

モバイルの速度がようやく平均になり、ここまで上がれば私的には大丈夫かなと思います。
これ以上はやりすぎ感がある気がしますし、満足したのではてなブログでの速度改善はこれにて終了。