Adsenseの遅延読み込みと、使用していないJavaScriptの除去（Cocoonにおける最適化事例）

Wordpress
2020.10.30
Sponsored

当サイトはWordPressで作られていますが、先日ふと思い立って「PageSpeed Insights」でサイトパフォーマンスを測定してみたところ、PCはともかくモバイルのスコアが非常に低かった（20～30くらいで赤信号）ので、高速化を図りました。

その中でも、特に効果が大きかったもののみ、忘備録として記します。

高速化の方針

PageSpeed Insightsで表示された問題点に基づいて、高速化の方針を整理しました。

  1. プラグインを減らす
  2. 無駄なJavaScript読み込みを減らす
  3. ↑または、読み込みを遅らせる

結論から言うと、GoogleのPageSpeed Insights改善における、１番の敵はGoogleです。Adsenseや先日導入したreCaptchaが、当然の権利のように遅延行為を働いてきます。そこで、これらのスクリプトの読み込みを必要なページだけに制限するか、読み込みのタイミングを遅らせる必要があります。

しかし、これらの最適化を行おうとすると、今度はプラグインの数が増大してサイトが重くなるというジレンマにも直面することになりました。

テーマ「Cocoon」の導入

プラグインの増大に関しては、WordPressテーマを「Cocoon」に変更することで対処しました。この無料テーマの様々な機能については、公式サイトを参照してもらいたいのですが、高速化の観点からは、

  1. Autoptimize
    • JavaScript・CSS圧縮など各種最適化
  2. Async JavaScript
    • JavaScriptの非同期読み込み
  3. Site Kit by Google
    • Adsense, Analytics等の管理
  4. Lazy Load
    • 画像の遅延読み込み
  5. SNS Count Cache
    • SNSのシェア数・いいね用のキャッシュ
  6. Crayon Syntax Highlighter
    • 埋め込みコードのハイライト（当サイトでは必須）
  7. WP Social Bookmarking Light
    • 各種SNSボタンの詰め合わせ

などの機能を内包しているため、これらのプラグインをごっそり削除することができました。2020年10月30日現在、当サイトでは以下のプラグインを使用しています。

  1. BackWPup
  2. Contact Form 7
  3. Download Manager
  4. EWWW Image Optimizer
  5. footnotes
  6. Google XML Sitemaps
  7. Invisible reCaptcha
  8. Link Checker
  9. PDF Embedder
  10. Search Regex
  11. Simple Mathjax
  12. SiteGuard WP Plugin
  13. WP Fastest Cache

Adsenseの遅延読み込み

Adsenseはスクリプトの中でも最も重い物の１つです。そして大体すべてのページに存在するので、読み込みの初速を妨げないために表示を遅延させました。

【Cocoon + AdSense】コアウェブバイタル対応的爆速化！ | kengenius.com
はじめに kengenius.comの環境は以下のようになっています。   サーバー：さくらインターネット・スタンダードプラン CMS：Wordpress 5.5 Wordpressテーマ：Cocoon 広告：Google Ads
www.kengenius.com

作業は上記のサイトに従って行いました。具体的な作業は以下の２点です。

  1. Cocoonの子テーマにfooter-javascript.phpを作成し、AdsenseのJavaScript読み込みの行をコメントアウト
  2. Cocoon設定の「アクセス認証・解析」タブから、「フッター用コード」にJavaScript遅延読み込み用のコードを貼り付け

なお、当サイトでは、Cocoon設定の「アクセス認証・解析」において管理者に対するアクセス解析コードの表示をOFFにしているので、管理者側には広告は表示されなくなります。（それに気づかず、設定にミスがあるのではないか、と小一時間悩みました）

使用していないJavaScriptの除去

PageSpeed Insightsの出力によると、当サイトは不要なJavaScript読み込みを行っているとのことでした。

具体的には、お問い合わせフォームでないところでも「Contact Form 7」と「reCaptcha」を読み込んでいるとのことでした。これらのプラグインの状態と導入の経緯については、以下の記事をご覧ください。

Wordpressのスパム対策（Invisible reCaptchaとSiteGuard WP Plugin）
最近スパムメールが怒涛のように押し寄せてきて、お問い合わせページが地獄の様相を呈してきたので、スパム対策を導入しました。 reCaptcha reCaptchaはGoogleが開発しているスパム対策プログラムです。簡単に言うと、「私はロボッ...
ushitora.net
2023.07.22

これに対しては、Cocoonの子テーマのfunctions.phpに以下のコードを追記しました。

function dc_dq_style_script() {
 if( ! is_page(11)){
    wp_dequeue_style( 'contact-form-7' );
    wp_dequeue_script( 'contact-form-7' );
    wp_dequeue_script( 'google-invisible-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'dc_dq_style_script' );

is_page()の引数”11”は「お問い合わせ」の固定ページIDです。「Contact Form 7」と「reCaptcha」が必要なのは「お問い合わせ」のみなので、IDが11でない場合には、wp_dequeue_script()でそれぞれのスクリプトを除外しています。また、「Contact Form 7」に関してはwp_dequeue_style()でCSSも除外しました。

現在のステータス

以上の高速化を実行したことで、現在はモバイルが60、パソコンが95程度のスコアを達成しています。読み込み速度も体感で大分改善されたと自負しており、あまりストレスを感じることなく、皆様に利用していただけることを期待したいです。

それでは、少し早くなったUshitora Lab. を、これからもどうぞよろしくお願いします。

Comments