ページの表示速度とSEO効果 – 画像を軽量化する方法
ページの表示速度を改善するためには何をするべきだと思いますか？
表示速度の改善方法は色々と考えられますが、その中でも次の3点が考えられるかと思われます。
- 画像ファイルを軽くする
- css・javascriptファイルを軽くする
- キャッシュを活用する
ページの表示速度はSEO対策にも影響を及ぼす部分です。
Googleは、Core Web Vitals（コア ウェブ バイタル）という指標を検索ランキング要因に組み込む事を発表しています。
Core Web Vitalsは「ページの表示速度（LCP）」「ユーザー操作への反応性（FID）」「視覚要素の安定性（CLS）」の3つの指標でページのユーザーエクスペリエンスを評価します。
ユーザーは数秒の待ち時間があるだけで、別のページへ移動してしまうと言います。 2018年のPingdomのデータによると、 ページの読み込みが2秒までは直帰率は9％程度だが、3秒で大幅に直帰率が増加するといった結果が出ています。
このことからSEO対策としてはもちろん、サイト運営の観点からもページの読み込み時間は3秒以内に抑え、ユーザーの使いやすさも考慮してサイトの軽量化を心がける事が重要となります。
また、表示速度を確認するにはgoogleの「PageSpeed Insights」でページごとのパフォーマンス評価を確認することができます。
参考：https://developers.google.com/speed/pagespeed/insights/
では、この記事ではページの表示速度を上げるためにファイルなどを軽量化する方法の中から画像を軽くする方法をご紹介したいと思います。
最近ではスマホの表示を高速化する「AMP」にも対応するサイトも増えてきます。
このAMPに関しては下記の記事を参考にしてみてください。
目次
画像の正しいファイル形式を改めて考えよう
画像はファイル形式によって容量が異なります。用途に合った正しいファイル形式で書き出してページの軽量化を行いましょう。
これによってページ表示速度を改善することに繋がります。
はじめに、画像形式についてご説明します。
画像のファイル形式は主に、jpg/gif/pngのどれかで書き出しし、ページに配置してデザインされている場合が多いと思います。
最近は上記のファイル形式に加え、次世代画像形式として「WebP」が登場しています。
「WebP」についての詳細は【実践】Googleの画像フォーマット「WebP」でページスピード改善をご確認ください。
さてここからは、画像を書き出すとして、ファイル形式によって容量がどれくらいの違いが見られるのか？ファイルの特徴も併せてご説明します。
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への影響は今後も度外視できません。検索ランキング要因の一つである事の他、直帰率などに影響してくるので、定期的にアナリティクスの「行動」＞「サイトの速度」＞「速度についての提案」を確認するか、または、googleの「PageSpeed Insights」でパフォーマンスを確認しましょう。
