Google AdSenseでサイトの収益化(スコアカード改善スピード診断編)

カテゴリー別今日の人気ランキング

AdSense目次

  1. Google AdSenseでサイトの収益化(申請方法と一次審査まで)
  2. Google AdSenseでサイトの収益化(広告ユニット作成から二次審査まで)
  3. Google AdSenseでサイトの収益化(ポリシー違反編)
  4. Google AdSenseでサイトの収益化(広告コードの不正利用防止編)
  5. Google AdSenseでサイトの収益化(広告最適化ノウハウ編)
  6. Google AdSenseでサイトの収益化(Analyticsアクセス分析編)
  7. Google AdSenseでサイトの収益化(カスタムチャネル活用編)
  8. Google AdSenseでサイトの収益化(支払い手続き編)
  9. Google AdSenseでサイトの収益化(スコアカード改善基本編)
  10. Google AdSenseでサイトの収益化(スコアカード改善スピード診断編)
  11. Google AdSenseでサイトの収益化(スコアカード改善モバイルフレンドリー編)

基本編の改善結果

前回記事「基本編」で行った、

  • スピード診断:.htaccessによる「ブラウザのキャッシュの活用」
  • エクスペリエンス診断:メタタグによる「viewport の設定」

で、チューニング前後でスコアは、以下のように改善されました。が、「スコアカード」は変わらずです。

チューニング結果

基本編の改善結果の詳細はこちらをご覧ください。

Google AdSenseでサイトの収益化(スコアカード改善基本編)
Google AdSenseスコアカードとは アドセンスの管理画面トップに「スコアカード」というものがあります。「収益の最適化」「サイ...

チューニング後の要修正項目は、

スピード診断:修正が必要:1項目、修正を考慮:2項目(変わらず)

  1. スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する(要修正)
  2. 画像を最適化する(考慮)
  3. JavaScriptを縮小する(考慮)

エクスペリエンス診断:修正が必要:1項目、修正を考慮:1項目(要修正から)

  1. コンテンツのサイズを表示域に合わせる(要修正)
  2. タップ ターゲットのサイズを適切に調整する(考慮)

となっています。

スピード診断のさらなる改善

レンダリングを妨げるJavaScriptを削除する

レンダリングとは、ウェブページを解釈し、実際に画面に表示する文字や画像などの配置を行うことです。スピード診断結果のヘルプには、以下のように記述されています。

ブラウザではページをユーザーに表示する前に解析する必要があります。解析中に外部スクリプトがある場合は、解析を停止して、その JavaScript をダウンロードしなければなりません。そのたびにネットワークの往復が追加されるため、ページが最初に表示されるまでの時間が遅くなります。

また、解決策として以下が提案されています。

ブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。

具体的な施策

さらなる改善を目指し、「インライン化」と「読み込みタイミングを遅らせる」解決策をとることにします。具体的には、

  • JavaScriptのファイルサイズが小さいものは、いちいち外部ファイルとして読み込ませるのはやめて、HTMLドキュメント内に書く

  • 先にJavaScript以外のファイルをを読み込ませてから、あとのほうでJavaScriptを読みこませるような順序配置を行う

※document.write を使用している場合は、非同期の読み込み(HTML の async 属性を使用)は安全に使用できないケースが多いので注意します。

改善内容

レンダリングを妨げるリソースは、jsファイル8個、cssファイル2個です。このうち、ファーストビュー表示に必要だが、ファイルサイズが大き過ぎる jsファイル1個はそのまま残し、他のファイルに以下の対策を施します。

  1. ファーストビュー表示に必要な、小さな JavaScript/css は<head>部にインライン化(jsファイル2個、cssファイル1個)

  2. それ以外は、JavaScript/css の実行や読み込みを、ページの読み込み後(</body>の直前)に移動する(jsファイル5個、cssファイル1個)

画像を最適化する・JavaScript/CSSを縮小する

スピード診断結果欄にある「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます」(下図赤枠)をクリックすると、

「 jpg / png 画像のロスレス圧縮」( gif 画像はできないのでこちらのサイトで圧縮します)、「JavaScript、CSS の圧縮(余分なスペース、改行、インデントなどの不要なバイトを取り除く)」を行ってくれます。

できあがったファイルをPCにダウウンロードし解凍して、それぞれのファイルをサーバーへアップロードします。

チューニング後の要修正項目

スピード診断の最終結果

以下の3つの改善を第1段階、第2段階と加えたことで、スピード診断のスコアはモバイル:52→91、PC:66→97へとアップしました。

  • ブラウザキャッシュの活用(第1段階):全て改善
  • レンダリングを妨げるリソースのインライン化、配置変更(第2段階):1ファイル未解決(試しにインライン化するとPCのスコアは100になった)
  • 画像、JavaScript、CSSの圧縮(第2段階):全て改善

スピード診断のさらなる改善結果

モバイルフレンドリーの重要性

以上で、スピード診断の改善は終わりとし様子をみます。これから益々重要になるのが「モバイルフレンドリーの改善」です。

Google は、モバイル検索の順位決定時に、その Web サイトが「モバイルフレンドリー」かどうかを重要な指標として利用するようになり、また

市場の70%以上をしめるスマートフォンからのユーザーを増やすことができれば(当サイトは8割がPC、2割がスマホです)、さらなる収益の向上に繋がります。

モバイルフレンドリーの重要性がここにあります。モバイルフレンドリー改善の詳細はこちらをご覧ください。

Google AdSenseでサイトの収益化(スコアカード改善モバイルフレンドリー編)
モバイルフレンドリーの重要性 米IDCが2015年3月20日に公表した調査によると、 4年前まではPCが大半を占め、2010年時点で...
スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする