👑
Webパフォーマンスチューニングに関する情報源まとめ（随時更新）
はじめに
業務でWebパフォーマンスチューニングを行っていた時に、参考にさせていただいたサイトをまとめます。このまとめが同じような業務を行う方の助けになれば嬉しいです。もし、他にもおすすめのサイトなどがございましたらご連絡いただけると幸いです。
※随時更新していきます。
書籍
どちらの書籍も読みましたが、体系的にWebパフォーマンスチューニングに関して学ぶことができました。最低1冊に目を通すと全体像を把握しやすいです。
主要サイト
まとめ系
Webパフォーマンスの改善に関して主要な情報が掲載されています。
Page Speed InsightやLighthouseに関して詳細情報が載っています。
ウェブパフォーマンスの測定と改善に役立つツール、API、およびベストプラクティスが掲載されています。日本語訳が少ないのが難点です。
連載系
- https://codezine.jp/article/detail/7030
- https://dev.classmethod.jp/referencecat/html5-performance-tuning/
- https://webtan.impress.co.jp/e/2017/02/20/24816
Chrome DevTools
ブラウザの仕組み
CSS
CSSの非同期化
media="print" onload="this.media='all'" に関する解説です。
画像
画像最適化
decoding属性
decoding="async" と指定することで、画像のデコード処理を非同期にバッググラウンド処理し、他のコンテンツの表示処理が終わった時に更新処理で画像を一緒に出します。
遅延読み込み
loading属性
JavaScriptを使うことなく、ブラウザの標準機能として画像の遅延読み込みを実現します。
運用テクニック
Discussion