「EWWW Image Optimizer (日本語版)」でサイトの表示速度を改善する

最近は、法人のホームページでも安価で制作でき自社で更新ができるWordPressが利用されていることが多いのですが、自社のホームページがどのくらいのスピードで表示されるか確認されたことはありますでしょうか。

サイトの閲覧は、半数以上がスマートフォン経由ですのでサイトの表示速をを1秒でも早くすることをWebの施策として考慮することはリードを獲得していくうえでは重要なことです。

サイトを読むか読まないか判断するまでわずか2.6秒と言われています。ロード時間が遅ければ、読まれる可能性が低くなります。また、表示が遅いだけで検索エンジンでのランクが下がっていきます。

特にブログの記事でスマホで撮影した大きい画像を多用している場合は、表示速度に大きく影響がでるので導入してみてください。

当サイトでもWordPressのプラグインである「EWWW Image Optimizer」を導入することで画像を圧縮し、表示速度を改善するのか検証しています。

1.EWWW Image Optimizer とは

EWWW Image Optimizerとは、画像を劣化させることなく導入するだけで自動で画像サイズを圧縮してくれるプラグインのことです。

EWWW Image Optimizerで圧縮出来る画像ファイル

  • 新規にアップロードする画像ファイル
  • 過去にアップロードした画像ファイル
  • WordPressのテーマに含まれている画像ファイル

2.EWWW Image Optimizerの導入

WordPressの管理画面でプラグインの新規追加をクリックします。キーワードと表示されている検索窓に「EWWW Image Optimizer」と入力します。

「EWWW Image Optimizer」と「EWWW Image Optimizer cloud」と2つそれらしいのが表示されますので、「EWWW Image Optimizer」のほうの「今すぐインストール」をクリックし有効化」します。

設定方法

いくつかタブが表示されていますが、無償で使用可能な「ベーシック」と「変換」だけ設定を行います。

ベーシック

デフォルトで「メタデータを削除」という項目にチェックが入っていますので確認します。

画像のメタデータとは、撮影場所やカメラ情報などを含む情報が記載されているデータのことで、特にブログ記事などでは不要な情報なので削除しても一切問題はありません。

その他の設定は、デフォルトのままで大丈夫です。

変換

一番上に表示されている「コンバージョンリンクを非表示」にチェックを入れて保存します。

これは、最適化の際に勝手に拡張子「xxx.jpg」が「xxx.png」のように変更されるのを無効にするものです。拡張子が変更されることにより画質が低下すると言われていますが、写真のような画像の場合は、肉眼ではわかりません。

問題は、「xxx.png」が「xxx.jpg」になった場合です。ご存知の通り、pngファイルは透過画像なので背景が透けて見えることできれいなデザインに見えるのですが、勝手に変換されると透過しなくなるのでデザインがおかしなことになるからです。

EWWW Image Optimizerの使い方

すでにアップロード済み画像から一括で最適化してしまいましょう。

この機能では、アップロード済の画像はもちろん、WordPressテーマの画像も最適化されてしまいますので、必ず「コンバージョンリンクを非表示」の設定を行ってから最適化してください。

ダッシュボードメニューから、「メディア」を選択し「 一括最適化」をクリックします。

続いて「最適化されていない画像をスキャンする」をクリックし、最適化が終われば完了です。

もっと画像を圧縮するなら画像加工ツールを使う

本格的に画像の豊富なホームページを作るなら専用の画像加工ツールを使用したほうが良いでしょう。

例えば、この記事のトップ画像ですが元のファイルサイズは、3.5MBもあります。Photoshopで画像をWeb用に最適化したことで41KBになっています。

鮮明な商品写真を載せたいばかりに大きなファイルサイズにするのではなく、いかにスマホファーストで素早く表示させるかが企業のホームページづくりでは課題になってくるでしょう。