初心者きつね最近サイトが重いんだけど、どう改善すればいいんだろう。。
初心者たぬき画像の容量を減らしたり、圧縮するのが良いって聞いたけど、具体的にどうするんだろう？
このように感じているなら、サイトの高速化を支援してくれるプラグインである「EWWW Image Optimizer」をぜひ検討してみてください。
あなたがWordPressやコーディングの初心者だったとしても、簡単な操作でサイトに適切な対策をしてくれます。
ちなみに、SWELLなどのテーマを利用しているサイトでも利用できます。
わい僕は今までConverter for Mediaを利用していましたが、EWWW Image Optimizerの方ができることが多いと感じたので最近はこっちを利用しています。
サイトを高速化することはSEO改善につながる
サイトを高速化することは、SEOの改善に繋がり
今回紹介するEWWW Image Optimizerも、サイトをより高速化してくれるためのプラグインです。
サイト高速化に効果がある施策としては
- 画像の幅や高さを調整する
- 画像の容量そのものを減らす
- 画像を軽量化する（Webp化など）
- FV以外に遅延処理を行う
今回紹介するEWWW Image Optimizerでは、③、④の施策を行うことができます。
画像の幅や高さを調整する
画像には、幅や高さが決まっています。
<img src="./img/xxx.jpg" width="200" height="300" alt="猫の画像">img {
width: 200px;
height: 300px;
}などの指定があった際には、横幅が200px、高さが300pxの画像を表しています。
これらの値を小さくすることで、サイトを軽量化することができます。
しかし、当然ですが画像のサイズや比率は変わってしまいます。
画像の容量そのものを減らす
画像の容量を減らすことでも、サイトの軽量化や高速化につながります。
例えば、人間が見ても画像が粗くならずに、1GBの容量の画像を500MBにするなどですね。
特定の画像の容量が減るので、その分だけサイトが軽くなるのはイメージしやすいと思います。
注意点としては、やり方によっては画像がガビガビしてしまう（粗くなってしまう）ことです。
詳細については、今回の記事の1番最後で説明しています。（最後の見出しにアンカーリンクを貼る）
画像も粗くならずに、容量を減らすことができますよ！
画像を軽量化する（Webp化など）
元々jpegやpngの拡張子である画像のWebp化を行うことも、有効な施策です。
この記事の冒頭で
初心者たぬき画像の容量を減らしたり、圧縮するのが良いって聞いたけど、具体的にどうするんだろう？
と悩んでいるたぬきの画像も元々はpng形式でしたが、Webp形式に変換することによって67%も容量を削減することができました。
このように、WordPressサイトで使用している画像の多くをWebp化することでも、結果的にサイトの高速化につながります。
FV以外に遅延処理を行う
最後は、「FV以外に遅延処理を行う」ことです。
遅延処理とは、特定の画像などの読み込みをわざと遅らせることです。
サイトを開いた瞬間に、画面外にある画像も読み込んでしまうと、どうしてもサイトが重くなってしまいます。
なので、画面外にある画像に遅延処理を行い、ユーザーがスクロールをし画像が表示される直前で読み込みを開始することによってサイト全体を軽くしているわけです。
ただし、FV（ファーストビュー：ユーザーがサイトにたどり着いて1番最初に目にする部分）に含まれる画像などに対しても遅延処理を行なってしまうと、離脱率が高くなってしまう可能性があるので
基本的に、FV以外で行います。
EWWW Image Optimizerを利用した遅延処理の設定に関しては、この後紹介します。
「EWWW Image Optimizer」の有効化、初期設定
まずはEWWW Image Optimizerをインストール・有効化して初期設定まで終わらせてしまいましょう。
ダッシュボードの「プラグイン」から「新規プラグインを追加」を選択し、検索窓にて「EWWW Image Optimizer」と検索しましょう。
下のようなプラグインが表示されたら、インストールを押した後に有効化します。
有効化ができたら、「インストール済みプラグイン」にEWWW Image Optimizerが表示されますので「設定」を選択します。
画面が切り替わったら、「サイト高速化」と「今は無料モードのままにする」にの2つにチェックを入れ、「次」をクリックします。
画面が切り替わったら、幅の上限と高さの上限を0に変更します。それ以外はデフォルト値で「設定を保存」をクリック。
画面が切り替わったら、「完了」を選択します。
これで初期設定は完了ですが、このまま利用してしまうと画像の拡張子を勝手に変換されて画質が悪くなってしまう可能性があるので
もう1つ設定をしていきます。
もう1つの設定とは、「変換リンクの非表示設定」です。
メニューの「必須」タブから「ルディクロスモード」を選択します。
その後、「変換」タブにある「変換リンクを非表示」を選択します。その後、「変更を保存」をクリックして変更を保存します。
「EWWW Image Optimizer」の基本的な使い方
「EWWW Image Optimizer」の基本的な使い方についてですが、ぶっちゃけこの記事の通りに初期設定を行った人はWebp化や遅延読み込みの設定などは完了しているので、基本的にここから追加で何かをするということはありません。
ここからは、初期設定でWebp化や遅延読み込みの設定をし忘れた人のためにその2つの方法を解説していきたいと思います。
さらに、基本的には無料機能だけでことが足りると思いますが、有料版でできることも紹介していきます。
画像をWebp化する方法
EWWW Image Optimizerでjpegやpng画像をWebpに変換するには、必須タブの中にある「Webp変換」という項にチェックを入れるだけです。
必須タブの1番下に項目があります。
ここにチェックを入れて「変更を保存」を選択すれば、対応ブラウザでWebp化されます。
遅延読み込み設定
遅延読み込みに関しても、必須タブの真ん中ら辺にあります。
先ほどWebp化を行った人は、そのすぐ上に遅延読み込みの項目があります。
ファーストビューはサイトに訪問した人がまず見る場所で、遅延したら離脱してしまう可能性もあるので
0の数値のままにしておいてください。
初期設定でWebp化、遅延読み込みにチェックを入れ忘れた人は、以上の方法でそれぞれを設定してください。
また、Webp化、遅延読み込みのどちらに関してもEWWW Image Optimizerの設定を完了した後にアップロードした画像に関しては自動的に最適化されます。
画像の容量を減らすこともサイト軽量化・高速化には有効
この記事の最初の方でも少し触れましたが、サイトの軽量化・高速化を行う際に画像の容量を減らすことも有効な施策です。
ただし、画像の容量そのものを減らす機能はEWWW Image Optimizerには付いていないです。
なので、別のサービスやプラグインで画像のリサイズを行うことになりますが、個人的におすすめなのは
Squooshというサイトです。
詳しい使い方に関しては別の記事で解説しているので、こちらからご覧ください。
最後に
ということで、今回はサイトの高速化を支援してくれるプラグイン「EWWW Image Optimizer」の使い方について解説していました。
このブログでは、過去にもSEO関連の記事を書いていますので
ぜひ参考にしてみてください！
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
コメント