ボタンを押す瞬間、画面がずれた — CLS 0.559を0.014まで下げた実測記録
読み込み中にレイアウトがずれるのは好みの問題ではなく、数値で測れる指標だ。同じページを二通り作り、layout-shift PerformanceObserverでCLSを計測。画像サイズの予約とスロット確保だけで0.559(POOR)を0.014(GOOD)まで下げた過程を、コードとログで残す。
archive
コラム · ページ 5
356 · ページ 5
ヒーロー画像は117KB、なのにLCPは1.2秒 — ブラウザが画像を「遅れて見つける」理由
LCPが遅いのは画像が重いからではない。ブラウザがその画像を「いつ発見するか」の問題だ。CSS背景画像がプリロードスキャナに見えない現象をChrome DevToolsで実測し、fetchpriority・preload・レンダーブロッキング除去でLCP 1247msを109msまで落とした記録。
構造化データはデプロイ前に落とす — JSON-LDをCIで自動検証する
JSON-LDパーサーが通しても検索エンジンには読めないマークアップがある。schema.orgの@vocabのせいで、タイポも大文字小文字の誤りも正常なJSON-LDとして展開される。60行のスキーマ対応バリデーターを書き、CIでデプロイ前に捕まえた実測記録。
自動アクセシビリティ検査が緑になっても残る四つの壁
チェックアウトページ一枚にWCAG違反を八つわざと埋め込み、axe-coreで走らせた。ルール型の四つは捕まったが、人間の判断が要る四つは緑の裏にそのまま残った。自動化が構造的に見られないものと、その穴を埋める手動レビューのチェックリストを、実測ログとともにまとめる。
JSON-LD vs Microdata vs RDFa — 構造化データの構文、いつどれを使うか(実測比較)
同じProductエンティティを三つの構文で書き、パーサーに通してバイト数と壊れやすさを実測した。Googleは三つを同等に扱う。ならJSON-LDを勧める本当の理由は順位ではなく、リデザインで生き残る結合度だった。公式ドキュメントと再現ログで整理する選択基準。
アクセシブルネームがずれると、音声操作もAIエージェントもボタンを押せない
ボタンにaria-labelを付けたのに、アクセシビリティツリーは画面に出ていない文字を読んでいる。WCAG 2.5.3 Label in Nameの違反をサンドボックスで再現してツリーで確認し、Lighthouse 13.3.0の新カテゴリAgentic Browsingで0点が100点に変わる過程を実測した。
AIクローラーはあなたのJavaScriptを実行しない
GPTBotもClaudeBotもJSをレンダリングしない。CSRページがAI検索に見えない理由をcurlで再現し、サーバーサイドで直す手順をまとめた。
sitemap.xmlでGoogleが本当に読むのは lastmod だけだ
priority 1.0 に changefreq always を付けても、Googleは全部捨てる。公式ドキュメントが使うフィールドは lastmod ひとつ。しかも検証可能なほど正確なときだけ使う。三種類のsitemapを公式XSDで実際に通し、何が検証を通り、何が黙って無視されるかを実測した。
同じマークアップ、違う判定 — axe-coreをCIに入れるとcolor-contrastが静かに消える理由
AIが吐き出した予約ウィジェットを1つ、jsdomと実ブラウザでそれぞれaxe-coreに通してみた。構造的な違反4件はブラウザなしでも捕まったが、color-contrastだけjsdomではincompleteに落ちた。なぜそうなるのか、カバレッジの穴を開けないためにCIパイプラインをどう2段に組むかを実測ログとともにまとめた。
技術SEO監査を5日間回した — 直した5項目より効いたのはゲートだった
4言語ブログを5日間、実測で監査した。relatedPostsの404が12件、hreflang破損4ペア、レンダーブロッキングのフォントCSS 405KB、翻訳ドリフト21件、断片化したJSON-LD 7ブロック。全部直した。だが本当の成果は、これらが二度と戻れないようにしたビルドゲートだ。実測ログと検査器のコードまで。
JSON-LDを一つの@graphに束ねる — 散らばった構造化データを検索とAIが読むエンティティモデルへ
自分のページのJSON-LDを検証ツールにかけたら、三つの島にバラバラだった。@idのノード参照でOrganization・WebSite・Articleを一つの@graphに繋ぎ、jsonldで連結性を実測。3コンポーネントが1つに統合される過程と、Googleが保証しない点まで。
hreflangは双方向でなければならない — 4言語ブログを自分で監査して見つけたトップページのバグ
30行のチェッカーを自サイトのビルド成果物に直接走らせた。ブログ記事248本のhreflangクラスターは全部通ったのに、トップページだけが引っかかった。Google公式の相互リンク規則、実測ログ、3つの実装方法の比較、そして開発者がすぐ適用できる修正コードまでまとめた。