웹페이지 로딩 속도 개선 방법과 SEO

이번 게시글을 통해 웹페이지 로딩 속도의 중요성과 측정 방법 알고 속도를 개선하기 위한 해결 방안들을 살펴보도록 하겠습니다.

웹페이지 로딩 속도와 중요성
웹페이지 로딩 속도 개선 방법

웹페이지 로딩 속도와 중요성

웹페이지 로딩 속도란?

웹페이지 로딩 속도란 우리가 어떤 홈페이지를 클릭한 시점부터 홈페이지 화면이 모두 불러올 때까지의 시간입니다. 즉 웹페이지 내부에 존재하는 콘텐츠들이 로딩되는 속도를 웹페이지 로딩 속도라고 부릅니다.

웹페이지가 로딩되는데 약간의 시간이 발생하는 이유는 사용자와 제공자간의 데이터 전달 때문입니다. 전달되는 데이터와 각 데이터가 속도에 미치는 영향은 아래와 같습니다.

HTML 요소 (웹페이지의 뼈대) : 아주 미미하지만 약간의 시간이 소요
CSS 요소 (웹페이지의 디자인) : 아주 미미하지만 약간의 시간 소요
JavaScript (웹페이지의 움직이는 요소) : 동적 자료로 HTML보다 많은 시간이 소요됩니다.
사진/영상 자료 : 기본적으로 하나라도 존재하면 소요시간이 대폭 상승하며 용량에 따라 아주 큰 차이를 보입니다.
폰트 : 폰트 위치 및 방식에 따라 약간의 시간이 소요됩니다. 개선 방안에서 자세히 알아보도록 하겠습니다.

여러 요소들이 다운로드 되기 때문에 로딩 시간이 생깁니다. 이때 인터넷 속도(환경)도 아주 큰 영향을 미칩니다.

로딩 속도의 중요성 : 이탈률

이제 웹페이지 로딩 속도의 중요성에 대해서 알아보도록 하겠습니다. 대한민국 평균적인 인터넷 환경에서 어떤 웹 사이트를 방문하면 최소 0.3초 ~ 최대 10초의 시간 안에 웹 사이트가 로딩 됩니다. 전문가들은 웹 사이트 방문 로딩 시간과 방문자의 행동을 분석하여 로딩 시간이 증가하면 이탈률이 증가한다고 분석했습니다.

위 통계로 부터 결론을 지으면 운영하시는 홈페이지가 사업 목적일 경우 로딩속도 때문에 이탈률이 증가하면 홍보 및 구매전환적 목적에서 치명적인 손해를 입으실 수 있습니다. 따라서 웹페이지 로딩속도가 운영자(사업자)로서 아주 중요한 요소입니다.

로딩 속도 측정 방법

이제 로딩 속도가 중요하다는 것은 아실 수 있을 겁니다. 그럼 사이트 속도측정에 대해 알려드리겠습니다.

URL 입력을 통한 확인

편하게 측정하실 수 있는 방법은 로딩 속도를 측정하는 사이트를 이용하는 것 입니다. 아래 주소에 방문하신 후 측정하고자 하는 URL을 입력하시면 최종 로딩 까지 경과하는 시간을 알 수 있습니다.

https://pagespeed.web.dev/

간편하게 URL만 입력한 후 모바일 / PC 환경에 대한 로딩 속도 및 여러 사항들을 확인하실 수 있습니다.

하단으로 가시면 어떤 요소 때문에 늦게 로딩되는지 더 좋은 방식으로 개선 했을 경우 예상 경과 시간을 확인하실 수 있습니다.

개발자 도구를 통한 확인

위 방법이 더 편리하지만 웹 브라우저의 개발자 도구를 사용하는 방법도 알려드리겠습니다. 개발자 도구를 실행하는 방법은 다음과 같습니다.

윈도우 : f12키
맥 : Command + Option + i

개발자 도구를 실행 시킨 후 Network(네트워크) 항목을 통해 방문하는 웹사이트의 로딩 속도를 확인하실 수 있습니다.

네이버의 메인화면을 로딩 했을때 경과하는 시간과 로딩 되는 요소(이미지, HTML, 등)들을 확인하실 수 있습니다. 상단의 그래프를 통해 어떤 요소가 가장 늦게 또는 가장 길게 시간을 소모하는지 확인하시고 해당 요소에 대한 개선 방안을 찾으시면 됩니다.

코어 웹 바이탈

