文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

【非ブロック化】adsenseスクリプトを非同期に変更して高速化【コンバージョンに影響】

f:id:treeapps:20180418112745p:plain

気付かなかったのですが、2013年の6月くらいにいつのまにかadsenseのスクリプトが非同期に対応していたようです。これは大ニュースですね!!

非同期の詳細についてはgoogleのオフィシャルサイトをご覧下さい。
非同期広告コードについて - AdSense ヘルプ

script自体の張替えが必要なので、すぐスクリプトを入れ替えましょう。
具体的には以下のように非同期スクリプトを選択可能になっています。
f:id:treeapps:20140219231631p:plain

非同期じゃないと何が問題なの?

非同期でない場合、
adsenseのスクリプトの実行中は他の処理が全て止まる
という状態になります。つまりadsenseの処理が遅い時はそれに引きづられてサイトの表示速度が遅くなるのです。

非同期の場合、adsenseのスクリプトの終了を待たずに他の描画処理等が実行されます。adsenseを多く張っている場合に特に有効になります。

javascriptは他の処理をブロックする

勿論皆さんご存知かと思いますが、adsenseに限らずjavascriptの読み込み中は他の処理が全てブロックされます。酷い時は画面の描画が止まったように見えてしまうことでしょう。

通常自分で用意するjsは </body> の直前にjsの読み込みをする事で、html描画の最後にjsを実行し、画面描画をブロックしないという事をしますね。しかし今までのadsenseはhtmlの途中に同期スクリプトを埋め込んでいたため、描画中にブロックされていたわけです。

ソーシャルボタン系も注意ですね。もし非同期でないボタンの場合、html描画中にソーシャルボタンの処理が終わるまでhtml描画はブロックされています。今回のadsenseのように非同期化コードがあるなら、そちらを使いましょう。

マンガでわかるアフィリエイト

マンガでわかるアフィリエイト

無料でできる!世界一やさしいGoogleAnalyticsアクセス解析入門

無料でできる!世界一やさしいGoogleAnalyticsアクセス解析入門

いちばんやさしい新しいSEOの教本 人気講師が教える検索に強いサイトの作り方 (「いちばんやさしい教本」シリーズ)

いちばんやさしい新しいSEOの教本 人気講師が教える検索に強いサイトの作り方 (「いちばんやさしい教本」シリーズ)