웹 사이트 속도 개선 팁 | 웹 사이트 속도 개선 방법

웹 성능은 측정 가능하고 인지 가능한 웹 사이트 사용자 경험의 품질을 총칭하는 용어로, 특히 페이지의 속도와 안정성에 중점을 둡니다.

개발자와 웹 사이트 소유자는 웹 사이트의 성능을 개선하기 위해 여러 조치를 실행할 수 있습니다. 이러한 조치에는 이미지 크기, 코드 형식, 외부 스크립트 사용 등의 웹 디자인 요소를 최적화하고 호스팅, 콘텐츠 캐싱, 부하 분산에 적합한 공급자를 선택하는 것이 포함됩니다.

웹 페이지가 더 빠르고 안정적으로 로드되면 더 나은 사용자 경험이 제공될 뿐만 아니라 유기적 검색 결과에서 더 높은 순위를 차지하고 잠재적인 웹 방문자에게 더 잘 노출되며 전환율이 높아지는 경향이 있습니다.

웹 사이트 성능을 테스트하는 방법

웹 사이트의 성능을 개선하기 위한 중요한 첫 단계는 현재 성능을 측정하는 것입니다. 사용자(및 다른 당사자)가 웹 사이트의 속도와 안정성을 인식하는 방식은 다양한 요인에 의해 결정되며, 이러한 요인을 측정해야만 어떤 조치가 가장 개선 효과가 클지 알 수 있습니다.

성능 측정을 위한 다양한 무료 도구가 존재하며, 여기에는 Google Lighthouse(Google Chrome 웹 브라우저의 개발자 도구 제품군에서 사용 가능) 및 Cloudflare Observatory(모든 Cloudflare 사용자가 대시보드에서 사용 가능)가 포함됩니다.

웹 사이트 소유자는 이들 도구를 사용하여 무엇을 평가해야 할까요? 중요한 웹 성능 측면을 측정하는 세 가지 지표로 구성된 핵심 웹 바이탈을 살펴보는 것도 좋은 방법입니다.

• 최대 콘텐츠풀 페인트는 페이지에서 가장 큰 요소가 얼마나 빨리 로드되는지 측정합니다
• 첫 번째 입력 지연은 페이지가 사용자 입력에 얼마나 빨리 반응하는지 측정합니다
• 누적 레이아웃 이동은 페이지 요소의 시각적 안정성을 측정합니다

페이지의 핵심 웹 바이탈을 개선하면 가치 있는 사용자 경험 신호가 제공될 뿐만 아니라 Google 유기적 검색 결과에서 페이지의 순위가 높아질 수 있습니다.

평가해야 할 다른 중요한 지표로는 첫 번째 바이트 시간(페이지 로딩 시작 속도), DNS 조회 속도(페이지의 도메인 이름 서비스가 도메인 이름을 IP 주소로 변환하는 속도), 인터랙티브 시간(사용자가 페이지와 상호 작용할 수 있는 속도) 등이 있습니다.

이러한 메트릭을 측정하는 것이 어떻게 실행으로 이어질 수 있는지 알아보려면 다음 예를 살펴보세요.

• 최대 콘텐츠풀 페인트가 느린 웹 페이지는 사용자에게 가장 큰 구성 요소를 표시하는 데 너무 오래 걸립니다. 웹 페이지 소유자는 해당 구성 요소 이전에 불필요한 코드가 로드되고 있는지 조사하고 해당 코드를 제거할지 여부를 고려할 수 있습니다.
• 첫 번째 바이트 시간이 느린 웹 페이지의 경우 웹 사이트 리소스를
원본 서버에서 가져오는 데 너무 오래 걸립니다. 웹 페이지 소유자는 DNS 공급자와 웹 사이트 호스트의 응답 시간을 조사하여 서비스 중 하나 또는 두 서비스를 재구성하거나 교체할 수 있습니다.

웹 사이트 성능 개선 방법

강력한 웹 성능을 보장하는 청사진은 없지만, 웹 사이트 소유자는 다음과 같은 모범 사례를 사용하여 사이트 속도와 안정성을 높일 수 있습니다.

이미지 최적화

이미지 파일은 HTML 및 CSS 파일보다 크기가 큰 경향이 있으므로 웹 사이트에서 이미지가 로드되는 데 가장 오래 걸리는 경우가 많습니다. 다행히 이미지 최적화를 통해 이미지 로드 시간을 줄일 수 있는데, 이 과정에는 일반적으로 이미지의 해상도와 크기를 줄이고 이미지 파일 자체를 압축하는 것이 포함됩니다.

HTTP 요청 수 제한

대부분의 웹 페이지에서는 브라우저가 이미지, 스크립트, CSS 파일 등 페이지의 다양한 자산에 대해 여러 차례 HTTP 요청을 해야 합니다. 실제로 많은 웹 페이지에서 이러한 요청을 수십 개씩 필요로 합니다. 각 요청은 리소스를 호스팅하는 서버를 왕복하게 되므로 웹 페이지의 전체 로드 시간이 늘어날 수 있습니다.

이러한 잠재적인 문제 때문에 각 페이지에 로드해야 하는 총 자산 수는 최소한으로 유지해야 합니다. 속도 테스트는 어떤 HTTP 요청이 가장 시간이 많이 걸리는지 파악하는 데 도움이 됩니다.

브라우저 HTTP 캐싱 사용

