2026年7月のメモ — monthly

2026年7月に書きためた研究メモの一覧です。

11本

07月の更新

2026.07

2026年7月

— 11 entries

—実例に学ぶサイトスピード改善(7) head内の同期スクリプトが描画を止める07.22HTMLのhead内に置かれた同期スクリプトは、ダウンロードと実行が完了するまでHTMLのパースを止める。外部CDNから読み込む場合はDNS解決とTLS接続の分だけ遅延が上乗せされる。実在する国内サイト4例のシミュレーション値をもとに、defer/asyncによる非同期化と読み込み位置の見直しを解説する。
—CrUXはどのくらいあてになるか - Chrome限定の実測値を全ブラウザRUMと突き合わせてみた07.20CrUX（Chrome User Experience Report）は、ChromeユーザーがWebサイトを閲覧したときのスピード指標を収集したビッグデータだ。このデータの素晴らしいところは、事前準備なしに、思いついたときにサイトスピードの状態を確認できる他のサイトも同様に確認し、競合サイトと比較できる…
—実例に学ぶサイトスピード改善(6) 画像の寸法指定でガクッと動くページを防ぐ07.19CLSは「表示の速さ」とは別の指標で、ページ読み込み中にコンテンツが突然ずれる現象を数値化したものだ。画像にwidth/height属性を指定してアスペクト比をブラウザに教える、カルーセルの初期高さをCSSで確保するという2つのアプローチで、実在4サイトのCLSが最大89%改善するというシミュレーション結果を紹介する。
—通販サイトが遅いと損失はどのくらい？遅いサイトは見込み客の90%を取りこぼしている衝撃の損失見える化07.16サイトスピードが遅い通販サイトでは、本来買ってくれるはずだったユーザーが数多く離脱し、注文を取りこぼしてしまう。頭ではわかっていても、機会損失は目に見えない。この記事ではそれを可視化してみよう。
—実例に学ぶサイトスピード改善(5) 外部CDNは速いとは限らない07.14外部CDNやパブリックCDNからリソースを配信すると、ドメインごとにDNS・TCP・TLS接続コストが追加で発生する。クリティカルパス上のCSSや同期的なJSライブラリが対象なら、接続コスト1回分でFCP・LCPが1秒以上悪化していたことがシミュレーションで示された実例がある。
—実例に学ぶサイトスピード改善(4) 重い日本語Webフォントが表示を遅らせる07.13日本語Webフォントは文字種の多さからファイルサイズが英語フォントと桁違いになりやすく、レンダリングブロックと転送コストを通じてFCPとLCPを大きく遅らせることがある。実在ECサイト4例のシミュレーション数値を引きながら、未使用フォントの削除・font-display指定・サブセット化・preconnectを中心に対…
—サイトスピードを改善してもCVRが変わらない？「機会損失率」なら成果が見えるかも07.09サイトスピードを大幅に改善し、その前後でCVR（コンバージョン率）を見たものの、期待したような成果が確認できなかった。サイトスピード改善に取り組んだことのある人なら、一度はこのすっきりしないモヤモヤを感じたことがあるのではないだろうか。…
—実例に学ぶサイトスピード改善(3) テキストはGZIP/Brotliで圧縮する07.08テキストリソース（HTML・CSS・JavaScript）のGZIP/Brotli圧縮は、サーバー設定を変えるだけで転送量を60〜80%削減できる。実在サイトを調べると設定が漏れているケースは意外と多く、有効にするだけでLCPが1秒以上改善するというシミュレーション結果が得られた例もある。
—WebP/AVIFだけじゃないWeb画像最適化チェックリスト07.06ウェブ画像最適化と聞くと、いまなら多くの人が、JPEGやPNGをAVIFやWebPなどの次世代画像フォーマットに変換することを思い浮かべるだろう。もちろんそれも有効だが、それは画像最適化の一部でしかない。…
—実例に学ぶサイトスピード改善(2) 画像は次世代フォーマットに移行する07.05JPEG/PNGからAVIFやWebPといった次世代フォーマットへの移行は、転送量の削減に効く。一方で「画像を軽くすればLCPが改善する」とよく言われるが、LCPは前段のFCPやダウンロード開始でほぼ決まり、フォーマット変更でLCPが大きく縮むのは画像が極端に重いサイトに限られる。
—実例に学ぶサイトスピード改善(1) LCP画像は最優先で読み込ませる07.01ファーストビューの最大画像にlazyloadが残っていると、JavaScriptが動くまで画像のダウンロードが始まらず、LCPが数秒単位で悪化する。多くはJS lazyloadの名残や設定の見落としによるものだろう。実在サイトの数値とともに、lazyを外して遅延を取り除く対処法を解説する。