のんびりポタ・ランニング

Blogger.comに、今までより少しモダンな感じの新しいテンプレートが追加されました。

ブログ(Blogger.com)のテンプレートを、先日見つけたMaterial Design Liteのものに変更しました。なかなかいいです。【MDFOSTRAP by Wisnu ST】

以前一度探して諦めていた、MDLベースのブロガー用テンプレートですが、やっと実用になりそうなものを見つけました。当然レスポンシブ。開発者はインドネシアの方らしいです。

問題

Update:  picture/img + srcsetを使った例を末尾に追加しました。記事全体を<div>で囲む必要がないようにコードを単純化しました。
レスポンシブデザインでは、スマホからPCまで様々なサイズの画面に画像が表示されます。どの場合でもぼけずに綺麗な画像を表示しようとすると、最大サイズの画像を送るしかありません。しかし、画面の小さなスマホに対しては大きすぎて、データ転送量(=パケット代)とバッテリーの無駄。これがレスポンシブデザインの画像サイズ問題です。

私のブログ(Blogger)は読み込みに時間がかかるなーと常々思っていましたが、Google Analyticsの項目の一つに「速度の提案」というのがあったので、原因が分からないかなと思って見てみました。診断結果によると、スクリプトの読み込み待ちの間に他の処理ができず表示が遅くなる部分があるようでした。この部分を非同期バージョンにすれば改善するらしいので、試してみました。