Google PageSpeedInsightsスコアを改善する方法
公開: 2017-04-11ページスピードインサイトのコンバージョン率を上げる最も簡単な方法は、見出しの改善やCTAボタンの色の変更とは何の関係もありません。 代わりに、より高速なユーザーエクスペリエンスを提供することです。
Googleの調査により、コンバージョン率と読み込み時間の関係が明らかになりました。 また、クリック後のランディングページが遅れて、見込み客の半分を失う可能性があることも明らかになります。 幸いなことに、何がそれを遅くしているのかを判断するために使用できるツールがあります。
ページ速度に関するGoogleの調査
900,000の広告をクリックした後、Googleの研究者は、平均的なモバイルのクリック後のランディングページが恥ずかしい22秒で読み込まれることを発見しました。 これは、ほとんどのせっかちなインターネットユーザーがページを放棄するまで待つよりも7倍以上長く、正確には53％です。
ページの読み込みに3秒以上かかる場合、見込み客の半数以上がページを見る前に離れています。 それが十分に悪くなかったかのように、調査では、1秒が経過するたびにページが読み込まれず、さらに多くの訪問者がバウンスすることがわかりました。
研究者は、SOASTAの機械学習テクノロジーの助けを借りて、読み込み時間、ページの重み（データのサイズ）、およびコンバージョン率の間に相関関係があることを発見しました。 基本的に、「重い」とは遅いことを意味します。 具体的には、ページ上の要素（テキスト、画像など）の数が400から6,000に増えると、訪問者を変換する可能性が95％低下します。
クリックしてツイート
ただし、ページの読み込みが遅い場合は、問題を特定するのは必ずしも簡単ではありません。 テキストの量と画像の数は一目でわかりますが、JavaScriptが多すぎたりリダイレクトが多すぎたりするような問題は目立ちません。
幸い、ページの読み込み時間を遅くしている原因を正確に見つけるために使用できる無料のツールがあります。
Google PageSpeed Insightsとは何ですか？
Google PageSpeed Insightsは、ウェブページの速度をすばやく簡単にテストできるツールです。
URLを入力して[分析]をクリックすると、2つのパラメータに基づいて、そのWebページの速度を低下させている原因の詳細なレポートがすばやく表示され、修正方法に関する推奨事項が示されます。
- パラメータ1：フォールドを超える負荷までの時間。 これは、ユーザーが新しいページをリクエストした後、ページがスクロールしなければ見えない位置にコンテンツを表示するのにかかる時間です。
- パラメータ2：ページ全体が読み込まれるまでの時間。 これは、ユーザーがページを要求した後、ブラウザがページを完全にレンダリングするのにかかる時間です。
グーグルによれば、それは次のように機能します：
Page Speed Insightsは、モバイルデバイスとデスクトップデバイスのページのパフォーマンスを測定します。 URLを2回フェッチします。1回はモバイルユーザーエージェントを使用し、もう1回はデスクトップユーザーエージェントを使用します。
PageSpeed Insightsスコアの範囲は0〜100ポイントです。 スコアが高いほど良いです。スコアが85以上の場合は、ページのパフォーマンスが良好であることを示しています。
しかし、ページが瞬時に読み込まれることを期待する場合、「十分」で十分でしょうか。 毎秒が重要なときではありません。 できるだけ高いスコアを獲得するには、次のことを行う必要があります…
高いGooglePageSpeedInsightsスコアの達成
レポートに赤と黄色がたくさん表示される場合は、ページに明らかな読み込みの問題があるためです。
ツールはこれらの問題を通知しますが、エラーメッセージを理解するのは少し難しい場合があります。 期待できる内容とその修正方法は次のとおりです。
1.クリック後のランディングページのリダイレクトを回避する
ページがレスポンシブに設計されていない場合、結果として、さまざまなデバイス用に最適化されたページへのリダイレクトが多数発生する可能性があります。 グーグルによると、いくつかの一般的なリダイレクトパターン：
- example.comはレスポンシブウェブデザインを使用しており、リダイレクトは必要ありません–高速で最適です！
- example.com→m.example.com / home–モバイルユーザーに対する複数往復のペナルティ。
- example.com→www.example.com→m.example.com–非常に遅いモバイルエクスペリエンス。
ユーザーをリダイレクトする必要があるたびに、ページのレンダリングが停止します。これにより、ページの読み込み時間が貴重な秒数になります。 レスポンシブデザインでページを構築することにより、リダイレクトを完全に回避します。これは、見込み客が使用しているデバイスに関係なく、高品質のユーザーエクスペリエンスを保証する方法です。
（すべてのInstapageテンプレートは応答性が高いため、ユーザーがピンチしてズームする必要はありません。）
2.圧縮を有効にします
今日のブラウザは、インターネットユーザーにページのより小さな代替バージョンを提供することができます。 コンプレッサーのgzipを有効にすると、これらのページのサイズが90％縮小する可能性があります。
Khalid Azadは、彼のWebサイトBetter Explainedで、gzipがHTTP要求および応答プロセスを最適化する方法を説明する素晴らしい仕事をしています。
ただし、圧縮が有効になっている場合、プロセスは次のようになります。
ユーザーにページ全体を提供する代わりに、ブラウザーは、わずかな時間でロードされる指数関数的に小さい圧縮バージョンをフェッチできます。 gzipを使用した最適化の詳細については、こちらをご覧ください。
3. CSS、HTML、JavaScriptを縮小します
「縮小」とは、ブラウザによるページの処理方法に影響を与えることなく、不要なデータや冗長なデータを削除することです。 不十分なコーディングがこの問題の原因である可能性があり、いくつかの異なる方法で修正できます。
ページのソースコードを手動で調査する以外に、次のリソースを試すことをお勧めします。
- HTMLを縮小するためのHTMLミニファイア。
- CSSNanoとcssoはCSSを縮小します。
- JavaScriptを縮小するためのUglifyJS2とClosureCompiler。
もちろん、別のオプションは、GoogleのAMPと広告フレームワーク用のAMPを利用することです。 どちらのプログラムでも、開発者はHTML、CSS、およびJavaScriptの簡略版を使用してページを作成できます。 その結果、ほんの一瞬で読み込まれるページと広告ができあがります。
4.フォールド以上のコンテンツに優先順位を付ける
奇妙に思えるかもしれませんが、ページの読み込み時間は、ページの読み込み速度だけではありません。 また、「知覚されるパフォーマンス」についても説明します。 KeyCDNのBrianJacksonは次のように説明しています。
知覚されるパフォーマンスは、単に「Webサイトが読み込まれたときにどれだけ速く感じるか」と説明できます。 これは、Webサイトの実際の読み込み速度とは少し異なる場合があります。 知覚されるパフォーマンスはすべて、Webサイトの速度テストツールからではなく、ユーザーの視点からのものです。
知覚されるパフォーマンスを向上させるには、ユーザーにとって重要なコンテンツの読み込みに優先順位を付けることが重要です。 たとえば、折り目の上のページのテキストは、サードパーティのウィジェットの前に読み込まれる必要があります。
ただし、コードの構造が正しくないと、ユーザーの心に感じられるパフォーマンスが低下する可能性があります。 ロードするページの最後の要素が、ユーザーがクリックして表示した要素である場合、ページはより長くロードされているように感じられます。
5.サーバーの応答時間を短縮します
サーバーの応答時間（サーバーがユーザーのページのコンテンツの読み込みを開始するのにかかる時間）は、Googleによるといくつかの要因によって遅くなる可能性があります。
- データベースクエリ
- 遅いルーティング
- フレームワーク
- ライブラリ
- リソースCPUの枯渇
- 記憶の飢餓
Raelene Moreyのウェブサイトにとって、不十分なホスティングは主要なスピードキラーでした。 彼女は読者に警告します：
無制限のページビューと無制限のスペースを備えた3.95ドルの月額プランを提供する安価なウェブホストはお買い得に思えるかもしれませんが、トレードオフは通常、サイトの速度が遅く、トラフィックが多い時間帯に頻繁にダウンタイムが発生することです。
あなたのサイトを超高速にし、あなたのサイトがうまく機能することを確実にしたいのなら、あなたはまともなウェブホストに投資する必要があります。 本当にサイトを高速にしたい場合は、共有サーバー上にないホスティングパッケージを検討することをお勧めします。
彼女は、WPエンジンを決定する前に多数のホストをテストしました。これにより、Googleが推奨する200ミリ秒未満のサーバー応答時間に到達することができました。 同じことをするか、現在のウェブホスティングパッケージをより有能なプランにアップグレードすることを検討してください。
6.レンダリングをブロックするJavaScriptを排除します
特に、JavaScriptは、いくつかの強力なサードパーティツールとインタラクティブなページ要素を有効にします。 問題は、HTMLコードの解析も停止することです。
「レンダリングをブロックするJavaScriptを削除してください」というエラーメッセージが表示された場合は、ページの上の折り畳み部分の読み込みプロセスを一時停止しているJavaScriptコードが存在することを意味します。 特にサードパーティのスクリプトがこの問題の原因である可能性があります。 3つの方法で取り組みます。
- ロードプロセスに重要ではないスクリプトは、意図的に遅延させる必要があります—ページが完全にレンダリングされた後にフェッチして実行します。
- 非同期でロードされるスクリプトは、同期的にロードされるスクリプトよりも使用する必要があります。 同期スクリプトはページレンダリングプロセスを一時停止しますが、非同期スクリプトはブラウザが他の要素を同時にロードできるようにします。
- スクリプトをインライン化すること（小さな外部JavaScriptリソースをHTMLドキュメントに直接挿入すること）を検討して、ブラウザーが行う必要のある要求の数を減らします。
7.ブラウザのキャッシュを活用する
ユーザーのページが完全に読み込まれるまでに、サーバーとブラウザ間で複数のリクエストが発生する可能性があります。 時間に関する限り、それぞれが合計されます。
キャッシュを使用すると、ブラウザは、ヘッダー、ナビゲーション、ロゴなど、最近読み込まれた特定の要素を「記憶」することができます。ブラウザがキャッシュできる要素が多いほど、ユーザーが作成した瞬間に読み込む必要のある要素が少なくなります。リクエストし、最終的にはページの読み込みが速くなります。
Googleでは、最低1週間のキャッシュポリシーを推奨しています。ほとんど変更されない要素の場合は、1年が望ましいです。
8.画像を最適化する
ブログ投稿で、Googleのテスターは、画像がページ速度に与える脅威について特に警告しました。 「ファビコン、ロゴ、製品画像などのグラフィック要素は、ページの総重量の最大3分の2を簡単に構成できます」と彼らは言いました。
その場合、ページの読み込み時間、特にコンバージョン率への影響は甚大です。 調査によると、訪問者を変換したページには、変換しなかったページよりも38％少ない画像が含まれていました。
幸い、画像の最適化は簡単です。 PNGをJPEG画像ファイルに置き換えると、ページサイズと読み込み時間を簡単に節約できます。 GoogleのGuetzliやZopfliのような画像コンプレッサーもそうです。
クリックしてツイート
ただし、これらを使用する前に、ページに含めたすべての画像が本当に必要かどうかを自問してください。 それらは本当に付加価値があるのでしょうか、それともそれらなしでできるのでしょうか？ 答えが後者の場合は、データと時間を節約するためにそれらを完全に廃棄します。
Google PageSpeedInsightsで自分の立場を確認する
あなたのGooglePageSpeedInsightsのスコアは何ですか？ 推奨される85歳以上に達しましたか？
そのしきい値に達するには、クリック後のランディングページエクスペリエンスを最適化するためのガイドを参照することをお勧めします。
次に、ユーザーエクスペリエンスの向上と、クリック後のランディングページの改善を開始します。
今すぐInstapageEnterpriseデモにサインアップしてください。