SEO의 비밀 풀기: 웹사이트 속도에 대한 궁극적인 가이드 소개

속도는 사용자와 SEO 모두에게 중요합니다. 아무도 웹사이트가 로드될 때까지 몇 초를 기다리기를 원하지 않습니다. 사용자는 기다리는 시간보다 사이트를 떠나 경쟁업체로 이동합니다. "시간은 돈이다"라는 말은 수세기 전 벤자민 프랭클린이 말한 것처럼 지금도 사실입니다. 시간은 Google에게도 중요합니다. 속도는 Google의 순위 요소 중 하나입니다. 모든 것이 동일하면 웹 사이트가 빠를수록 순위가 높아집니다. 그리고 오늘날 빠른 웹사이트가 필요하지 않다고 주장하는 사람은 아무도 없습니다. 문제는 웹사이트를 더 빠르게 만드는 방법입니다. 이 Unwrapping the Secrets of SEO 의 게스트 저자는 2018 European Search Awards에서 "Best Small SEO Agency"를 수상한 Elephate의 연구 개발 팀장인 Tomek Rudzki입니다. Rudzi는 웹사이트 속도를 높이고 승리하는 방법에 대한 조언을 제공합니다.

이 포괄적인 웹사이트 속도 가이드에는 세 가지 기사가 있습니다. 여기에서 다음 게시물을 읽으십시오: 웹사이트 속도에 대한 궁극적인 가이드 – 파트 2 및 웹사이트 속도에 대한 궁극적인 가이드 – 파트 3.

무료 페이지 속도 연구

1. 시간은 돈이다

더 빠른 웹사이트가 더 많은 수익을 창출한다는 사실을 지적하는 많은 연구가 있습니다.

• Pinterest는 인지된 대기 시간을 줄이면 가입 수가 15% 증가한다는 것을 깨달았습니다 .
• BBC는 웹사이트가 추가로 로드될 때마다 사용자의 10%가 떠납니다.
• DoubleClick by Google 은 페이지 로드를 19초(극단적!)에서 5초로 줄이면 이탈률이 35% 낮아지고 세션이 70% 길어지는 것으로 조사했습니다.
• Amazon의 연구에 따르면 웹사이트 로드 속도가 단 1초만 느려도 매년 16억 개의 매출이 감소할 수 있습니다.

“알았어. 하지만 난 Pinterest, BBC 또는 Amazon에 관심이 없어. 내 비즈니스에 대해 이야기해 주세요.'” Google 은 속도가 잠재적 수익에 미치는 영향을 계산하는 멋진 도구를 만들었습니다. 도구를 예제 데이터로 채웠습니다. 평균 월 방문자 수 1,000,000, 전환율 3.26%, 평균 주문 금액 $82.

"Tomek, 전환율이 3.26인데 1%나 4%, 심지어 10%도 아닌 데이터를 선택한 이유는 무엇입니까?" 알겠습니다. Statista에서 데이터를 가져왔습니다. 그들의 보고서 에 따르면 2017년 4분기 미국 온라인 쇼핑 주문의 평균 가치(미국 달러 기준)는 82였습니다. 게다가 평균 전환율은 3.26이었습니다.

페이지 로드 속도를 5초에서 2.8초로 줄이면 연간 197만 달러의 추가 수익이 발생할 수 있습니다. 좋은 소리!

물론 계산기일 뿐입니다. 그러나 계산기는 실제 데이터를 기반으로 합니다. Google이 계산된 값의 끝에 몇 개의 0을 추가하여 심각하게 보이게 한다고 생각하지 않습니다.

2. 항상 모바일 사용자를 생각하십시오

Statcounter에 따르면 2018년 2월 사용자의 55% 이상이 모바일 또는 태블릿을 통해 인터넷에 연결했습니다. 놀라운 통계입니다!

오늘날 모바일 사용자를 만족시키려면 다음을 수행해야 합니다.

• 웹사이트가 모바일에서 제대로 작동하는지 확인하십시오(즉, 반응형인 경우).
• 웹사이트를 정말 빠르게 만드세요.

모바일 사용자는 연결 상태가 좋지 않고 저가형 장치를 사용하는 경우가 많습니다. 따라서 "유선"으로 전송되는 모든 킬로바이트는 정말 중요합니다. 귀하의 웹사이트는 모든 추가 기능을 포함하여 개인용 컴퓨터에서 빠르게 작동할 수 있지만 모바일 장치에서는 실제로 느릴 수 있습니다. 그리고 당신이 전자를 얻을 확률은 더 이상 당신에게 유리하지 않습니다.

