ページの表示速度とSEO効果 – 画像を軽量化する方法

SEOならSEOパック
ご利用実績8837件 (2017/02/25現在)
2016年04月20日 2016年09月08日

ページの表示速度とSEO効果 – 画像を軽量化する方法

ページの表示速度を改善するためには何をするべきだと思いますか?
方法は色々と考えられますが、その中でも…

  • 画像ファイルを軽くする
  • css・javascriptファイルを軽くする
  • キャッシュを活用する

などのことが考えられるかと思われます。

ページの読み込みに関するSEO効果はごくわずかなものですが、レスポンシブデザインを導入することによる、画像の使い回しから、スマホの表示時間もできるだけ短縮したい所です。

ユーザーは数秒の待ち時間があるだけで、別のページへ移動してしまうと言います。SEO対策だけではなく、ユーザーの使いやすさも考慮してサイトの軽量化を心がけて下さい。

また、表示速度を確認するにはこちらのサイトでページごとの評価を確認することができます。
参考:https://developers.google.com/speed/pagespeed/insights/

では、この記事ではページの表示速度を上げるためにファイルなどを軽量化する方法の中から画像を軽くする方法をご紹介したいと思います。

最近ではスマホの表示を高速化する「AMP」にも対応するサイトも増えてきます。
このAMPに関しては下記の記事を参考にしてみてください。

スマホ表示を高速化するAMP(Accelerated Mobile Pages)とは?
サーチコンソールにAccelerated Mobile Pages(以下AMP)という項目が追加されたことは、もうお気付きかと思いますが、2016年2月後半からgoogleの検索に追加表示されたというこのAMPとは実際のところ何なのか?現状、対応する必要があるのか?などをこの記事でご説明...

検索1位!のサイト多数!【月額固定】7,980円(税込)の低価格SEO対策

画像の正しいファイル形式を改めて考えよう

画像はファイル形式によって容量が異なります。用途に合った正しいファイル形式で書き出してページの軽量化を行いましょう。
これによってページ表示速度を改善することに繋がります。

ではまず、画像形式についてご説明します。
主にファイル形式はjpg/gif/pngのどれかで書き出し、ページに配置してデザインしていきます。

ここでは、例としてSEO Packのトップページに使用しているメイン画像を書き出すとして、ファイル形式によって容量がどれくらいの違いが見られるのか?ファイルの特徴も併せてご説明します。

jpg

主に写真のような画像を扱う場合に選択します。

そして、画像サイズによってはファイルサイズも大きくなってしまうため、見た目問題ない程度に圧縮して書き出すようにしましょう。
少しの圧縮でけっこうな容量の節約になります。

ファイル形式による容量の違い(jpg)
ファイル形式:jpg / ファイルサイズ:88.43kb

gif

主にイラストやアイコン、またはアニメーションを使う場合に選択します。
基本的に軽いファイルで書き出すことができるため、積極的に使いたいファイル形式です。

場合によっては、写真を扱う画像でもファイルサイズの都合上、見た目に問題無ければgifで書き出しても良いでしょう。

ファイル形式による容量の違い(gif)
ファイル形式:gif/ ファイルサイズ:33.53kb

png

pngの特徴は配置した際にシャドウなどのエフェクト付きで透過にすることができます。
ファイルサイズが大きめになってしまう傾向があるため、透過などが必要なければjpgで書き出すようにしましょう。

ファイル形式による容量の違い(png)
ファイル形式:png/ ファイルサイズ:109.8kb

このように、ファイル形式によってファイルサイズに違いがあることがおわかりいただけるかと思います。

画像の書き出しは表現したいものによって適切なファイル形式を選び、必要な圧縮で書き出すことが大切です。

WordPressの画像圧縮プラグインを利用する

WordPressをお使いの場合は、EWWW Image Optimizerというプラグインが便利です。
このプラグインは、WordPressのテンプレートで使用する画像も含め、新たに投稿した際に含まれる画像も圧縮してくれます。
どれくらい圧縮したのかも管理画面で確認することができます。

では、使い方をご説明していきます。

EWWW Image Optimizerの設定

インストールして設定画面を見ると、4つのタブがありますが、一番左の「Cloud Settings」は有料プランの設定なので、以下の3つのタブだけで設定します。

  • Basic Settings(基本設定)
  • Advanced Settings(圧縮設定)
  • Conversion Settings(画像変換の設定)

EWWW Image Optimizerプラグインの設定

Basic Settingsでは、下記の箇所にチェックを入れてExif情報を削除します。そして設定を保存をします。

exifの削除

他にもAdvanced Settingsと、Conversion Settingsがありますが、デフォルトのままで充分使えます。
では、実際に圧縮をしてみましょう。

EWWW Image Optimizerの使い方

このプラグインは投稿した画像の圧縮は自動で行い、過去にアップした画像の圧縮と、テンプレートに含まれる画像を圧縮する機能があります。

まず、過去にアップした画像を圧縮してみましょう。
メディア>Bulk Optimizeを開き、下記画像の「Start optimizing」ボタンをクリックすると、過去画像の圧縮が始まります。

メディアに保存された画像を圧縮を開始する

続いて、必要ならテンプレートに使用している画像の圧縮も行います。
先ほど圧縮したボタンの下にある、「Scan and optimize」というボタンをクリックすると圧縮が始まります。
その後、「Finished」と表示されれば完了です。

テンプレートに使用しているファイルも圧縮する

ファイルの圧縮率を確認するには、メディア>ライブラリを開き、「Image Optimizer」という項目から確認することができます。

圧縮後のファイルサイズの確認

このプラグインは、Photoshopなどで一度圧縮したファイルだと圧縮率が低い印象でした。
また、gifは元々データサイズが小さいため圧縮は行わないようです。

検索順位に満足していますか?SEO Packなら今すぐSEO対策することができます!

ページの表示速度を改善する方法まとめ

サイトに使用する画像ファイルを軽量化する方法は他にもありますが、ファイルを書き出す際に少しの注意で画像ファイルを軽くすることができます。

ページ表示速度に対するSEO効果はわずかですが、スマホユーザーの直帰率などに影響してくるので、定期的にアナリティクスの「行動」>「サイトの速度」>「速度の提案」から各ページのPageSpeedスコアを確認するようにしましょう。

アナリティクスからページの表示速度を確認する

SEO内部対策 トップに戻る
SEO内部チェックツール SEO内部チェックツール

SEO対策に
SEO Packをはじめませんか?

検索結果のランキングを決める重要な要素のひとつが「リンク」です。

SEO PackならSEOに重要なリンクをはじめ、SEOに関するノウハウやSEO対策をするための管理ツールが揃います。
また、内部対策の状態も確認することができ、改善方法などもご案内します。
  • 検索順位を上げたい
  • リンク対策をしたい
  • ある程度自分でSEO対策を把握したい
  • 対策中の順位推移を確認したい
  • 変動に強いSEO対策をしたい

上記にひとつでも当てはまる方は、SEO Packの導入をおすすめします。
お試しもご用意しておりますので、詳しくはサービスの内容・特長をご覧下さい。

SEOツールseodoor(せおどあ)に無料版が登場しました