Blogger:関連記事一覧を自動的に表示させるガジェットの画像のサイズを指定する

前の関連記事：Blogger:圧縮ツールを使ってCSSとJavaScriptを圧縮する

Blogger:ページ表示速度を計測して速度向上対策を考えるで速度向上のために改善が指摘されていた関連記事一覧を自動的に表示させるガジェットの画像のサイズを指定します。

画像はサイズを指定したほうが表示が早くなる

GTmetrixの解析では画像のサイズ指定について最低評価になっています。


最初の10個の画像はBlogger:関連記事一覧を自動的に表示させる方法で導入したガジェットの出力画像です。

設定で160x160の固定サイズの画像の出力をさせていますが、HTMLには画像サイズの指定がないためにサイズ属性をつけるように指摘されています。

jquery.related-posts-widget-2.0.min.jsの中をみてると画像出力部分は以下のようになっています。

(b.thumbs&&h?"<span><img "+j+'="'+h+'" title="'+(b.titles?"":f)+'" border="0"/></span>':"")

これに画像出力サイズの属性のheight="160" width="160"をくっつけます。

(b.thumbs&&h?"<span><img "+j+'="'+h+'" title="'+(b.titles?"":f)+'" border="0" height="160" width="160"/></span>':"")

これを機会にBlogger:Googleサイトの利用をやめて表示速度を改善するでやったようにjquery.related-posts-widget-2.0.min.jsの中身をガジェットに入れてしまいます。
（IE8では表示がおかしくなるので修正が必要です。詳しくはBlogger:IE8で背景の色が消える問題(4)また発生。今回は原因がはっきり判明。へ）

さらにBlogger:圧縮ツールを使ってCSSとJavaScriptを圧縮するでやったようにJavaScriptを/packer/で圧縮します。

compression ratio: 3856/4107=0.939

Base62 encodeとShrink variablesのオプションはともにチェックして圧縮すると93.9%に圧縮されました。

評価がFランクからEランクにアップ

残りは全てBlogger：ソーシャル(SNS)ボタンをつける(忍者おまとめボタンを利用)で導入した忍者おまとめボタンの画像です。


忍者おまとめボタンはボタン画像がCSSスプライトでないのでこの評価でも足をひっぱっています。

このあたりはユーザー側ではどうしようもないです。

忍者ボタンの画像の次に指摘されているのはBloggerのナビバーのボタン画像です。

ナビバーはブログ内検索のためにいまは表示させていますが、そのうち自作の検索システムを乗せようと思っているのでそれが完成したら撤去予定です。

参考にしたサイト

GTmetrix | Website Speed and Performance Optimization
速度改善対策の提案もしてくれます。

/packer/
JavaScript圧縮ツール。

次の関連記事:Blogger:plusone.jsは遅いけどどうしようも対策できない