Google PageSpeed スコアを改善する方法(画像圧縮 OptiPNG)

2015年4月8日  カテゴリー:WEB  タグ: ,
Pocket
LINEで送る

Google が提供している、ページのパフォーマンスを測定ツール PageSpeed Insights は、WEBページの読込み時間などを計測して、スコア付けや、改善方法を提案してくれるサービスです。試しに自分のブログ記事を測定してみたところ、かなり残念なスコアでした。(^^;) 画像圧縮を全く使っていなかったのが一番の原因のようです。そこで、Googleさんおすすめの OptiPNG コマンドを使って、記事内の画像を圧縮し、スコアを改善してみました。

PageSpeed Insights の使い方

PageSpeed Insights に、測定したいページのURLを入力して「分析」をクリックするだけです。
google-pagespeed-01

結果はこちら、モバイルについては赤点ギリギリです、、、
提案された改善方法のうち、特に赤色の「」の修正を行うと、ページのパフォーマンスが大幅に改善されます。このページは「画像を最適化する」と「スクロールせずに見える〜」の修正が特に必要なようです。
google-pagespeed-02

google-pagespeed-03

具体的な改善方法の確認

今回は、モバイル、パソコン共に改善が提案されている「画像を最適化する」の修正をしたいと思います。

「修正方法を表示」をクリックすると、最適化が必要な画像の一覧が表示されます。
google-pagespeed-04

さらに「次の画像を最適化」をクリックすると、どのように画像を最適化すればよいかの、ガイドラインが表示されます。
google-pagespeed-05

ガイドライン(画像を最適化する)によると、「画像圧縮ツールを使用する」「適切な画像のファイル フォーマットを選択する」この2つが推奨される改善方法のようです。

▽ 画像を最適化する - PageSpeed Insights — Google Developers
https://developers.google.com/speed/docs/insights/OptimizeImages

画像圧縮ツールを使用する

画像の品質に影響を与えずに JPEG や PNG ファイルに対して高度なロスレス圧縮を実行するツールがいくつか提供されています。JPEG では、jpegtran または jpegoptim(Linux のみ。--strip-all オプションを指定して実行します)をおすすめします。PNG では OptiPNG または PNGOUT をおすすめします。

適切な画像のファイル フォーマットを選択する

画像にどのフォーマットが最適かテストしてください。主な推奨事項は次のとおりです:

一部の旧バージョンのブラウザでは PNG を部分的にしかサポートしていない場合がありますが、PNG はほとんどの場合、GIF より優れています。
非常に小さなグラフィックや単純なグラフィック(10x10 ピクセル未満、3 色未満のカラー パレットなど)、アニメーションを含む画像には、GIF を使用します。
写真スタイルの画像にはすべて JPG を使用します。
BMP や TIFF は使用しないでください。

解説ページでは「写真スタイルの画像にはすべて JPG を使用します」とありますが、PageSpeed Insights で計測したページの画像は、ほぼ、ソフトウェアのスクリーンショットのため、画像のファイルフォーマットは、PNG形式を使用し、OptiPNG コマンドで画像を圧縮してみようと思います。

今回は OptiPNG を使いますが、PageSpeed Insights から最適化された画像などをダウンロードすることもできます。Googleさん親切ですねえ。
google-pagespeed-10

OptiPNG コマンドのインストール

Windows7 の場合

OptiPNG のサイトから「optipng-0.7.5-win32.zip」をダウンロードして、解凍すればOKです。「optipng.exe」に PNG画像をドラッグ&ドロップすれば、圧縮されます。※圧縮前の画像は残りませんので注意です。

Mac の場合(OS10.10.2)

Homebrew でインストールするのが簡単です。Homebrew 本体のインストール方法は、下記の記事を参考にさせて頂きました。

▽ MacにHomebrewをインストールする - Qiita
http://qiita.com/_daisuke/items/d3b2477d15ed2611a058

▽ MavericksでCommand Line Tools for Xcodeをインストールする - Qiita
http://qiita.com/3yatsu/items/47470091277d46f3fde2

・Homebrew で optipng コマンドをインストールします。
brew install optipng

Linux の場合(CentOS6)

・RPMForge リポジトリを追加します。

・インストール
yum -y install optipng

・RPMForge リポジトリを無効にします。
vi /etc/yum.repos.d/rpmforge.repo
---(下記を変更)------------------------------
[rpmforge]
name = RHEL $releasever – RPMforge.net – dag
baseurl = http://apt.sw.be/redhat/el6/en/$basearch/rpmforge
mirrorlist = http://mirrorlist.repoforge.org/el6/mirrors-rpmforge
#mirrorlist = file:///etc/yum.repos.d/mirrors-rpmforge
enabled = 1

enabled = 0
------------------------------

optipng コマンドの使い方

最適化レベル「-o7」を設定しPNG画像を指定します。※圧縮前の画像は残りませんので注意です。
optipng -o7 sample.png

ワイルドカードを使って、複数のPNG画像を一括圧縮することもできます。
optipng -o7 *.png

最適化レベル「-o」は「0〜7」の範囲で指定します。「-o」を省略した場合は、レベル「2」で最適化されます。「7」は最高レベルですので、処理に時間がかかりますが、最適化レベルが低いと PageSpeed Insights の結果で「もっと画像を最適化できるよ!」と、指摘されることがあります。

画像の圧縮作業

optipng コマンドで、一括圧縮と思っていたのですが、画像がJPEG形式だったり、サムネイルのサイズに合わせた画像が必要になったりして、今回は地道に手作業で行いました。

作業をしていて気がついたのですが、JPEG形式のスクリーンショットを、PNG形式に変換すると画像の容量が倍近くになってしまいました。元々Macのスクリーンショットは、PNG形式で保存されるので、そのまま使っていれば良かったのですが、元の画像も残っていないため、撮り直すハメになりました。(^^;)

また、ソフトウェアのスクリーンショットなど、色数が少ない画像は、PNG形式が奇麗に表示できます。JPEG形式では、特に文字の周りが劣化し、容量も多くなる傾向があります。

・PNG形式(22,818バイト)
google-pagespeed-06

・JPEG形式(31,314バイト)
google-pagespeed-07

画像を最適化して PageSpeed Insights 再計測

画像を最適化後、再計測してみると、モバイルは、36 → 50(+14)、パソコンは、55 → 81(+26)にスコアが改善されました。
google-pagespeed-11

google-pagespeed-12

まとめ

・画像形式は PNG を使う(写真の場合は JPEG)
・optipng -o7 で圧縮する(JPEG の場合は jpegtran)
・サムネイル用サイズの画像を別につくる

次回は「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の修正をしてみたいと思います。

スポンサーリンク
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です