【コピペで改善】GoogleアドセンスとTwitterを遅延させる【初心者】

前回に引き続き、サーチコンソールの「ウェブに関する主な指標」の改善に取り組んだメモです。

今回はGoogleアドセンスとTwitterの表示を遅延させてページの表示速度を高速化する方法です。WordPressでのやり方ですが、書き込む場所さえわかれば、そこに追記できさえすれば、ほかのものにも使えると思います。

こんにちは、野分です。

私は少々htmlタグなどがわかるだけで、システム方面（プログラミングみたいな部分、phpとか・・・なんか難しい部分）には驚くほど疎いので、ほうぼうの頭の良い人の知恵をお借りし、全てコピペでなんとかしています。

私のような「難しくて読んでも分からないから、コピペさえすればいいっていう解決方法が知りたい」という方、WordPress初心者さんにはお役に立てるのでは・・・と思います。

なお、当ブログ（hicolor times）ではLuxeritasというテーマを使用しており、他のテーマはほとんど使ったことがなくてわからないので、注意点などを読む際には、ご自身のテーマがどうなっているかなどよくご確認くださいませ。。

「レンダリングを妨げるリソースを除外」を改善する方法はこちら。

サーチコンソールで指摘された問題点　改善

CLSを改善して、たとえ表示速度を落としてもウェブに関する主な指標に合格したい方はこちら。

ウェブに関する主な指標に合格する

GoogleアドセンスとTwitterを遅延させてページの速度を爆速に
Googleアドセンスの遅延読み込みで速度を改善する
1. Googleアドセンスのコードから特定の記述を削除する
2. </body>の直前にGoogleアドセンスを遅延させるためのコードをコピペする
Twitterの遅延読み込みで速度を改善する
1. Twitterのコードから特定の記述を削除する
2. </body>の直前にTwitterを遅延させるためのコードをコピペする
  1. Twitterのみ遅延させる場合
  2. GoogleアドセンスとTwitterを遅延させる場合
GoogleアドセンスとTwitterを遅延させてページの速度を爆速にまとめ

GoogleアドセンスとTwitterを遅延させてページの速度を爆速に

まずはPageSpeed Insightでページの速度評価を見てみましょう。

このブログの中でも問題があると分かっているページをチェックしてみます。。。。

初期に書いたゲームのイベントの感想です。これを、今回の方法（＋α）で・・・

ここまでにしました❣️（モバイルでの結果です）

改善方法をまとめますので、WordPressの方はここに書いてある通りにコピペしてみてください。

どこに書き入れるかも書いてますので、WordPress以外の方も、見当がつけられれば参考になると思います。。タブン。

あっ❣️　デリケートな部分を触るのと、あとでちょっと触れますがサポートの方から違反ではないとの回答をいただいてるそうですが絶対ではないので、すべて自己責任でお願いしますね。。

Googleアドセンスの遅延読み込みで速度を改善する

Googleアドセンスはいろんな情報を読み込むらしくて、これを設置すると覿面にページが重くなります。なので、それに関する諸々を遅延読み込みさせて、ページのスピードを上げるのがこの方法です。

以下の手順で導入してください。

Googleアドセンスの遅延読み込み

　Googleアドセンスのコードから特定の記述を削除する

　</body>の直前に遅延させるためのコードをコピペする

次から実際のやり方を説明します。

Googleアドセンスのコードから特定の記述を削除する

まずは、Googleアドセンスのコードから以下の記述を全て削除します。

<script async src=“https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>

全てです。

一つでも残っていると動作しないらしいです。（たぶん、「この記述が残っているページでは」ということだと思いますが）

例えば、Googleアドセンスはだいたいこういうコードだと思いますので、１行目の青でハイライトしてある部分を削除します。

このコードには新しいのと古いのがあるらしく、これとは違うコードだよ、という場合は、こちらの記事を参照なさってください。

Qwerty.Workさま

ページ内にある記述をくまなく消しましょう

</body>の直前にGoogleアドセンスを遅延させるためのコードをコピペする

WordPressでは、</body>は「footer.php」にあります。そこを編集していくので、念のため、バックアップは必ず取るようにしてください。

footer.phpはテーマによって存在する場所がちがっているのかもしれません。このブログ（hicolor times）はLuxeritasですが、子テーマの中にはなく、親テーマにしかfooter.phpはありません。

テーマエディターから覗いて見ると、「テーマフッター（footer.php）」と書いてあります

ファイアーウォールなどの設定によっては、WordPress上で直接編集ができないかもしれません。

何かうまくいかなかったようです。変更が保存されていないかもしれません。手動で修正し、FTP 経由でファイルをアップロードすることもできます。

こういうメッセージが出たら、FTPソフトでダウンロードして、編集してください。

ちょっと面倒に感じますけど、このほうがバックアップとっておきやすいんですよね

Googleアドセンスだけを遅延させたい場合は、以下のスクリプトをコピーして、54行目を自分のIDに書き換えてペーストしてください。貼り付け位置はfooter.phpの</body>の直前です。

　Luxeritasではfooter.phpの</body>の前に<!–/#wp-footer–>という文字列（下の赤文字の部分）があります。</body>の直前と言っても、これよりあとにコードを書いてしまうと動作しませんでした。他のテーマでどうなっているかわからないのですが、ご注意ください。

.
.
<script>try{(function(){document.getElementById(‘bc_<?php echo $url_md5; ?>’).innerHTML=‘<?php echo $caches[1]; ?>’;})();}catch(e){console.error(‘bc_<?php echo $url_md5; ?>.error: ‘+e.message);}</script>
<?php
}
unset( $luxe[‘bc_url’][$i] );
}
}
}
?>
</div>
<!–/#wp-footer–>
</body>
</html>

