ブログ記事数がやっと30を超えたので画像の最適化について考えてみた

スポンサーリンク

このブログもやっと総記事数が30を超え、ひとつの区切りとして色々なところを見直していくことにしました。その一環として、「画像の最適化」を手始めにやっていきたいと思います。

試しに少し調べてみたらとてつもなく奥が深い内容だったので、今回はまず自分にできるところから手を出してみることにします。

画像の最適化を考えたきっかけ

たまたま「サイトの最適化をしないと大変なことになる」という内容のページを見つけ、すぐに自分のサイトをチェック。

すると、とてもよろしくない結果が出てしまったので急いで対策を練った、という流れです。

そう言われてみれば、今まで画像の最適化とか一切考えていなかったですね……。現に画像の圧縮なんて一度もしたことがありませんでした。あわわ、大変だ。

Webサイトにおいて、ページの表示速度が速いということはとても重要。

たった1秒表示速度が遅いだけでユーザーに与える影響はすさまじいです。

ブログの表示速度が1秒遅いときにユーザーに与える影響

Amazonが公表していたものの一部を記載いたします。

1.コンバージョン率が7%減少

コンバージョン率とは、広告をクリックしたユーザーが商品の購入など、成果につながったとされる行動のことです。

2.PVが11%減少

ウェブサイトの閲覧数、つまりアクセス数のことですね。

3.ユーザーの満足度が16%減少

表示が遅いということで商品の購入をやめた人全体のおよそ3分の1にまでわたります。

Googleは「表示速度は検索順位を決める重要な要素」とまで明言しています。

さらに、こちらのサイトでは上記のもの以外にもこのような事実が発表されています。

  • Googleではページスピードが検索の1%に影響している。
  • ユーザーがページ表示に待てるのは2秒まで。
  • 3秒以上かかると40%以上のユーザーは離脱する。
  • フォーチュン500の企業のサイトは平均で表示に7秒以上かかっている
  • 速いサイトはインフラと公開にかかるコストを50%かそれ以上削減する。

https://www.suzukikenichi.com/blog/website-performance-optimization/

なんとも恐ろしい内容ですね。これは早くなんとかしなくては。

実際に行った最適化の方法

改善点を調べる

まず、サイトのどこを改善すれば良いかをPageSpeed Insightsで調べました。

このGoogleの「PageSpeed Insights」を使えば、URLを入力するだけで改善点を教えてくれます。

100点中62点、のようにサイトの完成度なるものをスコアで表示してくれるところもとてもわかりやすいですね。

ちなみにこのブログはモバイルが62/100、パソコンが26/100でした。赤い「!」マークがやけに不安を煽ります。

f:id:afrokanchan:20151205211027j:plain

「JavaScriptを縮小してね」「ブラウザのキャッシュを活用してね」などなど、細かいところまで指摘されるのでかなり凹みましたが、これもサイトの速度向上のため。頑張ります。

画像の圧縮

提案の中で「画像の最適化」というものがあり、画像を適切にフォーマット化をして圧縮すればデータサイズを大きく削減できる、と書いてありました。

多少、というよりかなり面倒な作業になりますが、ブログ記事などで使用されている全ての画像を最適化していくことに。

1.画像圧縮サイトを利用する

画像の圧縮で真っ先に思いつく方法としては、これ。

パンダが前面に押し出されているTinyPNGがおすすめ。もしくは、Online Image Сompressorが有名でしょう。

どちらも使い方は簡単です。

まず、圧縮したい画像をドロップ&ドラッグして、ドロップボックスに放り込みます。

そして、DOWNLOADボタンを押すだけ。

2.Photoshopを使う

今回は画像のリサイズ、そして解像度の変更の両方を一気にやってしまいたかったのでPhotoshopを使う事にしました。

techacademy.jp

こちらの方法を使って、アイキャッチ画像のリサイズ&解像度設定、記事内の写真においてもWeb用に変換を行いました。

ここで問題が発生

問題なのが、どういった方法で写真をダウンロードするかということ。ブログに使った写真をきちんと整理整頓して、タイトルもちゃんとつけて……とやっている方はそのままで大丈夫でしょう。

が、私みたく「写真の場所もバラバラ、タイトルもなんのこっちゃ」状態だと初めからやり直したほうが早いんですよね。

いちいちブログにアップした写真をダウンロードするのも面倒だったので、「なんとか、はてなフォトライフの写真を一括でダウンロードできないものだろうか」と考え、調べてみました。

そして、ターミナルを開きコマンドを入力してみたり、Chromeのコンソールで画像のURLを拾い出してみたり、と色々試しました。が、結果は惨敗。

そういうのが得意な人はこちらの記事などを参考にやってみたら幸せになれるかもしれないです。私は結局全て手作業でダウンロードしましたけどね。2時間以上かかりましたが何か。

wget – はてなブログに投稿した画像を全てダウンロードする – Qiita

はてなフォトライフ上の写真の一括ダウンロード – 豪鬼メモ

「はてなフォトライフ」に一括ダウンロードの機能さえあれば……。

ひたすら単純作業が続く

実際に写真の最適化の流れはこちら。きっと、もっと効率の良い方法があったはずです。

1.ブログをiPhoneで確認しつつ、使用されている写真を一枚、一枚はてなフォトライフから探し出してパソコンからダウンロード

その際、あとで管理しやすいようにそれぞれにブログの日付をつけていきました。

例えば、「151203」のように、「西暦の下2桁:月:日」という具合に写真のタイトルに数字を当てはめていきます。同じブログ内に写真が複数ある場合は、そのあとにさらに桁をつけていきました。

2.ダウンロードした写真を選別

アイキャッチ画像、記事内で利用している写真、縦、横、のようにざっくりと写真を分けました。

3.Photoshopでリサイズ、Web用に変換

先ほどのPhotoshopのバッジを使い、分けた写真を一気に処理して圧縮。

4.ひたすら記事内の写真を入れ替える

何度も諦めそうになりながら写真を貼り直していきました。疲れた。

やり残したこと

本当は画像の“title属性”“alt属性”についても見直そうかと思ったのですが、もうその気力はないです。下調べから含め、変換作業などを合わせるともう5時間はやっていますね……。さすがに時間かかりすぎですね。

30記事やそこらでこの作業量となると、100記事とか考えたくないです。想像しただけで気持ち悪くなります。

ブログ画像の最適化は早い段階でやっておいたほうが良いです。割と真面目に。

まとめ(追記あり2015/12/07)

追記:

今回の方法で記事画像の入れ替えを行った場合、アイキャッチ画像を再び設定する必要がありそうです。

思ったよりも深かった、サイトの最適化。突き詰めるとまだまだ先は長そうですね。

最後に、画像の最適化でサイトの評価がどれほど変わったのか見てみたいと思います。これであまり変化が見られなかったらガチで泣きます。本当に。頼みます。

f:id:afrokanchan:20151205211056j:plain

お。良くなってる。最適化前はモバイル62/100、パソコン26/100でしたが、最適化後はモバイル62/100、パソコン72/100でした。

決して良い数字だとは言えないとは思いますが、これはまた改めて対策を考えましょう。身体が休みを欲しています。

スポンサーリンク

関連記事



この記事を書いた人

あめよふれ

あめよふれっていいます。どうぞよろしく。

「”とり”あえずやっ”てみ”る。略して、とりてみ」がモットーの24歳。ノマドチャリダー。自転車で日本一周してます。アニメ聖地・心霊スポット・世界遺産巡り。趣味はアニメ鑑賞・ベース演奏・旅行・カメラなど。