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

by ブログ工房 「 AdSense 」記事で、今日一番読まれているページ TOP 5

まだデータがありません。

カテゴリー別今日の人気ランキング
スポンサーリンク

基本編の改善結果

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

  • スピード診断:.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_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする