첫인상이 절대적으로 중요한 곳이 있다면 바로 웹사이트입니다. 이는 단순히 디자인과 콘텐츠에 관한 이야기가 아닙니다. 그보다는 속도 개선이 성공의 가장 중요한 결정 요인 중 하나입니다.

로드 속도가 느린 웹사이트는 평판을 손상시키고 트래픽과 전환을 잃게 만들어 많은 비용을 초래합니다. 반대로 성능이 뛰어난 웹사이트는 비즈니스의 성공에 긍정적인 도미노 효과를 불러옵니다. 더 많은 방문자를 유치하게 되어 판매가 증가하여 고객을 더 많이 유치할 수 있게 됩니다.

웹사이트를 만드는 방법을 배우는 중요한 단계 중 하나는 처음부터 최적화된 기술을 제공하는 강력한 웹사이트 빌더를 사용하여 로드 속도가 빠른 사이트를 확보하는 것입니다. 하지만 여기서 끝이 아닙니다. 사이트의 콘텐츠가 성능에 방해가 되지 않도록 만드는 것은 여러분의 손에 달려 있습니다.

고려해야 할 사항이 많지만 그래도 제대로 찾아오셨습니다. 이 글에서는 웹사이트 속도 개선에 대해 알아야 할 모든 것과 사이트의 페이지 속도를 개선하는 방법에 대해 이야기하겠습니다.

웹페이지 속도란?

웹페이지 속도는 웹페이지의 콘텐츠를 로드하는 데 걸리는 속도를 나타냅니다. 이를 측정하는 방법에는 사이트 접속 후 처음으로 콘텐츠가 표시되는 시간(FCP)부터 속도 지표, 사이트 접속 후 큰 콘텐츠가 표시되는 시간(LCP)까지 여러 가지가 있지만 페이지 속도를 정의하는 가장 의미 있는 방법 중 하나는 상호작용에 걸리는 시간을 측정하는 것입니다.

은 사용자가 상호작용할 수 있는 지점까지 페이지를 로드하는 데 걸리는 시간입니다. 이는 CTA를 클릭하거나, 동영상을 재생하도록 선택하거나, 사용자가 특정 페이지에서 수행할 수 있는 여러 작업을 의미할 수 있습니다.

다음 질문은 아마도 "양호한 웹사이트 속도는 무엇인가요?"일 것입니다. 이에 대한 답은 업계에 따라 다르지만 평균적으로 페이지를 3초 이내에 로드되게 하는 것이 좋습니다. 페이지 속도 시간은 모바일 및 데스크톱뿐만 아니라 동일한 사이트의 페이지마다 다를 수 있다는 점도 기억해야 합니다.

*Lighthouse 10 이후 상호작용에 걸리는 시간 지표는 페이지 로드 지표로 제거되었습니다. LCP, 속도 지표 및 총 차단 시간이 사용자 경험의 더 나은 지표로 간주되기 때문입니다.

웹사이트 및 페이지 속도가 중요한 이유

웹사이트 속도 개선 및 사이트의 인프라와 관련하여 페이지 속도가 중요한 네 가지 주요 이유는 다음과 같습니다.

유용성

너무 당연하지만 페이지 로드 속도가 빠를수록 웹사이트 상호작용이 더 빨리됩니다. 방문자가 사이트에서 작업을 수행하는 데 도움이 되는 웹사이트 메뉴, 시각적 콘텐츠, 버튼 등의 항목을 로드하는 것을 말합니다. 페이지 속도를 개선하여 이러한 기능을 더 빠르게 표시하고 사용할 수 있도록 하면 방문자의 만족도가 높아지고 재방문할 가능성이 커집니다. 간단하죠?

사용자 경험

사용자는 프로세스를 더 빠르게 진행할 수 있을 때 웹사이트에 더 많이 참여할 가능성이 큽니다. 예를 들어 온라인 쇼핑몰이 있고 체크아웃 프로세스의 각 단계가 로드되는 데 몇 초가 넘게 걸린다면 잠재 구매자가 프로세스를 완전히 포기할 수 있습니다.

양식 채우기나 페이지 간 이동과 같이 사용자가 시도하는 다른 모든 작업에서도 마찬가지입니다. 사용자 참여를 제한하는 웹사이트 속도 문제는 전환율과 사이트를 다시 방문하는 방문자 수에 파급 효과를 미칩니다.

전환

