Webサイト高速化の必要性

Webサイトの高速化はなぜ必要なのでしょうか?

1.イラチ対策:せっかちな方はページの表示で2秒以上待つとイライラし始めるそうです。w
2.Googleのクローラー対策:ページの表示に時間がかかると、クローラーから嫌われ、サイトへの巡回頻度が減ってしまいます。=サイトが評価されにくくなる!!!

さらに、ある統計データによりますと。。。

ページ表示時間が1秒のサイトと3秒のサイトを比較すると、3秒のサイトは1秒のサイトに比べ、
ページビューが22%低下、コンバージョン率は38%低下、直帰率は50%上昇してしまうというデータがあります

もう全然良いことがないですね。。。

Webサイトの高速化に向けて抑えて置くポイント

では、Webサイトの高速化を実現するためのポイントを考えてみます。
Webサイトの表示速度改善において大きく2つのポイントは、フロントエンドとバックエンドです。

フロントエンド

フロントエンドはWebブラウザ側(クライアント側)の事を指します。フロントエンドではHTML、CSS、javascriptなどの改善によりWebサイト表示の高速化が図れます。
フロントエンド側の表示速度改善は比較的簡単なほうに属するため、良く改善が行われていますね。

バックエンド

バックエンドはWebサーバー側のことを指します。
バックエンドではサーバー設定やデータベースなどインフラの知識が必要となるため、なかなか手を出しづらいところですが、その分効果は大きなものになります。

と、ここまで大きく2つの改善策を知って頂きましたが、今回対策を打つのはぁ。。。

どちらもしません!!!(´・ω・`)

えっ?なに言ってんのあなた?(-_-;)

大丈夫です!ちゃんと爆速にしますよ!

そう。CloudFrontでね。

そもそもCloudFrontってなに?

それでは、AmazonWebServices(以降AWS)が提供するCloudFrontについて少し学んでみましょう!

CloudFrontとはAWSが提供するCDN(Contents Delivery Network)サービスです。
世界中にあるエッジサーバと呼ばれるキャッシュサーバが提供元サーバ(オリジンサーバといいます)の持つコンテンツをキャッシュすることで、提供元サーバの負荷を軽減しつつ高速なレスポンスを返すためのサービスです。

Cloudfrontを一言で表すと「キャッシュサーバ」です。
続いてキャッシュサーバというのは何かと言うと、一度アクセスしたコンテンツのデータを一時的に保管し、同じコンテンツにアクセスした際はコンテンツデータを再利用して配信するためのサーバーです。

通常WEBへのアクセスは提供元サーバに対して行われますが、その際のサーバのお仕事は以下のようなものになります。

①リクエスト受付(提供元サーバ) → ②DBに接続する必要があればDBに接続 → ③情報を集めて応答 → ④レスポンス(Webページ表示)

どうでしょう?イメージできましたでしょうか?

キャッシュなしイメージ

ホームページが表示されるまで、たくさんお仕事してるんですね!

ということは?
アクセスが多くなればなるほどサーバが高負荷になり、結果表示ができない、表示まで時間がかかる、最悪の場合サーバダウンという事態になります。

そこでキャッシュサーバの出番です!
キャッシュサーバ経由でのお仕事の違いを見てみましょう!

まず最初のアクセスは、通常通りですね。むしろ一段増えてます。(キャッシュサーバですね)

①リクエスト受付(キャッシュサーバ) → ②リクエスト受付(提供元サーバ) → ③DBに接続する必要があればDBに接続 → ④情報を集めて表示 → ⑤レスポンス(Webページ表示)

続いて2回目に同じコンテンツにアクセスすると。。。

①リクエスト受付(キャッシュサーバ) → ②レスポンス(Webページ表示)

なんと!②、③、④がスキップされています!
そうです!キャッシュサーバが初回アクセス時に、コンテンツとなる②~③のデータを保持しており、そのデータを配信(レスポンス)しているということですね!(^^)

イメージにするとこんな感じになります!

キャッシュサーバイメージ

だいぶイメージできましたか?

それでは、いよいよCloudFrontWordPressを繋いで高速Webサイトに変身させてしまいますよ!!!

CloudFrontの基本設定

いよいよCloudFrontの基本設定(設置)に入りたいと思いましたが。。。
いつものごとく時間切れとなりました。。。(意図的ではありませんよ!w)

次回Vol2にご期待下さい!m(__)m