【WordPressモバイル高速化】pagespeed insightsモバイルスコアが大きく低下→原因はgoogle、お前だ（アドセンス自動広告）

今回は、WordPressサイト（重い）の高速化に取り組んでいて、pagespeed insightsモバイルスコアが大きく低下した件についてお伝えします。 一般的には、非同期じゃないgoogleアナリティクスやアドセンスのコードで、スコアが少し落ちることがありましたが、大きく低下とはどうしたのでしょうか？さっそく原因を探ってみます。

このサイトでの、異常なpagespeed insightsモバイルスコア低下、そして覚えのないＣＳＳ読み込み

このサイト（読んどけコラム）では、シンプルなコードで動かすなどWordPressの高速化にも取り組んでいて、ＰＣビュー・広告コードが出力されないページでは（広告の分重くなる）、pagespeed insightsで満点に近いスコアがでるようになりました（ロリポサーバー・９８点・おそらくコンテンツキャッシュが抜けたタイミングだと10点下がるかも？）。

しかし、そのわりにはモバイルページのスコアが３４点と、ありえないレベルで低下してしまいました。これでは、テーマ改造前のスコアと同レベルです（WordPressはチューニングなしだと、モバイル30～40点台は、ざらに出る）。

速度低下の原因についても調査しました。画像では気づかなかったんだけど特に気になったのがＣＳＳ。200行に圧縮してPHPでヘッダーにincludeしていたから、読み込み時にレンダリングブロックとかはならないはずです。しかし、実装した覚えのないgoogleフォントなどが出てきていて、『あれっ？』となりました。ここがちょっと怪しいですね～。

原因：googleアドセンス自動広告出すぎ＆画像以外にも大量のコードを吐き出してた

で、原因となったのがこちら。少し前にスマホページにも実装した、googleアドセンス自動広告。ＰＣ版ではディスプレイも広いしバナーが２～３枚出てくるだけだったので、あまりきにしていませんでしたが、スマホで見てみると、広告の出稿が増えているのか、ヤバい感じに。一番上にオーバーレイ広告だけでなく、本文中にもサイズ可変式バナーをガンガンぶち込んでくる始末。web広告業界ニュースで、モバイル広告の市場規模がどんどん拡大しているのを実感します。

配信の形式についても画像バナーを配信してimg{max-width: 100%;height: auto;}とかそういう単純な形式でなく、大量のスクリプトやＣＳＳが読み込まれています。バナーひとつでこの量のコードです。実装した覚えのないgoogleフォントとか、ＣＳＳやスクリプトの圧縮が、pagespeed insights改善項目に出てきたのは、おそらくこれが原因ですね。

アドセンス自動広告カットで、モバイルスコアが向上（９９点）！遅くなったのはgoogle、お前のせいだ（笑）

そういうわけで、ヘッダー内に設置していた、アドセンス自動広告のタグをカットします。非同期コード（async）だったり、スクリプトや画像をキャッシュする設定にしているだけでは、どうしようもないことがあるようです（笑）

モバイルのpagespeed insightsスコアが９９点まであがりました。広告なしページ＆コンテンツキャッシュが利いているタイミングだと、このくらいは安定してでそうです（同時アクセス数が増えても、モジュールモードだし）。 しかし、pagespeed insightsの低スコア判定の原因が、同じgoogleのサービス・アドセンス自動広告だったとは。コンピューターで判定とはいえ、部署間の連携がとれていない会社みたいな雰囲気もありますね（笑）

軽めの警告ででてくるのは、.htaccessファイルで指定してあった、キャッシュについて。画像などは１週間程度キャッシュする設定にしましたが、『もう少し長くしてもよいんでないか？』とのことです。

なお、アドセンス広告については、『個別投稿 (single.php)』内を中心に出すようにして、バナー個数などを制御しやすくします。自動広告だと、たまにいっぱい出ることがあるため。 または、このサイトではＰＣアクセスユーザーの割合もある程度あるため、ＰＨＰの条件分岐などを使って、『ＰＣアクセス時だけ、自動広告コードを出力する』みたいに設定することもできます。

あとがき・まとめ・ポイント

まとめるとこんな感じでした。アドセンス自動広告をカットしたことにより、広告インプレッションや収益が短期的には落ちますが、表示速度がアップ・読みやすさなどが向上して、長く読んでもらえるサイトになるのも良いかなと思います。