6단계로 사이트를 빠르게 유지하는 방법

웹사이트 속도 향상을 위해 놓쳐서는 안 될 몇 가지 중요한 기술을 소개합니다.

웹사이트 로딩 시간이 3초를 초과하면 잠재적인 수익 손실과 검색 엔진 순위 하락을 초래할 수 있습니다. 또한, 보안이 취약하면 해커가 웹사이트를 공격하여 평판과 사업에 심각한 타격을 입힐 수 있습니다.

따라서 더 나은 사용자 경험을 위해서는 웹사이트의 보안과 성능 최적화에 꾸준히 관심을 기울여야 합니다.

웹사이트 성능 최적화에 대한 논의에서 흔히 압축 활성화, 파일 축소, 캐싱, 가벼운 테마 사용, 플러그인 최소화 등을 언급합니다.

이러한 방법들은 유용하지만, 이 글에서는 WordPress, Joomla, Magento, Drupal, Node.js 등 모든 플랫폼에 적용할 수 있는 다양한 추가 방법들을 제시하고자 합니다.

현재 적용 중인 방법과 그렇지 않은 방법을 함께 살펴보겠습니다.

신뢰할 수 있는 호스팅 선택

흔히 저지르는 실수 중 하나는 성능이 낮은 웹 호스팅 서비스와 공유 호스팅 플랜을 선택하는 것입니다.

개인적으로, 이는 단순히 나쁜 호스트의 문제가 아니라, 지나치게 저렴한 호스팅 구독에 있다고 생각합니다.

만약 월간 호스팅 비용이 커피 한 잔 가격보다 저렴하다면, 뭔가 잘못된 것입니다.

공유 호스팅은 마치 수많은 사람들이 한 버스에 꽉 차 있는 것과 같습니다. "매력적인" 가격 때문에 어쩔 수 없이 탑승하게 되는 것이죠.

공유 호스팅의 가장 큰 단점은 초기 할인 외에도 단일 서버를 공유하는 웹사이트의 수가 투명하게 공개되지 않는다는 점입니다.

일반적으로 수백 개의 웹사이트가 하나의 서버를 공유합니다.

이로 인해 '시끄러운 이웃' 효과가 자주 발생하여 성능 병목 현상이 발생하며, 이러한 웹사이트 대부분은 Google 검색 결과 첫 페이지에 나타나기 어려워집니다.

중요한 프로젝트라면 VPS(가상 개인 서버)나 전용 서버로 업그레이드하는 것이 현명한 선택입니다.

CDN(콘텐츠 전송 네트워크) 활용

CDN은 웹 호스팅 패키지 다음으로 중요한 요소입니다. CDN은 전 세계에 사용자를 보유한 모든 웹사이트에 필수적입니다. 웹사이트를 전 세계 모든 곳에 호스팅할 수 없기 때문입니다. 웹사이트는 단일 위치에 서버를 두고 운영됩니다. 따라서, 일본 사용자가 미국 뉴욕에 호스팅된 웹사이트에 접속하려고 하면 지리적인 거리가 속도 저하의 원인이 됩니다.

그러나 Cloudflare와 같은 CDN 서비스를 이용하면 이러한 지연 문제를 해결할 수 있습니다. CDN은 서버 네트워크에 웹사이트 사본을 저장하고 사용자에게 가장 가까운 서버를 통해 요청을 처리합니다. 이를 통해 단일 중앙 서버에 집중되는 부하를 줄일 수 있습니다.

또한 CDN은 일반 웹 호스트가 제공하는 것보다 향상된 보안을 제공합니다.

IPv6 활성화

IPv6는 IPv4보다 속도가 빠릅니다. LinkedIn은 IPv6를 통해 접속했을 때 유럽에서 40%, Facebook에서 약 10-15%의 성능 향상을 경험했습니다.

Google의 전 세계 IPv6 채택률 그래프를 살펴보세요.

