【Blogger/Vaster2】PageSpeed Insightの改善できる項目「適切な画像サイズ」の対応

PageSpeed Insightsによるトップページのパフォーマンスをチェックすると改善できる項目がいろいろリストされます。
その中で「適切な画像サイズ」について改善してみようかと思います。

Blogger/Vaster2 トップページ記事一覧のサムネイルのサイズを小さくする。

改善できる項目「適切な画像サイズ」詳細は…

改善できる項目の適切なサイズの画像を配信して、モバイルデータ量と読み込み時間を抑えてください。

…と言った内容と共に画像ファイルがリストされています。
それらの画像を確認するとトップページの記事一覧に表示されるサムネイルの容量がデカイと言うことらしい。

ならば小さくすれば良いだけの事。

今回は表示される画像の大きさを縮小してサイズを適正化してみます。

Bloggerの記事に追加した画像のサイズ

まず、Bloggerで記事に画像を追加する仕組について。
Bloggerの記事に画像を追加するとGoogleアーカイブに保存されて、記事のHTMLにはGoogleアーカイブから画像を呼び出すURLが記述されます。
この時の最大サイズは1600px。
スマホで撮影した大きい画像でも1600pxに縮小され保存されます。

記事に追加した画像は任意のサイズに変更する事が可能で「小・中・大・特大・元のサイズ」で、それぞれの画像はブラウザ表示時にリサイズされます。

小なら200px
中なら320px （デフォルト）
大なら400px
特大なら640px
元のサイズは最大1600px

ブログとしては「中」以上の画像を記事に表示したいと思いますが…。

記事一覧サムネイルの表示:Vaster2の場合

Vaster2トップページの記事一覧に表示させるサムネイルは、各記事の最初の画像を記事のままのサイズで一旦ロード後、cssでリサイズしてからブラウザに表示しています。
最初の画像はdata:post.firstImageUrlに格納されています。

例えば、記事に貼付けられた最初画像が「大」であれば、data:post.firstImageUrlより400pxで呼び出し、ブラウザで表示させる時にcssでリサイズしてトップページに表示しています。

PageSpeed Insightsはcssで表示させる画像サイズを小さくしても、data:post.firstImageUrlか呼び出す画像サイズについて適切なサイズなのか判断している様です。

ならば、data:post.firstImageUrlから小さいサイズにリサイズして呼び出せば、画像サイズも小さくなるはずです。

HTMLとcssを変更します。
テーマ（テンプレート）のバックアップを取り、HTMLを変更していきます。

Bloggerの管理画面より　テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。

HTMLの変更

Vaster2の場合、以下のclass='article-thumbnail'のimgタグについて、以下青字に変更します。

<b:if cond='data:post.firstImageUrl'>
 <div class='article-thumbnail'>
   <img expr:src='resizeImage(data:post.firstImageUrl, 200, &quot;1:1&quot;)'/>

imgタグにresizeImage関数を使って画像の長辺を200pxで呼出しています。 また、画像アスペクト比は正方形になる様1:1を指定します。

data:post.firstImageUrlから呼び出し時にリサイズしているので、cssによるwide、heightで画像サイズを指定する事は不要なのですが、私の環境の一部記事でGoogleアーカイブ以外に保管されている画像（具体的には楽天アフィリエイトの画像）が上記の変更で解決しませんでした。
なので、一応cssでwide、height共に200pxを指定しています。

上記適応後はPageSpeed Insightsを実行すると「適切な画像サイズ」に関しては記事一覧の画像は検出されませんでした。

なるべくなら、記事に貼付けする画像自体の画質を落す等してサイズ縮小して貼付ける様にしましょう。


尚、今回の改善により多少スコアも良くなっていますが、大いなる成果では無いですよ。


以上