逆引き！フロントエンドのイマドキパフォーマンス改善 - 青空コメントアウト

WebアプリにしろWebサイトにしろパフォーマンスはとても重要です。どんなに高機能であっても、どんなにデザインが良くても、パフォーマンスが悪ければユーザーは離れてしまいます。 とは言え現場はキツキツのスケジュールで、パフォーマンスにまでこだわる余裕がないよ！パフォーマンスはひとまずできる限りのところまで頑張るよ！となってしまうこともあるかと…。 この問題の解決の糸口はパフォーマンスを良くする手段をどれだけ知っているかです。仕様を決めるとき、デザインを決めるとき、実装するとき、それぞれのフェーズでパフォーマンスを常に意識していると自ずとハイパフォーマンスに近づきます。 というわけで今回はフロントエンドの観点から、イマドキのパフォーマンス改善手法をまとめてみました。イマドキと謳っておきながら2年前くらいの技術が出てきたりして最新の話題でもないのですが。 ちなみに、本題に入る前にWebパフォーマ

[umai_bow]

超いいまとめ！

[efcl]

最近ブラウザに増えたレンダリング負荷を考慮したAPIや先読みについて。 `will-change`、CSS Containment、`requestIdleCallback`、Passive EventListener、`<link rel=preload>`についての紹介

[glat_design]

わりとすぐ使えそうなの多いですよね /

[field_combat]

先読み系は適宜取り入れていこう

[Pasta-K]

CSS Containment知らなかった

[tonkotsuboy_com]

パフォーマンスチューニングは腕の見せ所なので、この様な丁寧なまとめは助かります。requestIdleCallbackやIntersection Observer等、web技術の未来はワクワクします。