こんばんは、春日かなたです。

記事を読むときに、最初に目を惹くのは画像です。

画像があると、記事内容に説得力が生まれます。

画像は、ブログ記事に欠かせない要素のひとつですが、画像ファイルがブログの表示速度を遅くしている原因になっていることがあります。

そこで、私は画像ファイルを縮小できるプラグインを導入することにしました。

 

プラグイン導入前のブログ表示速度

 

 

PageSpeed Score(表示速度)：Dランク（69%）

YSlow Score(パフォーマンス計測値)：Dランク（60%）

 
現在では、ページロード時間に15秒かかっているという分析結果が出ています。これを平均時間5.9秒まで短縮するために、プラグインを導入します。

 

1.EWWW Image Optimizer

 
このプラグインを使用すると3つのメリットがあります。
 

• 画像をアップロードすると、自動でファイルサイズを圧縮する
• 過去にアップロードした画像を検出し、ファイルサイズの圧縮が一括でできる
• 画像圧縮の処理が早い

 

プラグインをインストールすると、管理画面の左メニューの「設定」に「EWWW Image Optimizer」の項目が追加されます。
 
設定項目は４つあります。
 

• Cloud Settings
• Basic Settings
• Advanced Settings
• Conversion Settings

 
※「Cloud Setting」は有料オプションです。設定する必要はありません。

 

1-1 Basic Settings(一般設定)

 

 

Basic Settingでは、“Remove metadata”にチェックを入れます。

これは画像ファイルに不必要なメモなどがくっついていると、自動的に削除してくれます。その結果、画像サイズをより圧縮できるようになります。

残りの項目は、サーバー管理者のための設定なので、特に気にする必要はありません。

 

1-2 Advanced Settings(圧縮設定)

 

 

Advanced Settingsでは、” disable pngout （pngoutを無効化する）”にチェックを入れます。

pngoutは画像圧縮ソフトの使用についての設定であり、初心者には、少々面倒な手順が必要になります。この機能は利用しなくても問題ないのでチェックを入れます。

その他の設定について、

 

• Scheduled optimization
• Folders to optimize
• Skip Images
• Exclude full-size images from lossy optimization
• Use System Paths

 
以上は、サーバー管理者のための上級者向けの設定なので、特に気にする必要はありません。

 

1-3 Conversion Settings(圧縮設定)

 

 

Conversion Settingでは、” Hide Conversion Links “にチェックを入れます。

これは、png を jpg に変換したり、 jpg を png に変換する機能を削除するためです。有効にすることで、画像が勝手に変換されたりすることを防ぎます。

これ以外の項目は、” Hide Conversion Links ” にチェックを入れていない場合の設定なので、気にする必要はありません。

 

以上で、「EWWW Image Optimizer」の設定は完了です。

 

 

２．EWWW Image Optimizerの使い方

 

２−１．新規画像の圧縮

 

 

それでは、左メニューの「メディア」から、「ライブラリ」に移動します。

画像一覧の中に、『Image Optimizer』という項目が追加されています。この項目には、画像サイズの下に「Optimize now!」があるので、クリックしましょう。

 

 

これで圧縮は完了しました。

確認すると、『Image Optimizer』の文章が変化しています。これは、圧縮後にファイルサイズが11.7%減少したことを示しています。『Re-optimize』で再圧縮ができますが、圧縮した画像をさらに圧縮しても変わらないことが多いようです。

 

２−２．画像の一括圧縮

 

 

左メニューの「メディア」に新たに追加された『Bulk Optimize』で、すでにアップロードされている画像を一括圧縮できます。

これは、圧縮していない画像を自動で検出してくれます。

 

 

画像が多いほど圧縮に時間がかかります……

「Finished」とメッセージが表示されれば、処理は完了です。

 

プラグイン導入後のブログ表示速度

 

 

PageSpeed Score(表示速度)：Cランク（72%）

YSlow Score(パフォーマンス計測値)：Dランク（60%）

プラグインを導入し、画像サイズの圧縮処理をした結果、表示速度が4%上昇し、ページロード時間が5.5秒短縮しました。

今までは、スクリーンキャプチャで画像を抜き取ったままアップロードしていましたが、画像サイズや解像度を訂正した後でアップロードした方が表示速度を維持できることがわかりました。

ブログはコツコツとめんどくさがらずに、確認してみることが大切です。

 

 

Follow me!