👑

Webパフォーマンスチューニングに関する情報源まとめ(随時更新)

3 min read

はじめに

業務でWebパフォーマンスチューニングを行っていた時に、参考にさせていただいたサイトをまとめます。このまとめが同じような業務を行う方の助けになれば嬉しいです。もし、他にもおすすめのサイトなどがございましたらご連絡いただけると幸いです。

※随時更新していきます。

書籍

どちらの書籍も読みましたが、体系的にWebパフォーマンスチューニングに関して学ぶことができました。最低1冊に目を通すと全体像を把握しやすいです。

主要サイト

まとめ系

Webパフォーマンスの改善に関して主要な情報が掲載されています。

Page Speed InsightやLighthouseに関して詳細情報が載っています。

ウェブパフォーマンスの測定と改善に役立つツール、API、およびベストプラクティスが掲載されています。日本語訳が少ないのが難点です。

連載系

Chrome DevTools

https://engineering.mercari.com/blog/entry/2018-12-12-090156/

ブラウザの仕組み

CSS

CSSの非同期化

media="print" onload="this.media='all'" に関する解説です。

画像

画像最適化

decoding属性

decoding="async" と指定することで、画像のデコード処理を非同期にバッググラウンド処理し、他のコンテンツの表示処理が終わった時に更新処理で画像を一緒に出します。

https://zenn.dev/sugamaan/articles/9adab715122679

遅延読み込み

loading属性

JavaScriptを使うことなく、ブラウザの標準機能として画像の遅延読み込みを実現します。

https://web.dev/browser-level-image-lazy-loading/

https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes

https://caniuse.com/loading-lazy-attr

運用テクニック

https://coliss.com/articles/build-websites/operation/work/lazy-load-images-for-maximum-performance.html

Webp

https://engineering.mercari.com/blog/entry/20201211-image-optim-webp/

動画

youtube最適化

https://zenn.dev/sugamaan/articles/d8e8ba331e77db

イベント

サミット

https://developer.chrome.com/devsummit/

ハッカソン

https://github.com/CyberAgentHack/web-speed-hackathon-2020

Discussion

ログインするとコメントできます