Adwordsのランディングページの利便性を上げる方法

Adwordsのランディングページの利便性を上げる方法

前回、Adwordsのランディングページの利便性を上げるメリットと、方法を記載しました。

今回はランディグページの利便性で重要な、ページの読み込み時間の改善です。

ページの読み込み時間を短くする

Googleが提供している、「PageSpeed Insights」を利用し、現在のLPを確認する。

すると以下のように散々な結果となっていた。PCでは「30点」という低スコア。

 

以下の項目を改善することで、pagespeedのスコアがあがるとのことでした。。

  • 画像を最適化する
  • ブラウザのキャッシュを活用する
  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  • JavaScript を縮小する
  • CSS を縮小する

画像の最適化やCSS、JSの縮小は、下記のようなツールを利用するのが一般的です。

画像最適化 ツール

個人的は「optimizilla」が使いやすいです。

CSS  縮小 ツール

JavaScript 縮小 ツール

上記のようなツールを利用して最適化するのは面倒くさいので、私はPageSpeed Insightから提供されるファイルたちをダウンロードして利用しました。

すごく分かりづらい所に掲載されていますが、ページ下部の このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。から最適化された、画像、CSS、JSファイルがダウンロード可能です。

gif画像はpng画像に書き換えられるため、cssやhtmlに記載されているgifへのリンクはpngへのリンクへ書換が必要です。
上記のリンクから、「optimized_contents.zip」というファイルがダウンロードできます。
展開すると必要なファイルが入っています。それをサーバーにUPし既存のファイルと置き換えればOKです。
一回で全てのファイルが生成されないケースもあります。
その場合、まずは最適化されたファイルをアップロードし、既存のファイルと置き換えます。そして、再度PageSpeed Insights で採点し、最適化されたファイルをダウンロードしましょう。これを数回繰り返せばOKです。

ブラウザのキャッシュを活用する

.htaccessへ以下の記述をします。

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

これが一番厄介です。

手動でチマチマと最初に読み込まれるCSSをインライン化し、他のファイルをフッターの方で読み込ませます。さすがにこれは面倒くさいので、少しズルをします。

まずは、ページ上部にjsファイルがある場合はフッターへ移動します。cssよりも必ず下にしてください。

次はCSSです。

mod_pagespeed というモジュールがサーバーにインストールされていることが前提になります。

.htaccessに以下の記述をし、prioritize_critical_css を有効化します。

prioritize_critical_cssとはページをレンダリングするために必要なCSSルールを識別し、重要なルールをインライン展開し、他のCSSは読み込み遅延を行うことで、ページのレンダリング時間を改善します。

ただし、最初の1回めのアクセスはどのCSSが重要かを判断し2回目から、最適化したCSSを出力します。

「mod_pagespeed」はレンタルサーバーであればエックスサーバーで無料で利用できます。vpsを利用している方は、この記事を参照してインストールしてみてください。

PR

再度 PageSpeed Insights で採点

全ての項目を修正したら、もう一度 PageSpeed Insights で採点します。

以下のような結果、94点になりました。

ブラウザのキャッシュを利用がまだ出来ていないと表示されています。これはYahoo PRのリタゲタグといった広告・解析用のタグになります。そのため、残念ながら私達側でどうにかすることは出来ません。

 

PR

まとめ

結局はGoogleが作った判断基準のため、その最適化ツール「mod_pagespeed」に頼ることであっという間に終わることができました。

ちなみに、ブラウザのキャッシュを利用、画像の最適化や、css・jsの圧縮も実は「mod_pagespeed」で可能です。

ちなみにこんな感じで、圧縮、キャッシュ、画像の最適化が可能です。