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

IT

投稿日: 2020年4月13日
最終更新日:

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

Anker PowerCor

created by Rinker
Anker
¥4,990 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー!

【最新機種】GoPro hero11 Black

created by Rinker
GoPro(ゴープロ)
¥62,000 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥33,430 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥2,600 (2024/04/03 21:42:16時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,748 (2024/04/03 21:33:15時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥14,935 (2024/04/03 21:42:10時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

スポンサーリンク

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

関連記事

YouTubeも見てね♪

お名前.comサイドバー