ページ速度の SEO：2 秒未満でサイトを読み込む

ページの速度は、SEO の順位要因であり、ビジネスの指標でもあります。速いページは Google で上位に表示されます。速いページは、より多くの訪問者を顧客に変えもします。調査によると、ページの読み込みが 1 秒遅れると、コンバージョンが 7% 減ります。EC サイトでは、遅いページは、失われた売上で毎日何千ドルもの損失を生みます。メディアでは、遅いページはページビューの減少と広告収入の低下を意味します。すべてのサイトにとって、ページの速度は重要です。

速い読み込みの基準は 2 秒未満です。2 秒以内に読み込まれるページは、ユーザーに速いと感じられます。3〜5 秒かかるページは遅く感じられます。5 秒を超えるページは、しばしば離脱されます。目標は単純です。読み込み時間を 2 秒未満にし、次に 1.5 秒未満にし、さらに最適化を続けます。100 ミリ秒の改善にも意味があります。

ページの読み込みの指標を理解する

ページの読み込み時間は、いくつかの要素からなります。Time to First Byte（TTFB）は、サーバーが応答するまでの時間です。Largest Contentful Paint（LCP）は、メインのコンテンツが見えるようになる時点です。完全な読み込みは、すべてのリソースのダウンロードが完了する時点です。これらの指標は同じではなく、それぞれの最適化には異なる手法が必要です。

TTFB は、サーバーの応答時間です。TTFB が 600 ミリ秒を超えるなら、サーバーが遅いということです。よくある原因は、非効率なバックエンドのコード、データベースのクエリ、サーバーの過負荷です。バックエンドのコードの最適化、ホスティングのアップグレード、キャッシュの有効化、コンテンツ配信ネットワーク（CDN）の利用で、TTFB を改善しましょう。

Google のパフォーマンスの学習パスは、各指標を詳しく説明しています。LCP やそのほかの Core Web Vitals も深く扱われています。これらの指標を理解することは、ページの速度を効果的に最適化するための前提です。

画像の最適化：単独で最大の効果

画像は、通常、ページの重さの 50〜80% を占めます。最適化されていない画像は、サイトを遅くする最も手っ取り早い方法です。品質を損なわずにファイルサイズを減らして、画像を最適化しましょう。3 つの手法があります。

圧縮：画像の圧縮ツールを使って、ファイルサイズを減らします。JPEG の画像は 10〜40 倍、PNG の画像は 2〜5 倍に圧縮できます。TinyPNG、ImageOptim などのツールや、CMS のプラグインを使って自動で圧縮します。サイトにアップロードする前に圧縮しましょう。

最新の形式：JPEG や PNG の代わりに WebP を使います。WebP は、品質を保ちながら、JPEG より 25〜35% 良く圧縮します。ブラウザーは今ではネイティブで WebP をサポートしています。古いブラウザー向けには、`` 要素を使って、JPEG をフォールバックとして使います。

遅延読み込み：ユーザーがスクロールして近づいたときにだけ、画像を読み込みます。ファーストビューより下の画像には、ネイティブの HTML の `loading="lazy"` 属性を使います。ユーザーが一度も見ないかもしれない画像の読み込みを遅らせるので、最初のページの読み込みが大幅に改善されます。

Google の最適化ガイドは、具体的な画像の最適化の手法を提供しています。適切に最適化された画像だけで、ページの読み込み時間が 30〜50% 短縮されることがよくあります。

CSS と JavaScript の最適化

レンダリングをブロックする CSS と JavaScript は、ページの読み込みを遅くします。レンダリングをブロックするリソースは、ダウンロードされて処理されるまで、ブラウザーがページをレンダリングするのを妨げます。重要なコンテンツが先にレンダリングされるよう、重要でない CSS と JavaScript は遅延させましょう。

JavaScript を最小限にして遅延させる：大きな JavaScript ファイルは、レンダリングをブロックします。JavaScript を小さなかたまりに分割し、重要でないスクリプトの読み込みを遅延させましょう。`