웹페이지 로딩 속도와 관련하여 코어 웹 바이탈이라는 정의가 있어서 간략하게 소개해 드리겠습니다.

코어 웹 바이탈이란 웹페이지 로딩속도, 모바일 친화성, HTTPS 암호화 요소와 같이 사용자에게 안전하고 빠르며 양질의 콘텐츠를 제공하는 웹사이트의 지표를 나타내는 요소입니다. 앞으로 SEO에 대해서 깊에 공부하시게 되면 자주 등장하는 단어로 가볍게 기억해두시는 것을 추천드립니다.

https://seo.tbwakorea.com/blog/core-web-vital

웹페이지 로딩 속도 개선 방법

위에서 로딩 속도를 측정하신 후 각 요소에 대해서 속도를 개선하는 방법에 대해서 알려드리겠습니다.

html 이미지 로딩 속도 개선

이미지가 포함된 웹페이지의 경우 이미지 때문에 로딩 시간이 증가함을 확인하실 수 있을 겁니다. 웹페이지의 HTML/CSS, JS, 폰트 요소는 모두 텍스트 형태이기 때문에 작은 용량이지만 이미지는 평균적으로 한 개당 1MB의 크기를 가집니다. 따라서 이미지의 용량을 최소화시키면 로딩 시간 또한 감소합니다.

아래에서 이미지 용량을 줄이는 방법에 대해서 살펴 보겠습니다.

PC 기반 웹은 1280px, 모바일 기반 웹은 420px의 이미지 업로드
이미지 확장자를 webp 방식으로 변경 후 업로드
webp가 지원하지 않는 경우 실물 이미지는 jpg, 제작한 이미지는 png로 업로드
해상도가 낮아지지 않는 선에서 최대한 압축화 진행
CMS 사용할 경우, 모바일 로딩 속도 개선을 위해 AMP 플러그인 활용

위 4가지 사항을 통해 이미지 용량을 최소화 시킬 수 있습니다.

추가로 이미지 관련 SEO 작업에 관심이 있으신 분은 아래 게시글을 참고하시면 감사하겠습니다.

구글 이미지 검색 유입을 위한 SEO와 HTML 설정

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가지 방법 중 로딩 시간적 측면에서 로컬 폰트가 우위를 가집니다. 개인 웹 서버에 폰트를 업로드하고 설정해야하는 수고스러움이 있지만 외부 서버로 부터 폰트를 불러오는 시간 때문에 발생하는 로딩 속도의 저하를 막으실 수 있습니다.

서버 성능과 호스팅 지역 변경

이 방법 또한 직접 서버(클라우드 서버)를 운영하시는 경우에만 해당됩니다.

서버 환경과 서버의 위치는 로딩 속도에 아주 큰 영향을 미칩니다. 동시 방문자수가 만명이상인데 문서 작업용 컴퓨터로 서버를 구동시키면 과부화가 발생하여 사용자에게 쾌적하지 못한 환경을 제공하게 됩니다. 따라서 항상 트래픽 및 유입 분석을 진행하면서 동시접속자 수에 따른 서버 환경 구성을 최적화 시켜야 합니다.

또 서버의 호스팅 지역도 중요합니다. 웹페이지는 로딩은 방문자와 페이지 제공자간의 데이터 전달이기 때문에 물리적 거리가 증가할수록 로딩 시간도 증가하게 됩니다. 만약 한국인 접속자가 많고 한국인을 대상으로 사업을 진행하는데 미국에 서버가 존재하면 긴 로딩 시간이 발생하여 쾌적하지 못한 환경이 제공될 수 있습니다. 이 경우 서비스하고 있는 한국으로 서버를 옮기셔야 합니다.

(전세계를 상대로 서비스를 진행하는 유튜브는 전세계에 분리된 서버를 갖추고 있습니다.)

이상으로 웹페이지 로딩 속도의 정의와 중요성 그리고 측정과 개선하는 방법을 알아보았습니다.

이번 게시글을 통해서 웹페이지 로딩 속도의 중요성과 개선하기 위한 여러가지 방안들을 살펴 보았습니다. 위 방법들은 모두 SEO를 위해서 시행되고 있습니다. 추가적인 SEO 관련 사항을 알고 싶으시거나 저희 데이터랩에 문의하실 내용이 있으시면 아래 컨설팅 서비스 알아보기를 방문해주세요.

TBWA 데이터랩 SEO 컨설팅 서비스 알아보기!