구글 코어 웹 바이탈(Core Web Vitals)은 웹페이지의 로딩 속도(LCP), 상호작용성(INP), 시각적 안정성(CLS)을 측정하여 사용자 경험(UX)을 평가하고, 이를 검색 순위에 반영하는 핵심 지표입니다. 구글 서치 콘솔을 활용하면 내 사이트가 데스크톱과 모바일 환경에서 이러한 지표들을 얼마나 잘 충족하고 있는지 쉽게 진단할 수 있습니다.
서치 콘솔에서 전반적인 현황과 문제가 있는 페이지를 파악했다면, 구체적인 해결책은 '페이지스피드 인사이트(PageSpeed Insights)'를 통해 찾을 수 있습니다. 이곳에서 해당 URL의 성능 점수를 측정하고, 구글이 직접 진단해 주는 추천 사항들을 하나씩 적용해 나가는 방식으로 코어 웹 바이탈을 효과적으로 개선할 수 있습니다.
이 워드프레스 블로그의 경우 데스크톱에서 CLS 문제로 인해 대부분의 URL이 개선이 필요한 URL로 표시되었습니다. 설 명절 연휴 동안 기존에 추가한 코드들을 정리하고 개선하여 코어 웹 바이탈을 개선할 수 있었습니다.
워드프레스 코어 웹 바이탈 개선
현재 웹사이트가 얼마나 잘 최적화되어 있는지 궁금하다면, 구글 검색 콘솔의 '코어 웹 바이탈' 보고서에서 바로 점검해 볼 수 있습니다.
보통 모바일에서 개선이 필요하다는 항목이 표시되지만, 이 블로그의 경우 살펴보니 한동안 데스크톱에서 대부분의 URL이 '개선이 필요한 URL'로 표시되고 있었습니다.
다행히 최근 조치를 취해 문제가 해결되었습니다. 보고서 열기를 클릭하여 구체적으로 어떤 부분에서 개선이 필요한지 확인할 수 있습니다.
CLS 문제로 오랫동안 개선이 필요함 경고가 표시되었다는 것을 알 수 있습니다.
CLS(누적 레이아웃 이동)는 웹페이지 로딩 중 예기치 않게 화면 요소가 이동하는 현상을 수치화한 지표입니다. 이미지나 광고 등이 뒤늦게 로드되면서 기존 콘텐츠를 밀어내거나 화면이 떨리는 불안정성이 발생하면 CLS 점수가 악화됩니다.
이 블로그에서는 배너 이미지가 로드되면서 순간적으로 미세하게 밀리는 현상이 나타나서 CLS 점수가 0.1 이상이 되어 개선이 필요한 것으로 평가되었던 것 같습니다.
코어 웹 바이터를 개선하려면 페이지스피드 인사이트에서 사이트의 최적화 상태를 점검하여 최적화되지 않은 사항을 개선할 수 있습니다.
2018년부터 Lighthouse에서 PageSpeed Insights를 지원하므로, 크롬 브라우저로 사이트를 방문한 상태에서 F12 키를 누르고 Lighthouse 탭을 클릭하여 페이지 최적화 상태를 분석할 수 있습니다.
기존 코드를 정리하고 개선한 후에 페이지스피드 인사이트 점수가 이전보다 향상되었습니다.😄
아래로 스크롤하면 사이트 최적화에 필요한 정보를 살펴볼 수 있습니다.
웹사이트에 새로운 코드를 추가하거나 기존 코드를 수정했다면, 적용 후에 페이지 성능을 다시 분석하여 악영향이 없는지 점검하는 것이 좋습니다. 제 경우에도 구글 애널리틱스(GA4) 추적 코드를 다른 방식으로 삽입했다가 오히려 페이지스피드 인사이트 점수가 크게 떨어졌습니다.
확인해 보니 Google Tag Manager 스크립트 단 하나가 무려 1.7초(1,730ms) 동안이나 화면 렌더링을 차단했고, 이것이 LCP(최대 콘텐츠 풀 페인트) 점수를 깎아먹는 주원인이었습니다. LCP(Largest Contentful Paint)는 사용자가 처음 보는 화면(뷰포트)에서 가장 큰 주요 콘텐츠(히어로 이미지나 메인 텍스트 등)가 완전히 나타나기까지 걸리는 시간을 의미하며, 구글의 권장 기준인 2.5초 이하를 달성해야 우수한 사용자 경험으로 평가받을 수 있습니다.
구체적인 원인을 파악했다면 문제가 되는 코드를 개선하도록 수정할 수 있을 것입니다.
👉 데이터베이스의 자동 로드(Autoload) 크기를 최적화하는 것 역시 로딩 속도를 높여 코어 웹 바이탈에 긍정적인 영향을 줍니다.
사이트 최적화를 위한 기본적인 조치
워드프레스 사이트 속도가 느리다면 몇 가지 조치를 통해 사이트 속도를 크게 개선할 수 있습니다.
- 가벼운 테마와 플러그인을 사용합니다. 사이트 속도가 중요하다면 GeneratePress와 같이 빠른 테마의 사용을 고려할 수 있습니다. 엘리멘터 페이지 빌더가 현재 1000만 개가 넘는 사이트에 사용되면서 큰 인기를 끌고 있습니다. Elementor를 사용하면 쉽고 편리하게 원하는 디자인의 페이지를 만들 수 있지만, 최적화가 제대로 되지 않으면 사이트 속도에 부정적인 영향을 미칠 수 있습니다.
- 플러그인 사용을 최소화합니다. 플러그인을 많이 사용한다고 해서 사이트 속도가 반드시 느린 것은 아니고, 오히려 잘못된 플러그인을 1개만 사용해도 사이트 속도가 매우 느려질 수 있습니다. 하지만 플러그인 개수가 너무 많으면 충돌할 가능성이 높아지고 속도에도 부정적인 영향을 미칠 수 있습니다. 불필요한 플러그인은 가급적 사용하지 않는 것이 바람직합니다.
- 캐시 플러그인 사용. 캐시 플러그인을 사용하면 사이트 속도가 크게 개선될 수 있습니다.
플러그인을 사용하지 않고, 대신 코드를 직접 만들어 추가하는 경우 챗GPT나 제미나이 등 AI에게 코드가 사이트 속도와 SEO 등에 최적화되어 있는지 물어보고 개선할 수 있다면 개선하는 것도 도움이 될 것 같습니다.
저는 오래 전에 만든 코드들을 AI를 통해 속도에 최적화되도록 요청하여 코드들을 수정했는데, 도움이 되었습니다. 잘못 만들어진 코드는 사이트 속도에 영향을 미치거나 심지어 서버에 과도한 트래픽을 유발하여 서버가 다운되기도 합니다.
클라우드웨이즈를 이용한다면 모바일 캐시 기능을 활성화하여 모바일 기기에서도 속도를 향상시킬 수 있습니다.
그리고 가급적 WPCode와 같은 플러그인에 코드 스니펫을 너무 많이 추가하지 않는 것이 바람직할 수 있습니다. 코드 스니펫이 많으면 사이트 속도에 부정적인 영향을 미칠 수 있습니다.
페이지스피드 인사이트 점수가 중요할까?
PageSpeed Insights 점수 자체는 구글이 순위를 매길 때 직접 사용하는 “랭킹 점수”가 아니라, Core Web Vitals·속도 지표를 종합해 보여주는 진단용 지표에 가깝습니다.
물론 페이지 속도와 코어 웹 바이탈 점수 자체가 검색 순위를 절대적으로 좌우하는 것은 아닙니다. 하지만 품질이 비슷한 두 개의 문서가 경쟁할 때는, 사용자에게 더 빠르고 안정적인 화면을 제공하는 페이지가 상위 노출에 유리해집니다.
따라서 점수를 100점까지 올리는 것보다, 점수가 너무 낮아 사용자 이탈이 늘어나는 상황(예: 50점 미만, LCP·INP·CLS가 '나쁨' 영역)에 해당하지 않도록 개선해 두는 것이 SEO 및 사용자 경험(UX) 측면에서 실질적으로 중요하다고 보는 것이 현실적일 수 있습니다.
PageSpeed Insights 점수가 높다고 해서 구글과 네이버 검색 결과에서 상위 페이지에 노출된다는 보장은 없습니다. 제가 아는 어떤 사이트는 점수가 매우 낮음에도 불구하고 구글과 네이버에 잘 노출되고 있습니다.😄
해당 사이트는 너무 많은 기능을 탑재하고 방문자도 많다 보니 사이트 속도가 느린 편이고, 이 때문에 사용자들의 불만이 많은 편입니다. 만약 속도를 획기적으로 개선한다면 더 많은 방문자 유입이 가능하지 않을까 생각됩니다.
마치며
저는 코어 웹 바이탈을 그리 신경 쓰는 편은 아니지만, 이왕이면 좋은 점수를 받는 것이 좋은 것 같습니다. 이 블로그에서는 플러그인 설치를 최적화하고, 추가한 코드를 AI를 통해 속도와 SEO에 적합하도록 개선했습니다.
현재 악성 IP 차단과 스팸 봇 대응을 위해 클라우드플레어 무료 버전을 연동해 사용 중입니다. 한국 내 CDN 에지 위치가 없어 우리나라에서는 지연 우려가 있을 수 있지만, 실제로는 라우팅 최적화와 캐싱 덕분에 속도 저하가 미미한 수준인 것 같습니다.
구글 페이지스피드 인사이트 점수가 절대적인 것은 아니지만, 점수가 너무 낮다면 원인을 파악하여 해결을 시도해볼 수 있을 것입니다.
크롬 Lighthouse 확장 프로그램을 통해 분석해 봤는데 PSI Frontend는 점수가 낮게 나오고 Lighthouse Viewer는 점수가 높게 나오는데 또다시 분석해 보면 점수가 다르게 나와서 그냥 내버려 두기로 했습니다 ㅎㅎ
네, 웬만큼 괜찮게 나오면 너무 신경쓰지 않아도 될 것 같습니다. 분석할 때마다 다르게 나오고, 점수가 높다고 해서 구글이나 네이버에 잘 노출되리라는 보장은 없습니다. 다만, 점수가 너무 낮으면 문제를 분석하여 사이트 속도 개선을 시도하면 도움이 되리라 생각됩니다.😄