브라우저 캐시는 브라우저에서 정적 파일의 사본을 저장하는 임시 저장 위치이므로, 최근에 방문한 웹 페이지를 더 빠르게 로드할 수 있습니다. 개발자는 자주 변경되지 않는 웹 페이지의 요소를 캐싱하도록 브라우저에 지시할 수 있습니다. 브라우저 캐싱에 대한 지침은 호스팅 서버의 HTTP 응답 헤더에 있습니다. 이렇게 하면 서버가 브라우저로 전송해야 하는 데이터의 양이 크게 줄어들어 특정 페이지를 자주 방문하는 사용자의 로드 시간이 단축됩니다.

불필요한 렌더링 차단 JavaScript 제거

웹 페이지에 더 중요한 페이지 콘텐츠보다 먼저 로드되는 불필요한 코드가 있을 수 있으며, 이로 인해 전체 로드 시간이 느려질 수 있습니다. 이는 특히 많은 소유자가 독자적으로 코드와 콘텐츠를 추가하는 대규모 웹 사이트에서 흔히 발생합니다. 웹 페이지 소유자는 웹 성능 도구를 사용하여 성능이 좋지 않은 페이지에서 불필요한 코드를 파악할 수 있습니다.

외부 스크립트 사용 제한

외부 댓글 시스템, CTA 버튼, CMS 플러그인, 리드 생성 팝업 등 다른 곳에서 로드되는 스크립팅된 웹 페이지 요소는 페이지가 로드될 때마다 로드해야 합니다.

스크립트의 크기에 따라 외부 스크립트 때문에 웹 페이지 속도가 느려지거나 웹 페이지가 한꺼번에 로드되지 않을 수 있습니다(이를 '콘텐츠 점프' 또는 '레이아웃 이동'이라고 하며, 전체 웹 페이지를 보기 위해 스크롤해야 하는 모바일 사용자에게 특히 불편할 수 있습니다).

리디렉션 사용 제한

리디렉션은 한 웹 페이지 방문자가 다른 페이지로 이동하는 것을 말합니다. 리디렉션 때문에 페이지 로드 시간이 몇 분의 1초, 때로는 몇 초까지 추가될 수 있습니다. 리디렉션은 때때로 피할 수 없지만, 과도하게 사용될 수 있으며, 소유자가 여러 명인 대규모 웹 사이트에서는 시간이 지남에 따라 누적될 수 있습니다. 웹 사이트 소유자는 리디렉션 사용에 대한 명확한 가이드라인을 마련하고 중요한 웹 페이지에 불필요한 리디렉션이 있는지 주기적으로 검사해야 합니다.

CSS 및 JavaScript 파일 최소화

코드 최소화란 코드 주석, 공백, 불필요한 세미콜론 등 컴퓨터가 코드를 이해하고 실행하는 데 필요하지 않은 모든 것을 제거하는 것을 의미합니다. 이렇게 하면 CSS 및 JavaScript 파일의 크기가 약간 작아져 브라우저에서 더 빠르게 로드되고 대역폭을 덜 차지합니다. 최소화하면 일반적으로 성능이 미미하게 향상되지만, 그래도 중요한 모범 사례입니다.

중요한 웹 사이트 기능에 효과적인 타사 서비스 사용

• 호스팅: 아무리 잘 디자인된 웹 사이트라 해도 원본 서버가 요청에 느리게 응답하면 로딩 속도가 느려집니다. 웹 사이트 소유자는 평균 응답 시간이 200ms 미만이고 안정성이 좋은 서버를 선택해야 합니다.
• DNS: DNS는 도메인(예:example.com)을 페이지 로딩 프로세스의 중요한 부분인 IP 주소로 변환하는 시스템입니다. 웹 사이트 소유자는 웹 호스트의 DNS에 의존하는 대신 결과를 빠르고 안정적으로 제공('확인')하는 DNS 서비스를 선택해야 합니다.
• 캐싱: 웹 사이트 콘텐츠가 요청하는 사용자에게 더 가까이 위치할수록 사용자는 더 빨리 콘텐츠를 받을 수 있습니다. 웹 사이트 소유자는 콘텐츠 전송 네트워크(CDN)를 사용하여 전 세계 여러 위치에 웹 콘텐츠를 캐시해야 사용자 요청이 웹 사이트의 원본 서버에 도달하기 위해 수백 또는 수천 마일을 이동하거나 여러 자율 네트워크를 거치지 않아도 됩니다.
• 사이버 보안: DDoS 공격, 악성 봇, 기타 사이버 공격으로 인해 웹 사이트의 성능이 저하될 수 있습니다. 이 주제는 너무 광범위하여 여기서 자세히 다루기 어렵지만, 웹 사이트 소유자는 정상적인 트래픽의 속도를 저하시키지 않으면서 악성 트래픽을 걸러내는 웹 애플리케이션 보안 제공자를 선택해야 합니다.

Cloudflare에서 웹 성능을 개선하는 방법

Cloudflare는 인터넷 보안 및 성능을 위한 글로벌 플랫폼입니다. 이 플랫폼은 규모 및 복잡성과 관계없이 모든 웹 사이트가 330개 도시 전역 네트워크에 연결하여 성능을 개선할 수 있도록 지원합니다.

개인 웹 사이트 및 중소기업의 경우, Cloudflare에서는 몇 분 안에 활성화되고 다음과 같은 중요한 웹 사이트 성능 향상이 자동으로 포함되는 Free 및 저가형 요금제를 제공합니다.

• 고성능 DNS 서비스
• CDN
• 이미지 최적화
• 모바일 최적화
• DDoS 공격 및 일반적인 악성 봇으로부터의 보호

대기업의 경우, Cloudflare에서는 모든 종류의 웹 애플리케이션 또는 인프라에서 작동하는 Enterprise 등급 성능 서비스도 제공합니다.