WordPressの画像をWebP化してデータ容量を軽くして高速化する方法

見た目は変わりませんが、画像がwebP(ウェッピー)形式になります。画像が大幅に軽量化され、読み込み時間が速くなります。

ただし、効果が表れるのはWebP対応ブラウザです。(Google Chrome、FireFox、Opera、Edgeが対応しているのでほぼ速くなるとも言えます。

また一度設定さえしておけば、設定後にアップロードした画像は全てWebP対応になります。

サブディレクトリサイトでWebP化を検討されている方は手順が異なります。サブディレクトリサイトのWebP化の方法をご覧ください。

目次

カスタマイズの方法

プラグインをインストールする

プラグイン「EWWW Image Optimizer」をインストールします。

プラグインの設定画面からWebPをオンにする

サイドバーの「設定>EWWW Image Optimizer」を開き、WebPタグを開きます。

チェックボックスをONにします。

下に出てくるコードを.htaccessに貼り付ける

以下のコードをコピーします。

.htaccess「.htaccess」を編集します。以下の例はレンタルサーバー「Conoha」の管理画面です。編集のペンボタンから編集が可能です。

一番最初(#BEGIN WordPressの前)に貼り付けます。

保存し、先ほどのEWWW Image Optimizerの画面を見るとグリーンに変わっています。これで設定は完了です。

キャッシュプラグイン「WP Fastest Cache」を利用している場合は、WebP用のコードが入っているため、最初からグリーンになります。

メディアから一括最適化する

サイドバーのメディアから一括最適化を選びます。

画像をスキャンします。

右側のWebPのみ、チェックボックスを入れます。なお過去にEWWW imgae Optimizerを使っている場合は再最適化にチェックを入れて下さい。

圧縮が終わって、メディアライブラリの一覧で開きます。以下のボタンから一覧にできます。

以下のようにWebP圧縮されていることが確認できます。

WebPに変換されているか確認する

Google Chromeをシークレットタブで開きます。シークレットタブは「Alt+shift+n」を押すことで開くことができます。

F12を押して、左上からNetworkを開きます。

以下の枠の中がWebPに変わっていればいればOKです。(開いた時、何もデータがないことがあります。その場合は「ctrl+R」を押して再読み込み(リロード)して下さい)。

補足

wpX Speedサーバーで行う時は以下の設定も必要になります。合わせてご覧ください。

あわせて読みたい
EWWW Image Optimizerでexec()を有効にしてくださいと出た時の対処法
EWWW Image Optimizerでexec()を有効にしてくださいと出た時の対処法【トラブル事例】wpX Speedサーバーを利用しており、EWWW Image Optimizerの圧縮機能(WebP含む)を使おうとすると「exec()」をシステム管理者に有効にしてくださいと出...
よかったらシェアしてね!

コメント

コメントする

目次
閉じる