구글 검색 결과 상위에 내 웹 사이트를 띄우기 위해서는 SEO적으로 여러 요소를 고려해야 합니다. 그 중 웹 페이지 로딩 속도도 아주 중요한 역할을 하고 있습니다. 이번 게시글에서는 로딩 속도에 대한 측정 방법 및 개선사항을 알아보도록 하겠습니다.
목차
- 웹 사이트 로딩 속도
- 로딩 속도란?
- 구글 검색 결과와 로딩 속도의 관계
- 웹 사이트 로딩 속도를 결정 짓는 요소
- 로딩 속도 측정 방법
- 로딩 속도 개선 방법
웹 사이트 로딩 속도
로딩 속도란?
웹 페이지 로딩 속도란 어떤 URL 또는 게시글을 클릭한 시점부터 웹 페이지가 로딩이 끝날때 까지 경과하는 시간을 의미합니다. 여기서 “로딩 시간”, “로딩 속도”는 경과 시간(빠르기)이라는 의미를 가지고 비슷하게 사용됩니다.
따라서 로딩 속도, 로딩 시간이라는 단어를 보면 쉽게 페이지가 최종 로딩되기 까지의 경과 시간이라고 생각하시면 됩니다.
구글 검색 결과와 로딩속도의 관계
이제 로딩 속도와 구글 검색 결과에 대해서 알아보겠습니다.
결론을 먼저 말씀드리면 검색 결과 상단에 노출되기 위해서는 웹 페이지의 로딩 시간이 짧아야 합니다. 로딩 시간이 길어질수록 사용자는 지루함을 느끼며 이탈률이 늘어난다는 통계 또한 존재합니다. 구글에서 제시하는 로딩시간은 2.5초 이하라고 합니다. (이 기준은 구글의 코어 웹 바이탈 LCP 요소 문서에서 확인하실 수 있으며 아래 링크를 통해 확인하실 수 있습니다.)
구글에서 로딩 속도에 대한 사항을 중요시 여기고 코어 웹 바이탈의 LCP 수치로도 이 기준을 평가하는 만큼 사이트의 로딩 속도를 증가시키기 위해서 많은 노력을 기울여야 합니다. 이제 아래 문단에서 로딩 속도를 결정 짓는 요소에 대해서 알아보도록 하겠습니다.
웹 사이트 로딩 속도를 결정 짓는 요소
로딩 속도의 중요성에 어느정도 인지하셨다면 무엇 때문에 로딩 시간이 발생하는지 알아보도록 하겠습니다.
로딩 시간을 발생 시키는 요소
- HTML 요소
- CSS 요소
- 자바스크립트 요소
- 사진/영상과 같은 정적 자료
- 폰트
- 서버 문제
위의 요소들은 사용자가 웹 사이트에 방문하면 서버로 부터 다운로드를 진행하게 됩니다. 다운로드 속도는 파일의 용량에 따라 큰 차이를 보이며 로딩 속도의 차이를 발생시키게 됩니다.
이제 아래 문단에서 웹 페이지 로딩 속도 측정 방법에 대해서 알아보겠습니다.
로딩 속도 측정 방법
로딩 속도를 측정하는 방법은 많지만 구글에서 제공하는 사이트를 이용하여 측정하도록 하겠습니다. 아래 주소를 방문해 주시면 감사하겠습니다.
사이트를 방문하면 상단에 분석할 URL을 입력하는 공간이 존재합니다. 분석을 원하시는 사이트 주소를 입력하고 Analyze 버튼을 눌려 분석을 시작하시면 됩니다.
약 1분의 시간이 소모됩니다.
분석이 완료되면 로딩 시간 및 웹 사이트의 어떤 요소가 몇초의 시간을 소모 하는지 알 수 있습니다.
위의 결과를 보면 이미지 8.13초, CSS 0.75초가 로딩에 소요된 것을 확인할 수 있고 우측에 자세히 버튼을 눌려 최적화 방법과 최적화를 진행하였을 경우 경과 시간을 대략적으로 확인하실 수 있습니다.
로딩 속도 개선 방법
최종적으로 로딩 속도 개선 방법에 대해서 알아보겠습니다. 우리는 이번 게시글을 통해서 구글 검색결과에 대한 로딩속도의 중요성에 대해서 알아보았고 로딩 속도 측정 및 로딩 속도를 발생시키는 요소들을 확인했습니다. 위 사항들을 다 확인하시고 본인의 웹 사이트에서 로딩 속도를 저하 시키는 요인을 찾은 후 아래 방법들 중에서 해결법을 찾아보겠습니다.
이미지 용량 최소화
HTML 요소는 모두 텍스트 형태이기 때문에 작은 용량이지만 이미지는 평균적으로 한 개당 1MB의 크기를 가집니다. 따라서 이미지의 용량을 최소화시키면 로딩 시간 또한 감소합니다.
아래에서 이미지 용량을 줄이는 방법에 대해서 살펴 보겠습니다.
- PC 기반 웹은 1280px, 모바일 기반 웹은 420px의 이미지 업로드
- 이미지 확장자를 webp 방식으로 변경 후 업로드
- webp가 지원하지 않는 경우 실물 이미지는 jpg, 제작한 이미지는 png로 업로드
- 해상도가 낮아지지 않는 선에서 최대한 압축화 진행
위 4가지 사항을 통해 이미지 용량을 최소화 시킬 수 있습니다.
AMP의 적용
AMP는 모바일 페이지를 가속화 시키는 방법으로 직접 구축을 진행하는 경우도 있고 플러그인을 사용하는 경우도 존재합니다. 아래 AMP에 관련된 자세한 글을 통해 AMP를 적용하여 로딩 속도를 증가시킬 수 있습니다.
CSS 인라인
CSS는 웹사이트의 미적 요소를 담당합니다. CSS는 HTML 파일에 연결되어 동작합니다. 연결 방식은 크게 2가지로 HTML 파일에서 CSS 파일을 불러오는 방식이 있고 HTML 내부에(인라인) CSS값을 주는 경우가 있습니다.
두가지 방식 중 더 빠른 로딩 시간을 가지는 것은 내부(인라인) CSS 방법입니다. 그 이유는 HTML이 CSS를 불러오는 시간이 발생하기 때문입니다.
인라인 CSS 적용 방법은 아래와 같습니다.
<h2 style="color:white; background-color:black">소제목입니다.</h2>적용과 수정에 있어 다소 불편하긴 하지만 메인 페이지나 방문이 많은 페이지는 CSS 값을 인라인화 시켜 로딩 시간을 단축하실 수 있습니다.
자바스크립트 인라인
자바스크립트 또한 CSS와 마찬가지로 HTML에서 .js 파일을 불러와서 작업을 수행하게 됩니다. HTML에 자바스크립트 파일을 호출하게되면 로딩 시간이 발생하기 때문에 자바스크립트 또한 인라인 시키도록 합시다.
로컬 폰트와 CDN 폰트
이 방법은 직접 서버를 통해 웹 페이지를 가동하는 경우 입니다.
대부분의 웹 페이지는 디자인을 위해 기본 폰트 대신 상용 폰트를 사용하고 있습니다. (예, 나눔고딕) 기본 폰트가 아닌 경우 웹 페이지 방문자에게 폰트를 제공해야하는 과정이 존재합니다. 이 과정을 위해서 서버에 폰트 파일을 업로드해야 하는데 그 방식이 2가지가 존재합니다.
- CDN 폰트 : 구글과 같은 타 서버에 업로드 되어 있는 폰트를 불러와서 사용
- 로컬 폰트 : 개인 웹 서버에 폰트를 업로드
위 2가지 방법 중 로딩 시간적 측면에서 로컬 폰트가 우위를 가집니다. 개인 웹 서버에 폰트를 업로드하고 설정해야하는 수고스러움이 있지만 외부 서버로 부터 폰트를 불러오는 시간 때문에 발생하는 로딩 속도의 저하를 막으실 수 있습니다.
서버 성능과 호스팅 지역 변경
이 방법 또한 직접 서버(클라우드 서버)를 운영하시는 경우에만 해당됩니다.
서버 환경과 서버의 위치는 로딩 속도에 아주 큰 영향을 미칩니다. 동시 방문자수가 만명이상인데 문서 작업용 컴퓨터로 서버를 구동시키면 과부화가 발생하여 사용자에게 쾌적하지 못한 환경을 제공하게 됩니다. 따라서 항상 트래픽 및 유입 분석을 진행하면서 동시접속자 수에 따른 서버 환경 구성을 최적화 시켜야 합니다.
또 서버의 호스팅 지역도 중요합니다. 웹 페이지는 로딩은 방문자와 페이지 제공자간의 데이터 전달이기 때문에 물리적 거리가 증가할수록 로딩 시간도 증가하게 됩니다. 만약 한국인 접속자가 많고 한국인을 대상으로 사업을 진행하는데 미국에 서버가 존재하면 긴 로딩 시간이 발생하여 쾌적하지 못한 환경이 제공될 수 있습니다. 이 경우 서비스하고 있는 한국으로 서버를 옮기셔야 합니다.
(전세계를 상대로 서비스를 진행하는 유튜브는 전세계에 분리된 서버를 갖추고 있습니다.)
이번 게시글을 통해 구글에 웹사이트가 검색될 수 있도록 속도 측정을하고 개선하는 방법에 대해서 알아보았습니다. 추가로 검색 엔진 최적화에 대한 자료나 컨설팅 서비스를 받고 싶으신 분은 아래 컨설팅 서비스 알아보기 페이지를 방문해 주시면 감사하겠습니다.
TBWA DataLab에서 활동하고 있는 김지훈입니다. SEO 서비스에 대한 많은 정보를 제공하겠습니다.
핑백: 흔히 일어나는 SEO 실수 8가지 – 해결법까지 - TBWA 데이터랩
핑백: 고객 경험 (CX)에 대한 모든 것 - 개선 팁 6가지 - TBWA 데이터랩