ideaman's Notes— アイデアマンズの研究ノート
Webパフォーマンス改善とAI開発の現場メモ。
読みかけ、走り書き、思いつきも、そのまま残しておく場所です。
最近書いたメモ
— recentPageSpeed InsightsのCrUXはどこまで信じてよい？ モバイルは的中、デスクトップは実測46%遅かった
PageSpeed InsightsやSearch Consoleを開くと、「実際のユーザーの環境で評価する」というフィールドデータが目に入る。競合サイトのURLを打ち込めば、他社の速度まで外から覗けてしまう。この便利な数字の正体が CrUX（Chrome UX Report） だ。…
実例に学ぶサイトスピード改善(6) 画像の寸法指定でガクッと動くページを防ぐ
CLSは「表示の速さ」とは別の指標で、ページ読み込み中にコンテンツが突然ずれる現象を数値化したものだ。画像にwidth/height属性を指定してアスペクト比をブラウザに教える、カルーセルの初期高さをCSSで確保するという2つのアプローチで、実在4サイトのCLSが最大89%改善するというシミュレーション結果を紹介する。
通販サイトが遅いと損失はどのくらい？ 遅いサイトは見込み客の90%を取りこぼしている衝撃の損失見える化
サイトスピードが遅い通販サイトでは、本来買ってくれるはずだったユーザーが数多く離脱し、注文を取りこぼしてしまう。頭ではわかっていても、 機会損失は目に見えない 。この記事ではそれを可視化してみよう。
実例に学ぶサイトスピード改善(5) 外部CDNは速いとは限らない
外部CDNやパブリックCDNからリソースを配信すると、ドメインごとにDNS・TCP・TLS接続コストが追加で発生する。クリティカルパス上のCSSや同期的なJSライブラリが対象なら、接続コスト1回分でFCP・LCPが1秒以上悪化していたことがシミュレーションで示された実例がある。
実例に学ぶサイトスピード改善(4) 重い日本語Webフォントが表示を遅らせる
日本語Webフォントは文字種の多さからファイルサイズが英語フォントと桁違いになりやすく、レンダリングブロックと転送コストを通じてFCPとLCPを大きく遅らせることがある。実在ECサイト4例のシミュレーション数値を引きながら、未使用フォントの削除・font-display指定・サブセット化・preconnectを中心に対…
サイトスピードを改善してもCVRが変わらない？ 「機会損失率」なら成果が見えるかも
サイトスピードを大幅に改善し、その前後でCVR（コンバージョン率）を見たものの、 期待したような成果が確認できなかった 。サイトスピード改善に取り組んだことのある人なら、一度はこのすっきりしないモヤモヤを感じたことがあるのではないだろうか。…
実例に学ぶサイトスピード改善(3) テキストはGZIP/Brotliで圧縮する
テキストリソース（HTML・CSS・JavaScript）のGZIP/Brotli圧縮は、サーバー設定を変えるだけで転送量を60〜80%削減できる。実在サイトを調べると設定が漏れているケースは意外と多く、有効にするだけでLCPが1秒以上改善するというシミュレーション結果が得られた例もある。
WebP/AVIFだけじゃないWeb画像最適化チェックリスト
ウェブ画像最適化と聞くと、いまなら多くの人が、JPEGやPNGをAVIFやWebPなどの次世代画像フォーマットに変換することを思い浮かべるだろう。もちろんそれも有効だが、それは画像最適化の一部でしかない。…
実例に学ぶサイトスピード改善(2) 画像は次世代フォーマットに移行する
JPEG/PNGからAVIFやWebPといった次世代フォーマットへの移行は、転送量の削減に効く。一方で「画像を軽くすればLCPが改善する」とよく言われるが、LCPは前段のFCPやダウンロード開始でほぼ決まり、フォーマット変更でLCPが大きく縮むのは画像が極端に重いサイトに限られる。
実例に学ぶサイトスピード改善(1) LCP画像は最優先で読み込ませる
ファーストビューの最大画像にlazyloadが残っていると、JavaScriptが動くまで画像のダウンロードが始まらず、LCPが数秒単位で悪化する。多くはJS lazyloadの名残や設定の見落としによるものだろう。実在サイトの数値とともに、lazyを外して遅延を取り除く対処法を解説する。
Tailscaleという新しいネットワーク体験
今更ながらTailscaleを紹介したい。半年ほど前にオンプレVPNをTailscaleに刷新したのだが、UXが抜群にいい。そしてひとり月額$8と安い。一瞬で手放せない必須ツールとなってしまった。
アクセスランキングは何%クリックされるのか
アクセスランキングを設置したらどのくらいクリックされるか、定量的なデータを見たことはあるだろうか。回遊性を高める施策としてランキングはよく使われるが、その効果が実際どの程度なのかを数字で語れる材料は意外と少ない。弊社はアクセスランキングウィジェットサービス Ranklet4 を運営しており、累計で…