UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

Web高速化

【Web高速化】Webフォントを正しく扱う

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

【Web高速化】レスポンシブデザインのLCP

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

【Web高速化】Back/forward cache (bfcache)

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

【Web高速化】NoState Prefetch

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

【Web高速化】Privacy Preserving Prefetch Proxy

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

【Web高速化】Resource Hints

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

【Web高速化】front-end performance 2021 ~ デリバリー最適化

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

【Web高速化】front-end performance 2021 ~ アセッツ最適化

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

【Web高速化】front-end performance 2021 ~ 開発環境

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

【Web高速化】front-end performance 2021 ~ 計画と指標

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

【Web高速化】Web Vitals

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

【Web高速化】画像の遅延ローディング - Intersection Observer API とネイティブ の棲み分け

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

【Web高速化】サーバープッシュとは?

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