くうかんしんぷるライフ

賃貸2LDKのおうちでも快適に、シンプルに暮らしたい

- Pickup -

エコ洗剤活用術
メゾネットのメリットデメリット
2LDK
スプレッドシート

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

こんにちは、くうかです!
ご自分のサイトの表示速度が気になったことはありますか?
遅いよりは速いほうがいいですよね。
ただでさえはてなブログは表示されるのに時間がかかるそうなので、ある程度はやっておいたほうがいいのではと思います。

 

 

サイトの表示速度の測定方法と改善したこと

f:id:ku-kahan:20181218154057p:plain

 

自分のサイトの表示速度が知りたい

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

 

グーグルアナリティクス

アクセス解析にグーグルアナリティクスを使ってる方も多いと思います。
もしかしたら知ってる方も多いのかもしれませんが、アナリティクスの機能の中にサイトの速度がわかる項目があったのです。

 

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

f:id:ku-kahan:20181217225350p:plain

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

 

この概要ページの2つほど下にある、『速度についての提案』ページを開くと、ページごとの平均読み込み秒数やPageSpeedの提案なる項目が見られます。
PageSpeedの提案をクリックすると、次にご紹介するサイトに飛びます。

 

PageSpeed Insights

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

PageSpeed Insights

 

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

 

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

f:id:ku-kahan:20181217225359p:plain

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

 

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

f:id:ku-kahan:20181217225355p:plain

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

 

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

 

ちなみに・・・言ってしまうと、このあとから書かせていただいている改善をしたあとでのスコアなんです、これ。
まだ完全に改善が終わったわけではないので途中段階ですが…。

 

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

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

 

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

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

 

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

 

画像を圧縮できるサイト

今までパンダさんのサイトを使っていたのですが、色々と調べていたら評判が良いので使ってみようと思っているのがこちらのサイト。

imagecompressor.com

 

ドラッグ&ドロップで圧縮でき、圧縮率もあとから指定できるようです。

 

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

こちらもつい最近知った設定です。
はてなフォトライフが使いづらくてGoogleフォトに浮気してたんですが、この設定を知ったら戻ろうかなって思い始めました( *´艸`) 

 

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

f:id:ku-kahan:20181217225348p:plain

  • 画像サイズをご自分の好みに設定します。(600~800位が良さそう)
  • 画質もお好みで設定します。(100%未満に下げることにより、画像が圧縮されます。)

 

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

 

※注意

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

 

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

 

余計な機能を外す

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

 

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

はてなブログのシェアボタンは、デフォルトのままだと表示されるまでに時間がかかりますよね…。
私はブログテーマMinimalismの作者様がテーマ内に搭載してくれているシェアボタンを使用しています。
こちらははてブ数なども表示されておらず、非常にシンプルで軽いと思います!

 

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

 

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

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

 

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

サイドバーの注目記事や新着記事にはてブ数を表示できますよね。
つい数日前に外してしまいました。
はてブがつくととっても嬉しいので、表示があったほうが個人的には好きなんですが、速度改善のために今のところ外して様子見しています。あまり変わらないとの報告もあり)

 

はてなブログのデフォルトアイコンを使う

はてなブログにはWebフォントのアイコンがデフォルトで用意されています。
当ブログのテーマ「Minimalism」ではところどころに【Font Awesome】が使われていて、自分でもグローバルメニューやシェアボタンで利用していました。
それらをはてなブログのデフォルトのアイコンに置き換えられるものは置き換えれば、読み込みの記述も消すことができるので、多少の軽量化になるのではないかと思い変更してみました。

▼アイコンを一覧で表示されていてとても参考になりました。

shirokai.hatenablog.com

 

表示されている記事数を減らす

トップページ7記事、注目記事5記事に減らし、新着記事は削除。
これはちょっと効果あり?
少しスコアがアップしました。

 

まとめ

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

  • 画像の圧縮
  • はてなフォトライフの設定
  • 余計な機能を外してサイト軽量化

画像圧縮とはてなフォトライフは目に見えて結果に出るので、興味がある方はやってみる価値はあると思います!

画像圧縮は、今までの画像を全てやり直すとなるとすっごく大変・・・。
時間のある時にぼちぼち進めていきます(; ・`д・´)

 

余計な機能を外す、という部分は自己満足の範囲になってくるかと思いますので、色々と試してみたい方はやってみるのもいいと思います^^

 

さて今回のカスタマイズ、すっごい楽しかった~!!
やっぱり好きなんだな・・・私、こういうの。・・・無心になれた。
また時々速度を計測してみて結果を記録していこうと思います。

 

本日も最後までご覧いただき、ありがとうございました。

 

こんな記事もあります

www.kurasitotonoe.com

www.kurasitotonoe.com