SEO・サイトの質問掲示板 >

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

Wordpress(ワードプレス)

このカスタマイズのポイント

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

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

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

本カスタマイズの基本情報

所要時間15分(※)
利用する
プラグイン
EWWW image
optimizer
効果スピード向上
サーバー負荷低減
SEO効果

※画像の数で変わります

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

難易度

Lv.1プラグインのみ
Lv2CSSの操作が必要
Lv3サーバーでの操作が必要
Lv4FTPの操作が必要
Lv5それ以上の難易度全て

 

カスタマイズ前

画像の拡張子がJPG、PNGで保存されている状態です。

 

カスタマイズ後

見た目は変わりませんが、読込形式が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」を押して再読み込み(リロード)して下さい)。

 

これでおしまいだよ!役に立ったらツイート、はてなブックマークしてくれると嬉しいな。

0

コメント

タイトルとURLをコピーしました