ワードプレスでWebP化する方法はEWWW Image Optimizerプラグインを使えば簡単!

WebP 高速化

 

ワードプレスの画像WebP化のポイント

1,ワードプレスにプラグイン・EWWW Image Optimizer入れる

2,サーバー管理画面やFTPソフトで自サイトの 「.htaccess」ファイルを探し、その冒頭に以下構文を挿入する

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

3,プラグイン「EWWW」で画像を一括最適化

 

ワードプレスサイトが重くなる原因はだいたい「画像」

こんちわ。

皆さん、「自サイトの速度」=表示までの速さって、気にしてます?

 

今のGoogleの傾向では、サイト高速化もある程度サイト評価の基準になってきています。

 

一般的な前提として・・・

サイト表示が遅いと、ユーザー離脱率が上がるといわれています。

たぶんあなたも経験あるかもですが、やたら読み込みが遅いサイトってイライラしますよねw

スマホ検索とかだと、割と数秒を争うレベルで早く情報が知りたいわけで。

そんな時に読み込み中マークが延々出て、いつまでも表示されないサイトがあったら、我慢できずブラウザバックしちゃったことがある人もいるはず。

 

だから、サイト高速化はGoogleの評価だけでなく、ユーザーさんに記事を読んでもらう、という初歩的な機会を失うことにもなりかねないわけで。

 

で、サイトの速度にかかわるのは、一般的なワードプレスサイトで言いますと・・・

  • サーバー選び
  • ブログテンプレート
  • 自分で入れたコンテンツ(記事画像プラグイン)

・・・ということになるんですが。

 

サーバーはやっぱりエックスサーバーが一番安定。

これ選べばまず問題ない。

ブログテーマ(テンプレート)も、最近の物ならどれも高速化に対応してます。

 

で、問題は自分が入れたコンテンツ。

特に画像

これが、サイトを重くしてるかなり大きな要因でして。

画像形式を変えるだけでも、サイト速度は結構改善することがあります。

 

特に最近よく見るのが「WebP」という画像形式です。

参考:https://ja.wikipedia.org/wiki/WebP

 

ただ、これは最近(つっても数年前からもうありましたが)登場した画像形式であり、みんなjpegやらpngを入れるのが一般的だったと思います。

 

僕も、サイト軽量化とか全然わかってなくて、画像の形式もほぼなんも考えず入れてたんで、WebP形式とか考えたことありませんでした。

 

ですが、サイトの画像WebP化は、今からでも遅くありません。

 

ワードプレスなら

  • 「EWWW Image Optimizerプラグイン」
  • 「htaccessファイルに追記」

だけでサイト画像をWebP変換することができ、サイト高速化に大いに役立ちます。

 

じゃあ、手順を解説していきます。

 

あくまでワードプレスサイトのやり方なので、ほかのブログの場合は回れ右してください。

 

1,EWWW Image Optimizer入れる

まず必要なのは

EWWW Image Optimizer

というプラグインです。

これがあれば、「新規追加画像のWebP変換」「すでにある画像のWebP変換」が簡単に設定できます。

つまり、用意する画像自体は今まで通りjpegとpng、あるいはgifでもOKということですね。

EWWW Image Optimizer

ではインストールしましょう。

ワードプレスを触ってる人なら言うまでもないと思いますが、ワードプレスの「新規プラグイン」からEWWW Image Optimizerを検索してインストールします。

すげー名前もアイコンも似てるEWWW Image Optimizer Cloudみたいな別プラグインもあるので、間違えないように。

EWWW Image Optimizer

インストールしたら、ワードプレス管理画面のメニュー(左側)から「設定」→「EWWW Image Optimizer」を選択しましょう。

「基本」タブのままスクロールしていくと「WebP変換」という項目があるので、クリックしてチェックを入れます。

ただし、その時点では以下のようになっているはず。

EWWW Image Optimizer .htaccessコード

ここまでは簡単なんですが・・・当然これだけでは不完全です。

画像の赤い「PNG」と書かれたマークが出るのは、サイト画像のWebP変換が未完了という意味です。

 

