KUSANAGI上でShortPixel利用のWebP化は実装できない?

最新の更新日
Dec 7, 2021 10:03 AM
Target Keywords
vol.

高速配信を可能にする、次世代画像フォーマットであるWebP。PageSpeed Insightでも「次世代フォーマットを利用してください」と警告がなされるようになり、サイトの高速表示にはなるべく利用したい画像形式です。

ShortPixelプラグインで一括WebP化!画像圧縮でWordPressを高速に

2021年5月から表示速度等を含む指標「CoreWebVital(コアウェブバイタル)」がSEOのランキング要因となることが、Googleによって正式に発表されました。 そもそも、表示速度は既にSEOランキング要因の一つ。あまりに表示が遅いサイトはSEO上マイナス評価を受けています。 PageSpeed Insightsでサイト診断を行うと、特に高速化対策を行っていないサイトでは次のような画像に関する点を指摘されることが多いです。 画像が大きすぎます 画像を次世代フォーマットで表示させてください 画像の容量が大きすぎます WordPressでこれらの点を解決してくれ、サイト高速化に大きな効果をあげるのが、今回ご紹介する "ShortPixel Image Optimizer" というプラグイン。 私のサイトでもShortPixelプラグインを利用することで、サイト全体での画像容量を 70%圧縮 させることに成功しました。 以下から、そんなShortPixelプラグインのおすすめポイントと設定方法について丁寧に解説していきます。 WordPressでWebP画像へと変換するプラグインは多くありますが、私はShortPIxel Image Optimizerを採用しています。 Image Optimization and Compression Plugin for WordPress and API by ShortPixel ShortPixelの良いところは という、画像圧縮プラグインに求められるポイントを全て満たしているところ。 ShortPixelによって圧縮される画像がどのような品質になるかは、下の公式ページから実際にお持ちの写真を圧縮してテストできます。 Compress and optimize your JPEG, PNG and (animated) GIF files 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 が下記ツイートをしていた 画像圧縮系プラグイン、下に行く程おすすめ Compress JPEG & PNG images↓EWWWでwebp生成↓Shortpixel(画像多いと有料)↓CDNでビューポートに合わせた自動リサイズ(完全有料) あと途中で画像圧縮系プラグイン変えると画質悪化する事があるので最初から選択間違えると辛いですよ。- スキルシェア⚡WordPress高速化(スコア改善だけじゃCWV対策不十分!) (@skillsharejp) November 8, 2020 スキルシェアさんは一部上場企業のWordPressサイト高速化相談に乗られていたり、WordPress制作やSEO界隈では有名な方です。 WordPress高速化・保守管理 スキルシェア 唯一Shortpixelでのデメリットがあるとすれば、無料で画像をWebP化・最適化できるのが月100枚までということでしょうか。 ただし、10,000枚につき$9.99(買い切り)から無期限のクレジットを購入することができます。 月額の場合は毎月5,000枚で$3.99/月 の継続プランもあるようです。 価格参考: ShortPixel Image Optimization and Compression Plans and Pricing クーポンを利用すると買い切りのものが15,000枚にまで増えるなど特典があるようなので、"shortpixel ...

ShortPixelプラグインで一括WebP化!画像圧縮でWordPressを高速に

今回、「さくらVPS上で運営されているKUSANAGiで、WordPressプラグイン”ShortPixel”を利用しWebP配信を実装したい」とのご相談を受けたのですが、KUSANAGIとShortPixelとの相性が悪く、うまくWebP表示させられなかったり、画像が非表示になってしまったりとの不具合に陥りまいした。

結果、KUSANAGI上でShortPixelを利用したWebP配信は困難と判断しました。途中で調べたリンク等を下記、ご共有します。

image

KUSANAGIではShortPixelプラグインによるWebP化が難しい

どうもNginxでのディレクティブによるwebpとその他画像の出し分けと、KUSANAGIの機能が競合していそう。

自分では解決できず。以下、検証のために参考にした情報を掲載しておきます。

試した環境はさくらVPS・KUSANAGI・Nginx・PHP7.4です。

ShortPixel公式の方法。コピペできるコードが掲載

↓ nginx.confファイルのインクルード説明など、わかりやすかった記事。

NginxでWebPを出し分けるそもそもの表示方法について解説記事

なお、WebP出し分けのlocationについて

他の location ディレクティブよりも上位に記述する。 画像ファイルに対するブラウザキャッシュの設定などよりも後に記述すると、想定通りの動作をしない。

ほか参考

WebP化の代替策としてEWWWプラグイン利用かCloudFlare等のCDN側処理を推奨

EWWWプラグインでJavaScriptによる制御で表示

EWWWだとJavaScriptによる切り分けによって動作する場合があるかも

Reverse Proxy 配下の WordPress で、WebP 配信がされていないことに気付く。 「WebP の配信方法」の「JS WebP リライト」にチェックを入れると解決する。

CloudFlare等、CDN側でWebP化を処理させる

CDNによっては、CDN側の機能で画像のWebP化が可能です。

Cloudflareでは “Cloudflare Polish” という機能を利用することでWebP形式での配信が可能になります。

こちらの記事にも詳細あり。