Google PageSpeed Insightsスコア改善のためにJPEG画像をロスレス圧縮

Google PageSpeed Insightsのスコアがひどい

　Google Adsense のコンソールを眺めていたら、スコアカード内の「サイトの状況」がひどいことになっていることに気が付きました。

　Google Adsense のスコアカードにおける「サイトの状況」は、広告リクエストが最も多いページのPCと携帯端末でのパフォーマンス分析から決定されます。

　実はデフォルト状態でもはてなブログモバイル版の PageSpeed Insights の点数は低いので、スコアが「3」になるのはしかたがないのですが、流石に「1」は異常事態なので改善方法を探りました。

画像フォーマットの問題

　問題となっているページに対して PageSpeed Insights を実行します。

　結果を見るとPCのスコアが大幅に悪化しており、詳細を開くと「〜.png をロスレス圧縮すると XXKB（YY%）削減できます。」とのこと。エクスポート設定を誤ってファイルサイズの大きいPNG形式で出力していました。

PNG画像ファイルをロスレス圧縮したJPEG形式に変換

　PNG画像ファイルをロスレス圧縮したJPEG形式に変換しましょう。まずはブログから使用画像をダウンロードします。画像管理ソフトウェアからJPEG形式で再出力してもかまいません。その場合は次のステップに進みます。

　PNG形式をJPEG形式（.jpg）に変換するため、Macのコマンドラインで画像ファイルのあるディレクトリに移動してから以下のコマンドを実行します。今回はコマンドラインからやっていますが、使い慣れたツールがある場合はそちらを利用すればよいでしょう。

find . -name "*.png" -type f -exec sips --setProperty format jpeg --out {}.jpg {} \;

　また画像の解像度が表示するサイズよりも大きい場合にはファイル自体のリサイズを行うことで容量が削減できます。こちらもコマンドラインから行えます。

find . -name "*.jpg" -type f -exec sips -Z 600W --out {} {} \;

　-Zオプションで縦横比を固定しながら「数値（W or H）」でリサイズします。PNG形式のファイルは先のコマンドでJPEG変換済みであるし、当初よりJPEG形式で出力していた場合にも対応するため、拡張子がjpgのファイルを指定するコマンドを例にあげています。

　これらの処理結果をみるとファイル容量がかなり削減できていることがわかります。しかしながら、JPEG形式に変換しただけでは、Googleの定義する「ロスレス圧縮」が行われておらず、Google PageSpeed Insights スコアはやや改善にとどまります。

JPEG画像のロスレス圧縮とはなにか？

　JPEG画像の「ロスレス圧縮」とは、メタデータの削除やハフマンテーブルの最適化によってJPEG画像をさらに圧縮することです。削除や再圧縮を伴う不可逆圧縮であるため、厳密には「ロスレス」ではないと思うのですが、Google上ではそう表記されます。これをMacから行うためには「jpegtran」コマンドを実行します。

jpegtran -copy none -optimize -oufile /path/to/foo.jpg /path/to/foo.jpg

-copy none JPEG ファイルのメタデータをすべて削除する。
-optimize ハフマンテーブルを最適化する。
-oufile ファイルの出力先の指定

JPEG画像のロスレス圧縮を行う方法

　「jpegtran」コマンドを実行するためには「Homebrew — OS X用パッケージマネージャー」から「jpeg」をインストールします。

#brewをインストール（インストール済みの場合は不要）
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

#jpegをインストール
brew install jpeg

　jpegがインストールできたら、画像ファイルのあるディレクトリに移動してから以下のコマンドを実行します。ディレクトリ以下の画像ファイルに最適化コマンドを一括実行するためのものです。

find . -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {} \;

　結果を確認するとファイル容量がさらに削減されていることがわかります。

　先の「sips」コマンドと組み合わせてシェルスクリプトにしておけば捗ります。

find . -name "*.png" -type f -exec sips --setProperty format jpeg --out {}.jpg {} \;
find . -name "*.jpg" -type f -exec sips -Z 600W --out {} {} \;
find . -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {} \;

　変換したファイルにアップロードしなおして、 PageSpeed Insights を再実行します。

　ね。簡単でしょ。

PageSpeed Insights スコアが重要になってくる？

　Google Adsense 上の「ページの状況」に反映されるまでには時間がかかりますが、スコア「3」までは回復するものと思います。「ページの状況」スコアには他にも色々な要因があるのですが、まずはユーザー側から手をいれやすいのが画像ファイルのJPEG化やロスレス圧縮だと思われます。

表示速度が遅いページに「Slow to load」という警告メッセージを検索結果で表示するテストをGoogleがモバイル検索で実施しているようです。

　PageSpeed Insights のスコアは、現時点で検索エンジンの結果に影響しないと言われていますが、モバイル検索において「Slow to load」という警告メッセージを表示するテストを行っていると報じられており、今後は重要な指標になっていく可能性があります。

もし今回のテストが、そのまま検索アルゴリズムとして今後も採用されることになれば、表示が遅いページに警告メッセージが表示されるのはもちろん、モバイル検索の検索順位も下がることになるでしょう。

　『Googleのモバイルフレンドリー・アルゴリズムに表示スピードは影響しない。または床屋SEO談義について - 太陽がまぶしかったから』でも書いたとおり、「現時点のモバイルフレンドリー」と、「その先のモバイルフレンドリー」は分けて考える必要があり、後者への予防的対策に位置づけておきたいという認識です。それでなくても、表示が遅いのはユーザビリティを損ねますしね。

　そんなわけで、高精度な写真を売りにしていないブログの画像に関しては形式変換やロスレス圧縮をかけてファイルサイズを削減しておきたいというお話でした。『はてなフォトライフ - 無料・大容量、写真や動画を共有できるウェブアルバム』に一括変換機能があれば最高なんですが。それとも『Google Photos』ならうまいことやってくれるようになるのかな。

Google AdSense 成功の法則 57

回復しました！(2015/07/03)

関連記事