ショップハンター

2015.02.02

[SEO] ページの画像データを減らす工夫

テーマ：楽天ブログの活用法(10)

カテゴリ：楽天ブログ・アフィリエイト関連

　昨日書いた SEOquake 記事で、パパ　メイアンさんよりコメントを頂戴しました。ありがとうございます^^。
　「ページ内の画像が少なければ少ない方がよい」、という点について悩んでおられるようでしたので、画像について補足記事をはさむことにしました。

前記事はこちら：
[SEO] SEOquake の基本的な使い方と問題点

訪問者がサクサク見られるブログになっていることが重要

　前記事のコメント欄でも簡単にご紹介しましたが、画像の多用はページの読み込み時間を遅くしてしまいます。
　訪問者はこのような環境からあなたのブログページにアクセスすることでしょう。

ブロードバンド光回線
中低速度ADSL回線
常時接続系のナローバンド回線
Wi-Fi 回線
LTE 回線
3G 回線
ダイアルアップ回線

　思いつくだけでもこれだけのバリエーションがあり、そして速度にもかなりの開きがあります。
　一番低速なのがダイアルアップ回線で、アナログモデム使用のタイプですと、500kb サイズの画像一枚読み込むのに数分かかることもあります。

　1 ページに数十枚もの連続した画像（しかも高画質）が並んでいると、低速回線を使用した訪問者は一瞬でそのブログを立ち去ることになるでしょう。
　ですから、1 ページに表示させる画像は必要最低限にするのが望ましいことになります。

　訪問者に余計な時間を使わせないことも、SEO の大切な条件であることがご理解いただけたのではないでしょうか。

　無料ブログは、ブログサービスをユーザに無料で提供する代わりに、広告やプロモーション画像を強制的に配置しています。
　楽天ブログの場合は、目立つ（つまり訪問者がまず目を向けやすい）ところにに固定モーションウィジェットや、バナーが挿入されますね。

　これらがページの読み込みの低下を招いていることは間違いないのですが、楽天市場はそれで広告収入、商品販売による売り上げを見込んでいるわけですから、ユーザはそれを了承のうえ楽天ブログサービスを利用する必要があります。

　さて、もともと若干遅い楽天ブログですから、ユーザ画像は少ない方が断然良いですね。
　何枚がいいのか、とは正確には申し上げられませんが、 多くても 5～6枚あたりを 目標にされると、読者へのストレスがかなり減るのではないでしょうか。

　また、画像サイズは小さめ（軽量）であることも、読み込み時間を速くできるポイントになります。

楽天ブログで強制挿入される広告を非表示にする方法を楽天ブログ上で堂々と公開している方がごくまれにいらっしゃいますが、楽天の営業妨害となりますのでやめましょう。
（楽天の回し者でも楽天大好きというわけでもないですが、サーバを使わせてもらう立場としてのモラルの問題になります。）

ページ読み込みを速くするのに役立つツール

　このセクションでは、前述の情報をふまえ、少しでも読者に快適なブログページを提供できるように、ページ読み込みを速くするツールをいくつかご紹介します。

Google Developers PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/ [Google]

　オンラインで使える！

　あなたのブログページを読み込ませることで、問題点と修正案を教えてくれます。
　モバイルで見たときと、パソコンで見たときに発生しやすい問題がわかるので、SEO を頑張りたい方は重宝しますね。

　楽天ブログの診断結果はもともとよくありませんが……こればかりは仕方ないです。
　以下、ショップハンターのトップページの診断結果となります。

pageinsights

　画像のセクションをご覧いただくと、改善が必要な箇所がだいたいわかるようになります。

Media 4x Website Optimizer

http://media4x.com/

　オンラインで使える！
　軽量化したい画像をアップロードするか、 Drop Your Files Here というエリアにドラッグすると、自動的に画像が圧縮されます。

Media4x画像圧縮ツール

　圧縮されたファイルは、個別にダウンロードすることも、Zip 形式でダウンロードすることもできます。
　また、ページ右上の「Testing」ボタンをクリックすると、ページ読み込み速度テストページが表示されますので、Google Pagespeed Insights と同様に読み込み速度の診断ができます（診断結果は英語です）。

Media4xページ読み込み速度テスト

写真圧縮変換

http://www.vector.co.jp/soft/win95/art/se387392.html [Vector]

　インストール不要！
　ドラッグ＆ドロップの簡単操作で大量の画像のサイズを変換できます。
　JPG、PNG、GIF、BMP 形式に対応。
　コピーライト記述機能がついているので、パクリ防止になりますね。

画像変換圧縮ツール

Easyサムネイル

http://www.vector.co.jp/soft/win95/art/se194166.html [Vector]

　サムネイル（縮小プレビュー画像）を作るツールです。
　インストール要ですが、十年ほど前に大量サムネイルを作る時に大活躍しました。
　サムネイルでも画像の劣化はあまり目立ちません。

　ブログページには中程度の軽量サムネイル画像を配置し、訪問者が画像をクリックしたら原寸大の画像が見られるようにすれば、ページの読み込みが速くなるとともに、訪問者も見たいものだけを見られるようになります。

　たとえば、このような感じになります。