SPA のロード時間を短縮するためにやったこと その２ - webpack で gzip 圧縮をかけたファイルを配信する - kjugk’s diary
前回 の記事で、静的ファイルにキャッシュを効かせる方法を紹介しました。 kjugk.hatenablog.com この記事では、次のパフォーマンス改善策として、 静的ファイルにgzip 圧縮をかけて転送量を減らす方法を紹介していきます。 環境 webpack 4.17.1 nginx 1.12.2 なお、サンプルはすべて、拙作の こちら のアプリで、約 41 KB のミニファイ済み JavaScript ファイルを圧縮した結果を比較しています。 配信時に圧縮する nginx では、簡単な設定で、レスポンスに gzip圧縮をかけることができます。下記は js, css に gzip圧縮を適用する例です。 Enable gzip on Nginx. ブラウザで確認すると、レスポンスヘッダーに content-encoding: gzip が付与されており、圧縮済みのファイルが配信されています。
WEBスピード向上・転送量削減する Brotli 圧縮と CDN の連携 | REDBOX Labo
WEB高速化をおこなうためには、コンテンツサイズを極力小さくできる圧縮配信が有効です。コンテンツ圧縮で有名なのはGzipによる圧縮配信ですが、Gzipよりも圧縮率が高いBrotliの概要について、またCDNと同時利用した場合の留意点を掲載いたします。 Brotliとは？ Brotli（ブロトリ）はGoogleがファイルサイズをさらに縮小するために開発したオープンソースの新しいLZ77アルゴリズムをベースとした圧縮アルゴリズムです。日本では馴染みが少ない読み方ですが、由来はスイスで“小さなパン”を意味する「Brotli」（ドイツ語）となっています。 既に「RFC 7932」の一部としてIETFによって定義されており、WOFF（Web Open Font Format） 2.0のフォント形式での圧縮方式の一部として作られたものが他のコンテンツ圧縮にも使えるよう汎用化されました。 Zopfliよ
CloudFrontのコンテンツの無圧縮、圧縮(BrotliとGzip)のリクエストを混在させた場合の挙動を確認してみた | DevelopersIO
いわさです。 CloudFrontにはコンテンツを圧縮して配信する機能が備わっています。 以下の記事ではBrotliの設定方法や圧縮されていることを確認しています。 CloudFront側では本日時点でGzipとBrotliの2つの圧縮形式がサポートされていますが、一方でブラウザ毎のコンテンツ圧縮形式のサポート状況は異なっています。 CDN側でそのあたりをどのように吸収しているのか、CloudFrontを使って挙動とキャッシュ動作を確認してみました。 ※各ブラウザで何がサポートされているのかについてはこの記事では触れません。 圧縮設定 CloudFront側でコンテンツ圧縮を有効化するには２つの設定が必要です。 キャッシュビヘイビアでの「オブジェクトを自動的に圧縮」を有効化します。 キャッシュポリシーの圧縮サポートを有効化します。 デフォルトのキャッシュポリシーであればCachingOpt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
htaccess gzip/brotli-bomb
brotliのwindowサイズとgzipとのサイズ比較(ベンチマーク) - Qiita
