Webサイトのレスポンスは検索順位のランキング要因
Googleは、Webサイトのレスポンス、ページの表示速度は、検索順位のランキング要因の１つとして公式に発表しています。
「ユーザーにとって価値のあるサイトを上位表示させる」を使命にしているGoogleにとって、これは至極当然の判断だと思います。
とはいえ、検索順位のランキング要因は沢山あり、現時点では、ページの表示速度がどの程度影響度があるか？重要なのか？は分かりません。
ページの表示速度の重要性はますます高くなる？
とは言え、これは私の個人的な感想ですが、今がどの程度の重要度かは分かりませんが、今後ますます重要度が高く成ると判断します。その理由は大きく２つあります。
１．ページの表示速度が速くて嬉しい人がほとんど
現在のSEOは、「コンテンツファースト」「コンテンツが王様」という状態です。
コンテンツが重要なのは、もちろんですが、コンテンツの評価は、見る人や目的により分かれます。絶対的な正解がないのがコンテンツです。
ページ表示速度は、どんな時でも、誰でも早い方が良いと思う人がほとんどだと思います。
２．Googleの表示速度改善への本気度が感じられる
以下に、３つの参考ソースを掲載しますが、「スピードアップデート」「AMPのWeb標準化」と言った最近のニュースや出来事からして、Googleの意気込みが感じられます。
Googleスピードアップデートに備えた速度改善にはPageSpeed Insightsが役立つ
GoogleはWordPressサイトのウェブページ表示速度の向上に本腰を上げて取り組む
PageSpeed InsightsのスコアとWebサイトのレスポンスを向上させる方法
それでは、実際にPageSpeed InsightsのスコアやWebサイトのレスポンスを向上させる為に、何をすればよいのか？という事になります。それをサーバー（インフラ、バックエンド）側とフロント側に分けてご紹介します。
サーバー（インフラ、バックエンド）側
１．使っているサーバーを良いものにする（性能を上げる）
レスポンス向上で一番の効果の高い方法は、なんだかんだ言って「良いサーバー」にするという事です。
どんなに細々とした対策をしても、サーバーの性能によるアドバンテージの方がかなり大きい場合があります。
具体的な対応例
「格安レンタルサーバー」から「高性能レンタルサーバー」、「共有サーバー」から「専用サーバー（クラウド）」へ引っ越しなど。
自社で運用している場合、サーバーの買い替え。
２．Webサーバーのソフトウェアの最適化
「Apache⇒Nginx」「PHP7.0以降」など、処理が高速なソフトウェアを利用
Nginxについての簡易説明
Apacheでは、ユーザーからのリクエストを順次処理するため、リクエストの待ちが発生する場合がありますが、nginxでは大量のリクエストを同時並行で処理が可能です。
具体的な対応例
対応しているレンタルサーバーへの引越し。もしくは、専用サーバー、クラウドの場合は、ソフトウェアの更新など。
３．通信プロトコルの最適化
「HTTP⇒HTTP/2」への切り替え
HTTP/2とは、「HTTPS」通信において表示速度を向上させる効果をもつ新しい通信プロトコル。複数のリクエストを並列処理する仕組みにより高速通信が可能。
具体的な対応例
レンタルサーバーの場合は、対応しているサーバー会社に乗り換え。専用サーバーやクラウドの場合は、ソフトウェアの更新など。
４．サーバーの通信環（境通信回線の容量やスピード）を上げる
Webサーバーを自社で管理している様な場合、自社内の通信環境を改善する事で、Webサイトのレスポンスは向上されます。
レンタルサーバーで、サーバーの性能を高いものにしても、そのサーバー会社の共有回線が細い場合、そのサーバーの性能は最大限活かせません。
具体的な対応例
共有サーバーの場合は、通信回線の優れているサーバー会社に乗り換え。専用回線の契約、クラウドの場合は、ネットワークのプランの変更など。
５．ブラウザのキャッシュを活用する
キャッシュは、サーバーから読み込んだWebページのデータを一時的に保持する機能です。
これにより、毎回サーバーからデータを読み込んでくる必要はなく、２度目の表示速度を向上させます。特に容量の大きい「画像」は、キャッシュの効果がかなり大きいと思います。
具体的な対応例
このキャッシュの設定を、「.htaccess」に記述して、サーバー上にアップロードする。
Nginxの場合、「.htaccess」は使えないので、nginx.confに記述など、別の対応が必要です。
６．圧縮を有効にして、サーバーからの送信される容量を削減する
HTML、CSS、JavaScriptファイルなどをgzipやdeflateという形式で圧縮して送信する事で、通信速度が上がり、Webサイトの表示速度向上にも影響があります。
具体的な対応例
圧縮の設定を、「.htaccess」に記述して、サーバー上にアップロードする。
※レンタルサーバーの場合、サーバー側が対応している必要があります。
Nginxの場合、「.htaccess」は使えないので、nginx.confに記述など、別の対応が必要です。
フロントエンド側
１．Webサイトの静的化
現在Webサイトは、WordPressなどのCMSも含め、PHPなどのプログラムでHTMLを生成する動的なサイトが主流ですが、HTMLとCSSのみで作成された静的なWebサイトの方がレスポンスは早いといえます。
更新頻度の高いWebサイトは、運用上、動的なサイトが向いていますが、あまり更新しないサイトは、HTMLとCSSで作成された静的なサイトで構築する事も検討した方が良いでしょう。
具体的な対応例
更新がほとんどないサイトは、静的サイトに置きかえる。
WordPressの場合、プラグイン「WP Static HTML Output」を使って静的サイトに置き換える事が可能。
２．画像サイズの最適化（圧縮）及び遅延読み込み
Webサイトのページ読み込みに時間が掛かかる一番の要因は、画像によるところが大きいと思います。
最近のデジカメは解像度、画素数も高いため、そのままオリジナルな画像ファイルを掲載すると、かなり重たくなります。
画像のクオリティを一定以上に保ちつつ、画像サイズを最適化しましょう。
具体的な対応例
画像編集ソフトやプラグイン（EWWW Image Optimizer）などで、画像サイズを最適化。
Lazy Loadなどのjquery を使った画像遅延読み込みプラグインの実装
３．レンダリングをブロックしている JavaScript/CSS を排除、遅延読み込み
レンダリングとは、要求されたコンテンツをブラウザの画面に表示することを言い、HTMLソースコードの上から順番に読み込んでいきます。
そんな時、処理の重たい「JavaScript/CSS」などがあると、そこでレンダリングがストップしてしまい、ページの表示速度が遅くなってしまいます。
これを解消する事で、ページの表示速度が遅くなる事を解消できます。
具体的な対応例
ページの最初に読み込む必要のない（例．デザインに影響のない）「JavaScript」をフッターエリア（＜/body＞の前）に持ってくる。
Web-fontなどの重たいCSSファイルを非同期で読み込ませる。
asyncを付けてJavascriptを非同期で読み込ませる。
４．Javascript、CSSファイルの最適化（圧縮）
画像ファイルと同じように、javascriptやCSSファイルもサイズが大きくなると読み込みに時間が掛かります。
その為、処理の内容は変えずに、書き方を工夫する事で、ファイルサイズを圧縮する事が出来ます。
具体的な対応例
「Online JavaScript/CSS/HTML Compressor」などの圧縮サービスを使って、ファイルサイズを小さくする
５．AMPの導入
AMP（Accelerated Mobile Pages）の略で、Googleが推し進めているモバイルページの高速化プロジェクトです。
まだ、発展途上な部分もあり、現在の所、公式には「SEO」のランキングには影響しないといっているが、今後、影響してくる可能性もある。
具体的な対応例
WordPressの場合は、AMP化のプラグインンを使用するか、ソースコードをAMP対応のソースコードに変換する。
PageSpeed Insightsのスコアと実際のレスポンスの乖離
PageSpeed Insightsの改良もあり、昔よりも精度は上がっているかもしれませんが、実際のWebサイトのレスポンスとスコアには、乖離があったように思います。
もちろん、Webサイトのレスポンスは閲覧する環境（PCの性能、通信環境、ブラウザ、キャッシュなど）に大きく左右されます。
それでも、環境を出来る限り同じにして、体感として明らかに遅いページとあまりスコアが変わらない事もありました。
以上「SEOにつなげるGoogle PageSpeed Insightsのスコアとレスポンス向上を考える」のご紹介でした。