【SEO】Amazon CloudFront 設定 方法 AWS CDN で UX 改善!表示速度改善!!

Amazon CloudFront は、アマゾン が提供する、CDNのサービスで、webサイトの表示速度を改善してくれるシステムです。

SEO上でも、ユーザー目線でも、重要視されるページの表示速度。Amazon CloudFrontを導入すると、表示に時間のかかるホームページも、あれ!というほど、速く表示されるようになります。

特に、スマートフォンサイトの場合、重いサイトは敬遠されますし、そもそも、ブランドイメージを壊しかねません。

この記事では、Amazon CloudFront とは 何かを解説しつつ、そもそも、CDNとは?の解説をして、Amazon CloudFront 設定方法 を ご紹介していきます。

Amazon CloudFront とは

Amazon CloudFront 公式 ホームページ
https://aws.amazon.com/jp/cloudfront/

Amazon CloudFront とは、ホームページの表示速度を高速化させることができるサービスで、アマゾン クラウドフロントと呼びます。

Amazon CloudFrontは、CDN(コンテンツデリバリーネットワーク)の1つのサービスです。Amazon CloudFrontを簡単に言えば、ホームページの動画、画像などを、キャッシュ化して、それを、利用者のブラウザに配信する仕組みで、キャッシュ化するがゆえに、わざわざ、オリジナルのホームページを読み込むよりも速く表示できる!という仕組みになっています。

Amazon CloudFront は、多くの企業ですでに活用されています。無料枠もあるため、意外と、課金されないことから、中小企業でも利用されています。

Amazon CloudFront は、エッジロケーションと呼ばれる、世界のネットワークを経由して、webサイトの画像、動画などのコンテンツをユーザーに届ける仕組みで、国内だけでなく、海外からのアクセスの多いページにも対応しています。

Amazon CloudFrontがあれば、ファイルの最初のバイトがロードされるまでの時間(レイテンシー)を、最小限に抑えることもできるようになるため、Googleなどからの評価も高まりやすくなります。

Googleが提供しているページスピードインサイトでも、ページの表示速度について、言及している項目がありますが、Amazon CloudFrontが導入されていると、ここの項目の評価を受けやすくなります。結果、Googleの検索ランキングで、上位表示されやすくなります。これは、集客につながるわけですから、企業にとって、大きなメリットですよね!!

また、webページの表示速度があがれば、スマートフォンでの閲覧、アクションがしやすくなるため、ECサイトであれば、購入機会も増加します!だいたい、セールスがうまくいっているECサイトは、スマホ経由の売上が大きいわけですから、表示速度を速くすることは、まじめに取り組むべき課題なのです!

以下は、AWS(アマゾンウェブサービス)が、公式に出している Amazon CloudFront についての解説動画です。Youtubeに掲載されています。

 

Amazon CloudFront について、学習できるビデオになっています。日本語字幕がしっかりとついているので、わかりやすいですよ!

そもそも、CDNとは

Amazon CloudFrontを理解するうえで、重要なCDNについて、簡単に解説します。

CDNとは、コンテンツデリバリーネットワーク(Content Delivery Network)の略称で、実は、2005年くらいから、日本でも、普及が始まった技術、仕組みです。

CDNがなぜ、表示速度が速くなるのかというと、配布先に近いネットワークに、コンテンツを配布するサーバを接続し、あらかじ、そのサーバに、コンテンツのコピーを置いておくことで、一番近くにあるネットワークから情報を配信するからです。

例でいうと、

日本からアメリカのサイトを見るとき

アメリカのサーバまで、物理的に遠いですよね。

でも、日本のサーバに、アメリカのサイトのコンテンツがあれば、

速くアクセスできますよね!

こういうことを実現できるサービスがCDNなんですね。

PCでも、スマートフォンでも、ブラウザの表示速度が速くなります。さらに、CDNのメリットとしては、本体のサーバへのアクセス数を減らすことができるようになるため、サーバが落ちにくくなります。

つまり、本体のサーバが、アクセス過多、システム負荷などによって、サービス停止しにくくなり、サービスの障害耐性をグッと高められるわけです。

過去に作ったCDN関連の詳細説明の記事です!

ホームページ 高速化!CDN シーディーエヌ 簡単 解説 & 効果の体験談
https://saras-wati.net/web-make/cdn-knowhow1907/

そんなCDNの1つのサービスが、Amazon CloudFront になります。

Amazon CloudFront 導入メリット

Amazon CloudFrontの導入による最大のメリットは、表示速度が速くなることです。これによって、Google、ユーザー、両方にうれしい状態を作れます。

Googleは、検索エンジンの評価の1つの指標として、ページの読み込み速度を活用しています。

ページの読み込み速度をモバイル検索のランキング要素に使用します

