サイトの表示速度は早いに越したことはありません。
僕はページがなかなか表示されないと、ついつい戻るボタンを押して他のページへ移動してしまうことがあります。
そこで、今回は僕も対応中の表示速度の改善に関する話。
以下、調べる→改善するの２ステップでお話したいと思います。
サイトの表示速度を調べる
PageSpeed Insightsにお世話になっています。
特に登録も必要なく、サイトのURLを入力するだけで表示速度のスコアを採点してくれます。１００点満点で数字が大きいほど高評価。
ＰＣやスマホ別にスコアを出してくれたり、改善点も併せて提示してくれるという至れり尽くせりなツールです。
ちなみに当サイトは
- モバイル：50点
- ＰＣ：65点
という結果になりました。なかなか改善の余地がありそうです。
表示速度改善のための対策
改善のための施策はいくつもありますが、その中でも余り手間がかからない画像の圧縮について説明します。
運営期間が長くなるほど画像が増えて大変になってくるので、早い段階で圧縮した画像を使う習慣をつけておいた方が後々楽になります。
メリットとデメリット
具体的な手順に入る前に画像を圧縮するメリットとデメリットについて。
メリットはもちろん、画像の容量を抑えることによって、表示速度の改善に繋がることです。
画像１枚１枚における効果は微々たるものですが、重なってくると馬鹿にできません。
デメリットは多少手間が増えることと、画質が悪くなること。
しかし、個人的にはこのデメリット、大したことがないと思っています。
まず、手間が増えることについては、慣れたら画像１枚３０秒程度で圧縮できるのでそれほどでもありません。
画質が悪くなることについては、実際に圧縮前後の画像をご覧ください。
どっちがどっちか分かるでしょうか？
正解は
- 上：圧縮後(72KB)
- 下：圧縮前(210KB)
少なくとも、僕は上下の違いが分かりません。
にも関わらず容量は３分の１近くまで抑えられているので、積極的に実施していきたいところです。
画像圧縮の方法
ここから具体的な方法に入ります。
JTrimというツールを用いて画像の圧縮を行うことが可能です。
インストールが完了したら、JTrimを起動して
ファイル＞保存オプション
開いた画面で以下を確認
- 「品質を数値で指定する」で任意の数字を指定
- 「この設定を保存する」にチェック
- Exifデータのチェックを外す
ここまでの操作は初回時のみでＯＫです。
以下が実際の圧縮操作。
ファイル＞一括変換
事前に入力画像と出力画像のフォルダ部分にフォルダを作っておいてください。
入力画像の側に圧縮したい画像をまとめてぶち込んで、ＯＫボタンを押すだけで完了です。
圧縮と同時にサイズ変更も行いたい場合はこの画面から変更が可能です。
今まで圧縮をしてきていなかったら
※ここからは、はてなブログ限定の操作になります。※
もし、今まで圧縮せずに画像をアップロードし続けてきていた場合、圧縮前の画像をアップロードしたまま残しておくと紛らわしいですよね。
しかし、はてなブログ内では今までアップロードしてきた画像を削除する機能がありません。
画像の削除には以下の手順が必要です。
はてなブログでの画像削除の手順
はてなフォトライフにアクセス。
はてなフォトライフ - 無料・大容量、写真や動画を共有できるウェブアルバム
マイフォト＞Hatena Blog
右側にありますね。
画面右上のフォルダを編集
画像を選択して削除ボタン（複数選択可能）
古い画像の削除は、必ず新しい画像への差し替えが完了してからにしましょう。
差し替える前に誤って画像を消してしまうと、ブログ全体の画像が消えてしまう大惨事になります。
まさに今当ブログが大惨事
スコアへの影響
まだ圧縮作業の途中ではありますが、PageSpeed Insightsのスコアはどうなったか？
- モバイル：50点→52点
- ＰＣ：65点→66点
なんか、労力に見合わなくないか・・・？
ただ、今後画像は増えていく一方ですから、運営が長期化するほど恩恵は大きくなっていくものと見ています。
さいごに
当サイトは120記事ほど存在している段階で画像圧縮に取り組みました。
なかなかの手間です。
早ければ早いほどいいのは間違いないですね。
以上！
