【Blogger】ブログ高速化。一番効果があったのは自動広告コード削除でした
当サイトのPageSpeed Insightsのモバイルスコアは、しばらくのあいだ30点前後という悲惨な数値を維持していました。
「せめて赤点からは脱却しよう」と自分にできる範囲のことを試した結果、モバイルスコアで70点以上が出るように。
アドセンスの遅延読み込みやCSSのインライン化といったことをあれこれやってみましたが、当サイトにおける低スコアの主犯はアドセンス自動広告コードでした。
本記事では、自動広告コード削除によるスコアの変化と、私が先人の見よう見まねで実践した改善方法をまとめたいと思います。
自動広告コードを消す【効果大】
PageSpeed Insightsの診断結果「改善できる項目」に「使用していない JavaScript の削減」があります。
当サイトの場合、その中の「googlesyndication」と書かれたJavascriptがページの表示速度に大きく影響しているのは明らかでした。
しかし、それがどこにある何のJavascriptなのか、私には最初まったく検討がつかず。
問題を見て見ぬフリして別の対策をいくつか試したものの、スコアにほとんど変化なし。
やむを得ず「googlesyndication」とやらについていろいろ調べた結果、これはどうやらアドセンスの自動広告が絡んでいるらしいということが分かりました。
「自動広告を消せばページスピード改善か？」
と思い、まずはアドセンスのページで自動広告をオフに。
特にスコアは変わらず。
「じゃあ自動広告のコードを消してみよう」
と、ブログのHTMLからの下にあった自動広告コードを削除。
すると、それまで30～40点だったモバイルスコアが…
いきなり70点を超えました。
改善項目の「使用していない JavaScript の削減」からも、「googlesyndication」関連のJavaScriptがすべてなくなりました。
スマホで自分のサイトを見てみたときも、表示が早くなった気が。
自動広告を消すだけでスコアが一気に40も上がるのか！ と驚きました。
（高速化を推奨するGoogleがおすすめしてくる自動広告が高速化を妨げるという矛盾）
ということで、もし自動広告を使っていてモバイルの表示速度にお困りの方がいたら、その原因はアドセンスの自動広告コードにあるかもしれません。
コードはGoogle AdSenseの「広告」→「コードを取得」で確認できます（2021年７月にコードが少し変わりました）。
自動広告がなくなったぶんは、指定した段落の前に広告を自動挿入できるスクリプトをフル活用。
収益はしばらく様子見です。
Blogger独自の改善内容
BloggerデフォルトのJavaScriptとCSSを読み込ませないようにすることで、若干のスコア改善につながります。
デフォルトのJavaScriptを読み込まないようにする
BloggerのHTMLの</body>を指定のコードに書き換えることで、デフォルトのJavaScriptが読み込まれないようになります。
参考：
結果、PageSpeed Insightsの改善項目「使用していない JavaScript の削減」に載っていたJavaScript のひとつ（widgets.jsと書かれたもの）が消えました。
サイトによってはコメントフォームなどに影響が出るみたいですが、うちはよくも悪くもコメント欄を置いていないので問題なかろうと判断。
css_bundleをインライン化する
css_bundle_v2.cssを読み込ませなくした上で、レイアウトに支障が出ないようHTMLにcss_bundle_v2.cssを直接書き込みました。
css_bundle_v2.cssの中身は、PageSpeed Insightsの「レンダリングを妨げるリソースの除外」にあるURL「…widgets/…-css_bundle_v2.css」をクリックすればコピーできます。
中に使わないCSSも多いそうですが、どれが何なのか判断できないので私はそのまま貼りつけました。
「オフスクリーン画像の遅延読み込み」対策
PageSpeed Insightsの「オフスクリーン画像の遅延読み込み」の対策をしました。
アドセンス広告を遅延読み込みする
アドセンス広告の遅延読み込みスクリプトを導入しました。
手順はバグ取りの日々さんの内容どおりですが、HTMLに記入する際はコードを<script>と</script>で囲む必要があります。
トップページのアイキャッチ画像をWebPに変換する
「オフスクリーン画像の遅延読み込み」と「次世代フォーマットでの画像の配信」に対応するべく、トップページのアイキャッチ画像をWebPに変換するスクリプトを導入。
テーマがQooQならふじろじっくさんの手順どおりにすればOK。
Pagespeed Insightsのパフォーマンススコアにはあまり影響が見られないものの、「オフスクリーン画像の遅延読み込み」と「次世代フォーマットでの画像の配信」の数値が改善しました。
記事内の画像を遅延読み込みする
アイキャッチ以外の画像にloading="lazy"をつけて、記事内の画像を遅延読み込みするようにしました。
…と言っても、対応できているのは最近の記事だけです。
画像のひとつひとつに手動でつけないといけないので、過去の記事は少しずつ追記していきます。
そのほかにやったこと
スコアに効果が出ているのかは分かりませんが、ほかにやったことは以下のとおり。
- Font Awesome導入コードを<head>内から<body>内へ移動
本当はFont AwesomeのSVG化というのを試してみたいのですが、現時点では調べても何を言っているか分からない状態なので、いずれ。 - HTMLや記事から使っていないコードを削除
以前使っていた商品紹介ツールのカエレバをHTMLと記事内から消しました。あと、手動で入れていた広告も。Bloggerの投稿一覧って単語やコード単位でも検索できるのですね… 今さら知った。 - Squooshで画像圧縮
これは１年くらい前から始めていました。画像圧縮のビフォーアフターが比較できて便利。
もう少し勉強したらCSSをトップページと記事ページで分ける、といったことも挑戦したいです。
