[2020年度版]SEO対策の為にページスピードを上げる方法のまとめ

2006年、アマゾンは、ウェブサイトを100ミリ秒高速化するごとに、1%の収益増加が見られると報告（Amazon Found Every 100ms of Latency Cost them 1% in Sales）しました。
グーグルは、ウェブを改善するために、検索結果をどのようにランク付けするかについて、ページの速度が考慮されていると発表しています。
ホームページの表示速度を上げる事は重要なSEO対策のひとつとなっています。
そんなページの表示速度を上げる為の対策をまとめました。

ページスピードとは？

ページスピードは「サイトスピード」と混同されがちですが、実際にはサイトのページビューのサンプルのページスピードのことです。

ページスピードは、「ページロード時間特定のページのコンテンツが完全に表示されるまでにかかる時間）」（か「タイム・トゥ・ファーストバイト（ブラウザがウェブサーバーから情報の最初のバイトを受け取るまでにかかる時間）」のどちらかで表現することができます。

GoogleのPageSpeed Insightsでページの速度を評価することができます。

PageSpeed Insights Speed Scoreは、CrUX（Chrome User Experience Report）のデータを組み込んでおり、2つの重要な速度指標をレポートしています。

First Contentful Paint（FCP）とDOMContentLoaded（DCL）です。

First Contentful Paint（FCP）

First Contentful Paint (FCP) は、Lighthouse と PageSpeed Insights レポートのパフォーマンスセクションで追跡される 6つのメトリクスのうちの 1 つです。

それぞれの指標は、ページの読み込み速度のいくつかの側面を捉えています。

FCP は、ユーザーがページに移動してからブラウザが DOM コンテンツの最初の部分をレンダリングするまでの時間を測定します。

ページ上の画像、白ではない <canvas> 要素、および SVG は DOM コンテンツとみなされます。

DOM コンテンツとは

Document Object Model (DOM) は、XML や HTML 文書を、各ノードが文書の一部を表すオブジェクトであるツリー構造として扱う、クロスプラットフォームで言語に依存しないインターフェースです。

DOMContentLoaded（DCL）

DOMContentLoaded は、画像やスタイルシートの読み込みが終わるのを待たずに DOM コンテンツが読み込まれたときに発生します。

SEOベストプラクティス

Googleは、サイトの速度（そしてその結果、ページの速度）が、そのアルゴリズムがページをランク付けするために使用するシグナルの1つであることを示しています。

調査によると、Googleはページスピードを考慮する際に、特にファーストバイトまでの時間を測定している可能性があることを示しています。

さらに、ページスピードが遅いということは、検索エンジンが割り当てられたクロール予算を使ってクロールできるページ数が少ないことを意味し、これはインデックスにマイナスの影響を与える可能性があります。

ページスピードはユーザーエクスペリエンスにとって重要

ロード時間が長いページは、バウンス率が高く、平均ページ滞在時間が短くなる傾向があります。

ロード時間が長いとコンバージョンにも悪影響を及ぼすことがわかっています。

圧縮を有効にする

150バイト以上のCSS、HTML、JavaScriptファイルのサイズを小さくするには、ファイル圧縮用のソフトウェアアプリケーションであるGzipを使用する。

画像ファイルにはGzipを使用しない代わりに、PhotoshopやWordPressのプラグイン（拡張機能）などのプログラムで圧縮をする。

CSS、JavaScript、および HTML を最小化する

コードの最適化（スペースやカンマなどの不要な文字の削除を含む）を行うことで、ページの速度を飛躍的に向上させることができます。

また、コードコメントや書式設定、使われていないコードも削除しましょう。

GoogleはCSSNanoやUglifyJSの使用を推奨しています。

リダイレクトを減らす

ページが別のページにリダイレクトするたびに、訪問者はHTTPリクエストとレスポンスのサイクルが完了するまでの待ち時間にさらに直面します。
例えば、モバイルリダイレクトのパターンが以下のようになっているとします。

“○○○○.com →  www.○○○○.com → m.○○○○.com → m.○○○○.com → m.○○○○/home” のようになっている場合、これらの 2 つのリダイレクトが追加されるたびに、ページの読み込みが遅くなります。

