システム開発者の野望 Google PageSpeedでスコア100を目指す 画像の最適化

デザイナーのスタッフから良くGoogle PageSpeedのスコア項目について質問を受けることがある。

PageSpeedの値が悪いのは、システム開発者、サーバー管理者が悪いと言わんばかりの

認識だったが、問題となっている箇所の理由と改善方法を説明していくうちに、誤解が解けるのだった。

社内で構築をしたサーバーに関しては、恐らく最大限のパフォーマンスおよびセキュリティー設定が

行われており、それらをうまく利用していないことが原因である。

クライアント様の案件にもり、弊社以外で契約しているサーバーの場合は、対応できないこともあるのだ。


さて、今回はGoogle PageSpeedのスコアがパソコン・モバイルで50未満の場合

最も数値を上げやすい対策をご紹介しよう。

（多くの画像を利用しているサイトに限る？）

恐らくサイト・ページで表示している画像が最適化されていないが為に

大幅にスコアを落としている場合があるのだ。


Photoshopなどで書きだした画像（jpeg画像の圧縮率）でも、画質を落とさずにさらにファイルサイズを

下げる（圧縮）させることができる。

Png画像に関しても、画質を落とさずにファイルサイズを少なくすることが可能だ。


その際に、よく使われているツールに

▼Jpeg画像の最適化
jpegoptim
sourceforge.net/projects/jpegoptim/

▼Png画像の最適化
optipng
optipng.sourceforge.net/

がある。

それぞれ基本的にコマンド操作になるが、Windows, Linux, Mac どのOSでも動作するので

一つ覚えてしまえば、いろいろな場面で利用ができるので便利だ。


最適化の例として、下記のコマンドを実行するだけで

ファイルサイズが大幅に削減することが可能だ。

jpegoptim --strip-all --max=90 *

optipng -o7 -strip all *


ただ、上記ツールを使っても、画像によってはPageSpeedで警告がまだ表示される場合がある。

その際は、他のツールと併用したり、デザイン・レイアウトにもよるが画像をリサイズしたりして調整すれば良いだろう。


また、サイトをレスポンシブデザインで制作している場合、パソコン用の画像とモバイル用の画像を

一緒にしている場合が良くあるだろう。（それがレスポンシブデザインのメリットだが）

あまりにも縦横のサイズが大きすぎる画像に関しては、モバイル側のPageSpeedのスコアを下げる要因になってしまう。

レスポンシブデザインであっても、あまりにも大きなサイズの画像を扱う場合は

モバイル用（スマートフォン）の画像を別途用意した方がいいのかもしれない。

例）画像サイズ（横960px：縦xxxxx）を、横480px：縦比率に合わせるに変えるだけで

一応モバイル結果のスコアが改善される。


画像の最適化に関しては、デザイナーさんのこころ配りと、HTMLコーダーさん、システム開発者さんの

制作・開発ツールのアレンジ（フォルダ内監視で画像の最適化を自動実行など）で容易に対応できるのだ。


今回の対策結果でスコアの変化を見てみよう。

画像の最適化だけで、ほとんどのPageSpeedスコア60～70台をに改善されたはずだ。