ネットタイガー

虎の威を借る狐です。

ブログの画像を最適化するとPageSpeed Insightsの結果はどこまで変わるか?

「PageSpeed Insights」のパフォーマンスが悪いページ

このブログもささやかながらアドセンスなんか表示させていただいていたりなんかしちゃったりしておりまして。まあ小銭稼ぎなんですけども。先日もワンピース片手に葡萄酒を飲みながらアドセンスの管理画面なんか見てたんですね。これでスマートニュースへの掲載確定。

※わかる人にはわかるネタ、ということで。

 

で、アドセンスの管理画面にある「サイトの状況」が気になりまして。広告リクエストの多いページのパフォーマンスを分析して改善を促してくれるのですが、

 

nbnl.hatenablog.jp

例えばモバイル・PCともこちらのページ、「なつかしのゲームブック」なんですが、何でもこちらのパフォーマンスが悪いそうで。「サイトの状況」に表示されている上記エントリーのURLをクリックするとPageSpeed Insightsで分析が始まるのでポチッとな。ブンセキチュウ、ブンセキチュウ…。

 

そして出た結果、モバイルの速度スコアは「35/100」。なるほど、確かにこれはドイヒー。パソコンの方は「60/100」でした。

※ほんとうはスクリーンショット載せたいのですが、規約違反になるとなんなんで載せてません。ごめんなさい。

 

スコアが低い原因ですが、いろいろあります。JavaScript/CSSとかブラウザのキャッシュの利用とか。でも基本的にははてなブログ側のリソースの問題で、あまりさわれるところがないんですよね。

 

ただ画像だけは最適化することでスコアをアップすることができるのではないかと。ブログ側の画像でユーザーがさわれないものもありますが、取り急ぎエントリーで使用した画像を最適化してみることに。当該のエントリーではJPG画像を17枚使用しています。画像はデジカメで撮影したものをとあるソフトで600✕480pxにリサイズし、画質「80」で書きだしたものです(「100」でほぼ無圧縮)。もう少し品質を落としてもいいのかもしれませんが、「70」にすると荒れちゃったことがあるので、今のところ基本的に「80」にしています。

 

広告
 

オンラインツールで画像を最適化してみる

で、これらのJPGを最適化する方法はいろいろあると思うのですが、ソフトをインストールするのとかめんどくさいんで今回はオンラインのツールを使ってみます。「Media4x」「TinyJPG」という画像を最適化してくれるサイト、この2つを使ってみて、良い結果が出た方を採用することに。

 

とその前に、画像ははてなの「フォトライフ」サービスにアップしているのですが、フォトライフへのアップ時に画像容量が変化していないか確認してみます。

 

f:id:naox21:20150413204716j:plain

ローカルPCの中にある画像ファイル(左)とフォトライフからダウンロードしたファイル(右)のプロバティの比較です。両方共サイズが「63.4k(64.936バイト)」なので、アップ前とアップ後では特に変化はないようです。 では画像をそれぞれのツールにアップしてみましょう。(サービスのご利用は自己責任でお願いします。)

 

f:id:naox21:20150413205015j:plain

まずは「Media4x」から。「UPLOAD FILES」をクリックするとアップロードするファイルを選ぶ画面になるので、17枚一括を選択してアップ。自動的に変換が始まります。変換の終わったファイルはサムネイルをクリックして個別にダウンロードするか、または「DOWNLOAD ZIP」からZIPファイルをダウンロードできます。

 

f:id:naox21:20150413205003j:plain

続いて「TinyJPG」。「Drop your .jpg or .png files here!」と書かれたエリアにファイルをドラッグするか、またはクリックしてファイルをアップロードします。一度に最高20枚、5MBまでのファイルをアップできるようです。変換の終わったファイルは「Media4x」のような一括ダウンロードはできないようなので、個別にダウンロード。

 

そして結果は下記の通り。

 Media4xTinyJPG
DSC03531.jpg 79.7 KB 76.9 KB 55.9 KB
DSC03533.jpg 73.0 KB 70.7 KB 53.0 KB
DSC03535.jpg 74.3 KB 72.1 KB 57.4 KB
DSC03537.jpg 66.1 KB 63.7 KB 50.8 KB
DSC03538.jpg 77.0 KB 75.2 KB 75.9 KB
DSC03539.jpg 75.4 KB 72.6 KB 64.0 KB
DSC03540.jpg 75.5 KB 73.1 KB 58.2 KB
DSC03541.jpg 73.8 KB 71.6 KB 61.4 KB
DSC03542.jpg 74.5 KB 72.8 KB 58.5 KB
DSC03543.jpg 70.9 KB 69.0 KB 60.0 KB
DSC03544.jpg 70.8 KB 68.8 KB 55.7 KB
DSC03545.jpg 64.3 KB 62.5 KB 54.7 KB
DSC03546.jpg 65.2 KB 64.0 KB 52.7 KB
DSC03604.jpg 63.4 KB 61.4 KB 62.0 KB
DSC03605.jpg 60.6 KB 58.7 KB 52.1 KB
DSC03606.jpg 56.7 KB 55.3 KB 46.8 KB
DSC03607.jpg 57.4 KB 55.7 KB 47.3 KB
合計 1.15 MB 1.11 MB 0.94 MB

一部例外もありますが、基本的には「TinyJPG」の方がより画像を最適化してくれるようです。特に薄い色・白っぽい色の多い画像は最適化率が高いですね。次に気になるのは画像の劣化があるやいなや。ここでは比較的色数の多く、かつ圧縮率の高かった「DSC03606.jpg」を元ファイルと「TinyJPG」後で比較してみると、

 

元ファイル

f:id:naox21:20150403222701j:plain

 

TinyJPG変換後

f:id:naox21:20150413193030j:plain

 

特に目立つような荒れもなく、気になるほどの違いもありません。というわけで件のエントリーの画像をTinyJPGを通した画像にすべて総入れ替えしました。

 

PageSpeed Insightsで再チェックしてみる

そして再度、ページをPageSpeed Insightsでチェックした結果…。

 

モバイルは「40/100」になりました(^^;)。まだまだと見るか、スコアが「5」上がったことを評価するか、微妙なところですが、画像を最適化したことで多少なりともスコアが上がったということは、ブログオーナーにとってもサイト閲覧者に対しても良いことなのではないでしょうか。ちなみにPC版は「62/100」と微妙なアップを記録しています。また画像を最適化してね、とのメッセージは依然出ているのですが、まあこの辺りは画質や大きさとの兼ね合いでしょうか。

 

…とここまで書いておいてなんですが、本エントリー公開前にもう一度「PageSpeed Insights」を通した結果、モバイルのスコアは37~39とまちまちでした。要因は不明ですが、エントリー制作時は「35/100」→「40/100」というスコアを確認しましたので、その値を記載しておきます。実際に画像容量は減っており、それにより若干でもスコアが上昇していることは間違いありません。

 

というわけで「ブログの画像を最適化するとPageSpeed Insightsの結果はどこまで変わるか?」でした。「はてなブログ」では前述の通り限界もありますが、Wordpressなど自由にカスタマイズできるブログや画像を多用しているブログではもっともっと最適化を追求できるのでは。画像の最適化に気をつかってブログ運営をすると、いろいろ捗りそうです。