Bloggerの表示速度を高速化する (PageSpeed Insights)

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

以下が診断情報の上位です。Analyticsのコンテンツ→サイトの速度→速度の提案 (こなれていない訳ですね)で一覧が表示されるので、「Page Speedの提案」列の「合計◯個」をクリックすると表示されます。

パフォーマンスが大幅に改善する項目
(1) スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSSを排除する

http://pagead2.googlesyndication.com/pagead/show_ads.js

(2) 次のCSS 配信を最適化してください

http://www.blogger.com/static/v1/widgets/?????????-widget_css_mobile_2_bundle.css
http://www.blogger.com/dyn-css/authorization.css?targetBlogID=...

これをそれぞれ以下のように修正しました。

(1) スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSSを排除する
このスクリプトは名前からして広告ガジェットのようです。調べてみたら、広告表示スクリプトの非同期バージョンがGoogleから提供されているようなので、そちらに置き換えることにします。通常のAdSense広告はBloggerの「レイアウト」ページでAdSenseガジェットをサイドバーに配置するだけですが、これをなんとかしなくてはいけません。どうするんだろう?

まず、AdSenseのページから必要なコードをコピーします。

1. AdSenseのページを開く
2. 「広告の設定」タブを開く
3. 広告ユニットの下に並んでいる項目から「コードを取得」をクリック
4. コードタイプ「非同期(ベータ版)」を選ぶ
5. 広告コードが非同期バージョンになるので、コードをすべて選択してコピーする

次にこのコードをBloggerのサイドバーに配置します。

1. Bloggerのレイアウトのページを開く
2. 「ガジェットを追加」をクリック
3. 「HTML/JavaScript」をクリック
4. 「コンテンツ」に貼り付ける

ここで、コードを一部修正する必要があるようです。
何度か試してみましたが、これをやらないとブラウザにより広告が表示されない場合がありました。逆にこれによりiPadでも広告が表示されるようになりました。これまで出ていなかったのはコードが悪かったのですね...。知りませんでした。でも私のSafariにはやっぱり表示されません。よく分かりません。
(参考ページ: Google AdSense の非同期広告コードを Blogger ブログに貼り付けるときに注意すること。参考ページではHTML/JavaScriptガジェットに配置する時は修正しなくてもよいと記載されていますが、少し試したところでは、ブラウザ依存をなくすため修正した方がよさそうです。)
上で選択した広告コードの冒頭を以下のように修正します。

1. 修正前: <script async
2. 修正後: <script async = 'async'

保存して、ガジェット位置を調整して終わり。

(2) 次のCSS 配信を最適化してください
これはBloggerから対策方法が示されておらず、手が出せません。海外のサイトでもそんな扱いでした。Analyticsで診断されるのだから、同じGoogleのBloggerなんて即座に対応して欲しいところなのですけどね。

これで表示スピードが大分速くなったような気がするので、しばらく様子を見てみます。気がするだけかもしれないですしね。