PageSpeed Insightsで99点をマークした記事の中で、画像圧縮プラグインとしてWPMU DEVが提供するSmush Proをご紹介しました。そのSmush Proプラグインの無料版と有料版の違いやメリット、インストール方法から各種設定項目の説明、最適な設定方法までお伝えします。
目次
Smush Proとは
WordPressプラグインである「Smush Image Compression and Optimization」（略してWP Smushや昔の名称？のSmush itなどと呼ばれることも）の有料版プラグインとなり、画像非可逆圧縮や適切なサイズへ自動リサイズ、CDN画像配信、次世代画像フォーマットであるWebP変換など、多くの機能を備えた画像最適化プラグインです。以下は有料版の機能一例です。
- 非可逆圧縮
- CDN画像配信
- WebP変換
- 自動サイズ変更
- 最大32 MBの画像を最適化
- ワンクリックですべての画像の一括最適化
- PNGを圧縮したJPEGへ自動変換
- フルサイズ画像を圧縮（コピーのため任意の時点で復元可能）
無料版でも十分多機能ですが、有料版だと上記の機能が手に入ります。
画像圧縮を行うサーバーが外部かどうかも重要なチェックポイントです。仮に自サーバー内で圧縮する場合、サーバーへの負荷がかかるためオススメできません。その点Smush ProプラグインはSmush側のサーバーで圧縮してくれるため、サーバーへの負荷を心配しなくてすみます。
メリット・デメリット
メリット
実際に使っていて大きな違いと感じるのは以下です。
- 最大32MBのサイズ制限に拡大（無料版は1MBサイズの制限がある）
- フルサイズ画像も圧縮可能＆万が一圧縮前の画像に戻すことも可能（フルサイズ画像の圧縮ができない）
- WebP画像への変換
- CDN配信によりサーバ負荷軽減や表示速度向上
やっぱり1MBサイズってどうしても引っかかってくることもあって、オリジナルテーマで作成した場合はテーマで使っている画像容量は少なく調整済みでも、投稿者が別だったり複数いるケースだと人によっては大きな画像をアップロードするケースって少なくないんですよね。そうなると大きな画像こそ圧縮したいのです。
フルサイズ画像も同様で、投稿者によってはフルサイズの画像を貼り付けちゃったりすると、ページ表示速度に大きな影響を与えてしまいます。
WebPはGoogleが開発しているjpgやpngに変わる（かもしれない）次世代画像形式です。一番のメリットは画像サイズの軽量化です。まだ全ブラウザで対応していないため、WebP画像と通常の画像を併記しないといけないですが、Googleが提唱していることもあり、今後SEOにも関係してきそうです。
Smush側が用意するCDN（コンテンツ・デリバリー・ネットワーク）を利用することにより、容量の大きくなりがちな画像はCDN経由で提供されるため、サーバ負荷・表示速度改善につながります。
デメリット
デメリットはプラグインは買い切りではなく毎月のサブスクリプション契約での有料提供ということです（当たり前ですが）。2020年2月現在、1サイトのみであれば毎月7$のプラン、5サイトまででサポートがついて$14（1サイトあたり$2.8）、25サイトまで$29（1サイトあたり$1.16）という料金体系となっています。以前より安くなっているような…
インストール方法
Smush Proのインストール方法です。有料プラグインとなるため、WordPress公式ディレクトリからのインストールとは異なります。
Smush Proの公式ページより「TRY FREE FOR 30DAYS」をクリックします。上位のPROプランやAgencyプランを契約したい場合は「Pricing」より進めます。
あとは流れに沿って、インストールを進めていきましょう。続いてプラグインを有効化した後の設定です。
初期設定
プラグインのバージョンによって異なるかもしれませんが、初期設定ウィザードが表示された場合は以下の流れで初期設定を行います。この初期設定をスキップしてもあとから設定できるので大丈夫です。
以上で初期設定が完了です。この後Smushプラグインの設定ページに遷移します。「Bulk Smush」という一括画像圧縮のボタンが出てきますが、その前に各項目を確認し、設定を見直してから一括圧縮しましょう。
Smush Pro各項目の説明
1. どの画像サイズに対して圧縮を有効にするか
基本的には「All」で問題ないですが、「小さいサイズの画像は圧縮しなくていい」「カスタムサイズは圧縮しない」等のルールで運用したければ、「Custom」を選択すると圧縮したくない画像サイズが選択できます。
2. アップロードされた画像に対して自動圧縮をするかどうか
今後画像をアップロードした際に、自動で画像圧縮をおこなうかどうかの設定です。無効にする理由はとくにないため、オンが望ましいでしょう。
3. Super-Smushを有効にするかどうか
無料版にはないSmush Proの大きい機能の一つとしてSmush Proが挙げられます。これは通常の画像圧縮よりさらに高圧縮ができる機能です。例として、Smush Proを導入したサイトで、通常のSmush Proで圧縮した場合と、Super-Smushを利用して圧縮した場合を比較しました。トップページの読込速度は3.8秒から2.2秒と約42%減少し、圧縮サイズは3.49MBから1.03MBと約70%減少と大きな改善が見られました。
是非有効をおすすめします！
4. 画像メタデータを取り除くかどうか
Exifと呼ばれる位置や撮影時間等の写真に関するメタ情報が含まれていた場合、写真データとメタデータを分け、画像からメタ情報を取り除いた状態にするかどうかの項目です。通常は情報として無いほうがいいですし、容量もその分軽くなるためチェックをおすすめします。
5. フルサイズ画像のリサイズを行うかどうか
フルサイズが設定したサイズよりも大きかった場合、自動的に縮小するかどうかの設定項目です。デバイス幅が決められているため、あまりにも大きすぎる画像サイズは不要です。デフォルトで「2048 x 2048」になっていますので、このサイズで設定しておきましょう。サイズは任意で変更可能です。
6. 画像元データを圧縮するかどうか
画像の元データを圧縮するかどうかを設定できます。テーマ側に保存した画像はフル画像で設定している場合もあるため、元画像圧縮にチェックしておくと良いでしょう。
7. 画像元データの保存に関して
画像の元データのコピーを保存するかどうかを設定できます。非可逆圧縮のため、圧縮後のデータは元に戻りません。上記6にチェックをいれたらここもチェックを入れておいたほうが安心です。
8. png画像をjpgに変換するかどうか
png画像をjpgに変換し圧縮対象とするかどうかの項目です。圧縮後pngより大きい場合は変換しません。また、透過部分は無視されます。サイトに応じてチェックするかどうか決めます。大きな影響がなければチェックしましょう。
画像圧縮
上記設定完了後、画像圧縮を開始させましょう。設定ページ上部にある「BULK SMUSH NOW」をクリックします。
画像数が多いと結構時間がかかります。数万点などあると、1日以上かかることも…
画面をこのままにしておかないといけないので、何か作業がある場合は別タブで行い、画面を消さないように注意してください。
ディレクトリ内の画像も圧縮する
Smush Proは各ディレクトリ内にある画像も圧縮できます。例えば、テーマフォルダーに含まれる画像もサイト側で使っていることも多いです。特にオリジナルテーマで作成したテーマであれば、より多くの画像を参照していることでしょう。その場合は、画像が保存されているディレクトリを選択し、該当の画像をすべて選択しましょう。
画像のCDN配信とWebP対応
次世代画像フォーマットと呼ばれているWebP画像。EWWW Image Optimizer等のプラグインでも対応できますが、Smush ProでもWebPへの変換に対応しています。また、Smush Proが用意するCDNを別途CDNの設定無しで利用できます。画像をCDNからの配信にすればサーバーへの負荷を減らすことができます。
CDN配信機能は一応ベータ版という位置づけのため、今後変更や廃止の可能性はあるかもしれません。
1. 背景画像もCDNからの配信にするか
チェックをオンにするとbackground-imageとして設定している背景画像についてもCDNからの配信になります。ただしCSS側は書き換わらないため、CDNからの配信にする場合はwp_attachment関数によって宣言されている記述をする必要があります。
2. 画像の自動リサイズを有効にするか
サイズに応じて自動で最適なサイズの画像を配信します。PageSpeed Insightsの「画像を最適化する」はこれでクリアできます！
3. WebP変換を有効にするかどうか
これが使いたくてCDN機能を有効にしている人も多いと思います。迷わず有効！WebPに対応していないブラウザは通常のjpeg画像を表示します。
4. CDNからの配信をやめる場合
画像をCDNから配信するのをストップする場合にこのボタンをクリックします。画像はすでにサーバーにあり、CDN配信を設定したからといって画像が表示されなくなるわけではありません。キャッシュ対策をしている場合はクリアするのを忘れないようにしましょう。
完了後、PageSpeed Insightsで計測してみよう
以上で設定は完了です。設定が完了したらキャッシュクリアなど行い、どの程度改善されているかPageSpeed InsightsやGTMetrix等のツールを使って計測してみましょう。画像が多ければ多いほど恩恵があると思います。
テーマや設定ファイル側で細かいチューニングをすることも重要ですが、適宜変わっていく技術の中で、ツールで解決できるのであれば多少お金を払っても解決し、本来行うべきコンテンツの作成やコンバージョン改善という方向に時間を使っていく方が有意義なのではないかと考えます。
設定箇所でわからないことがあれば分かる範囲で答えますので、Twitter等でコメントしてください。