대부분의 사이트 소유자가 공통적으로 가지고 있는 한 가지 구체적인 목표는 전환입니다. 연구에 따르면 웹사이트 속도가 단 0.1초 개선되더라도 전환율, 퍼널 진행 및 고객 참여에 긍정적인 영향을 미칠 수 있습니다. 방문자가 충분히 빨리 사이트의 기능을 이용할 수 없다면 다른 사이트로 이동할 것입니다.

검색 엔진

구글(Google)은 검색 엔진 최적화(SEO)라고 하는 작업인 사이트 순위를 매길 때, 웹사이트 속도 및 사용자 경험을 고려합니다 . 따라서 특정 키워드 검색 결과에서 페이지 순위를 높이려면 밀리초 단위로 페이지가 빠르게 표시되도록 하는 것이 좋습니다.

페이지 속도 측정 방법

웹사이트에서 페이지 속도를 측정하는 방법에는 여러 가지가 있습니다. 가장 신뢰할 수 있고 인기있는 방법 중 하나는 를 사용하는 것입니다. 여기서 사이트 URL을 입력하고 구글이 사이트 성능에 대한 보고서를 제공할 때까지 기다리기만 하면 됩니다.

해당 보고서에는 구글이 검색 결과에서 페이지 순위를 높게 결정할 때 또 다른 잠재적 순위 요소로 포함하는 여러 메트릭 또는 이 포함되어 있습니다. 양호한(녹색) 점수는 검색에서 사이트 전체 순위와 개별 페이지 순위에 도움이 될 수 있습니다. 낮은 또는 경고(빨간색) 점수는 사이트의 전체 및 개별 페이지 순위에 부정적인 영향을 줄 수 있습니다.

*2023년 4월에 에 따르면 페이지 경험, 페이지 속도, 모바일 친화성 및 사이트 보안은 순위 “신호”이며 순위 “시스템”과 혼동해서는 안된다고 합니다. 이 성명은 구글이 도움말 문서를 업데이트하여 시스템으로의 페이지 경험을 제거한 후 발표되었습니다. 위의 신호가 여전히 중요하지만 는 이러한 변화는 “우리는 사람들이 이러한 수치에 과하게 초점을 두는 것을 목도했으며, 이는 시간과 에너지를 잘 사용하는 것이 아닙니다.”라고 언급합니다.

구글 페이지스피드 인사이트는 100점 만점으로 사이트의 전체 속도 성능을 평가합니다. 90~100점 사이는 최적으로 간주되며, 59점 이하는 경고로 간주되므로 웹사이트 속도 개선의 우선 순위를 정해야 합니다.

Wix로 사이트를 만들고 계시나요? 구글조차 Wix가 성능을 우선하는 데 동의합니다. “Wix는 항상 성능을 최우선으로 생각하며 모니터링 도구와 사용자 경험 모두에서 이를 확실히 입증합니다.” 라고 구글의 수석 소프트웨어 엔지니어 겸 디벨로퍼 애드버케이트(Developer Advocate)인 요아브 바이스(Yoav Weiss)는 말합니다.

Wix 사이트의 경우 Wix Analytics의 에서 페이지 속도 인사이트와 현재 로딩 속도를 확인할 수 있습니다. 이 데이터는 사이트 사용자 및 구글 페이지스피드 인사이트에서 가져와 페이지 속도를 측정하기 위한 쉽게 접근할 수 있는 방법을 제공합니다.

페이지 속도를 측정하기 위해 여러 성능 테스트 도구를 사용하면 점수가 항상 달라집니다. 각 플랫폼은 다양한 방식으로 분석 및 데이터를 수집하며, 이는 언제든지 페이지 속도 점수에 영향을 미칠 수 있습니다. 하지만 가장 중요한 것은 점수를 높이기 위해 취할 수 있는 단계입니다. 이에 대해 아래에서 이야기하도록 하겠습니다.

사이트 및 페이지 속도를 개선하는 방법

일반적으로 올바른 웹사이트 빌더를 선택하면 페이지 속도와 웹사이트 성능을 향상시키는 데 필요한 많은 단계가 빌더에 내장되어 있습니다. 따라서 웹사이트의 성능에 대한 디자인 및 콘텐츠의 영향을 이해하면서 때때로 사이트 속도와 페이지 속도를 측정하는 데 집중하기만 하면 됩니다.

이제 웹사이트의 성능과 페이지 속도를 높여 고객과 구글이 모두 만족할 수 있도록 하는 방법에 대해 아래에서 알아보겠습니다. 또한 웹사이트 속도를 개선할 수 있는 훌륭한 기회를 제공하는 몇 가지 편리한 팁도 알려드리겠습니다.