引用 Google 検索セントラル ブログ 2018 年 1 月 17 日
https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search?hl=ja

これによって、表示速度をあげることは、Googleの検索結果への上位表示やキーワードごとのインデックス率が高められ、結果、アクセス数が増える可能性が高くなります。

Googleの評価が上がれば、こういったメリットがでてきますし、UX面でも、使い勝手が向上するため、ユーザーの利用も促進できます。

これが、Amazon CloudFront 導入 メリットです。

Amazon CloudFront 設定方法

Amazon CloudFront 設定方法をかんたんな方法を解説していきます。実際のAmazon CloudFront 導入については、システム開発会社など、プロに任せた方が、安心は安心ですけどね!

この記事では、

ドメインすべてにCloudFrontを適用

する方法をご紹介します。

Amazon CloudFront は、ドメインすべてにも適用できます。ただ、動的プログラムがキャッシュされてしまったり、最新コンテンツがキャッシュ切れまで表示されない、などの弊害を出すこともあります。それゆえ、システム開発会社など、プロに任せた方が、安心と解説しています。

なお、Amazon CloudFrontでは、リソースだけCloudFrontを適用することも可能ですが、プログラムソースの書き換えが発生するため、作業が結構、大変です。そこで、今回は、ドメインすべてにCloudFrontを適用する方法で解説します。

Amazon CloudFront 設定 手順

  • AWSアカウント 作成(無料です)
  • AWSアカウントにログイン
  • CloudFrontのサービスメニューに移動
  • Create Distribution ボタン をクリック
  • Get Started をクリック
  • オリジナルドメインネームに別名ドメインを入力
  • DNSレコードのCNAMEに「XXXXXXX.cloudfront.net」を設定

なんと、これで、基本的には、Amazon CloudFront 設定 は完了です。

1点、補足で、オリジナルドメインネームに別名ドメインを入力するときの別名ドメインですが、これは、元サイトにリダイレクトされる、別のドメインを入れるということをさしています。

たとえば、

shop.aaa.com

が、元のサイトなら、

cdn.aaa.com で、shop.aaa.com に リダイレクトされるように、事前に設定しておきましょう。

別名ドメインは、cdn.aaa.com になります。

Amazon CloudFront 設定方法 解説動画

文章だけだと、イメージがつかない!という方向けに、Amazon CloudFront 設定方法 を解説した、ビデオ、動画をご紹介します。

最強のCDN! Amazon CloudFront の設定方法について解説します

 

参考にしてくださいませ!!

Amazon CloudFront クチコミ 情報

Amazon CloudFront クチコミ を、twitterで、リサーチしてみました。あえて、日本語で、投稿されているAmazon CloudFrontのクチコミ情報を、掲載しております!

Amazon CloudFront クチコミ 結構多いです。。

ここで記載したツイートは一部で、おそらく、皆さんが思っているよりもいっぱいあります。それだけ、使われているサービスなんだと思いますよ!

まとめ Amazon CloudFront 設定 で ホームページ 速度 を 爆速に!?

いかがでしたでしょうか、Amazon CloudFront 設定。

  • Amazon CloudFront とは、何か?
  • そもそも、CDNとは。
  • Amazon CloudFront 導入メリットって、何?SEO?

といったところを、ベースに解説しました。

そして、Amazon CloudFront 設定方法 の簡単解説しました。手順は、すこし、細かいところは飛ばしていますが、イメージはつくと思います。

詳細は、ご紹介した動画などで、Amazon CloudFront 設定方法を、ご参照ください。

せっかくなので、Amazon CloudFront クチコミ についても掲載してみましたので、参考にしてみてくださいね。

【Youtube広告】動画アクション キャンペーン とは TrueViewアクション広告 との違い

AWS 関連記事

【AWS】Docker コンテナ ECS入門 大量 webアプリケーション 環境 を 簡単構築
https://saras-wati.net/web-make/system/aws-ecs-first/

【VPS】ワードプレス 簡単導入 Amazon Lightsail セキュリティ 高く おすすめ
https://saras-wati.net/web-make/amazon-lightsail/

google クラウド を学ぶ。AWSとの違いは? クラウドサービス 比較
https://saras-wati.net/web-make/google-cloud-aws202006/

【AWS】Docker コンテナ ECS入門 大量 webアプリケーション 環境 を 簡単構築
https://saras-wati.net/web-make/system/aws-ecs-first/

AWS Transcribe とは 使い方 議事録 日本語 精度 どう? 注意点 料金 解説
https://saras-wati.net/news/worksbace/aws-transcribe-minutes-howto/

【SEO】Amazon CloudFront 設定 方法 AWS CDN で UX 改善!表示速度改善!!
https://saras-wati.net/knowhow/amazon-cloudfront-setting-howto/