2021年5月から表示速度等を含む指標「CoreWebVital（コアウェブバイタル）」がSEOのランキング要因となることが、Googleによって正式に発表されました。
そもそも、表示速度は既にSEOランキング要因の一つ。あまりに表示が遅いサイトはSEO上マイナス評価を受けています。
このコアウェブバイタルを改善させる手がかりとなるのが、Google公式ツールであるPageSpeed Insights。
PageSpeed Insightsでサイト診断を行うと、特に高速化対策を行っていないサイトでは次のような画像に関する点を指摘されることが多いです。
- 画像が大きすぎます
- 画像を次世代フォーマットで表示させてください
- 画像の容量が大きすぎます
WordPressでこれらの点を解決してくれ、サイト高速化に大きな効果をあげるのが、今回ご紹介する “ShortPixel Image Optimizer” というプラグイン。
私のサイトでもShortPixelプラグインを利用することで、サイト全体での画像容量を70%圧縮させることに成功しました。
以下から、そんなShortPixelプラグインのおすすめポイントと設定方法について丁寧に解説していきます。
目次
WordPressの画像を一括で圧縮・WebP化できるShortPixelプラグイン
WordPressでWebP画像へと変換するプラグインは多くありますが、私はShortPIxel Image Optimizerを採用しています。
Image Optimization and Compression Plugin for WordPress and API by ShortPixel
ShortPixelの良いところは
- 高い圧縮率
- 画質がほとんど劣化しない
- WebP変換を行うことができる
という、画像圧縮プラグインに求められるポイントを全て満たしているところ。
ShortPixelによって圧縮される画像がどのような品質になるかは、下の公式ページから実際にお持ちの写真を圧縮してテストできます。
Compress and optimize your JPEG, PNG and (animated) GIF files
高速化の専門家もおすすめ。ShortPixel Image Optimizerが最高の画像圧縮系プラグイン
ShortPixel Image Optimizer採用の理由として、WordPress高速化の専門家である以下の2社がおすすめしていたことが挙げられます。
①: WordPressに関する専門記事で定評のあるホスティングサービス"Kinsta"に取り上げられていた（下記リンク） How to Use WebP Images on WordPress (And Shrink Image File Sizes up to 35%)
KinstaはWordPressのフルマネージドホスティングサービスを展開する海外の会社。日本語でもWordPressの記事を出しており、特に高速化やパフォーマンス設定に関する専門記事には定評があります。
②: WordPress高速化の専門家であるスキルシェアさん @skillsharejp が下記ツイートをしていた
画像圧縮系プラグイン、下に行く程おすすめ
— スキルシェア⚡WordPress高速化（スコア改善だけじゃCWV対策不十分！） (@skillsharejp) November 8, 2020
Compress JPEG & PNG images
↓
EWWWでwebp生成
↓
Shortpixel（画像多いと有料）
↓
CDNでビューポートに合わせた自動リサイズ（完全有料）
あと途中で画像圧縮系プラグイン変えると画質悪化する事があるので最初から選択間違えると辛いですよ。
スキルシェアさんは一部上場企業のWordPressサイト高速化相談に乗られていたり、WordPress制作やSEO界隈では有名な方です。
ShortPixelの有料クレジットについて。買い切りでお得な利用も可能
唯一Shortpixelでのデメリットがあるとすれば、無料で画像をWebP化・最適化できるのが月100枚までということでしょうか。
ただし、10,000枚につき$9.99(買い切り)から無期限のクレジットを購入することができます。
月額の場合は毎月5,000枚で$3.99/月 の継続プランもあるようです。 価格参考: ShortPixel Image Optimization and Compression Plans and Pricing
クーポンを利用すると買い切りのものが15,000枚にまで増えるなど特典があるようなので、"shortpixel coupon"などで検索してみてください。
WordPressで画像WebP化を行える他プラグイン
ShortPixelの他にも下記プラグインでWordPress画像のWebP化を行うことができるよう。
- Imagify
- Optimole
- EWWW Image Optimizer
- WebP Express
別サイトでは既にEWWWが導入されていることもあり、EWWWを利用して簡単にwebp化させることができた経験があります。
ShortPixelは無料版の場合、毎月100枚までしかwebp化することができないため、サイト保有の画像枚数によってはEWWWが選択肢となることもあるでしょう。
【参考記事】ShortPixelや他との比較で、EWWWがバランス良しとしている記事: 【WEBP対応】Wordpressの画像を最適化して転送量を大幅に削減する方法 | WordPressのお医者さん
ShortPixel Image Optimizerプラグインの設定
ShortPixelプラグインをインストールし、設定へいくとAPIキーを入力するように言われます。
ShortPixel Image OptimizerのAPIキーは、下記公式ページの購読ボックスにメールアドレスを登録すれば入手可能。
ShortPixel Get your API Key for free
APIキーが認証されると、様々な設定項目が表示されます。
Generalタブの項目は基本的にはデフォルトのまま。Generalタブの項目は圧縮方式などの基本項目のようです。
WebP変換時の圧縮方式について。Lossy, Glossy, LossLessの違い
圧縮方式(Compression type)は、Lossy(不可逆圧縮)、Glossy、LossLess(可逆圧縮)から選択できます。
""" lossyからlosslessまでの３つから圧縮レベルを選択することができます（ 圧縮率は高い順からLossy>=Glossy>>>Lossless）。圧縮前後の違いはこちらで確認できますが人の見た目には全く違いはわかりません。
Lossy（推奨）： もっとも最適化される。サイトの速度が最も早くなります Glossy：ShortPixelオリジナルの圧縮形式。Lossyよりも少し大きい程度で画質は少しいい。 Lossless：可逆圧縮で画質は同じだがほとんどファイルサイズは変わらない
公式では2.32MBの画像が、 Lossy ：408kB, Glossy：514kB, Lossless：2.30MBとなっていました。"""
上記引用元: 画像圧縮プラグインShortpixelのレビューと使い方【WordPress】 | NoteBook
圧縮と同時に大きな画像のリサイズを行いたい場合
ただし、圧縮と同時に大きな画像についてリサイズを行ないたい場合は"Resize large Images"にチェックをいれましょう。
ShortPixelプラグインでのWebP変換設定項目
WebP化の設定のためには"Advanced"タブへ移動します。
webP imagesの項目で、下記にチェックをいれます。
・"Also create WebP versions of imges, for free" ここに項目をチェックすることで、画像がWebP化されます。
・Deliver the WebP versions of the images in the front-end "フロントエンド側でWebPを表示させる" のような意味。
・Using the <PICTURE> tag syntax HTMLを書き換えてpictureタグへ変換するか、あるいはページコードを変更せず.htaccessファイルの設定により書き換えるか選択します。
基本的にはpictureタグの書き換えで良いと思いますが、不具合が生じる可能性もあります。
場合によっては.htaccessによる方法 "Without altering the page code (via .htaccess)"にチェックを入れる形でも良いでしょう。
pictureタグと.htaccess記述それぞれのメリット/デメリットは下記ページを参考。 参考: WebP対応/非対応ブラウザで画像を表示させる方法2選。PC、スマホで切替も
・Only via WordPress hooks または Glogal
Only via WordPress hooks: 投稿コンテンツ内や抜粋文エリアなど、一部の主要部分においてのみWebP形式で表示されます。
Global: サイト全体において、WebP形式での表示を行ないます。私の場合でも、上キャプチャではチェックしていませんが、後にGlobalへの選択へ変更しました。
・Optimize other thumbs 上のWebP設定中には項目がありませんが、他のプラグインによって生成されたサムネイルがある場合には、それも含めてWebP化してくれるようです。基本的にはチェック推奨。
全て設定完了したら、一番下の"save changes"で設定を保存。
CloudFlareとShortPixelを連携させる
※ CloudFlare(CDN)を利用している場合
ShortPixelでは、Cloudflareとの連携を行うことができます。 Cloudflareの情報を入力することで、Shortpixelで処理した画像をシームレスにCloudflare上でも反映させることができます。
Zone ID: Cloudflareの各サイト"OverView"画面の右側サイドバー中ほどに" Zone ID"の項目があります。
Cloudflare Token または Global API Key: 右上の人物メニューから"プロフィール" > "APIトークン" タブ に各項目があります。
Cloudflare E-mail: CloudFlareログインに使用するメールアドレスを入力します。
ShortPixelにより既存画像の一括圧縮・webp化を実行
ShortPixelをインストールし設定を完了させれば、以降は画像がアップロードされる度にバックグラウンドで自動的に画像が圧縮最適化・WebP化されます。（クレジットによる枚数制限はあります）
しかし、インストール時点までに既にアップロードしていた画像に関しては圧縮・WebP化処理されません。手動で一括最適化を行う必要があります。
※画像圧縮やWebP化を実行する前に、バックアップをとっておきましょう。場合によっては一部画像が表示されなくなるという不具合の発生も考えられます。
Shortpixel 一括最適化画面 (Bulk)
メディア > Bulk Shortpixel で一括最適化画面に移動します。
画面中央右の"Start Optimizing 0000 images" のボタンをクリックすると、一括最適化が始まります。
最適化する画像が多い場合にはShortpixelでクレジットを購入
ただし、クレジットが足りないと全ての画像を一括最適化することはできません。 たとえば、上記キャプチャでは1,061枚の画像を最適化可能ですが、無料クレジットではそのうち100枚しか最適化できませんよ、と言われています。
青いボタン "Show me the best available options"をクリックすると、サイト利用状況に沿った最適なプランが提示されます。
上のキャプチャでは、直近4ヶ月の平均で毎月17枚程度の画像が新たにアップロードされていることを教えてくれています。
そのため、買い切りの10,000枚プランをおすすめされているようです。 クレジットを購入すると、Shortpixelサイト上ダッシュボードにクレジットが追加されます。
クレジット購入後、WordPressプラグインに反映させるのにしばらく時間がかかるようなので、購入してしばらく経ってから一括最適化を実施しましょう。
またブラウザキャッシュも影響するようです。クレジットが反映されない、プラグイン上で反映されない場合にはブラウザキャッシュも疑ってみてください。
実際に画像の一括最適化・WebP変換を実行
"Start Optimizing 0000 images" のボタンを押して、画像の一括最適化・WebP変換を実行。
実行中画面では、残り時間と何%改善されたかが表示されていきます。私の場合は1,000枚ほどで1時間30分程度かかると表示されました。
このタブを閉じてしまうと一括最適化の作業は停止してしまうので注意。
別のタブや別ブラウザで、WordPress管理画面を操作することは問題ないようです。
また、途中で画面が停止して最適化される画像が新しく表示されなくなった場合には、クレジット切れの可能性があります。PauseまたはStopを押して手動で処理を停止させましょう。
一括最適化が停止してしまった場合には、メディア > Bulk Shortpixel から再開させましょう。
Shortpixelによってどれくらい画像が圧縮・軽量化されたか？
設定 > Shortpixel > Statistic タブ から結果を確認できます。
これを見ると、全画像を平均で約70%圧縮したとあります。ほかにも圧縮によって節約されたディスクスペースや、Shortpixelによって節約された通信帯域(Bandwidth)などを表示されます。
なかなか凄まじい圧縮効果ですね…！噂通り、Shortpixelは最強のWordPress画像圧縮プラグインでした。
圧縮後の画像を確認しましたが、たとえば文字が含まれるような写真は若干かすれが分かるかなというくらいで、通常の写真に関しては劣化がほとんど気にならない程度。
実際にWebP化されたかどうかをチェックするツールとして、Chrome拡張機能の"WebP Highlighter"が便利。WebP化された画像を分かりやすくハイライト表示してくれます。
WebP Highlighter Chrome Web Store
グリーン色でハイライトされているのが非可逆圧縮(lossy)、レッド色が可逆圧縮(lossless)。 一般には非可逆圧縮のほうが圧縮率が高いと言われますが、復元が難しいなどの制約もあります。
一括最適化を行ったのにサイト上でWebPが反映されない、という場合にはキャッシュ系を疑ってみてください。キャッシュをパージすると表示されることもあります。
操作も比較的かんたんで分かりやすく、圧縮率も素晴らしい。全力でおすすめできる画像圧縮プラグインですね。
KUSANAGIでShortPixelの画像最適化が0%から進まないエラーの対応方法
VPS等でKUSANAGI環境にて、ShortPixelの画像最適化が0%から進まない、というエラーが発生しました。 PHP実行権限ユーザー設定に関連するエラーであることが多いです。詳細は下記の記事にまとめました。
KUSANAGIでShortPixelの画像最適化が0%から進まないとき
ShortPixelの画像最適化エラーにお困りの方はぜひご参考に。
ただし、KUSANAGI（またはNginx）環境ではそもそもShortPixelによるWebP配信が上手く動作しない恐れがあります。
KUSANAGI上でShortPixel利用のWebP化は実装できない
これからKUSANAGI, NginxでShortPixelプラグインを利用してWebP化を検討されている方はご注意ください。
Leave a Reply