【プラグイン】画像圧縮・Compress JPEG & PNG imagesで表示速度アップ

    icon-clock-o読了時間:約6分11秒

Compress JPEG & PNG imagesは、TinyPNG というサービスサイトが提供している
画像サイズを圧縮するWordPressプラグインです。
月に500枚まで(月初にリセット)という制限はありますが
(それ以上の画像を圧縮したい場合は有料登録が必要)
設定も使用方法も簡単なので、どうもWordPressサイトが重い、
大きなサイズのままアップロードした画像もかなりあるし
その辺りのデータサイズのせいかなあ…と悩んでいる方は試しに使ってみてください。

 目次 

Compress JPEG & PNG imagesをインストール
Compress JPEG & PNG images 設定
今までアップロードした画像を一括で圧縮
圧縮後の結果を確認
今までアップロードした画像を個別に圧縮
  ∟選択した画像を圧縮
  ∟ページごとの圧縮
ページの表示速度を確認
  ∟PageSpeed Insights
  ∟GTMatrix
更にページ速度を上げるには


Compress JPEG & PNG imagesをインストール

【 プラグイン 】⇒【 新規追加 】
⇒『 Compress JPEG & PNG images 』 を検索してインストール。
Compress JPEG & PNG imagesインストール
【 有効化 】をクリックするとプラグインが動作し、プラグインページが開きます。

プラグインの提供をしているTinyPNGとWordPressを連携するために、
表示されるメッセージをクリック
⇒名前(ペンネームや社名でOK)とメールアドレスを入力して
【 Register Account 】をクリック
⇒登録したメールアドレス宛に確認メールが来るのでリンクをクリック。
Compress JPEG & PNG images登録
自動でTinyPNGのサイトが開くので、念の為
お気に入り登録(ブックマーク)してから閉じてください。


Compress JPEG & PNG images 設定

サイドメニュー【 設定 】⇒【 メディア 】から各種設定ができます。
Compress JPEG & PNG images 設定
基本的にデフォルトの状態のままで構わないかと思いますが、
サイズ違いの画像の中で圧縮不要なものはチェックを外すと月の枚数が多少稼げますね。
120×120とか小さいサイズの画像だと、初めからそんなにデータ容量が
大きくないから外しておいても良いのかも。
Compress JPEG & PNG images 設定詳細

これで今後WordPressにアップロードした画像は自動で圧縮されて程よいサイズになり、
サイト閲覧時にページを展開するための時間もちょっと短くなるはず。


今までアップロードした画像を一括で圧縮

プラグインを導入前に既にサイトに上げていた画像もまとめて圧縮できます。

サイドメニュー【 メディア 】⇒【 Bulk Optimization 】
⇒【 Start Bulk Optimization 】をクリックすると一括圧縮が始まります。
画像の一括圧縮

過去画像が多い場合は一ヶ月の枚数制限に引っかかって途中で止まります。
とりあえず月の終わりにやれるところまでやってみるか、
個別に圧縮する方法で大きいサイズの画像だけ圧縮してみましょう。


圧縮後の結果を確認

圧縮完了後の【 Bulk Optimization 】のページで圧縮できた容量などを確認できます。

500枚の制限にかかるとメッセージが表示され、
同時にメールでもその旨と『有料版なら制限が無いよ』という宣伝が届きます。
画像圧縮後の結果

また、TinyPNGのサイトの自分のアカウントページでも500件の制限数に達したことが表示されます。
月初にリセットがかかるまでまた待ちましょう。
TinyPNGのアカウントページ


今までアップロードした画像を個別に圧縮

一ヶ月の制限数を超えてしまう場合は、目立って大きい画像だけ圧縮、
あるいは数十件だけまとめて圧縮することもできます。

選択した画像を圧縮

一つずつ圧縮、あるいはいくつか選択した画像を圧縮したい場合は
①【 メディア 】⇒【 ライブラリ 】
②リスト表示に切り替え
③【 Compress 】で個別圧縮が可能です。
画像の個別圧縮

ページごとの圧縮

そのページに表示されている画像をまとめて圧縮しても良い場合は
同じくライブラリでリスト表示にした状態で、
①一括チェックを入れる
②一括操作をクリック
③【 Compress Images 】からまとめて圧縮できます。
画像の個別圧縮2


ページの表示速度を確認

各種ツールで自サイトの表示速度を見ることが出来ます。
下記はこのブログの表示速度を測ってみた状態です。

PageSpeed Insights

サイトの表示速度と修正点を判定してくれるデベロッパーツール。

とりあえず500枚を圧縮した後、ちょっぴり速度が上がっています。
PageSpeed Insightsサイト表示速度測定

GTMatrix

こちらのサイトではGoogleとyahoo、それぞれの評価基準を基にした
表示速度の評価と修正点を出してくれます。
GTMatrixサイト表示速度測定

更にページ速度を上げるには

モバイル表示でもパソコン表示でも、改善点を修正していくと
サイト表示速度が速くなります。
例えばこちらは弊社サイトのトップページの速度。
ページ速度が上がると
サイトの階層下にこのWordPressブログを置いているのですが、
メインサイトとブログとではなぜこんなに速度が違うのか悩むところです。
WordPressのプラグインが何かしているのでしょうか。

更にページの展開速度を上げたい方は
【プラグイン】 キャッシュ制御 WP Fastest Cacheの設定と使い方 なども合わせてご覧ください。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket