サイトの表示速度の測定方法と改善したこと【はてなブログ】2018-12-19サイトの表示速度の測定方法と改善したこと【はてなブログ】ブログこんにちは、くうかです!ご自分のサイトの表示速度が気になったことはありますか?遅いよりは速いほうがいいですよね。ただでさえはてなブログは表示されるまでに時間がかかるそうなので、私が実際に試している対策をご紹介していきます。Insights速度アップのために実際に改善したこと画像の圧縮(できればやったほうがいい)画像を圧縮できるサイトはてなフォトライフの設定を変更する余計な機能を外すシェアボタンをデフォルトのものを使わず、カスタマイズするはてなブックマークコメントを表示しないはてなブックマーク数を表示しないはてなブログのデフォルトアイコンを使う表示されている記事数を減らすまとめサイトの表示速度の測定方法まず自分のサイトがどの程度なのか知りたいと思いました。調べてみて、2つほど方法があることがわかりました。グーグルアナリティクスアクセス解析にグーグルアナリティクスを使ってる方も多いと思います。したら知ってる方も多いのかもしれませんが、アナリティクスの機能の中にサイトの速度がわかる項目があったのです。『行動』>『サイトの速度』>『概要』を見てみると、【平均読み込み時間(秒)】がわかります。当サイトは平均4.40秒のようです。́Д`)アナリティクスがサンプルページで行った平均なので、完全な数値ではないのかな。※翌日に再度確認したら5.9秒でした(がーん)この概要ページの2つほど下にある、『速度についての提案』ページを開くと、ページごとの平均読み込み秒数やPageSpeedの提案なる項目が見られます。PageSpeedの提案をクリックすると、次にご紹介するサイトに飛びます。InsightsこちらもGoogleのサイトです。サイトURLを入力するだけで、速度を測定してくれます。InsightsとりあえずトップページのURLを入力してみました。パソコンとモバイルで分かれて速度スコアが出るので、興味深い結果が出ました。パソコンの速度スコアです。88点ですよ!平均の範囲にいますね。゚Д゚)即ページ離脱しちゃうレベルだったりするのかな(;^_^APCとモバイルでこんなに差がつくもの・・・?ちなみに・・・言ってしまうと、このあとから書かせていただいている改善をしたあとでのスコアなんです、これ。完全に改善が終わったわけではないので途中段階ですが...。速度アップのために実際に改善したことでは実際に私がやってみたことをご紹介します。画像の圧縮(できればやったほうがいい)当ブログの写真は大体がスマホで撮影した写真です。サイズは1MB~2MBほどです。圧縮したほうがいいことを知らず、以前はそのままアップしていました...。記事によっては5枚以上アップしていることもあります(;'∀')ミラーレス一眼で撮影した写真なんて5MB以上もありました。それをそのまま載せてたなんて~~~(>_<)見てくれてた方スミマセン。画像を圧縮できるサイト今までパンダさんのサイトを使っていたのですが、色々と調べていたら評判が良いので使ってみようと思っているのがこちらのサイト。imagecompressor.comドラッグ&ドロップで圧縮でき、圧縮率もあとから指定できるようです。はてなフォトライフの設定を変更するこちらもつい最近知った設定です。́艸`)フォトライフを開いて、設定画面を開きます。画像サイズをご自分の好みに設定します。(600~800位が良さそう)画質もお好みで設定します。(100%未満に下げることにより、画像が圧縮されます。)これは驚きの機能でした。サイズが小さくなりますよ!398KB→22KBになりました。画質も私にはそんなに変わったようには見えません。※注意アップロード済の画像には反映されません。これからアップロードする画像にはこの設定が適用されます。アップロード済の画像に設定を適用したい場合は、上書きでアップロードすればいいようです。はてなブログ編集画面からの『写真を投稿』でのアップロードでは上記の設定は適用されないとか。少々面倒ですがはてなフォトライフを開いてのアップロードをおすすめします。余計な機能を外す少しでも速度アップになればと余計なものを外してみました。シェアボタンをデフォルトのものを使わず、カスタマイズするはてなブログのシェアボタンは、デフォルトのままだと表示されるまでに時間がかかりますよね...。私はシェアボタンをカスタマイズして使用しています。こちらははてブ数なども表示されておらず、非常にシンプルで軽いと思います!はてなブログのデフォルトのボタンより、カスタマイズのボタンを使用すると少し速くなります。CSSをいじるので、導入は少々面倒ですが...(^^;はてなブックマークコメントを表示しないだいぶ前から非表示にしてあります。見られると便利なんですけどね...。はてなブックマーク数を表示しないサイドバーの注目記事や新着記事にはてブ数を表示できますよね。数日前に外してしまいました。はてブがつくととっても嬉しいので、表示があったほうが個人的には好きなんですが、速度改善のために今のところ外して様子見しています。(あまり変わらないとの報告もあり)はてなブログのデフォルトアイコンを使うはてなブログにはWebフォントのアイコンがデフォルトで用意されています。Awesome】が使われていて、自分でもグローバルメニューやシェアボタンで利用していました。それらをはてなブログのデフォルトのアイコンに置き換えられるものは置き換えれば、読み込みの記述も消すことができるので、多少の軽量化になるのではないかと思い変更してみました。▼アイコンを一覧で表示されていてとても参考になりました。shirokai.hatenablog.com表示されている記事数を減らすトップページ7記事、注目記事5記事に減らし、新着記事は削除。これはちょっと効果あり?少しスコアがアップしました。まとめサイトが重すぎて離脱されないように、表示速度アップのためにやったこと。画像圧縮とはてなフォトライフは目に見えて結果に出るので、興味がある方はやってみる価値はあると思います!画像圧縮は、今までの画像を全てやり直すとなるとすっごく大変・・・。́)余計な機能を外す、という部分は自己満足の範囲になってくるかと思いますので、色々と試してみたい方はやってみるのもいいと思います^^さて今回のカスタマイズ、すっごい楽しかった~!!やっぱり好きなんだな・・・私、こういうの。時々速度を計測してみて結果を記録していこうと思います。本日も最後までご覧いただき、ありがとうございました。ベランダサンダルは吊るせるものを。小さなおうちに引っ越して収納が減っちゃった!物を減らしてシンプルな空間にしたいと思っています。-冬スリッパは毎年ダイソー。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。