Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

ブログ運営

ブログの表示速度は検索結果のランキングにも影響します。表示速度向上に一定の効果があるのが画像の圧縮です。そこで活用したいのが画像を一括して圧縮してくれるプラグインの「Compress JPEG & PNG images」です。

画像の圧縮も見た目にはとんど分かりません。

しかもPageSpeed Insightsのスコアもたった数分の作業で改善することができました!どれだけ改善したかはブログの後半で公開しています。

画像のダウンロードにかかる時間も読み込み時間にプラスされるので画像サイズは小さい方がブログの表示速度も速くなると言う事になります。

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

インストールはプラグインの検索から「Compress JPEG & PNG images」を検索してインストール&有効化をするだけです。

パンダのアイコンの①「Compress JPEG & PNG images」プラグインをインストール&有効化します。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

有効化が出来たらプラグイン一覧の②「Settings」を選択し、設定ページを開いて設定をしていきます。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

Compress JPEG & PNG images利用にはアカウント登録が必要

利用にはアカウント登録が必要です。メールアドレスだけで簡単に登録が出来るので敷居は低いです。

登録には「TinyPNG」のページにアクセスし、③「名前」④「メールアドレス」を入力し、⑤「Get your API key」をクリックして利用登録を行います。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

送られてきたメールに記載されているアドレスをクリックして登録を完了させます。ここで表示される⑥「API Key」を登録することで利用登録は完了です。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

設定画面上で⑦「Your account is connected」と表示されていれば登録は完了です。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

Compress JPEG & PNG imagesの設定

ここからがプラグインの設定ですが、設定項目は少なくとても簡単なのですぐに終わります。

New image uploads(画像アップロード時の設定)

画像を新規アップロードした際の挙動を設定します。ここは⑧「Compress new images in the background (Recommended)」を選択します。これは画像の圧縮をバックグラウンドで作業するためのオプションです。プラグイン内でも推奨されているオプションです。

他の選択肢と日本語での説明は以下のとおりです。

  • Compress new images during upload:アップロード中に画像圧縮する
  • Do not compress new images automatically:新しい画像を自動的に圧縮しない

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

Image sizes(圧縮対象にする画像サイズの選択)

圧縮対象にする画像サイズを選択します。

WordPress generates resized versions of every image. Choose which sizes to compress.
→日本語訳:Wordpressはすべての画像についてサイズ変更されたバージョンを自動で作成します。圧縮対象とするサイズを選択してください。

デフォルトでは全ての画像を圧縮対象として選択されていますが、無料では月間500枚までと言う制約があるため、最も利用するオリジナルサイズのみとなる⑨「Original image (overwritten by compressed image)」を選択します。オリジナルの画像は圧縮後上書き保存されます。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

最後の注意書きにもありますが、リサイズ画像の圧縮もそれぞれ月500枚の制限にカウントされるので注意してください。例えば10個チェックを入れるとオリジナル画像10枚アップロードしただけで月500枚の上限に達してしまいます。

Remember each selected size counts as a compression.With these settings you can compress at least 500 images for free each month.(選択した各サイズが圧縮としてカウントされることを忘れないでください。 これらの設定により、毎月最低500枚の画像を無料で圧縮できます。)

Original image(元の画像に対する操作の選択)

元の画像に対する操作のオプションを選択します。ここは多くの場合不要のため、⑩「はチェックオフにしています。

選択項目の説明です。

  • Resize the original image:元の画像サイズを変更する。チェックをオンにした場合、指定した幅、高さを超える画像サイズの場合は自動でリサイズします。
  • Preserve creation date and time in the original image:元の画像の作成日時を保持する
  • Preserve copyright information in the original image:元の画像の著作権情報を保持する
  • Preserve GPS location in the original image (JPEG only):元の画像の位置情報を保持する

全て変更出来たら⑪「変更を保存」で設定を保存します。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

既にアップロード済みの画像を一括で圧縮する

ここまでの設定で今後新たにアップロードする画像は自動的に圧縮されます。さらにこのプラグインでは既にアップロード済みの画像を一括で圧縮することも可能です。そのためにはプラグインの一覧画面から⑫「Bulk Optimization」を選択します。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

次に⑬「Start Bulk Optimization」をクリックすると画像の一括変換が始まります。この処理には少し時間がかかります。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

処理が完了すると画像の圧縮で⑭「どれだけのサイズが削減できたか」が表示されます。当ブログの場合、293個の画像に対し、14.6%のダイエットができたことになります。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

PageSpeed Insightsのスコア改善!

この画像の圧縮だけでどれだけスコアが改善したかを公開します。

パソコンからの表示速度

対処前はスコアは82点でした。何もしなくてもそこそこ優秀なスコアなのは高速なエックスサーバーとCocoonテーマのお影でしょうか。

ただ画像圧縮後は89点と7点もスコアが伸びました。90点台も見えてきました。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

モバイルからの表示速度

続いてモバイル端末からの表示速度です。対処前は53点でしたが、対処後は59点とこちらも6点のスコアアップができました。

Compress JPEG & PNG imagesでPageSpeed Insightsのスコアを簡単に改善!

まとめ

月500枚までと言う制約はあるものの設定はすぐに終わるし過去画像の一括変換もすぐにできて本当に簡単にPageSpeed Insightsのスコアが向上するのでまだ未導入の方にはオススメしたいプラグインです。

関連記事です。ブログの表示速度を測るWEBサービスの紹介です。どれも登録不要で簡単に測定できます。

検索順位にも影響!ブログ表示速度を測定!登録不要で測れる便利なWEBサービス3選!
ブログの表示速度は重要な要素です。Googleの検索結果ランキングにも影響しますし、そもそも表示が遅いページは閉じてしまいますよね。となるとPV数も低下してしまいます。 表示速度改善に向けてまずは現在の表示速度を知ることが大事になりま...

全ページのPageSpeed Insightsのスコアを簡単に測る方法です!これはすごい!

Googleアナリティクスなら記事ページごとの表示速度を一括測定!【神ツール】
先日は登録不要で簡単にWEBサイトの表示速度を測れるサービスを3つ紹介しました。 今回はGoogleアナリティクスで更に細かく分析結果を確認することができる方法を紹介します。ブログの登録が必要ですが、ブロガーの皆さんなら既に登...

コメント