ブログの画像を最適化するとPageSpeed Insightsの結果はどこまで変わるか? | ネットタイガー

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

このブログもささやかながらアドセンスなんか表示させていただいていたりなんかしちゃったりしておりまして。まあ小銭稼ぎなんですけども。

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

なつかしのゲームブック。

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

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

スポンサーリンク
スポンサーリンク

PageSpeed Insightsのスコアが低い原因は?

原因ですが、いろいろと考えられます。JavaScript/CSSの読み込みパフォーマンスが悪いとか、キャッシュが利用されていないとか。でも基本的にははてなブログ側のリソースの問題で、あまりさわれるところがないんですよね。

ただアップしている画像はユーザー側で調整可能。画像を最適化することでスコアをアップすることができるかもしれません。ブログ側の画像でユーザーが編集できないものもありますが、取り急ぎエントリーで使用した画像を最適化してみることに。

当該のエントリーではJPG画像を17枚使用しています。画像はデジカメで撮影したものをとあるソフトで600✕480pxにリサイズし、画質「80」で書きだしたものです(「100」でほぼ無圧縮)。もう少し品質を落としてもいいのかもしれませんが、「70」にすると荒れたことがあるので、今のところ基本的に「80」にしています。

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

JPG画像を最適化する方法はいろいろありますが、できるだけ簡単に行いたいので今回はオンラインのツールを使ってみます。調べてみると「Media4x」「TinyJPG」という2つのサイトを発見。今回はこの2つのサイトで最適化を行ってみて、良い結果が出た方を採用することに。

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

f:id:naox21:20150413204716j:plain

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

Media4xで最適化

f:id:naox21:20150413205015j:plain

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

「TinyJPG」で最適化

f:id:naox21:20150413205003j:plain

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

結果比較

オリジナルと2つのサイトの最適化結果は下記の通り。

Media4x TinyJPG
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など自由にカスタマイズできるブログや画像を多用しているブログではもっともっと最適化を追求できるのでは。画像の最適化に気をつかってブログ運営をすると、いろいろ捗りそうです。

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする