검색엔진이 좋아하는 구조화 데이터 삽입 방법 – 속도와 효율의 비교 실험
검색엔진이 좋아하는 페이지는?
콘텐츠와 정보의 품질
검색엔진 최적화(SEO)에 있어, 좋은 품질의 콘텐츠와 적절한 검색어가 기본이라는 것은 이제 상식이다. 최근에는 여기서 더 나아가, 검색엔진에게 ‘이 페이지가 어떤 주제와 구조인지’ 명확히 알려주는 구조화 데이터(Structured Data)가 핵심 전략이 되었다. 이는 검색엔진이 페이지의 내용을 더 정확하게 이해하도록 돕고, 리치 스니펫(Rich Snippet) 등 추가 노출 기회를 제공한다.
즉, 검색엔진에게 제공하는 정보가 얼마나 체계적이고 상세하며 품질이 좋은지가 가장 중요하다는 의미다.
같은 값이면 다홍 치마 – 속도
‘같은 값이면 다홍 치마’라는 말은 검색엔진에도 적용된다. 모든 웹사이트가 고품질의 상세한 정보를 제공한다면, 이제 차별점은 기술적 완성도, 즉 “얼마나 빠르게, 얼마나 효율적으로 좋은 콘텐츠를 사용자에게 전달할 수 있는가“의 영역으로 넘어간다.
실제로 구글의 검색 Essentials에서도 좋은 사용자 경험을 제공하는 페이지를 더 선호한다고 설명하고 있다. 이를 측정하는 여러 지표가 있으나, 결국 정리하면 반응속도가 빨라야 한다는 소리다.
본 필자는 아빠의 배터리 용량 테스트 블로그를 구축하며 동적으로 생성되는 구조화 데이터 삽입기를 제작했다. 이 과정에서, 구조화 데이터 삽입 과정이 페이지 응답 속도에 미치는 영향을 확인해 보고 이를 최대한 줄여보고자, 세 가지 시나리오를 계획하고 테스트를 진행해 보았다.
- 실시간으로 PHP가 생성하는 JSON-LD를 삽입
- 실시간으로 PHP가 생성하고 압축(minify)한 JSON-LD를 삽입
- DB에서 압축된 JSON-LD를 읽어와 삽입
실험 결과
구조화 데이터(JSON-LD)의 생성 방식이 페이지 응답 속도에 어떤 영향을 주는지를 검증하기 위해 각 방식(CASE 1~3)을 동일 조건에서 3회씩 측정하였다. 측정 도구는 Chrome DevTools를 사용했으며, DOMContentLoaded (본문 표시 시점)과 Document Load (HTML 읽기 완료)를 기준으로 기록했다.
CASE 1 – PHP 이용 실시간 생성
특징: PHP가 매 요청마다 JSON-LD를 실시간으로 생성하며, 캐시를 사용하지 않는다.
| 회차 | Document 크기 | DOMContentLoaded | Load 완료 |
|---|---|---|---|
| #1 | 34.3 KB | 399 ms | 145 ms |
| #2 | 34.3 KB | 374 ms | 183 ms |
| #3 | 34.3 KB | 302 ms | 126 ms |
| 평균값 | – | 358 ms | 151 ms |
실시간 생성은 안정적이지만, 매번 PHP가 DB를 조회하고 JSON을 조립하므로 초기 렌더링이 가장 느리다. 페이지 로드 타임의 평균은 약 151ms로, 세 가지 케이스 중 가장 길다.
CASE 2 – 압축(minified) 적용
특징: PHP가 매 요청마다 JSON-LD를 실시간으로 생성하며, 마지막에 공백과 줄바꿈 등을 제거한 후 출력한다.
| 회차 | Document 크기 | DOMContentLoaded | Load 완료 |
|---|---|---|---|
| #1 | 34.0 KB | 305 ms | 132 ms |
| #2 | 34.0 KB | 389 ms | 165 ms |
| #3 | 34.0 KB | 331 ms | 133 ms |
| 평균값 | – | 342 ms | 143 ms |
약 0.3KB의 공백과 줄바꿈 제거만으로도 브라우저 파싱 효율이 향상되어, DOMContentLoaded가 평균 16ms(4.5%) 빨라지고 로드 타임은 약 8ms(5.3%) 단축되었다.
CASE 3 – 압축 + 캐시 (Minified + Cached)
특징: 미니파이된 JSON-LD를 게시글의 사용자 데이터로 저장하고, PHP가 이를 불러온다.
| 회차 | Document 크기 | DOMContentLoaded | Load 완료 |
|---|---|---|---|
| #1 | 34.0 KB | 300 ms | 120 ms |
| #2 | 34.0 KB | 301 ms | 125 ms |
| #3 | 34.0 KB | 389 ms | 175 ms |
| 평균값 | – | 330 ms | 140 ms |
캐시를 활용함으로써 PHP 연산이 제거되어 페이지 로드 타임이 평균 DOMContentLoaded가 평균 28ms(7.8%) 빨라지고 로드 타임은 약 11ms(7.3%) 단축되었다. 응답 속도가 가장 빠르고, 브라우저 렌더링 지연이 가장 적은 결과를 보였다.
결론 – 성능 추세표
| 항목 | CASE 1 | CASE 2 | CASE 3 |
|---|---|---|---|
| 평균 DOMContentLoaded | 358 ms | 342 ms | 330 ms |
| 평균 Load 완료 | 151 ms | 143 ms | 140 ms |
| 개선률 (vs CASE 1) | – | 약 5% | 약 7~8% |
CASE 1 대비 CASE 3은 DOMContentLoaded 기준 약 8%, Document Load 기준 약 7% 단축되었다. 즉, 구조화 데이터 처리 방식을 단순히 바꾸는 것만으로도 웹페이지의 실제 응답성과 사용자 체감 속도를 모두 개선할 수 있음을 확인했다. 그리고 이러한 차이는, 동적인 요소가 많아질수록 누적되어 큰 차이를 가져오게 된다.
이를 바탕으로 아빠의 배터리 용량 테스트의 구조화데이터 자동 삽입기는 다음과 같이 동작하도록 설계할 수 있었다.
- 게시글의 사용자 데이터에 JSON-LD 가 있는지 확인
- 있을 경우 해당 데이터를 출력하고 종료
- 없을 경우, 메타 데이터를 기반으로 JSON-LD 를 자동 생성한 후 출력
- 사용자 데이터에 JSON-LD 를 저장