Google PageSpeed Insights スコアを改善する方法
公開: 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 は、Web ページの速度をすばやく簡単にテストできるツールです。
URL を入力して [分析] をクリックすると、2 つのパラメーターに基づいてその Web ページの速度を低下させている原因の詳細なレポートと、修正方法に関する推奨事項がすぐに表示されます。
- パラメーター 1:スクロールせずに見える位置までの時間。 これは、ユーザーが新しいページをリクエストした後、ページがスクロールせずに見える範囲のコンテンツを表示するのにかかる時間です。
- パラメータ 2:ページが完全に読み込まれるまでの時間。 これは、ユーザーがページをリクエストした後、ブラウザーがページを完全にレンダリングするのにかかる時間です。
Googleによると、次のように機能します。
Page Speed Insights は、モバイル デバイスとデスクトップ デバイスのページのパフォーマンスを測定します。 1 回はモバイル ユーザー エージェントで、もう 1 回はデスクトップ ユーザー エージェントで、URL を 2 回フェッチします。
PageSpeed Insights スコアの範囲は 0 ～ 100 ポイントです。 スコアが高いほど優れており、85 以上のスコアはページのパフォーマンスが良好であることを示します。
しかし、人々がページが瞬時に読み込まれることを期待している場合、「まあ」で十分でしょうか? 毎秒が重要な場合ではありません。 可能な限り高いスコアを獲得するには、次のことを行う必要があります…
高い Google PageSpeed Insights スコアを達成する
レポートに赤と黄色がたくさん表示される場合は、ページに明らかな読み込みの問題があるためです。
これらの問題はツールによって通知されますが、エラー メッセージがわかりにくい場合があります。 表示される内容と修正方法は次のとおりです。
1.クリック後のランディングページのリダイレクトを避ける
ページがレスポンシブに設計されていない場合、さまざまなデバイス用に最適化されたページへの多数のリダイレクトが発生する可能性があります。 Google によると、いくつかの一般的なリダイレクト パターン:
- example.com はレスポンシブ Web デザインを使用しており、リダイレクトは必要ありません – 高速で最適です!
- 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 と Closure Compiler。
もちろん、もう 1 つのオプションは、Google の AMP と AMP for ads フレームワークを利用することです。 どちらのプログラムでも、開発者は HTML、CSS、および JavaScript の機能を取り除いたバージョンでページを作成できます。 その結果、ほんの一瞬でページと広告が読み込まれます。
4. スクロールせずに見えるコンテンツを優先する
奇妙に思えるかもしれませんが、ページの読み込み時間は、ページの読み込み速度だけではありません。 それはまた、「知覚されるパフォーマンス」についてでもあります。 KeyCDN の Brian Jackson は次のように説明しています。
知覚されるパフォーマンスは、単純に「Web サイトがロードされたときの速度」と表現できます。 これは、Web サイトの実際の読み込み速度とは若干異なる場合があります。 知覚されるパフォーマンスはすべてユーザーの視点からのものであり、Web サイトの速度テスト ツールからのものではありません。
体感パフォーマンスを向上させるには、ユーザーにとって重要なコンテンツの読み込みを優先することが重要です。 たとえば、スクロールせずに見えるページのテキストは、サードパーティのウィジェットよりも先にロードする必要があります。
ただし、コードが正しく構造化されていないと、結果として、ユーザーが認識できるパフォーマンスが低下する可能性があります。 ページの最後に読み込まれる要素が、ユーザーが表示するためにクリックした要素である場合、ページはより長く読み込まれるように感じられます。
5. サーバーの応答時間を短縮する
サーバーの応答時間 — サーバーがユーザーのためにページのコンテンツの読み込みを開始するのにかかる時間 — Google によると、さまざまな要因によって遅くなる可能性があります。
- データベース クエリ
- 遅いルーティング
- フレームワーク
- ライブラリ
- リソースの CPU 枯渇
- メモリ不足
Raelene Morey の Web サイトでは、貧弱なホスティングが主なスピード キラーでした。 彼女は読者に次のように警告します。
無制限のページ ビューと無制限のスペースを備えた月額 3.95 ドルのプランを提供する安価な Web ホストはお買い得に思えるかもしれませんが、通常、サイトの速度が遅くなり、トラフィックが多い期間に頻繁にダウンタイムが発生します。
サイトを非常に高速にし、サイトのパフォーマンスを確実に向上させたい場合は、まともなWebホストに投資する必要があります. サイトを本当に高速にしたい場合は、共有サーバー上にないホスティング パッケージを検討することをお勧めします。
彼女は WP エンジンを決定する前に多数のホストをテストしました。これにより、Google が推奨する 200 ミリ秒未満のサーバー応答時間を達成することができました。 同じことを行うか、現在の Web ホスティング パッケージをより有能なプランにアップグレードすることを検討してください。
6. レンダリングをブロックする JavaScript を削除する
とりわけ、JavaScript はいくつかの強力なサードパーティ ツールとインタラクティブなページ要素を有効にします。 問題は、HTML コードの解析も停止することです。
「レンダリングをブロックする JavaScript を削除してください」というエラー メッセージが表示された場合は、ページのスクロールせずに見える部分の読み込みプロセスを一時停止している JavaScript コードが存在することを意味します。 特に、サードパーティのスクリプトがこの問題の原因である可能性があります。 次の 3 つの方法で対処します。
- ロード プロセスにとって重要ではないスクリプトは、意図的に遅らせる必要があります。つまり、ページが完全にレンダリングされた後にフェッチして実行します。
- 非同期的にロードするスクリプトは、同期的にロードするスクリプトよりも使用する必要があります。 同期スクリプトはページ レンダリング プロセスを一時停止しますが、非同期スクリプトはブラウザが他の要素を同時にロードできるようにします。
- スクリプトをインライン化する (小さな外部 JavaScript リソースを HTML ドキュメントに直接挿入する) ことを検討して、ブラウザーが行わなければならない要求の数を減らします。
7. ブラウザのキャッシュを活用する
ページがユーザーに対して完全に読み込まれる前に、サーバーとブラウザーの間で複数の要求が必要になる場合があります。 時間に関する限り、それぞれが加算されます。
キャッシュを使用すると、ブラウザーは、最近読み込まれた特定の要素 (ヘッダー、ナビゲーション、ロゴなど) をある意味で「記憶」できます。ブラウザーがキャッシュできる要素が多いほど、ユーザーが最終的に、ページの読み込みが速くなります。
Google では、最低 1 週間のキャッシュ ポリシーを推奨しています。ほとんど変更されていない要素については、1 年が望ましいです。
8. 画像を最適化する
ブログ投稿で、Google のテスターは、画像がページ速度にもたらす脅威について具体的に警告しました。 「ファビコン、ロゴ、製品画像などのグラフィック要素は、ページの総重量の最大 3 分の 2 を簡単に占めることができます」と彼らは言いました。
その場合、ページの読み込み時間、特にコンバージョン率への影響は非常に大きくなります。 調査によると、訪問者を変換したページは、変換しなかったページよりも 38% 少ない画像を含んでいました。
幸いなことに、画像の最適化は簡単です。 PNG を JPEG 画像ファイルに置き換えると、ページ サイズと読み込み時間を簡単に節約できます。 Google の Guetzli や Zopfli などのイメージ コンプレッサーも同様です。
クリックしてツイート
ただし、それらを使用する前に、ページに含めたすべての画像が本当に必要かどうかを自問してください。 それらは本当に付加価値をもたらしているのでしょうか、それともなくてもいいのでしょうか? 答えが後者の場合は、データと時間を節約するためにそれらを完全に破棄します。
Google PageSpeed Insights で自分の立ち位置を確認する
あなたの Google PageSpeed Insights スコアは? 推奨される 85+ に達しましたか?
そのしきい値に到達するには、クリック後のランディング ページ エクスペリエンスを最適化するためのガイドを参照することをお勧めします。
次に、ユーザー エクスペリエンスの向上とクリック後のランディング ページの改善を開始します。
Instapage Enterprise のデモに今すぐサインアップしてください。