googleのpagespeedサイトについて
https://developers.google.com/speed/pagespeed/insights/

ヘッダーに広告を通常の方法で追加すると
“スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する”警告が大概のサイトに出ると思います。

今回はサイト上部に表示するモバイルヘッダー広告についてのレンダリングブロック回避方法を解説します。

例としてnendのモバイル広告をヘッダー上部に配置したときの測定結果が下の通り。

次のグラフが改善結果です。74%から87%と大幅に向上しています。

何をしたかというとヘッダー広告のタグをフッターに移動し、広告レンダリング時にcssの絶対座標で最上部に持ってくる処理を入れています。

広告を表示したいヘッダーの箇所に以下タグを追加
<div style=’background-color:#fff;margin-bottom:10px;padding-bottom:2px;width:100%;height:50px;’></div>

フッターに以下タグを追加
<div style=”position:absolute;top:60px;width:100%;left:0px;”>
<div style=’text-align:center;vertical-align:middle;font-size:10pt;margin-bottom:5px;padding-bottom:2px’>
ここに広告タグ追加
</div>
</div>

このようなタグでレンダリングブロックを回避できます。
一応ですが、広告会社によっては広告タグの実装に問題がある場合はリジェクトされる可能性もあるので、
実装の際は、自己責任でお願いします。