약 42%의 사용자가 IPv6를 통해 Google에 접속하지만, IPv6를 지원하는 웹사이트는 21.2%에 불과합니다.

흥미롭게도 Cloudflare는 IPv6 지원 웹페이지가 IPv4 지원 웹페이지보다 27% 더 빠르게 로드된다는 사실을 발견했습니다.

귀사의 웹사이트는 IPv6를 지원하나요? 확실하지 않다면 온라인에서 테스트해 볼 수 있습니다.

만약 지원하지 않는다면, 다음과 같이 설정할 수 있습니다.

Cloudflare, Incapsula, CacheFly, AKAMAI 등 대부분의 CDN 제공업체는 IPv6를 지원합니다. 제어판에서 활성화할 수 있습니다.

CDN을 사용하지 않고 Linode, DigitalOcean 등의 VPS에서 호스팅하는 경우, Nginx 및 Apache 웹 서버에서 IPv6를 허용하도록 설정할 수 있습니다.

IPv6를 사용하는 것은 손해 볼 것이 없으며, 페이지 로딩 시간이 약 10% 감소하는 빠른 결과를 얻을 수 있습니다.

HTTP/3 또는 HTTP/2로 전환

HTTP는 웹 브라우저에서 URL을 입력했을 때 웹 페이지를 로드하는 데 사용되는 기술입니다. 이 기술은 1991년 HTTP/0.9에서 시작하여 HTTP/2 및 현재 가장 발전된 HTTP/3으로 진화했습니다.

HTTP/2는 HTTP/1.1에 비해 다음과 같은 다양한 이점을 제공합니다:

서버 푸시
멀티플렉싱
리소스 우선순위 지정
헤더 압축
짧은 지연 시간

현재 웹사이트의 39.3%가 HTTP/2를 사용하고 있으며, 이는 HTTP/1.1보다 7배 빠릅니다. HTTP/2로 전환하면 페이지 로딩 시간을 최대 30~40%까지 줄일 수 있습니다.

웹사이트가 HTTP/2를 지원하는지 확인해보세요.

하지만 HTTP/2에도 몇 가지 단점이 있습니다.

예를 들어, 헤드 오브 더 라인 블로킹 문제가 있습니다. 이 문제는 TCP 연결 문제로 인해 모든 스트림이 차단될 수 있다는 것입니다. 반면, UDP 기반 HTTP/3에서는 단일 패킷 손실이 다른 스트림에 영향을 미치지 않습니다.

또한 HTTP/3은 재연결 시 TLS 핸드셰이크를 생략하여 지연 시간을 단축합니다. 전반적으로 HTTP/3은 HTTP/2의 모든 장점을 제공하면서도 단점을 개선했습니다.

웹사이트가 HTTP/3을 사용하는지 확인해보세요.

웹 호스트에서 HTTP/3 또는 HTTP/2 지원 여부를 확인할 수 있습니다. 또는 CDN 제공업체를 통해 원하는 HTTP 버전으로 간단히 전환할 수도 있습니다.

이미지 최적화

웹 페이지에서 텍스트만 있는 페이지는 지루할 수 있으므로 이미지는 필수적입니다. 하지만 이미지는 웹 페이지를 무겁게 만들고 로딩 시간을 늘리는 원인이 되기도 합니다.

따라서 WebP 또는 AVIF와 같이 가벼운 형식으로 이미지를 제공하는 것이 좋습니다. 이러한 형식은 파일 크기를 크게 줄일 수 있을 뿐만 아니라(경우에 따라 80% 이상), 이미지 품질도 거의 동일하게 유지됩니다.

이러한 차세대 형식으로 직접 변환하여 업로드하거나, Optimole과 같은 타사 변환 서비스를 이용할 수 있습니다.

HTTP 요청 수 최소화

웹사이트는 여러 요소가 합쳐져서 로드됩니다. 텍스트, 이미지, CSS, JavaScript 등 모든 요소가 HTTP 요청을 통해 전송됩니다.

