webサイトパフォーマンス(フロントエンド)
ハイパフォーマンスwebサイト(Oreilly)読後備忘録
ちょっと古いかもしれないけど、まとめ。
HTTPリクエストを減らす。
画像, css, js
- ボタンやリンクなどの画像はできるだけcssやフォントで実装。
- css, jsはassetpipelineなどで連結させて出来る限り少ない回数呼び出す。
キャッシュの利用
img, css, jsなどの静的ファイルはブラウザにキャッシュさせる。
Cache-Control : max-age=315360000
とか設定する。
コンポーネントをgzipする。
コンポーネントを圧縮して送信することで通信時間をへらす。
リクエストヘッダ
Accept-Encoding: gzip
レスポンスヘッダ
Content-Encoding: gzip
を追記する。
cssはheadに記載。
linkタグをhead内に記載。
jsはbodyの最後に記載。
scriptタグをbodyの最後につける。
css, jsは外部ファイルにする。
キャッシュできるように。
jsをminifyする。
サイズをちっさく。
適宜追記。