LoginSignup
3

More than 5 years have passed since last update.

webサイトパフォーマンス(フロントエンド)

Posted at

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する。

サイズをちっさく。


適宜追記。

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
3