んで、↑の画像でもある通り、「このコードを追加しろ」という感じで出てくるはずです。

注意点として、この画像一番下の「リライトツール挿入」は使いません。いったん無視してください。

 

次に、サイトのhtaccess.をいじります。

 

2,htaccessファイル冒頭に以下のコードを追加。

FTPソフト、またはサーバーの管理画面から「.htaccess」ファイルを開きます。

ここではエックスサーバーの管理画面からやってみます。簡単なので。

まんま.htaccess編集という項目があるのでクリック。

.htaccess 編集 エックスサーバー

WebP化したいサイトを選びます。

.htaccess編集

タブの「.htaccess編集」と設定対象ドメインを選択すると、以下のような気持ち悪い文字列が出てきます。これが.htaccessファイルの中身です。

人によってはこの文字列を見ただけでウワーっとなると思いますが、本文はいじりません。

この文字列の一番上(画像の「ここ」で示した部分です。「ここ」はマネして入れないでねw)に、以下の構文をコピペして「確認画面へ進む」→「実行する」で更新するだけ。

 

追記するコードは以下のようになります。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

!! 必ず「.htaccess」ファイルの冒頭に上記構文を挿入するようにしてください!!

さっきのプラグインの「リライトツールを挿入」だと、なぜかファイルの一番下に追記されてしまいますが、それだと正常に作動しません。

めんどくさいですねw

念のため、こういう感じになります。

.htaccessファイル webP対応 編集後

これで.htaccessファイルの編集はOKです。

続いてサイトの管理画面(ワードプレス)へ移動しましょう。

3,EWWW Image Optimizerで画像を一括最適化

↑の時点で、新規追加の画像は勝手にWebP変換される設定になっています。

ここからは「すでにある画像」を、今後WebP表示されるように設定していきますね。

 

EWWW Image Optimizerが正常にインストールできていれば、メディアの中に「一括最適化」という項目が出てきているはずです。

それをクリック。

念のため、右の「再最適化を強制」をチェックして最適化を始めましょう。

「スキャンする」で全自動で変換されます。

画像の量によっては結構時間かかるので気長に待ちましょう。

 

終わったら、さっきの「設定」→「EWWW Image Optimizer」を選択してさっきの「WebP変換」チェックをした場所へ戻りましょう。

上手くいっていれば、さっきの赤い「png」ではなく緑の「WebP」と書かれた画像に変わってるはずです。

EWWW WebP化設定

別のチェック方法として・・・最適化の完了後、管理画面の【メディア > ライブラリ】を一覧表示してみます。

各画像リストの「画像最適化」の項目に「WebP:」のサイズが表示されていれば、WebP変換済みと分かります。

なお、「<picture> WebP リライト」をチェックしておくと、自分で自サイトの画像を右クリック保存すると「.webp」拡張子がちゃんと追加されていることが確認できます。

ただ、サイト速度はあんま変わらなかったので「一応チェックしておく」くらいのノリでいいと思います。

注意点

サイトによっては、EWWWプラグイン内の「遅延読み込み」にチェックしてると、画像が全然表示されなくなる場合があります。

チェック外せば戻ります。

「遅延読み込み」を外すと重くなりそうなもんですが、僕の場合、別のサイトで試すとモバイル49→80台に大幅改善しました。

WebP変換だけでも結構高速化の効果があるようです。

サイトがどれだけ高速化できたか見るには

https://developers.google.com/speed/pagespeed/insights/

↑このツールを使ってください。

PCは90台、モバイルも平均以上は欲しいところです。

 

おわりに

以上で、サイトの速度がある程度改善できるはずです。

こういうのは「記事の内容優先!」で馬鹿にする人いると思いますが、「コンテンツ以外」の不安要素を根こそぎ潰しておいてこそ、コンテンツに集中できるってものです。

だから、僕は気付いた時にサイトの最適化作業をやってるし、その時の経験がそのままブログにできます。

 

僕はそうやってアクセスや読者の興味を集め、ビジネスにつなげて・・・というようなことをやっています。