다른 조건이 동일하다면 HTTP 요청 수가 적을수록 페이지 로딩 속도가 빨라집니다.

따라서 HTTP 요청 수를 가능한 한 줄이는 것이 좋습니다.

개인적인 경험에 비추어볼 때, Generate Press와 같은 가벼운 테마를 선택하는 것이 도움이 됩니다. 또한 플러그인 수를 줄이면 웹사이트 속도와 보안을 모두 향상시킬 수 있습니다.

하지만 이 주제는 별도로 다루어야 할 만큼 중요합니다.

특히 WordPress 웹사이트를 운영한다면 HTTP 요청 수를 최소화하는 데 신경 써야 합니다.

웹 안전 글꼴 사용

모든 웹사이트는 독특하고 사용자 친화적으로 보이기를 원합니다. 가장 먼저 시도하는 방법 중 하나가 다양한 글꼴을 사용하는 것입니다.

다행히도 Google Fonts와 같은 무료 옵션이 있지만, 이러한 글꼴을 사용하면 HTTP 요청이 증가합니다. 게다가 타사 글꼴 서버가 다운되면 웹사이트는 시스템 글꼴로 대체됩니다.

이에 대한 대안으로, 일부 웹마스터는 웹사이트에 글꼴을 자체 호스팅하여 의존성을 줄입니다. 하지만 이 방법도 서버에서 사용자 장치로 파일을 로드해야 하므로 HTTP 요청이 늘어납니다.

결과적으로 서버 오류로 인한 글꼴 교체 위험 없이 가장 빠른 웹 경험을 제공하려면 웹 안전 글꼴을 사용하는 것이 좋습니다. 웹 안전 글꼴은 Windows PC, Mac, Linux 시스템, iOS, Android 등에서 일반적으로 사용되는 시스템 글꼴입니다.

다음은 몇 가지 웹 안전 글꼴 목록입니다:

굴림
Verdana
Trebuchet MS
Tahoma
Times New Roman
Georgia
Impact 등

캐싱 활용

캐싱은 데이터를 로컬 저장소에 저장하는 것을 의미합니다. 이를 통해 웹사이트 재방문 시 로딩 속도를 크게 향상시킬 수 있습니다. 전문가들은 로딩 시간을 줄이기 위해 캐싱을 적극적으로 권장합니다.

예를 들어, WordPress에는 WP Fastest Cache와 같은 다양한 캐시 플러그인이 있습니다. 또는 .htaccess 파일을 수정하여 브라우저 캐싱을 활성화할 수 있습니다.

하지만 캐싱 방식은 플랫폼에 따라 다르므로 각 플랫폼에 맞는 방법을 찾아야 합니다.

비동기 로딩

저는 개인적으로 WordPress 블로그에서 Core Web Vitals 테스트에 실패하여 Google Search Console로부터 경고를 받은 경험이 있습니다.

Core Web Vitals는 Google에서 웹 페이지를 평가하는 지표이며, 검색 엔진 순위를 높이려는 모든 사람에게 중요합니다.

자세한 내용은 koreantech.org의 기사 중 하나에서 Pagespeed 분석 결과를 확인해보세요.

WordPress 개발자의 도움으로 저는 이 테스트를 통과할 수 있었습니다.

하지만 제 개인 프로젝트에서는 LCP(Largest Contentful Paint)와 FCP(First Contentful Paint)에서 특히 좋지 않은 점수를 받았습니다. 구체적으로 LCP는 3.3초, FCP는 2.4초 정도였습니다.

저는 IT 배경이 없는 블로거였기 때문에 이 이상으로 최적화하기 어려웠습니다. 저는 이미 프리미엄 테마, 추가 플러그인 미사용, 시스템 글꼴, WebP 이미지, 클라우드 호스팅 등 모든 최적화 방법을 적용한 상태였습니다.

하지만 Jetpack Boost WordPress 플러그인에서 단일 토글을 활성화하는 것만으로도 문제를 해결할 수 있었습니다.

이 토글은 `