- 방문자가 사이트에 머무르는 시간.
- 그중 몇 명이 유료 고객으로 전환될까요?
- 유료 검색 광고에서 CPC(클릭당 비용) 기준으로 얼마를 지불하시나요?
- 자연 검색 결과에서 당신의 순위는 어떻게 되나요?
안타깝게도 대부분의 웹사이트는 페이지 로딩 속도가 느리고, 이는 수익에 직접적인 악영향을 미칩니다.
디지털 마케터로서 우리가 하루 동안 할 수 있는 일은 거의 무한대에 가깝지만, 그 모든 일을 다 하기에는 시간이 항상 부족합니다. 그 결과, 일부 일은 뒷전으로 밀려나게 됩니다.
페이지 로딩 속도 최적화는 가장 자주 미뤄지는 작업 중 하나입니다. 이는 대부분의 사람들이 간과하기 쉬운 이 세부 사항의 중요성을 제대로 이해하지 못하고, 단 몇 초라도 개선하기 위해 시간과 비용을 투자할 가치를 느끼지 못하기 때문입니다.
일부 마케터, 특히 검색 엔진 최적화에만 집중하는 마케터들에게는 사소한 시간처럼 보일 수 있지만, 업계 거물들의 데이터부터 저희 자체 분석 데이터에 이르기까지 그 효과는 엄청나다는 것이 입증되었습니다.
저처럼 여러분도 결과를 극대화하고 수익을 늘리고 싶으시겠죠? 그렇다면 이제 웹사이트를 끈적끈적한 콧물보다 더 빠르게 만드는 방법을 알아볼까요! (상상력이 풍부하죠?)
1. 저가형 웹 호스팅은 버리세요
요즘은 누구나 돈을 아끼려고 애쓰잖아요. 레이븐, SEMrush, Moz 같은 분석 도구 구독료가 쌓이면 금세 부담이 커지죠. 마치 아이를 하나 더 키우는 것 같아요.
많은 사람들이 돈을 절약하는 한 가지 방법은 저렴한 공유 숙소를 선택하는 것입니다. 호스팅 마치 광대들이 한 차에 빽빽하게 끼어드는 것처럼, 서버에 최대한 많은 웹사이트를 crammed 넣는 방식입니다. 성능 따위는 안중에도 없죠!
물론, 대부분의 웹 호스팅 업체처럼 웹사이트는 대부분의 시간 동안 접속 가능하겠지만, 로딩 속도가 너무 느려서 방문자들이 구매로 이어지지 않고 좌절감을 느끼며 떠날 것입니다.
“하지만 거의 눈에 띄지 않아요!”라고 이 알뜰 쇼핑객들은 주장합니다.
사실, 당신은 그 아이가 당신의 아기이고 당신이 그 아이를 너무 사랑하기 때문에 그 사실을 거의 알아차리지 못할 수도 있습니다.
하지만 다른 사람들은 모두 당신의 웹사이트에 최대한 빨리 들어왔다가 나가기만을 원합니다.
사람들은 원하는 정보를 얻거나, 제품을 구매하거나, 기타 특정 목표를 달성하기 위해 사이트에 머무는 시간이 짧기를 바랍니다. 조금이라도 시간이 지체되면 방문자는 불만을 느끼고 구매로 이어지지 않고 떠날 가능성이 높습니다.
다음과 같이 생각하십시오.
대부분의 사람들은 자기 자식을 무조건적으로 사랑합니다. 하지만 남의 아이가 소리를 지르고, 물건을 던지고, 식당에서 저녁 식사를 방해한다면? 그 아이는 미워하게 되죠. 웹사이트도 마찬가지입니다.
그게 실제로 얼마나 큰 차이를 만들까요?
에 의해 수행 된 연구에 따르면 아마존단 100밀리초의 차이, 즉 사람이 인지조차 할 수 없는 시간 단위의 차이가 매출을 1% 감소시키기에 충분했습니다. 월마트 비슷한 결과를 찾았다.
그처럼 아주 짧은 시간이 매출에 그토록 직접적인 영향을 미친다면, 단 1초라도 더해지면 어떤 영향을 미칠 거라고 생각하시나요?
하지만 여기서 끝이 아닙니다. 웹사이트 로딩 속도 또한 자연 검색 순위와 클릭당 비용에 영향을 미치기 때문입니다.
다시 말해, 웹사이트 로딩 속도가 느리다면 이 중요한 부분에 투자한 경쟁업체에게 시장 점유율을 빼앗길 것이라고 예상해야 합니다.
결론적으로, 저가형 웹 호스팅은 피하세요. 가격을 앞세워 상품을 판매하는 업체라면 고객도 상품처럼 대할 가능성이 높습니다.
속도에 최적화된 웹 호스팅 업체가 많으며, 특히 워드프레스 웹사이트에 특화된 업체들이 있는데, 그중 일부는 저렴한 옵션과 비슷한 가격대를 형성하고 있습니다.
그러니 주변 사람들에게 물어보고, 직접 테스트해보고, 방문자와 구글 모두를 만족시킬 만한 성능을 제공하는 웹 호스팅 업체에 투자하세요.
2. HTTP 호출 횟수 줄이기
웹페이지가 렌더링되고 작동하는 데 필요한 HTML, CSS, JavaScript, 이미지, 글꼴 등의 모든 파일은 각각 별도의 HTTP 요청을 필요로 합니다. 요청 횟수가 많을수록 페이지 로딩 속도가 느려집니다.
제가 이야기하는 대부분의 사람들과 비슷하다면, 아마 "아, 제레미, 난 그런 거 신경 쓸 필요 없어. 난 내가 뭘 하는지 잘 알고 있고, 내 웹사이트에 쓸데없는 내용을 잔뜩 넣지도 않거든!"이라고 생각하실 겁니다.
그 말이 부분적으로는 맞을 수도 있습니다. 당신의 웹사이트에는 불필요하고 쓸모없는 내용이 잔뜩 추가되지 않을 수도 있지만, 제가 접해본 웹사이트의 90% 이상에는 여전히 그런 요소들이 존재합니다.
그 과도한 용량 증가는 당신이 자는 동안 요정이 몰래 추가한 것이 아닙니다. 웹 디자이너 대부분이 실력이나 경험에 관계없이 페이지 속도를 우선시하지 않기 때문입니다. 슬픈 현실은 대부분의 디자이너가 페이지 속도를 어떻게 개선해야 하는지조차 모른다는 것입니다.
문제는 여기서 시작됩니다.
대부분의 테마는 하나 이상의 CSS 파일과 여러 개의 JavaScript 파일을 로드합니다. jQuery나 FontAwesome과 같은 일부 파일은 일반적으로 다른 서버에서 원격으로 로드되므로 페이지 로딩 시간이 크게 늘어납니다.
플러그인이 추가하는 CSS 및 JavaScript 파일을 고려하면 문제는 더욱 심각해집니다. CSS 및 JavaScript 파일만으로도 HTTP 요청이 6개 이상 발생하는 경우가 흔합니다.
페이지에 있는 모든 이미지를 고려하면, 각 이미지마다 별도의 HTTP 요청이 필요하기 때문에 문제가 금방 심각해집니다.
- 자바스크립트 파일들을 하나의 파일로 병합합니다.
- CSS 파일들을 하나의 파일로 병합합니다.
- 자체 JavaScript 및/또는 CSS 파일을 로드하는 플러그인을 줄이거나 제거하십시오. Gravity Forms와 같은 경우에는 해당 파일의 로드를 비활성화할 수 있는 옵션이 있습니다.
- 자주 사용하는 이미지에는 스프라이트를 사용하세요.
- 가능하면 이미지 파일 대신 FontAwesome이나 Ionic Icons 같은 글꼴을 사용하세요. 그러면 로드해야 하는 파일이 하나만 남게 됩니다.
3. 끝에 슬래시(/)를 포함하세요.
외부 소스(링크 구축 활동)에서 또는 자체 웹사이트 내에서 웹사이트를 가리키는 링크의 끝에 슬래시(/)를 생략하면 속도에 부정적인 영향을 미칩니다.
방법은 다음과 같습니다.
끝에 슬래시(/)가 없는 URL에 접속하면 웹 서버는 해당 이름의 파일을 찾습니다. 만약 해당 이름의 파일을 찾지 못하면, 웹 서버는 해당 URL을 디렉터리로 간주하고 그 디렉터리에서 기본 파일을 찾습니다.
즉, 마지막 슬래시를 생략하면 서버는 불필요한 301 리디렉션을 실행하게 됩니다. 사용자에게는 즉각적인 것처럼 보일 수 있지만 실제로는 약간 더 오래 걸리며, 앞서 설명했듯이 작은 차이도 누적되면 상당한 시간이 소요됩니다.
https://example.com (this is bad)
or
https://example.com/services (this is also bad)
대
https://example.com/ (this is good)
or
https://example.com/services/ (this is also good)
4. 압축 활성화
GZIP 압축을 활성화하면 HTML, CSS, JavaScript 파일 다운로드 시간을 크게 줄일 수 있습니다. 파일 크기가 훨씬 작은 압축 파일로 다운로드된 후 브라우저에 도달하면 압축이 해제되기 때문입니다.
걱정하지 마세요. 모든 최신 브라우저는 GZIP을 지원하고 모든 HTTP 요청에 대해 자동으로 처리하므로 방문자는 별도의 작업을 할 필요가 없습니다.
5. 브라우저 캐싱 활성화
브라우저 캐싱이 활성화되면 웹페이지의 요소들이 방문자의 브라우저에 저장되므로, 방문자가 다음에 사이트를 방문하거나 다른 페이지를 방문할 때 브라우저는 캐시된 요소에 대한 HTTP 요청을 서버에 다시 보내지 않고도 페이지를 로드할 수 있습니다.
첫 페이지가 로드되어 해당 요소들이 사용자의 캐시에 저장되면, 이후 페이지에서는 새로운 요소만 다운로드하면 됩니다. 따라서 일반적인 웹 브라우징 세션 동안 다운로드해야 하는 파일 수를 크게 줄일 수 있습니다.
6. 리소스 최소화
CSS 및 JavaScript 파일을 최소화하면 불필요한 공백과 주석이 제거되어 파일 크기가 줄어들고 결과적으로 다운로드 시간이 단축됩니다.
다행히도, 파일을 더 작고 간소화된 버전으로 변환해주는 온라인 도구들이 여러 가지 있기 때문에 이 과정을 수동으로 할 필요는 없습니다.
워드프레스에는 웹사이트 헤더의 일반 CSS 및 JavaScript 파일 링크를 원본 파일을 수정하지 않고 축소된 버전으로 대체하는 플러그인이 여러 개 있으며, 인기 있는 캐싱 플러그인도 포함됩니다.
- W3 총 캐시
- WP 슈퍼 캐시
- WP Rocket
압축 과정에서 CSS와 JavaScript가 손상될 수 있으므로 설정을 제대로 맞추는 데 약간의 노력이 필요할 수 있습니다. 따라서 모든 파일을 압축한 후에는 웹사이트를 철저히 테스트해야 합니다.
7. 상단 접기 콘텐츠 우선 순위 지정
웹사이트가 스크롤하기 전에 보이는 콘텐츠, 즉 '스크롤 없이 볼 수 있는 영역'의 콘텐츠를 우선적으로 로드하도록 코딩하면 방문자에게 더 빠르게 로드되는 것처럼 보일 수 있습니다.
이는 화면 상단에 나타나는 모든 요소가 HTML 코드의 시작 부분에 최대한 가깝게 위치하도록 하여 브라우저가 해당 요소를 먼저 다운로드하고 렌더링할 수 있도록 하는 것을 의미합니다.
또한 해당 영역을 렌더링하는 데 필요한 CSS 및 JavaScript를 외부 CSS 파일이 아닌 본문 내에 포함하는 것이 매우 중요합니다.
8. 미디어 파일 최적화
고화질 카메라가 탑재된 모바일 기기가 보편화되고 워드프레스와 같은 최신 콘텐츠 관리 시스템을 통해 이미지를 간편하게 업로드할 수 있게 되면서, 많은 사람들이 사진을 찍어 업로드할 때, 정작 업로드된 이미지의 크기가 필요한 크기보다 최소 네 배 이상 큰 경우가 많다는 사실을 인지하지 못하는 경우가 흔합니다.
이로 인해 웹사이트 속도가 상당히 느려지는데, 특히 모바일 사용자에게 더욱 그렇습니다.
웹사이트의 미디어 파일을 최적화하면 페이지 로딩 속도를 크게 향상시킬 수 있으며, 최적화 작업 자체도 비교적 간단하므로 시간을 투자할 만한 가치가 있습니다.
이미지 최적화
- 적합한 파일 형식을 선택하세요. JPG는 사진 이미지에 적합하고, GIF 또는 PNG는 단색 영역이 많은 이미지에 가장 적합합니다. 8비트 PNG 파일은 알파 채널(투명 배경)이 없는 이미지에 사용하고, 24비트 파일은 알파 채널이 있는 이미지에 사용합니다.
- 이미지 크기가 적절한지 확인하세요. 웹사이트에서 이미지가 800픽셀 너비로 표시되는 경우, 1600픽셀 너비의 이미지를 사용하는 것은 아무런 이점이 없습니다.
- 이미지 파일을 압축하세요. 최고의 이미지 편집 프로그램인 Adobe Photoshop은 뛰어난 이미지 압축 기능을 제공하며 월 9.99달러부터 시작합니다. 또한 무료 WordPress 플러그인(예: ...)을 사용할 수도 있습니다. WWW 이미지 최적화 도구, 광기그리고 TinyJPG는 업로드된 이미지를 자동으로 압축해 줍니다.
동영상 최적화
- 가장 적합한 형식을 선택하세요. 대부분의 경우 MP4 형식이 파일 크기가 가장 작기 때문에 가장 좋습니다.
- 방문자의 화면 크기에 맞춰 최적의 크기(치수)로 콘텐츠를 제공합니다.
- 영상이 디자인 요소의 배경으로 사용되는 경우, 오디오 트랙을 제거하십시오.
- 동영상 파일을 압축하세요. 저는 주로 Adobe Premiere를 사용하지만, Camtasia도 좋은 선택입니다.
- 영상 길이를 줄이세요.
- 동영상을 로컬에서 재생하는 대신 YouTube나 Vimeo에 업로드하고 해당 사이트의 iframe 임베딩 코드를 사용하는 것을 고려해 보세요.
하지만 거기서 멈춰서는 안 됩니다. 그건 빙산의 일각에 불과하니까요.
웹사이트의 미디어를 진정으로 최적화하려면 단순히 이미지 크기를 조정하는 것이 아니라 화면 크기에 맞춰 적절한 크기의 이미지를 제공해야 합니다.
이미지 구현 방식에 따라 이 문제를 처리하는 방법은 두 가지가 있습니다.
- 웹사이트 HTML 내의 이미지는 `src` 속성을 사용하여 제공할 수 있습니다. 이렇게 하면 브라우저가 방문자가 사용하는 기기의 화면 크기에 따라 적절한 이미지를 선택, 다운로드 및 표시할 수 있습니다.
- CSS를 통해 배치된 이미지(일반적으로 배경 이미지)는 미디어 쿼리를 사용하여 방문자가 사용하는 기기의 화면 크기에 따라 적절한 이미지를 선택하여 제공할 수 있습니다.
9. 캐싱 및 CDN 활용
캐싱은 웹 서버가 웹페이지의 정적 복사본을 저장하여 방문자의 브라우저에 더 빠르게 제공할 수 있도록 하는 기술입니다. 반면 CDN(콘텐츠 전송 네트워크)은 이러한 복사본을 전 세계 서버에 분산시켜 방문자의 브라우저가 현재 위치와 가장 가까운 서버에서 웹페이지를 다운로드할 수 있도록 합니다. 이는 페이지 로딩 속도를 획기적으로 향상시킵니다.
___
by 제레미 크나우프
출처 : SEJ
