皆さんこんにちは、今日はブログにかかせない画像ファイルの効果的な圧縮を可能にするプラグインを紹介します。
百聞は一見にしかずということで、写真を活用して視覚的に、効果的に見せている方も多いと思います。
ですが、何も考えずに画像ばかり貼り付けてしまうと、ページが重くなってしまい、読者に不快な思いをさせて、SEO的にもパフォーマンスが低下してしまうリスクがあります。
そんな課題を解消してくれるのが、Wordpressのプラグインの『EWWW Image Optimizer』です。
僕もこのブログで導入して、アイキャッチの低容量化、サイズ統一に成功し、結果的にブログのデザインがよくなりました。
それでは、方法と設定方法をそれぞれ見ていきましょう。
『EWWW Image Optimizer』は超人気プラグイン
EWWW Image Optimizerは、画像を圧縮して表示速度を高速化するプラグインです。
ブログにおいて、データサイズの大部分を占めるのが画像というのが一般的なため、画像の圧縮は高速化に大きな効果があります。
初回はステップ設定画面が表示されますが、[I know what I’m doing, leave me alone!](私は何をするかわかっているので一人でやります!)をクリックしてスキップしてください。
推奨設定
メタデータの削除に✔
メタデータとは、画像に付随する「日時や位置などの情報」です。メタデータは、画像の容量が大きくなるだけではなく、個人情報を拡散してしまうリスクもあるので、削除しておきましょう。
基本タブに表示された『メタデータを削除』にチェックマークを入れます。
遅延読み込みは✔を外しておくのが無難
次に遅延読み込みですが、他の機能とバッティングしてサイト読み込みが遅くなるリスクがあるので、チェックを外しておくことを推奨します。
Cocoonなどの人気なテーマでは既に遅延読み込みの対策を講じており、このプラグインで二重で設定すると、バッティングしてしまい、不具合が起こるためです。
画像のリサイズ設定は1200か1600が推奨
画像のリサイズは幅だけ設定すれば、それと同等のアスペクト比を保ったまま変更してくれます。
肝心の数字ですが、一般的には1200のピクセル数があれば画質的に問題なく、速度的にも重くならないため、Googleはこちらを推奨しています。
一方、画質的に少し荒くなるのが嫌なので、僕は1600に設定しております。1600でもとても遅くなることはないので、Googleからの評価的にクリティカルになることは無いので、お好みで設定ください。
WebPへの変換を有効にする
WebPとは、Googleが開発している画像フォーマットで、従来の画像フォーマットよりもファイルサイズを削減できると言われています。
なんと、JPEG、PNG形式の画像と比較して約30%削減可能だそうです。
このEWWW Image Optimizerでは、画像を自動的にWebPに変換した上で、表示するブラウザの対応状況に合わせて画像形式を出し分けできるので、サイトの高速化が可能となるのです。
『WebP変換』に✔を入れる
コードを.htaccessの一番上に書き込み保存
表示されているコードをサーバーにある.htaccessの一番上に書き込みます。多くのサーバーでは、管理画面から編集が可能となります。Wordpressの編集画面ではなく、契約しているサーバー(ロリポップ、Xサーバーなど)になるためご注意ください。
まとめ
いかがでしたでしょうか?
この設定を行うと、アップロードすると自動で最適な形に変換されるので、大変楽です。
サイトのスピードやパフォーマンスチェックを下記のサイトで実施すると違いを体感できるかと思います。
コメント