たとえネットに疎い初心者でも、その試行錯誤をコンテンツにし、お金を稼ぐことが可能になりました。

 

興味がある方は、ほかの記事もぜひ読んでみてくださいね(あからさまな宣伝)

 

では、またね。

スポンサーリンク

なぜ僕は「10日で370万円」を稼げるビジネスを捨てたのか?「長く無理なく不安なく」稼ぎたい人のためのネットビジネスを無料公開!

ネットビジネスって、正直胡散臭いって思ってません?

僕は、そういう疑いを持ってる人の方がむしろ安全に成功しやすいと思ってます。

 

でも、ただ成功するだけでなく、

「その先の先まで長く稼ぎ続けること」

これが、めちゃくちゃ難しいことなんです。

 

だから、僕は伝えたい。

 

ネットビジネスの「自由」に憧れて稼ぎたい貴方に、忠告です。

僕も含め、たくさんの人がハマった「稼いでるのに地獄」……。

 

何のことか分からないなら、分からない方が良い。もしそれを経験してないなら、僕は一生経験すべきでないと忠告します。

 

ネット業界のありとあらゆる部分を見てきた僕が、最終的にたどりついた

「罪悪感も不安もストレスもなく稼げる、正しいネットビジネスノウハウ」

を徹底公開します。

 

~~内容~~

★ド初心者として、死に物狂いで情報発信ビジネスに取り組んだ1年間。370万を稼いだ結果、待っていたのは「どんどん不安と罪悪感が増す」地獄だった・・・

★「マインドを変えれば不安はなくなる」そう信じて300万以上コミュニティやスクールにぶちこんだ結果、僕が見てきた業界の真実とは・・・

★すべてがバカバカしくなり、情報発信者としての筆を折りかけた時、成果を出した僕のコンサル生が見出させてくれた「無理なく、不安なく稼ぐノウハウ」の答え

 

★僕のあらゆる立場からのネットビジネス経験、そのすべてを出し惜しみせずに「1日目」でがっつり解説する「初回・豪華三本立て」講座+特典多数

※1日目のみ「6時間で3通」のメールが届きますので、好きなペースで読んでね。

 

ネット業界について、世の中の発信者は極論だらけ。

●「情報発信は詐欺ばかりだからやるべきでない!」

●「どんな黒いことをしてでも稼ぐのが勝者!」

 

ネットを眺めていると、ネットビジネスを勧める者も叩く者も、上のような極論ばかりです。

公平な立場で僕ら後発者に「ネットビジネスの実像」を正しく教えてくれる人がいません。

 

でも、僕らに必要な情報とは、

「光も闇も知ったうえで、それでもネットビジネスの世界を歩んでいける知識」

のはずです。

 

このブログの管理人、「康太」は、このネット業界にあってかなり数奇な経歴をたどっています。

  • 右も左も分からないド初心者(情弱)としての立場
  • 最悪感まみれな「情弱狩り」を強いられた立場
  • ネットビジネス成功者の立場と、挫折経験者の立場
  • スクールやコミュニティをさまよって300万溶かした立場
  • 自分の行動力や(黒さに耐える)精神力に限界を感じた立場

 

僕がこれまでしてきた経験とは、まさに希望も不安も入り混じったネットビジネス業界の「縮図」です。

 

恐らく、初心者に寄り添いつつも、稼ぐこともやっていかなければならない。そういう視点で「ネットビジネス業界」を本音で語ることができる人は、僕以外いないでしょう。

 

そんな僕が最終的に辿り着いた「本当に不安やメンタルの犠牲なく稼げるネットビジネス」を、あなたにシェアしたいと思います。

 

無料メルマガのより詳しい紹介は こちら

とりあえず気になったのであれば、登録して最初の3通だけでも読んでみてください。

いつでも各メールに設置されたリンクから解除は可能ですのでご安心くださいw

 

以下の簡易フォームからの登録も可能ですよ。

↓ ↓ ↓ ↓

10日で「370万」稼いだ仕組みを”捨てた”俺が語る、本音で語るネオニート副業論