どもーじゆにんです。
みなさん、ブログにアップロードする画像の容量って気にしていますか?
1記事につき数枚程度ならあまり気にする必要もないのですが、画像載せるとそれだけで記事の読みやすさわかりやすさががらっとかわるので、ついつい載せすぎちゃうんですよね^^;
僕も最近旅記事で大量に画像を載せているのですが、とある記事の読み込み速度を計測したところとんでもないスコアになっていました。
自宅の環境やスマホで一応表示確認はしてて、僕の環境だと問題なくすぐ読み込めるのですが、環境によっては表示することすら難しくなるかもしれませんね・・・
ブロガーたるもの、記事に載せる容量も気をつけて、読者のみなさんに読みやすい環境を
整えないといけないなと反省した次第でございます。
今回はサイトの読み込み速度を計測する方法と、自分なりに調べた結果、使いやすい無料画像圧縮ソフト(PC用、スマホ用)を見つけることができたので、紹介していきたいと思います!
自分のサイト・記事の読み込み速度を計測する方法
まず自分のサイト、記事の読み込み速度を計測する方法から紹介したいと思います。
サイトの速度をスコアで表示する方法(PageSpeed Insightsを使用した方法)
こちらのサイトで簡単に計測することができます。
URLにアクセスするとこんな感じのページが表示されます。赤い四角で囲った入力欄に継続したいサイトのURLをコピーして分析ボタンをおすと・・・
モバイル・パソコンそれぞれのスコアを表示してくれます。
70スコア以上だと快適・・・ということらしいですね。
ちなみに僕のブログはPCが56点、スマホが62点でした。
PageSpeed Insightsではスコアだけではなく、読み込み速度を改善する方法も
提示してくれます。
まあ大体は「この画像を圧縮しろ」とか「JavaやCSSの記述へらせ」とかそんな感じの命令になると思いますが、ごてごてにカスタマイズをいじってない限りJavaやCSSはあまり気にする必要がなく、
大きく影響してくるのは主に画像のサイズで、簡単かつ効果があるのは載せている画像の圧縮だと思います。
画像圧縮を行ってもいまいち改善が見られないようであればカスタマイズ内容もいったん見直してみるといいかもしれないですね。
サイト・記事の読み込み時間を計測する方法(Google Analyticsを使う方法)
もう一つ、Google Analyticsからも計測を行うことができます。こちらの方法のほうが記事ごとに詳細な分析と、比較ができるのでおすすめです。
行動-サイトの速度と移動し、「概要」ではサンプルとなったページビューの平均読み込み速度速度を使用ブラウザ、地域、ページの3点から分析ができ、
「ページ速度」ではどのページが特に遅くなっているか分析ができ、「速度についての提案」ではページごとにどうすれば改善できるか、提案を表示してくれます。(Pagespeed Insightと同じ内容)
たぶん、行動-ページの速度でレポートを表示して期間を指定し、(画面上部右)
プライマリディメンションを「ページタイトル」にし、(画面中央左)
データ表示形式を「データ」に変更してあげると一番分析しやすいんじゃないかと思います。(画面中央右)
僕のブログの場合、下記2記事の表示速度が90秒をこえていて、やばいことになってますね(笑)
ブログの場合読み込み速度が2秒遅くなるだけで離脱率が50%もあがるとかなんとか・・・
平均読み込み時間210秒
平均読み込み時間90秒
モニュメントバレーの記事なんか210秒とか・・・頑張って書いた割にはあまり読まれてなかったみたいだけど、これじゃ読まれくて当然ですね。
明日休みなんで、画像圧縮してリライトします・・・
2記事とも一眼レフで撮ったjpeg画像を圧縮もせずにぺたぺたと貼っているので特に重くなっています。
画像こそ読み込み速度を遅くする最大の原因ということがよくわかりますね。
それでは原因がわかったところで、画像容量を圧縮して読み込み速度を改善するためのおすすめのソフトを紹介していきます。(Windows PC向け。iPhoneで写真をとってアップロードすることもあるのでiPhoneアプリも紹介します。)
おすすめの画像圧縮ソフト・アプリ
選定基準は「複数画像をまとめて圧縮できるもの」「圧縮サイズなどカスタマイズできるもの」です。
写真をたくさん載せる場合、一括圧縮できないと面倒ですからね!
圧縮サイズも選べればなおよしです。
PCフリーソフト「Ralpha Image Resizer」
色々試した感じ、これが一番よかったです。
下記URLからダウンロードできます。
対応OSはWindows7までとなっていますが、Windows10でも問題なく動くとの報告があがっています。
使い方もとても簡単で、圧縮も一瞬で終わります。
それだけじゃなく、圧縮サイズもフレキシブルに変更でき、Exif情報も削除できるというすぐれもの!
(Exif情報は撮影日時や場所、露光などの情報を保持するアレです。便利だけど、プライバシー情報漏れにつながる危険性あり。はてなの場合は自動で削除されるらしいけど、自分で削除したほうが無難ですね)
使い方は簡単!
こんな感じで圧縮したい写真をソフトのデータ部分にドラッグ&ドロップして、
変換メニューから実行をクリックするだけです。
デフォルト設定だと圧縮後のファイルは圧縮前のファイルと同じ場所に「resize」というフォルダにまとめられて出力されますが、
設定-出力フォルダから出力先も指定可能です。
圧縮サイズの変更場所もわかりやすいですね。
長辺基準でpx指定が一番使いやすいと思います。
ブログの場合通常600pxで圧縮すればいいんじゃないですかね?
僕は1024pxぐらいが画質もあまり気にならない程度で圧縮できていいじゃないかなと思ってます。
ちなみに、サンプル画像の場合6MBが200KBまで圧縮できてます。30分の1!
ね?簡単でしょ?
iPhone無料アプリ「リサイズメール」
iPhoneの場合は「リサイズメール」というアプリでほとんど同じ操作が可能です。
下のリンクからインストールできます。
(名前が違うように見えますがiPhoneメニュー上ではリサイズメールというアプリ名称になっています。)
使い方は超簡単!
アプリを開くとこんなインターフェースになっています。
まずは設定ボタンをタップすると
長辺のサイズを指定する画面が開きます。
好きなサイズを選び、(カスタムで自由に設定できます)
リサイズしたい写真をタップし(複数選択可能)、リサイズボタンを押すと
メールに添付するか、カメラロールに保存するか選ぶことができます。
操作はこれだけ!簡単ですね。
まとめ!
今回の記事では
- サイトの読み込み速度の計測方法(Pagespeed Insights、Googleアナリティクス)
- 写真の縮小ソフト、アプリ(Ralpha Image Resizer、リサイズメール)
を紹介しました。
ページの読み込み速度については自分の環境だけでは計測が難しいものとなります。
自分の環境で読み込み速度は問題なくても、別の環境では読み込みに時間がかかって
しまう可能性があります。
せっかく自分のブログを読みに来てくれた読者さんに愛想つかれないようにするためにも、写真を投稿するときは必ず縮小するようにし、快適なブログ作りを心掛けていきましょう!