다음은 웹사이트 속도 개선이 이루어지는 방식의 기초입니다.

1. 미디어 최적화

2. 코드 단순화

3. CDN 도입

4. 레이지 로드(lazy load) 활용

5. 플러그인 회피

6. 모바일 우선

7. 캐싱 배포

8. 콘텐츠 최적화

01. 미디어 최적화

이미지 크기가 크면 페이지 속도 개선이 어려울 수 있습니다. 이미지의 품질은 중요하지만 성능과 균형을 이루어야 합니다. 이렇게 하기 위해 이미지를 압축하는 여러 방법이 있습니다.

가장 좋은 방법은 와 같이 크기 조정, 자르기 및 변환을 통해 서버에서 미디어를 자동으로 최적할 수 있는 웹사이트 빌더를 선택하는 것입니다. 이러한 최적화는 다양한 기기에서 최고의 품질을 제공합니다.

웹사이트를 만들 때 이미지 저장 방식을 변경하면 사이트의 페이지 로드 속도에 긍정적인 영향을 미칠 수 있습니다. 사이트에 배포할 수 있는 몇 가지 모범 사례로는 PNG 대신 JPG(JPG 파일은 크기가 작아 로드 속도가 빨라집니다)로 이미지를 저장하고, 가능하면 SVG 파일(크기가 더 작고 모양이나 로고에 적합합니다)을 사용하며, 마지막으로 더 큰 크기의 이미지는 페이지 아래쪽에 배치하여 사용자가 기본 화면 콘텐츠에 집중하는 동안 로드할 시간을 버는 것입니다.

움직이는 GIF보다 더 페이지를 눈에 띄게 만드는 것도 없습니다. 저희도 참 좋아하는데요. 하지만 이것처럼 페이지를 느리게 만드는 것도 또한 없습니다. 따라서 움직이는 GIF를 반드시 사용해야 한다면 사용하기 전에 신중히 고려하고 페이지 아래쪽에 배치하도록 해야 합니다. 애니메이션의 프레임 수를 제한하고 치수를 작게 유지하면 페이지 속도 점수에 영향을 주는 디자인 특징도 방지할 수 있습니다.

사이트에 어떠한 형태든 애니메이션을 삽입해야 하는 경우 사용할 수 있는 또 다른 훌륭한 웹사이트 속도 개선 팁은 동영상을 사용하는 것입니다. 동영상은 애니메이션보다 작은 파일 크기를 사용합니다.

전문가들도 동의하는 대로 때로는 단순한 것이 더 좋을 수 있습니다. e1365.com의 퍼포먼스 테크 리드인 댄 샤피르(Dan Shappir)는 “을 향상시키는 가장 쉬운 방법 중 하나는 사이트의 복잡성을 줄이는 것입니다.”라고 말합니다. 이는 디자인 및 콘텐츠, 특히 이미지에서 시작하여 웹사이트의 설정 및 기능까지 확장됩니다.

02. 코드 단순화

복잡한 코드나 제대로 포맷되지 않은 코드는 페이지 속도를 느리게 할 수 있습니다. 단순화된 코드를 사용하면 구글이 사이트를 쉽게 크롤링할 수 있으며 페이지가 더 빨리 로드되기가 쉬워집니다(구글의 일처리를 간편하게 만드는 모든 작업은 페이지 순위를 높이는 데 도움이 됩니다). 모든 페이지에 단순화된 코드를 활용하는 웹사이트 빌더를 선택하면 이를 확인하거나 정리할 필요가 없으며, 페이지가 성능에 최적화되어 있다는 확신을 가질 수 있습니다.

03. CDN 도입 

(콘텐츠 배포 네트워크)은 서로 다른 지리적 위치에 배치된 서버와 데이터 센터를 지칭하며, 해당 지역의 웹사이트에 콘텐츠를 전송합니다. 따라서 콘텐츠 전송 시간이 단축되고 로드 시간이 줄어듭니다. Wix는 글로벌 CDN 네트워크를 갖추고 있으므로 사이트 위치가 어디든 상관없이 사이트 페이지가 성능에 맞게 최적화될 수 있습니다.

04. 레이지 로드(lazy load 활용)

