1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

jsをgz配信でめちゃスコア上がった話し

Last updated at Posted at 2020-12-30

目的:

担当サイトのパフォーマンス改善のために、jsを gz配信したい

施策:

上記を実現するためにapache側の設定(.htaccess)が必要と言うフロントの依頼

結果:

JSが4分の1程のサイズになり、めちゃスコアが上がった

.htaccess ファイル設定

.htaccess ファイルは元々あったので既存ファイルに下記の内容を追加
スクリーンショット 2020-12-30 11.15.01.png

上記の設定で、
・gzipを受け入れてくれるブラウザには圧縮した xxx.js.gz を返し
・そうでないブラウザに対しては元の xxx.js を返すはず

.css設定

.js だけでなく .css も gzip圧縮して設置したいのならば、(js) を (js|css) に設定変更)

文字化け問題

上記の設定だけではgzipファイルがエンコードされる際に文字化けしてしまう
スクリーンショット 2020-12-30 11.15.38.png

ForceType application/x-javascript :

gzip圧縮したファイルをHTTPレスポンスとして送信すると、Content-Typeがapplication/gzipになってしまい、ブラウザがContent-Typeを正しく認識できなくなる

上記の状況を回避するためにForceTypeを使って、JavaScriptの場合にはapplication/javascriptとなるようにする

AddEncoding x-gzip .gz :

HTTPレスポンスのContent-Encodingにgzipを指定し、拡張子.gzを含むファイル名がgzip圧縮されていることを伝える

Header append Vary Accept-Encoding env=!dont-vary

gzipに対応していないブラウザにgzip圧縮されたファイルが送信されるため、ブラウザは受信したファイルを処理できなくなるらしい

Header append Vary Accept-Encoding env=!dont-vary追加で
プロキシサーバーが同じ値のAccept-Encodingを保持している場合のみにキャッシュを利用し、それ以外の場合はWebサーバーにファイルを取得できる

httpd.confでの設定方法

少しだけ書方が違う
スクリーンショット 2020-12-30 11.16.15.png

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?