버튼을 누르려는 순간 화면이 밀렸다 — 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로 LCP 1247ms를 109ms까지 내린 실전 기록.
구조화 데이터를 배포 전에 잡아라 — JSON-LD를 CI에서 자동 검증하는 법
JSON-LD 파서가 통과시켜도 검색엔진은 못 읽는 마크업이 있다. schema.org의 @vocab 때문에 오타와 대소문자 오류가 정상 JSON-LD로 조용히 확장된다. 60줄짜리 스키마 인지 검증기를 GitHub Actions 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 크롤러는 당신의 자바스크립트를 실행하지 않는다
GPTBot·ClaudeBot 같은 AI 크롤러는 자바스크립트를 실행하지 않아, CSR로만 렌더링한 페이지는 AI 검색과 인용에서 통째로 사라진다. 그 원인을 curl 요청으로 직접 재현해 확인하고, 서버사이드 렌더링과 프리렌더링으로 콘텐츠를 다시 노출시키는 구체적 방법까지 정리했다.
sitemap.xml에서 구글이 실제로 읽는 건 lastmod 하나다
priority 1.0에 changefreq always를 붙여도 구글은 다 버린다. 공식 문서가 쓰는 필드는 lastmod 하나뿐이고, 그마저 검증 가능하게 정확할 때만 쓴다. 세 종류의 sitemap을 공식 XSD로 직접 돌려 무엇이 통과하고 무엇이 조용히 무시되는지 실측했다.
axe-core를 CI에 넣으면 color-contrast만 조용히 사라지는 이유
AI가 만든 예약 위젯을 jsdom과 실제 브라우저에서 axe-core로 돌려봤다. 구조적 위반 4개는 브라우저 없이 잡혔지만 color-contrast만 jsdom에서 incomplete로 빠졌다. CI를 2단으로 짜야 커버리지 구멍이 안 생기는지 실측 로그와 함께 정리했다.
기술 SEO 감사를 닷새간 돌려봤다 — 고친 다섯 항목보다 중요했던 건 게이트였다
4개 언어 블로그를 닷새간 실측 감사했다. relatedPosts 404 12개, hreflang 파손 4쌍, 렌더 블로킹 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 공식 리시프로시티 규칙, 실측 로그, 세 가지 구현 방법 비교, 그리고 개발자가 바로 적용할 수정 코드까지 정리했다.