How to 速度改善 ーWebパフォーマンスについて知っておきたいこと7選ー - Qiita

今回のテーマ Webパフォーマンスを改善する上で知っておきたい知識をまとめてみました。 前回の記事では使わなかった（使えなかった）技術や方法なども含めて記載します。 また、ブラウザのレンダリングなどについても書きたいと思います。 (2019年5月23日追記) 過去の記事はこちら How to 速度改善 ー計測・知識編ー How to 速度改善 ー原因調査編ー How to 速度改善 ー実装&技術調査編1ー 1. ブラウザレンダリングの仕組み 推測するな、計測せよ という言葉にあるように、闇雲にチューニングを初めても良い結果は出ません。まずはブラウザレンダリングの仕組みからみていきましょう。 ブラウザレンダリングの流れ レンダリングの大まかな流れは Loading→Scripting→Rendering→Painting（これでページが表示される） となっています。 この処理の内容をフレーム

[suika3417]

cssの処理順ってそうなっていたのか…

[tanupig]

“div > p { color: red; } のようなCSSがあるとして、これはまず全てのpタグを探して、その上にdivタグを親要素にもつものを洗い出してから計算がされます。”

[braitom]

Webパフォーマンスを改善するために知っておきたい知識について。ブラウザレンダリングの仕組み、Response/Animation/Idle/Loadについて、パフォーマンスの計測方法についてなど。

[naari_3]

いつもの

[Helfard]

勉強になるなあ。

[htnmiki]

速度はもちろんなんだけど一般ユーザーとしては画面の上から順番に確定していってほしい。そんなことが出来るのか知らんけど。

[yodelx]

“リソースの読み込みの最適化については下記の4つが重要です。 ・リソースの大きさと数を減らす ・レンダリングブロックを減らす ・ブラウザとサーバーの間の遅延を減らす ・ブラウザキャッシュの活用”　はい

[miho-satoh-satomi]

web パフォーマンス チューニング

[gonta616]

大事。有難い

[terazzo]

“App Shell”