レンダーブロッキングJavaScriptの削除

ブラウザはページをレンダリングする前に HTML を解析して DOM ツリーを構築しなければなりません。
このプロセスの途中でスクリプトに遭遇した場合、ブラウザはスクリプトを停止して実行しなければなりません。

Google は、JavaScript のブロックを避けたり、最小限にしたりすることを提案しています。

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

ブラウザは多くの情報（スタイルシート、画像、JavaScriptファイルなど）をキャッシュしているので、訪問者があなたのサイトに戻ってきた時に、ブラウザはページ全体を再読み込みする必要がありません。

YSlowのようなツールを使ってキャッシュに有効期限が設定されているかどうかを確認しましょう。

情報をどのくらいの期間キャッシュさせたいかを “expires “ヘッダーに設定します。

多くの場合、サイトのデザインが頻繁に変更されない限り、1年が妥当な期間である。Googleはここにキャッシュの活用についての詳細な情報を持っています。

サーバーのレスポンスタイムを改善する

サーバーのレスポンスタイムは、受信するトラフィックの量、各ページが使用するリソース、サーバーが使用するソフトウェア、および使用するホスティングソリューションによって影響を受けます。

サーバーのレスポンスタイムを改善するには、遅いデータベースクエリ、遅いルーティング、または十分なメモリの不足などのパフォーマンスのボトルネックを探し、それらを修正してください。

最適なサーバー応答時間は200ms以下です。
ファーストバイトまでの時間を最適化する必要があります。

サーバーとパソコンは理能力、安定性、信頼性の面から名前は違いますが構成はCPU、メモリ、HDDなどパソコンと同じです。
サーバーを選ぶときもパソコンと同じでスペック（性能）が重要となります。

サーバーの応答時間、読み込み速度、読み込み速度、およびアップタイム等の数値が良いサーバーを選ぶ事が重要です。

コンテンツ配信ネットワークを利用する

コンテンツ配信ネットワーク（CDN）は、コンテンツ配信ネットワークとも呼ばれ、コンテンツ配信の負荷を分散するために使用されるサーバーのネットワークです。

基本的には、サイトのコピーが地理的に異なる複数のデータセンターに保存されるため、ユーザーはより速く、より信頼性の高いサイトへのアクセスが可能になります。

画像の最適化

画像のサイズが必要以上に大きくならないこと、ファイル形式が適切であること（一般的に16色以下のグラフィックにはPNG、写真にはJPEGが適しています、最近では圧縮率の高いWebP等に対応するブラウザも増えています）、ウェブ用に圧縮されていることを確認してください。

CSSスプライトを使用して、ボタンやアイコンなどサイトで頻繁に使用する画像のテンプレートを作成します。
CSSスプライトは画像を一つの大きな画像にまとめて一度に読み込み（つまりHTTPリクエストが少なくて済む）、表示したい部分だけを表示します。

つまり、複数の画像が読み込まれるのをユーザーに待たせることなく、読み込み時間を短縮することができます。

WordPress等のCMSで無用なプラグインを削除する

WordPressには50,000以上のプラグインがあります。
使用していないプラグインや必要の無いプラグインをインストールしすぎてしまっていませんか？

多くのWordPressプラグインはデータベースへの負荷を増加させてしまいます。
WordPress のページがユーザーからリクエストされるたびに、情報を得るためにデータベースをチェックします。
これらのデータベースクエリの処理には時間とリソースがかかります。

プラグインが増えると、データベースはより多くのクエリを処理するようになります。
データベースに大きな負担をかけるだけでなく、余分なプラグインはデータベースを肥大化させます。これは効率に影響を与え、結果的にロード時間を増加させます。

また、使われていないままのプラグインは、WordPressを更新する際におろそかにされてしまうことがよくあります。
時代遅れのプラグインは、セキュリティを著しく危険にさらします。
ホームページのページスピードを向上させるにはどうすればよいか悩んだときは、使われていないプラグインをすべて削除することから始めるのがよいでしょう。