Google が提供している、ページのパフォーマンスを測定ツール PageSpeed Insights は、WEBページの読込み時間などを計測して、スコア付けや、改善方法を提案してくれるサービスです。試しに自分のブログ記事を測定してみたところ、かなり残念なスコアでした。(^^;) 画像圧縮を全く使っていなかったのが一番の原因のようです。そこで、Googleさんおすすめの OptiPNG コマンドを使って、記事内の画像を圧縮し、スコアを改善してみました。
PageSpeed Insights の使い方
PageSpeed Insights に、測定したいページのURLを入力して「分析」をクリックするだけです。
結果はこちら、モバイルについては赤点ギリギリです、、、
提案された改善方法のうち、特に赤色の「！」の修正を行うと、ページのパフォーマンスが大幅に改善されます。このページは「画像を最適化する」と「スクロールせずに見える〜」の修正が特に必要なようです。
具体的な改善方法の確認
今回は、モバイル、パソコン共に改善が提案されている「画像を最適化する」の修正をしたいと思います。
「修正方法を表示」をクリックすると、最適化が必要な画像の一覧が表示されます。
さらに「次の画像を最適化」をクリックすると、どのように画像を最適化すればよいかの、ガイドラインが表示されます。
ガイドライン（画像を最適化する）によると、「画像圧縮ツールを使用する」「適切な画像のファイル フォーマットを選択する」この２つが推奨される改善方法のようです。
▽ 画像を最適化する - 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さん親切ですねえ。
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 リポジトリを追加します。
rpm -ivh http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.3-1.el6.rf.x86_64.rpm rpm --import http://dag.wieers.com/rpm/packages/RPM-GPG-KEY.dag.txt
・インストール
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バイト）
・JPEG形式（31,314バイト）
画像を最適化して PageSpeed Insights 再計測
画像を最適化後、再計測してみると、モバイルは、36 → 50（+14）、パソコンは、55 → 81（+26）にスコアが改善されました。
まとめ
・画像形式は PNG を使う（写真の場合は JPEG）
・optipng -o7 で圧縮する（JPEG の場合は jpegtran）
・サムネイル用サイズの画像を別につくる
次回は「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の修正をしてみたいと思います。
コメント