　Twitterも同時に遅延させたい場合は、こちらをご覧ください。Googleアドセンスのコードから特定の記述を削除するのを忘れないでくださいね。

<!– Google AdSense –>
<script>
(function(doc, win) {
function main() {
// GoogleAdSense読込み
var ad = doc.createElement(‘script’);
ad.type = ‘text/javascript’;
ad.async = true;
ad.src = ‘https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js’;
var sc = doc.getElementsByTagName(‘script’)[0];
sc.parentNode.insertBefore(ad, sc);
}
// 遅延読込み
var lazyLoad = false;
function onLazyLoad() {
if (lazyLoad === false) {
// 複数呼び出し回避 + イベント解除
lazyLoad = true;
win.removeEventListener(‘scroll’, onLazyLoad);
win.removeEventListener(‘mousemove’, onLazyLoad);
win.removeEventListener(‘mousedown’, onLazyLoad);
win.removeEventListener(‘touchstart’, onLazyLoad);
main();
}
}
win.addEventListener(‘scroll’, onLazyLoad);
win.addEventListener(‘mousemove’, onLazyLoad);
win.addEventListener(‘mousedown’, onLazyLoad);
win.addEventListener(‘touchstart’, onLazyLoad);
win.addEventListener(‘load’, function() {
// ドキュメント途中（更新時 or ページ内リンク）
if (doc.documentElement.scrollTop != 0 || doc.body.scrollTop != 0) {
onLazyLoad();
}
});
})(document, window);
</script>
<!– Google AdSense ID –>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: “ca-pub-xxxxxxxxxxxxxxxxxxx”,
enable_page_level_ads: true
});
</script>

繰り返しますが、45行目の

google_ad_client: “ca-pub-xxxxxxxxxxxxxxxxxxx”,

の部分は、ご自身のIDに書き換えてくださいね。

このコードはGoogleアドセンスの認証コードだそうです。よくわからないのですが（！）、あったほうがいいのかなと思って、参照元さまと全く同じ記述にしています。なくても作動します。

参照元さまは「無限の天撃」さまです。そのままお借りしています。ありがとうございます。

無限の天撃様

「バグ取りの日々」さまのスクリプトが元になっています。私も最初はこちらを拝見して試行錯誤しました。驚くほど知識がなくて（このようなコードを<script></script>で囲むことを知らない）、こちらだけではなんともできませんでしたが💦

バグ取りの日々

参考になるサイト様は最後の方にもメモしていますので、ぜひ合わせてご覧ください。

Twitterの遅延読み込みで速度を改善する

上でご紹介したGoogleアドセンスを遅延させるJavaScriptを書き換えて、Twitterを遅延読み込みさせます。

PageSpeed Insightの評価内容を見ると、むしろTwitterの方が色々と遅くしてくるなあと思っていたので、そこをなんとかしていきます。

Twitterの遅延読み込み

　Twitterのコードから特定の記述を削除する

　</body>の直前に遅延させるためのコードをコピペする

次から具体的にやっていきます。

とりあえず遅延させるためのスクリプトを追加してから、順次Twitterのコードを消す方が楽かもです。

このブログ（hicolor times）ではたくさんの記事にTwitterを引用しているので、まずスクリプトを追記して、読まれた記事があれば、それを修正してます。そして、余裕があれば古い記事から手を入れていく感じ。

そうすれば、わりと楽です（精神的に）

Twitterのコードから特定の記述を削除する

Twitterのコードを出力すると、このような感じですよね。

削除するのは、一番下の青いハイライトの部分です。

<script async src=“https://platform.twitter.com/widgets.js” charset=“utf-8”></script>

今度は、記事内にあるこれをひとつひとつ削除します。全部です。

残っているとページの速度は改善されませんので注意してくださいね。

でも、WordPressの投稿画面をビジュアルにしていると見える、

この灰色の部分を全部消せばいいので、そのページの分を全部消したかどうかの確認は簡単です。

コツコツと消していきましょう

　フィルタリングが楽だよということで、「よっし〜ずウェブサービス」さまにて記事の中のJavaスクリプトをフィリタリングするコードが公開されています。

もし利用できるのであれば、使った方が楽かもと思います。

よっし〜ずウェブサービス

ちなみにこのブログ（hicolor times）では、一記事一記事こころをこめて、手作業でやっております✨

わかんないけどタブンやり方間違ってて、フィルターが効かなかったのでした・・・

でも古い記事に手を入れる機会になったので、ポジティブに捉えております(●´◒`●)

</body>の直前にTwitterを遅延させるためのコードをコピペする

Twitterのみを遅延させたい場合と、GoogleアドセンスとTwitterを遅延させたい場合のコードを順番に載せます。

必要な方をコピペしてください。

Twitterのみ遅延させる場合

Googleアドセンスを遅延させるためのコードと同じ場所に書き入れます。

以下のスクリプトをコピーしてペーストしてください。貼り付け位置はfooter.phpの</body>の直前です。

.
.
<script>try{(function(){document.getElementById(‘bc_<?php echo $url_md5; ?>’).innerHTML=‘<?php echo $caches[1]; ?>’;})();}catch(e){console.error(‘bc_<?php echo $url_md5; ?>.error: ‘+e.message);}</script>
<?php
}
unset( $luxe[‘bc_url’][$i] );
}
}
}
?>
</div>
<!–/#wp-footer–>
</body>
</html>