wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

WordPress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2019/06/01

こんにちは、管理人@SS_mshpです。

今回は、WordPressサイト(重い)の高速化に取り組んでいて、pagespeed insightsモバイルスコアが大きく低下した件についてお伝えします。

一般的には、非同期じゃないgoogleアナリティクスやアドセンスのコードで、スコアが少し落ちることがありましたが、大きく低下とはどうしたのでしょうか?さっそく原因を探ってみます。

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


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


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


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

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


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


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

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


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


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


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

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

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

  • がっつり軽量化チューニングをしていても、モバイルのpagespeed insightsスコアが低めにでるときがある
  • 今回の原因は、googleアドセンス自動広告で、pagespeed insightsは自社サービスでも機械的に判定してるだけ
  • アドセンス自動広告は、単純に画像バナーをサイズ調整して表示するだけでなく、いろいろなスクリプトも読み込むので重くなりやすい
  • また、モバイルは広告出稿が増えているので、制限しなければ大量にバナーが出やすいかも

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト高速表示, インターネット広告 【タグ】 -

  関連記事

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニューをサイ …

【重くて邪魔】WordPressのblock-libraryのCSSを読み込まなくする方法(wp deregister script関数・functions.php)

今回は、WordPressを新バージョンにしたときに、勝手に読み込まれる …

PHP・array配列&WordPressのカテゴリを使った、ジャンルごとに適切な広告を配信する方法(アフィリエイト・アドセンス)

今回は、広告収益・コンバージョンなどを上げるために『PHPプログラムを使 …

【WPサイト高速表示】ロリポWPコンテンツキャッシュで、速度の変動があるようです(不安定)

今回は、サイト表示速度に関わるキャッシュ話題です。 以前ロリポサーバーで …

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを『Pja …

【ロリポwordpress高速表示でSP90超えろ】ロリポップサーバーで『コンテンツキャッシュ機能』提供開始・設定方法と効果のチェック

今回はサイトを高速表示するときに重要なポイントといえる『キャッシュ活用』 …

【WPテーマを軽くカスタマイズ】プチ静的化して、データベースアクセスやPHPファイルをへらしつつ同じデザインで

今回は管理人も利用しているWP(wordpress)サイトで、ちょっとだ …

Googleアドセンスで『自動広告』が登場~設置のしかたや表示のされかた・収益性は?

今回は、アドセンスで新しく『自動広告』というのができたらしいので、配置し …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

【サイトを広告で宣伝】facebook広告ってアドワーズと比べて高い?パフォーマンス上げ方は?

今回は、サイトを制作したあと、記事の追加やSEOチューニングと合わせてや …

Googleがスマホ表示速度をランキング要因にすると発表・サイト制作者/ユーザーの対策は?

今回は2018年1月に、Googleの検索順位に影響する内容が公式に発表 …

CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)

今回は、サイトを高速表示するCSSの書き方についてです。 管理人が昔使っ …