레이지 로드(lazy load)는 사용자가 처음에 사이트에서 보게 되는 것 외에 웹사이트 콘텐츠 또는 미디어의 로딩을 지연시키는 것을 의미합니다. 이는 많은 웹사이트 빌더에서 자동으로 지원하며 모든 페이지에 레이지 로드를 배포하는 경우가 많습니다. 또한 크거나 높은 해상도의 요소를 페이지 하단에 배치하여 사용자가 아래로 스크롤하기 전에 사이트에 로드할 시간을 확보하도록 할 수 있습니다.

웹사이트의 페이지에서 무엇이 먼저 로드되도록 할지 신중히 생각하세요. 사용자가 사이트를 처음 방문했을 때 볼 수 있는 내용이므로 처음 표시되는 기본 화면은 가장 먼저 고려해야 하는 부분입니다. 간단하면서도 영향력 있는 방식으로 유지하고 페이지의 나머지 부분이 로드되는 동안 방문자를 붙잡을 수 있는 방법으로 사용해야 합니다.

05. 플러그인 회피

제3자 분석, 추적 코드 및 플러그인을 사이트에 추가하면 페이지 속도가 정말 느려질 수 있습니다. 따라서 이 모든 기능이 내장된 웹사이트 빌더를 선택하는 것이 중요합니다. 이렇게 하면 속도를 개선하는 동시에 가능한 한 많은 사용자 행동 데이터를 수집하는 복잡한 작업 간 균형을 맞출 수 있습니다.

그래도 사용자 및 사이트 성능에 대한 더 많은 데이터가 필요하신가요? 사용자가 사이트와 상호 작용하는 방식을 분석하는 데 중점을 둔 플러그인 및 추적 코드를 우선 사용하는 것이 좋습니다. 이러한 플러그인 및 추적 코드는 기능에 대한 보다 의미 있는 피드백을 제공합니다. 또한 추적 플러그인과 픽셀을 추가하거나 추가하지 않고 사이트의 페이지 속도와 성능을 평가하여 페이지 속도를 저해하는지 완전히 이해할 수 있습니다.

06. 모바일 우선

사용자와 검색 엔진에 최상의 모바일 경험을 제공하는 것은 웹사이트의 성능을 최적화하는 데 매우 중요하며, 웹사이트 시작 체크리스트의 필수 요소입니다. 우리는 구글이 모바일용으로 우선 크롤링하고, 사용자들이 모바일 기기에서 점점 더 많이 검색하고 있다는 것을 알고 있습니다. 따라서 페이지 속도 개선에 관해서는 모바일 웹사이트가 우선 순위가 되어야 합니다.

07. 캐싱 배포

자동 캐싱은 사이트 콘텐츠의 일부가 사용자에게 처음 표시되는 대로 저장되고 사용자가 다시 방문할 때와 동일한 방식으로 표시되는 것을 의미합니다. 이는 사이트 재방문 사용자에게 저장된 콘텐츠를 제공하여 로드 시간을 줄이기 때문에 페이지 속도 및 사용자 경험을 개선하기 위해 고려해야 할 중요한 요소입니다.

Wix는 모든 페이지에 자동 캐싱을 배포하여 페이지 속도 개선 방법에 대한 구체적인 사항을 고려하지 않고도 프로처럼 새로운 웹사이트를 시작하는 데 집중할 수 있습니다.

08. 콘텐츠 최적화

콘텐츠 최적화는 많은 것을 의미할 수 있습니다. 여기서는 페이지 속도에 영향을 주지 않는 방식으로 페이지에 콘텐츠를 표시하는 방법을 의미합니다.

웹사이트 속도 개선이라는 명목으로 콘텐츠 최적화를 위한 좋은 예는 Wix의 내장 입니다. 내장 동영상 플레이어를 사용하면 유튜브(YouTube) 동영상을 임베드하는 것과 같이 페이지 속도에 실질적이고 해로운 영향을 줄 수 있는 외부 출처에 의존하지 않고 페이지에 동영상을 표시할 수 있습니다. 이와 같은 내장 기능을 통해 성능 중심의 사이트를 보다 쉽게 디자인할 수 있습니다.

또한 웹사이트의 글꼴 수와 크기도 고려해야 합니다. 글꼴을 많이 사용하고 색과 크기가 다양할수록 페이지 로드 속도가 느려집니다. 영향을 미칠 몇 가지 옵션을 선택하고 해당 옵션을 고수해야 합니다. 이는 처음부터 웹사이트를 구축하거나 단순히 페이지 속도를 향상시키기 위해 기존 웹사이트를 최적화하는 모든 경우에 알아두어야 할 사항입니다.

웹사이트 속도 개선 FAQ

By 조윤정

SEO & 블로그 전가