Yahooのパフォーマンス改善の話を読んでいて、改善手法のloading属性とcontent-visibilityは知っていたがcontainは知らなかったので調べた techblog.yahoo.co.jp containプロパティは、ブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせ…

Webフォントは重たいので、パフォーマンスの観点であまり導入しないほうがよいと思っていたが 軽量化を試みればパフォーマンス影響をほとんどなくすことができると知って調べた サブセット化 対策としてよく知られているのが、「サブセット化」という手法で…

Core Web Vitals (以降、CWV)の指標の一つのLCP（主要なコンテンツの読み込み時間）のスコアが悪い レスポンシブデザインの中のヒーローイメージが原因なのだが、このような画像のベストプラクティスについて調査してみた 以下の記事のなかで画像とCWVに関す…

ブラウザの戻るボタンと進むボタンを使用するときに、ページが瞬時に読み込まれるように最適化する手法にbfcacheがある FireFoxやSafariではすでに実装されていて利用できるのだが、Chromeはバージョン86以降段階的に利用できるようになっていくとのこと web…

事前レンダリングを調べているとNoState Prefetchというワードにあたった 2018年の記事によると、当時？は事前レンダリングにパフォーマンス面で問題があったようで、NoState PrefetchとはChromeがその問題を解決するために考えた新しいメカニズムらしい dev…

Privacy Preserving Prefetch Proxy（P4）と呼ばれる技術を知ったので概要だけ調べた github.com Privacy Preserving Prefetch Proxy（P4）は、Resource Hintsという事前にコンテンツをプリフェッチ/レンダリングしておくことでWeb高速化を図る手法における…

ユーザが次にアクセスしそうなページのリソースを事前に読み込んでおくことでページ遷移時のパフォーマンスを向上させる方法にResouce Hintsがある このResource Hintsについて調べた w3c.github.io Resource Hintsは以下の4つの要素から構成される dns-pref…

こちらの記事で2021年におけるfront-end のパフォーマスに関するチェックリストを紹介している www.smashingmagazine.com かなり詳しく、大量のチェックリストになっているため、一読の価値ありと思われる そんな中で、個人的に覚えておきたいと思ったものを…

こちらの記事で2021年におけるfront-end のパフォーマスに関するチェックリストを紹介している www.smashingmagazine.com かなり詳しく、大量のチェックリストになっているため、一読の価値ありと思われる そんな中で、個人的に覚えておきたいと思ったものを…

こちらの記事で2021年におけるfront-end のパフォーマスに関するチェックリストを紹介している www.smashingmagazine.com かなり詳しく、大量のチェックリストになっているため、一読の価値ありと思われる そんな中で、個人的に覚えておきたいと思ったものを…

こちらの記事で2021年におけるfront-end のパフォーマスに関するチェックリストを紹介している www.smashingmagazine.com かなり詳しく、大量のチェックリストになっているため、一読の価値ありと思われる そんな中で、個人的に覚えておきたいと思ったものを…

サーチコンソールでステータス「不良」のページが多く存在するため「良好」になるようにしたい そのためにはGoogleが定めるWeb Vitalsの改善がよいとされている developers-jp.googleblog.com Web Vitalsは、ウェブで優れたユーザー エクスペリエンスを実現…

Web高速化方法の一つに「画像の遅延ローディング」がある 最近の動向としてはloading=lazy で実装するLazyload がWeb標準になったので、今後Chrome 以外のブラウザでもサポートされることが期待されるが、いまの時点（2020/4/9）では Firefox, Chrome, Edge …

サーバープッシュという機能を使ったWeb高速化の話を聞いたので概要を調査してみた サーバープッシュ HTTP/2のプロトコルでの通信において、サーバーがクライアントに対して事前にレスポンスを送信（プッシュ）できるようにしておくこと HTTP/2での通信は単…