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

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

あわせて読みたい

Adwordsの品質スコア（ランディング ページの利便性）を上げる方法 AdwordsでCPCが1000円近くかかっているアカウントがあり、どうにかならないかと相談を受けた。 同じキーワードを私も入札していたが、私のアカウントでは平均順位が3位...

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

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

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

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

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

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

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

画像最適化 ツール

Optimizilla

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

Kraken.io

Kraken.io Image Optimizer and Compressor for JPG, PNG, WebP, GIF, SVG, AVIF and PDF Kraken.io is a robust, ultra-fast image optimizer. Thanks to its vast array of optimization and compression algorithms Kraken.io is a world ahead of other tools...

あわせて読みたい

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 now.

JavaScript 縮小 ツール

SYNCER

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

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

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

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

.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>

ModPagespeed on
ModPagespeedEnableFilters prioritize_critical_css

再度 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

あわせて読みたい

サーバー高速化。Googleが提供しているmod_PageSpeedのインストール。 Googleが提供しているサーバーに組み込む、mob_pagespeedを入れてみた。 mob_pagespeedは、画像、HTML、Javascript、CSS、をWEBページの表示が早くなるように、自動で最...