3. GTMetrix 사용

웹사이트를 더 빠르게 만들기 위해 무엇을 개선할 수 있는지 알려주는 훌륭한 도구가 있습니다. 모든 웹사이트를 무료로 감사할 수 있습니다. 감사를 시작하기 위해 웹사이트 소유자일 필요는 없습니다(즉, 저는 Giphy.com을 감사했습니다). 이 도구는 Google PageSpeed ​​Insights 및 Yahoo Slow의 데이터와 힌트를 모두 결합합니다.

https://gtmetrix.com/ 으로 이동하여 웹사이트의 URL을 입력하는 데 시간을 할애할 가치가 있습니다.

"PageSpeed" 또는 "YSlow" 탭을 클릭하면 웹사이트 속도를 개선하는 방법에 대한 권장 사항 목록을 볼 수 있습니다.

현재로서는 이 탭에 있는 많은 정보가 너무 기술적이기 때문에 이해하지 못할 수 있습니다. 괜찮아. 로마는 하루 만에 만들어지지 않았어. 시작할 수 있도록 최선을 다하겠습니다. 리소스(JS 및 CSS 파일, 이미지 파일)가 다운로드 및 로드된 시점을 정확히 보여주는 "Waterfall"이라는 흥미로운 섹션이 있습니다.

GTMetrix 계정을 만드실 것을 강력히 권장합니다(무료입니다!). 등록된 사용자는 테스트를 사용자 정의하고 브라우저 및 서버 위치를 변경할 수 있습니다. 또한 로그인한 후 "동영상 만들기" 옵션을 활성화할 수 있습니다. 비디오 옵션은 훌륭합니다. 사용자가 웹사이트에서 시각적 변화를 볼 수 있을 때까지 기다려야 하는 시간을 보여줍니다.

하지만 GTMetrix에 열광하지 마십시오

GTMetrix는 훌륭한 도구이지만 때로는 권장 사항이 당신을 거위 추격으로 이끌 수도 있습니다. GTMetrix에는 아무런 문제가 없습니다. 속도를 최적화할 때 "일률적으로 적용되는" 규칙은 없다는 것입니다. GTMetrix는 다음 사항을 잘 알고 있습니다.

예를 들어 GTMetrix는 Google Analytics 또는 Facebook 서버에 저장된 리소스에 대해 브라우저 캐싱을 설정할 것을 권장합니다. 사실, 이러한 자원은 통제할 수 없으며 아무 것도 할 수 없습니다 . Google과 Facebook의 개발자는 이유가 무엇이든 이러한 리소스를 장기간 캐시해서는 안 된다고 결정했습니다.

물론 WebPageTest(GTMetrix보다 훨씬 강력함)와 같은 GTMetrix와 유사한 도구가 많이 있습니다. 그러나 두 가지 이유로 GTMetrix를 소개하기로 결정했습니다.

1. GTMetrix는 더 사용자 친화적입니다.
2. WebPageTest는 무엇을 해야 하는지에 대한 명확한 권장 사항을 제공하지 않습니다.

또 다른 흥미로운 도구인 Google Lighthouse를 언급하고 싶습니다(Chrome을 사용하는 경우 이미 설치되어 있음). Elephate의 Kamila Spodymek은 SEO가 Google Lighthouse의 성능 측정항목을 활용하는 방법 에 대한 훌륭한 기사를 작성했습니다. 확실히 잘 읽었습니다!

4. GZIP 압축 사용

알아야 할 한 가지 규칙이 있습니다 . 리소스의 무게가 더 적으면 브라우저에서 훨씬 빠르게 다운로드할 수 있으므로 페이지 로드 속도가 빨라 집니다. 모바일 사용자는 이 기능을 통해 많은 이점을 얻을 수 있습니다.

GZIP 압축을 구현하여 HTML, SVG, CSS 및 JS와 같은 텍스트 파일의 크기를 줄일 수 있습니다. GZIP 압축은 정보 손실 없이 리소스 크기의 70-80%를 절약하는 것이 일반적입니다. 정말 큰일이야!

