ページの表示速度とSEO効果 – 画像を軽量化する方法
ページの表示速度を改善するためには何をするべきだと思いますか？
方法は色々と考えられますが、その中でも…
- 画像ファイルを軽くする
- css・javascriptファイルを軽くする
- キャッシュを活用する
などのことが考えられるかと思われます。
ページの読み込みに関するSEO効果はごくわずかなものですが、レスポンシブデザインを導入することによる、画像の使い回しから、スマホの表示時間もできるだけ短縮したい所です。
ユーザーは数秒の待ち時間があるだけで、別のページへ移動してしまうと言います。SEO対策だけではなく、ユーザーの使いやすさも考慮してサイトの軽量化を心がけて下さい。
また、表示速度を確認するにはこちらのサイトでページごとの評価を確認することができます。
参考：https://developers.google.com/speed/pagespeed/insights/
では、この記事ではページの表示速度を上げるためにファイルなどを軽量化する方法の中から画像を軽くする方法をご紹介したいと思います。
最近ではスマホの表示を高速化する「AMP」にも対応するサイトも増えてきます。
このAMPに関しては下記の記事を参考にしてみてください。
目次
画像の正しいファイル形式を改めて考えよう
画像はファイル形式によって容量が異なります。用途に合った正しいファイル形式で書き出してページの軽量化を行いましょう。
これによってページ表示速度を改善することに繋がります。
ではまず、画像形式についてご説明します。
主にファイル形式はjpg/gif/pngのどれかで書き出し、ページに配置してデザインしていきます。
ここでは、例としてSEO Packのトップページに使用しているメイン画像を書き出すとして、ファイル形式によって容量がどれくらいの違いが見られるのか？ファイルの特徴も併せてご説明します。
jpg
主に写真のような画像を扱う場合に選択します。
そして、画像サイズによってはファイルサイズも大きくなってしまうため、見た目問題ない程度に圧縮して書き出すようにしましょう。
少しの圧縮でけっこうな容量の節約になります。
ファイル形式：jpg / ファイルサイズ：88.43kb
gif
主にイラストやアイコン、またはアニメーションを使う場合に選択します。
基本的に軽いファイルで書き出すことができるため、積極的に使いたいファイル形式です。
場合によっては、写真を扱う画像でもファイルサイズの都合上、見た目に問題無ければgifで書き出しても良いでしょう。
ファイル形式：gif/ ファイルサイズ：33.53kb
png
pngの特徴は配置した際にシャドウなどのエフェクト付きで透過にすることができます。
ファイルサイズが大きめになってしまう傾向があるため、透過などが必要なければjpgで書き出すようにしましょう。
ファイル形式：png/ ファイルサイズ：109.8kb
このように、ファイル形式によってファイルサイズに違いがあることがおわかりいただけるかと思います。
WordPressの画像圧縮プラグインを利用する
WordPressをお使いの場合は、EWWW Image Optimizerというプラグインが便利です。
このプラグインは、WordPressのテンプレートで使用する画像も含め、新たに投稿した際に含まれる画像も圧縮してくれます。
どれくらい圧縮したのかも管理画面で確認することができます。
では、使い方をご説明していきます。
EWWW Image Optimizerの設定
インストールして設定画面を見ると、4つのタブがありますが、一番左の「Cloud Settings」は有料プランの設定なので、以下の3つのタブだけで設定します。
- Basic Settings（基本設定）
- Advanced Settings（圧縮設定）
- Conversion Settings（画像変換の設定）
Basic Settingsでは、下記の箇所にチェックを入れてExif情報を削除します。そして設定を保存をします。
他にもAdvanced Settingsと、Conversion Settingsがありますが、デフォルトのままで充分使えます。
では、実際に圧縮をしてみましょう。
EWWW Image Optimizerの使い方
このプラグインは投稿した画像の圧縮は自動で行い、過去にアップした画像の圧縮と、テンプレートに含まれる画像を圧縮する機能があります。
まず、過去にアップした画像を圧縮してみましょう。
メディア＞Bulk Optimizeを開き、下記画像の「Start optimizing」ボタンをクリックすると、過去画像の圧縮が始まります。
続いて、必要ならテンプレートに使用している画像の圧縮も行います。
先ほど圧縮したボタンの下にある、「Scan and optimize」というボタンをクリックすると圧縮が始まります。
その後、「Finished」と表示されれば完了です。
ファイルの圧縮率を確認するには、メディア＞ライブラリを開き、「Image Optimizer」という項目から確認することができます。
このプラグインは、Photoshopなどで一度圧縮したファイルだと圧縮率が低い印象でした。
また、gifは元々データサイズが小さいため圧縮は行わないようです。
ページの表示速度を改善する方法まとめ
サイトに使用する画像ファイルを軽量化する方法は他にもありますが、ファイルを書き出す際に少しの注意で画像ファイルを軽くすることができます。
ページ表示速度に対するSEO効果はわずかですが、スマホユーザーの直帰率などに影響してくるので、定期的にアナリティクスの「行動」＞「サイトの速度」＞「速度の提案」から各ページのPageSpeedスコアを確認するようにしましょう。
