ブログが重すぎる!③ (AdSenseの表示を高速化)

ブログ高速化

①で「Above the fold」について少し触れました。 秒数で基準を示してくれることは目標ができてありがたいですが、それにしてもGoogleはAdSenseは1ページに3枚を推奨してるのに表示は1秒でなんて、 AdSenseが一番重たいんですけどね~(^^;)

スポンサーリンク

AdSenseを先読みして表示を高速化する方法

参考にしたサイトです。
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides

リソースを読み込む時間、DNSルックアップを短縮するためにDNSプリフェッチなるものを設定すればいいそうです。

難しい説明はできないので↑のサイトのページを全部お読み下さい。
私は読んでも理解できませんでした(^^;)

せっかちな方は以下のコードを<head>直下の<meta charset=”…”>の下あたりに記載して下さい。

設定前と設定後を計測してみると

DNSプリフェッチ結果

相手がAdSenseなので計測する度にバラつきがありますが、
明らかに効果はあるようです。

AdSenseを非同期コードにしてるのに重たいな~と感じてる方はぜひ試してみて下さい。

PCとスマホ両方で表示される広告はレスポンシブに

ブログ記事の書き方の雛形ともなっている序文下の広告。

ブログの広告設置場所

ここには、レクタングル(正方形に近い四角形)を設置しますが、
336×280を設置するとスマホでは、はみ出るし重くなります。
300×250ではスマホには丁度良いけどPCではちょっと小さい。

レスポンシブは、意図しないサイズ(ここでは縦長など)が来るのが心配な方もいますが、レスポンシブではサイズを指定することができます。

レスポンシブ広告ユニットを作成する – AdSense ヘルプ 

レスポンシブ広告コードを修正して広告ユニットに一般的な横長の形状を指定する方法については、次の例をご覧ください。
<ins class=”adsbygoogle”
style=”display:block;”
data-ad-client=”ca-pub-1234″
data-ad-slot=”5678″
data-ad-format=”horizontal”></ins>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
デフォルトでは、レスポンシブ広告コードの data-ad-format タグには “auto” という値が設定され、これにより、レスポンシブ広告ユニットでサイズの自動調整が有効になります。ただし、data-ad-format の値を “rectangle”(レクタングル)、”vertical”(縦長)、”horizontal”(横長)、またはこれらをカンマで区切って組み合わせた値(”rectangle, horizontal” など)に変更すると、レスポンシブ広告ユニットで一般的な形状を設定できます。

序文下の広告の場合は、レスポンシブ広告を選択。
data-ad-format=”auto”“auto”の部分を、“rectangle”に変更。

これでPCでは細長でも縦長でもない四角形が表示され、スマホでは300×200が表示されると思います。

このブログの右側サイドバーのラージスカイスクレイバー(300×600)の場合は、
data-ad-format=”vertical, rectangle”と、カンマで区切って2つ指定してあるのでPCでは縦長、スマホでは正方形が表示されます。

その他にも正確な縦横比を設定する方法や、@メディアクエリを使用してデバイスのピクセル数に応じてAdSenseを隠すこともレスポンシブ広告に限って可能なようです。

上記の設定をする前はスマホでもラージスカイスクレイバーを読み込んでたのでかなり重く表示に時間がかかっていましたが、レスポンシブに変えてからは、ストレスが軽減しました。


Googleは4月21日から、モバイルフレンドリー に対応できてないサイトの評価を下げるそうです。
読み込み速度はもちろんのこと、スマホでピンチ操作(拡大・縮小)をしなくてもテキストがちゃんと読めるか?リンク同士が近すぎないか?などがチェック項目らしのでAdSense以外でもサイト全体でのスマホ表示についてチェックが必要ですね。

最後までご覧いただき ありがとうございました。

この記事が役に立ったと思った方はシェアして頂けると嬉しいです。(^^)

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメント

  1. 1番遅いのはアドセンスだった、、

    このことは、私も前から思っていました。アピールジョブズ(http://appeal-jobs.com/)は、かなり高速化しているサイトなのに、PageSpeed Insightsでは満点を取れません。

    まず、アドセンスのjavascriptはキャッシュ時間が60分程度なので、「キャッシュ時間を延ばすように」とアドバイスされます。また、ユーザーエクスペリエンスに関しても、グーグルの広告の右上にある小さな「広告掲載元リンクとポリシーリンク」が隣に隣接するため、その点に関してもPageSpeed Insightsに「リンクが近すぎるので、適切な大きさにして、離してください」と言われます。
    このことに関して、サイト運営者ができることはありません。

    さらに、ファーストビューにアドセンスを載せていると、ファーストビュー内の表示をするために「読み込みが必要になりました」と言われます。ファーストビューに関しては通信をしないほうがいいのはわかりますが、アドセンスはファーストビューに載せたいし「それをアドセンスチームが推薦している」ので、それを考えると、グーグルはチーム毎に自分たちの目標を優先させているともいえます。

    とりあえず、アドセンスは遅いです。非同期にしても遅いです。ファーストビューのアドセンスだけ表示されず、どんどんスクロールされていく、なんてことは良くあります(笑)

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る