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

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

AdwordsでCPCが1000円近くかかっているアカウントがあり、どうにかならないかと相談を受けた。同じキーワードを私も入札していたが、私のアカウントでは平均順位が3位で250円程度のCPCだった。実際にアカウント画面を拝見させてもら...

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

ページの読み込み時間を短くする
再度 PageSpeed Insights で採点
まとめ

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

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

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

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

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

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

画像最適化ツール

オンラインイメージ最適化ツール

OptimizillaはJPEG、GIFやPNGフォーマットのイメージを最小サイズに圧縮する、高性能のイメージ最適化ツールです。

Kraken.io Image Optimizer

Kraken.io is a robust, ultra-fast image optimizer. Thanks to its vast array of optimization algorithms Kraken.io is a wo...

Compressor.io - optimize and compress JPEG photos and PNG images

Optimize and compress your jpeg and png images online. Compressor is a lossy and lossless photo compression tool.

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

CSS 縮小ツール

CSS Minifier & Compressor | Toptal®

Use our CSS Minifier & Compressor tool to reduce CSS code size and make your website load faster. Get started for free n...

JavaScript 縮小ツール

JS Minifier

JavaScriptのMinify(コードの軽量化)をするツールです。

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

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

gif画像はpng画像に書き換えられるため、cssやhtmlに記載されているgifへのリンクはpngへのリンクへ書換が必要です。

上記のリンクから、「optimized_contents.zip」というファイルがダウンロードできます。

展開すると必要なファイルが入っています。それをサーバーにUPし既存のファイルと置き換えればOKです。

一回で全てのファイルが生成されないケースもあります。
その場合、まずは最適化されたファイルをアップロードし、既存のファイルと置き換えます。そして、再度PageSpeed Insights で採点し、最適化されたファイルをダウンロードしましょう。これを数回繰り返せばOKです。

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

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

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<IfModule mod_expires.c>
ExpiresActive On
# MIME Type ごとの設定
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 weeks"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 weeks"
ExpiresByType application/x-font-woff "access plus 1 weeks"
ExpiresByType application/x-font-opentype "access plus 1 weeks"
ExpiresByType application/vnd.ms-fontobject "access plus 1 weeks"
</IfModule>
</IfModule>

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

これが一番厄介です。

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

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

次はCSSです。

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

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

ModPagespeed on
ModPagespeedEnableFilters prioritize_critical_css

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

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

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

再度 PageSpeed Insights で採点

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

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

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

まとめ

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

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

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

ModPagespeed on
ModPagespeedEnableFilters rewrite_images
ModPagespeedEnableFilters rewrite_css
ModPagespeedEnableFilters rewrite_javascript
ModPagespeedEnableFilters local_storage_cache
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters lazyload_images