素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日:

【パフォーマンスアップを狙え】CloudFront+S3で配信している静的サイトをgzip形式で配信して高速化する方法【SEO対策】

「Abel ツ Channel」開設!٩(ツ)و

この度、YouTubeチャンネルを開設しました!

ブログと並行してのんびりゲーム実況やら色々な動画を投稿していこうと思うので、よろしければ、
ポチィ〜!
して頂けるとこれ幸いです!٩(ツ)و

スポンサーリンク

336×280




CloudFrontはgzip配信可能

うわ・・私のサイト遅すぎ・・・?

皆さんはCloudFront使っていますか?

当ブログはWorpress+StaticPress+CloudFront+S3を組み合わせて、完全静的サイトとして運用しています。

PHP処理やDBアクセスが無いので、

うわ・・私のサイト遅すぎ・・・?

という心配をする必要も無いくらい、スピーディーな表示を実現出来るので満足しています♪

Accept-Encodingで高速化

そして先日ネットサーフィンをしていたところ、さらにサイトのパフォーマンスを向上するためのテクニックを発見しました!

それは、gzip配信を行うという事です!

gzipについての説明は割愛しますが、簡単にいうとHTMLgzip形式で圧縮したものを配信する事でデータ量が減りよりパフォーマンスが早くなるという技術です。

CloudFrontでgzip配信に変更するのはとても簡単だという事だったので、実際にやってみました♪

画像ファイルは圧縮されないので注意

gzip配信によるメリットはテキストコンテンツの圧縮となっており、画像ファイル等は対象に含まれずに今まで通りの配信になるので軽くなるといった事はないのでご注意ください!

手順

作業前の確認

まず、変更する前はリクエストを投げるとこのような形式でレスポンスが帰って来ました。

CloudFrontのCompress Objects Automaticallyを変更

変更方法はとても簡単です。

AWSのマネジメントコンソールにログインし、CloudFrontを開いたら対象のDistributionを選択してBehaviorsタブを開きEditボタンをクリックします。

次の画面の下部Compress Objects Automaticallyという項目があるので、こちらをYesに変更してください。

変更後はYes, Editボタンを押下して変更を保存することを忘れずに。

参考までに、以下のような説明があります。

Select whether you want CloudFront to automatically compress content for web requests that include Accept-Encoding: gzip in the request header. CloudFront compresses files of certain types for both Amazon S3 and custom origins.

翻訳:
CloudFrontがリクエストヘッダーにAccept-Encoding:gzipを含むウェブリクエストのコンテンツを自動的に圧縮するかどうかを選択します。 CloudFrontは、Amazon S3とカスタムオリジンの両方に対して特定のタイプのファイルを圧縮します。AWS CloudFront Management Console

設定はこれだけで完了です♪

curlでgzip確認

それでは実際に確認してみましょう。

無事にcontent-encoding: gzipが追加され、gzip形式での配信に切り替わっていますね♪

ただ、CloudFrontのキャッシュ設定次第では反映までに多少時間がかかるらしいので、Invalidateするなり時間を置いてから再度試してみてください♪

本日のオススメ商品

終わりに

以上のようにたった一つの設定を変えるだけでgzip形式での配信に切り替わりました!

CloudFrontを使っている方は是非試してみてはいかがでしょうか♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , ,

blogenist

Author: blogenist