https://checkgzipcompression.com/ 을 방문하여 GZIP을 구현하여 저장할 수 있는(또는 이미 저장한) 킬로바이트 수를 확인하십시오. Searchmetrics.com의 경우 GZIP이 활성화되어 있습니다(페이지 크기의 83% 절약 가능). 좋은 소리!

그래도 조심하세요! 때때로 웹마스터는 실수를 저지르고 JPEG, PNG 이미지 및 PDF를 포함한 모든 정적 파일을 압축합니다. Yahoo 개발자 네트워크 문서 를 인용하겠습니다. “이미지 및 PDF 파일은 이미 압축되어 있으므로 gzip으로 압축하면 안 됩니다. gzip을 시도하면 CPU가 낭비될 뿐만 아니라 잠재적으로 파일 크기가 늘어날 수 있습니다."

킬로바이트를 추가로 저장하려면 HTML, JS 및 CSS 파일 을 축소하는 것도 좋은 생각입니다.

5. 크기가 조정된 이미지 제공

많은 수의 이미지로 인해 웹사이트가 매우 느리게 로드된다는 것은 사실입니다(특히 휴대전화에서!).

따라서 때로는 이미지 수를 줄이는 것이 좋습니다. 그러나 그것들을 제한하기 보다는 기존 것을 최적화하는 것이 좋습니다 . 즉, 사용자에게 제공되는 이미지는 크기가 조정되고 압축되어야 합니다(무손실 또는 손실).

먼저 이미지 크기 조정에 대해 이야기해 보겠습니다. 페이지당 220×220 썸네일이 10개 있지만 서버에 800×800 이미지를 업로드했다고 가정해 보겠습니다. 이미 크기가 조정된 이미지를 사용자에게 제공해야 합니까, 아니면 브라우저에서 "즉시" 크기를 조정해야 합니까?

대답은 쉽습니다. 서버 측에서 이미지의 크기를 조정하지 않으면 브라우저는 필요한 것보다 훨씬 더 많은 킬로바이트를 다운로드해야 합니다. 이미지는 어쨌든 크기가 조정될 것이기 때문에 아무 것도 아닙니다. 또한 클라이언트 측 GPU에 대한 추가 작업입니다. 페이지 로딩 속도는 말할 것도 없고요.

6. 이미지 압축

이제 이미지 압축에 대해 이야기해 보겠습니다. 이것은 현대 웹에 꼭 필요한 또 다른 기술입니다.

일반적으로 이미지 압축에는 두 가지 유형이 있습니다.

• 무손실(정말 좋은 일을 하며 품질이 저하되지 않을 것임을 확신할 수 있습니다).

• 손실(일반적으로 이미지를 더 가볍게 만들지만 이름에서 알 수 있듯이 일부 품질이 손실됨).

문제가 발생합니다. 어떤 유형의 압축이 더 낫습니까: 무손실 또는 손실입니까?

• 상황에 따라 다릅니다. 웹 사이트에서 우주 공간의 이미지를 제공하는 경우 모든 세부 사항이 중요합니다. 그러나 개인 블로그를 하는 경우 압축률이 높아도 손실 압축이 잘 될 것입니다. 어떤 설정이 귀하의 웹사이트에 가장 잘 맞는지 알아보기 위해 실험해 볼 것을 권장합니다.

7. 모바일 방문자에게 Full HD 사진을 다운로드하도록 강요하지 마십시오!

모바일 사용자는 화면이 훨씬 작아서 HD 사진의 이점을 누리지 못합니다. 대신 큰 이미지를 다운로드하도록 강요하면 화를 낼 것입니다.

Elephate.com 의 예를 살펴보겠습니다. 홈페이지 상단(522kb)에 꽤 큰 사이즈의 우리 회사 구성원 사진(2600×1463 픽셀)이 있습니다.

데스크톱에서는 전혀 문제가 없습니다. 정말 빠르게 다운로드할 수 있습니다. 그러나 모바일 사용자의 경우 HTML의 "srcset" 매개변수를 사용합니다. 이것을 구현한 덕분에 모바일 사용자는 페이지 로딩 시간에 긍정적인 영향을 미치는 훨씬 더 작은 그림(더 큰 그림은 필요하지 않음)을 다운로드하기만 하면 됩니다.

데스크탑 사용자는 풀 HD 사진을 볼 수 있기 때문에 어려움을 겪지 않을 것입니다. 그러나 모바일 사용자는 실제로 이점을 얻을 것입니다.