【WP】ウェブサイトのパフォーマンスを高めるためのプラグイン

ewww-image-optimizer-index

Googleよりウェブサイトの制作・管理を行うウェブマスター向けのガイドラインが告知されております。このガイドラインの目的は「ガイドラインに沿ってサイトを作成すると、Google がサイトを認識し、インデックスに登録し、ランク付けをするプロセスをスムーズにおこなう手助けとなります。」というようにウェブサイトの評価の基準とも考えられます。

そんなGoogleのウェブマスター向けガイドラインのひとつに「ウェブサイトの高速化」があります。高速化は「表示が速いサイトは、ユーザーの満足度を高め、ウェブ全体の質を向上させる・・・」というユーザーの利用満足度を高める観点からの考え方です。

表示される時間が長くなるとその分、離脱してしまう可能性も高くなり、顧客との接点を失ってしまうためウェブサイトの高速化は、制作・管理にとって取り組むべき課題だと思います。今後は、回線速度が遅い状態でのモバイル端末からのアクセスが多くなることも想定されるので高速化の対応はますます重要になってきそうです。

今回は、ウェブサイトの高速化。得にWordPressでウェブサイトを構築したときに、パフォーマンスを高めてくれるプラグインをご紹介します。

EWWW Image Optimizer

「EWWW Image Optimizer」はWordPressの管理画面よりアップロードされる画像を最適化処理してくれるプラグインです。

画像の最適化というのはどのようなことなのか。最適化はロスレス圧縮という技術で、表示される画質などの情報を保ったままデータ量を元の1/5~1/2に減らすことをいいます。1MBある写真が200KBにまで小さくできるということで、画像を多く使用するウェブサイトの高速化に適した技術です。

「EWWW Image Optimizer」の使い方はとても簡単です。まずは「EWWW Image Optimizer」プラグインをインストールして有効化をします。

基本設定

「設定」メニューに「EWWW Image Optimizer」が追加されていますので、「EWWW Image Optimizer」の設定画面を開きます。

ewww-image-optimizer-setting

「Basic Settings」を開き「Remove metadata」にチェックをします。「Remove metadata」のチェックは、画像のメタデータやEXIF情報(カメラで撮影したときの設定条件といった情報)、コメントを削除する設定になります。

最低限、以上の設定をして標準設定のままで十分だと思います。他にも圧縮をするエンジンを変えたり、JPGをPNGに変えるなどの機能を使うことができます。

設定を変更した後は「Save Changes」ボタンを押して変更した内容を反映します。

画像を最適化する方法

※画像を最適化する前に念のためサーバ上の画像をローカル環境へ保存しておくことをお勧めします。

プラグインが有効になっている間は、WordPressの管理画面内からアップロードされる画像は最適化の対象になります。

また、プラグインが稼動してない時にアップロードされた画像や基本のメディアフォルダ以外の画像ファイルを最適化することもできます。

「メディア」メニューに新しく「Bulk Optimize」が追加されていますので、「Bulk Optimize」の画面を開きます。

基本のメディアフォルダ内にある画像を最適化するときは「Start optimize」ボタンを押します。

基本のメディアフォルダ以外にある画像を最適化するときは「Scan and optimize」ボタンを押します。

ewww-image-optimizer-bulk-01

最適化の進捗はリアルタイムで確認することができます。10~40%容量が

ewww-image-optimizer-bulk-02

上記の画面表記は「EWWW Image Optimizer Version 2.2.2」のものになります。バージョンの違いによって設定内容などに違いがあるかもしれませんのでご了承ください。

関連記事

HTML5 + CSS3 レスポンシブサイト テンプレート『Minimaxing』

スマートフォンが普及して、WEBサイトをスマートフォンで閲覧することも多くなっています。従来のWEBサイトをスマートフォンに対応したいと検討される方もいらっしゃると思います。 今回、ご紹介するのはパソコン、タブレット、スマートフォンに対応したレスポンシブ型のWEBサイト...続きを読む

2015.02.06CSSHTMLコーディング

【無料】商用利用OKシームレステクスチャ「岩石(花崗岩風)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。花崗岩のような灰色の岩の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.07シームレステクスチャ

【フォト】蓮華寺池公園フォトギャラリー≪冬≫

藤枝市のほぼ中央に位置し、「花・水・鳥・笑顔」がテーマの公園「蓮華寺池公園」。池を囲む公園は、桜や藤の花、蓮の花など季節を通して自然を楽しむことができる憩いの場所です。今回、紹介する冬の蓮華寺池公園の山頂周辺の写真です。自然のなかを歩いたり、眺めの良い見晴台があったり、広場やアス...続きを読む

2018.02.07フォトギャラリー藤枝

ChatGPTで生成するHTMLはなぜ実務で扱いづらいのか ─ HTML / CSS / Bootstrap視点で考える

ChatGPTで生成したHTMLは正しいのか、それとも“たまたま動いているだけ”なのか? ChatGPTで生成したHTML、表示は崩れていない。エラーも出ていない。 それなのに、いまいち腑に落ちない。コードを読むのに時間がかかる。余計なコードが多くて、触るのが...続きを読む

2026.01.05BootstrapCSSHTMLコーディング

【HTML】Sass・SCSSを使ってWEBサイトの制作を効率化する

現在の多くのWEBサイトではHTMLとCSSによって構築されています。WEBサイトの制作方法を勉強するとHTMLとCSSについてを学ぶと、ここ最近は、SassやSCSSといったキーワードが出てきます。SassやSCSSを活用しなくても、もちろんWEBサイトを制作することが...続きを読む

2019.05.13HTMLコーディング