サイトやブログの表示速度はSEOにも影響があると言われていますが、単純に自分が読みたいページの表示が遅いとイラッとしてしまいませんか？
下手するとコンテンツが読まれる前に離脱してしまう可能性もあります。そういった事態を避けるためにはページの表示速度の改善は必須項目と言えます。
今回は少しでもブラウザの読み込み速度を上げるために画像容量を圧縮できるwordpressのプラグインEWWW Image Optimizerのインストールと設定について解説していきます。
目次
EWWW Image Optimizerのインストール
EWWW Image Optimizerをインストールします。
管理画面サイドバーにあるプラグインにカーソルを合わせると新規プラグインを追加が表示されるのでクリックします。
画面右上にあるプラグインの検索にEWWW Image Optimizerと入力すると、すぐに検索結果が表示されますので今すぐインストールをクリックします。
インストールが完了したら有効化ボタンが表示されるのでクリックします。これでインストールと有効化が完了です。
EWWW Image Optimizerインストール後の設定
有効化のボタンをクリックするとプラグインのページへ移動しますので、そのままEWWW Image Optimizerの設定をクリックします。
サイドバーの設定→EWWW Image Optimizerをクリックしても設定ページへ移動できます。
インストールしたときのみの設定
設定ページへ移動すると以下の画面が表示されますのでサイトの高速化今は無料モードのままにするにチェックを入れて次をクリックします。
次に幅の上限高さの上限を「0」に設定し、設定を保存をクリックします。
他の設定に関してはそのままで大丈夫ですので完了をクリックしてください。ただ、わたしの場合はどういう訳かエラーが表示されてしまいました…
エラーの内容としては$networkという変数が定義されていないというものですが、このエラー自体がどういった不具合を起こすのかは使ってみないと分からないので、そのまま完了をクリックしました。
もし、何らかの不具合があった場合は記事にしてみようかと思っています。
変換リンクを非表示に設定
完了をクリックすると以下の画面に移動しますので、ルディクロスモードをクリックします。
以下の画像のページへ移動しますので変換リンクを非表示へチェックを入れ、変更を保存をクリックします。
WebPの配信方法設定
最後にWebPの配信方法の設定を行ないます。
画像内のリライトルールを挿入するをクリックすれば、画像内のソースコードを.htaccessに書き込んでくれます。
その後、「ルールが正常に検証されました」と表示されればOKなのですが…
わたしの場合はこのような表示が出ました。
調べてみると、サーバー側のセキュリティの関係で設定ができているかどうかの確認がプラグイン側からできないことが原因のようです。
解決方法等については調べていますが、原因が分かるまではそのまま使用してみることにします。
【追記】
色々と調べてみるとサーバーで使用されているWebサーバーソフトウェアが原因っぽいです。
使用されているWebサーバーソフトウェアが「Nginx」のサーバーから「Apache」を使用しているサーバーに移設し、再度設定を行なったところ、無事に成功しました。
「Nginx」ではまた別の設定方法が必要らしいのですが、ここでは割愛させていただきます。
アップロード済みの画像を最適化
設定が完了したら、すでにアップロードしている画像を一括で最適化していきます。
管理画面サイドバーのメディアにカーソルを合わせて一括最適化をクリックします。
ページが移動したら最適化されていない画像をスキャンするをクリックします。
スキャンが完了すると〇点の画像を最適化といったボタンが表示されるのでクリックします。
これでアップロード済みの画像最適化が完了です。
Webサーバーソフトウェアの関係でWebPの設定に手間取ってしまいましたが、ほとんどのレンタルサーバーでは「Apache」が採用されているようなので、同じようなことは起こらないかなとは思います。
とにかく、画像サイズを圧縮することでサイトの表示速度の向上も期待できますので、ぜひEWWW Image Optimizerを導入してみてください。