Speed ​​Kills: 웹사이트의 속도와 성능을 감사하고 개선하는 방법

WordPress 사이트에서 이 모든 SEO 및 전환 최적화를 완료했습니다.

백링크를 받고 있고, 콘텐츠가 훌륭하고, 페이지가 최적화되어 있고, 리뷰를 받고 있고, 매력적인 CTA가 있고, 정확한 비즈니스 목록이 많이 있습니다. 귀하의 웹사이트는 훌륭합니다. 예술 작품, 정말!

...하지만 바늘이 움직이지 않습니다. 왜요? 설명은 생각보다 간단할 수 있습니다. 사이트가 느릴 수 있습니다.

열악한 사이트 속도는 실제로 매우 일반적입니다. Vendasta의 팀도 이 문제를 직접 경험했습니다. 우리는 한동안 사이트 속도 문제와 씨름해 왔으며 진전을 이뤘습니다. 하지만 그 모든 것은 나중에 다루겠습니다.

마케터와 마케팅 대행사 사이에서 항상 이 문제를 봅니다. 우리는 "이해"하고 웹 사이트 페이지 속도 최적화와 같은 모범 사례를 조기에 채택해야 하는 사람입니다. 그러나 Google의 PageSpeed ​​Insights 도구는 멋지고 SEO에 최적화된 콘텐츠가 가득한 많은 웹사이트에 대해 다르게 말합니다.

우리 모두는 더 잘해야 합니다.

이것이 바로 지금 이 글을 읽고 있는 이유입니다. 시작하겠습니다!

목차

페이지 속도란 무엇입니까?

페이지 속도와 점수를 결정하는 방법

페이지 속도가 중요한 이유는 무엇입니까?

1. 속도가 UX를 죽인다

2. 속도가 SEO를 죽인다

3. 스피드 킬 전환

웹사이트 로드 속도를 높이는 방법은 무엇입니까? 8 전술

4 사이트 속도 사례 연구

감사 및 사이트 속도 최적화를 수행하는 방법

1. 차트 결과에 대한 기준선 확보

2. 8단계 작업

3. 필요할 때 도움 요청

4. 앞으로의 사이트 속도에 전념하십시오.

판매 증대를 위해 사이트 속도를 활용하는 방법

페이지 속도란 무엇입니까?

페이지 속도는 웹사이트 페이지의 콘텐츠가 완전히 로드되는 데 걸리는 시간입니다. 사람들이 즉각적인 결과를 기대하게 된 세상에서는 빠를수록 좋습니다.

Akamai와 Gomez.com에서 실시한 설문 조사에 따르면 실제로 웹 사용자의 거의 절반이 사이트가 2초 이내에 로드될 것으로 예상하고 3초 이내에 로드되지 않으면 사이트를 떠나는 경향이 있습니다.

관련 자료: 웹사이트에 대한 58가지 무시무시한 통계

따라서 평균 방문자가 허용할 수 있는 최소 속도는 3초입니다. 일반적인 웹 사이트가 작업에 적합합니까? Pingdom은 자체 고객을 데이터 소스로 사용했고 그들에게 대답은 NO라는 것을 알았습니다.

Pingdom의 클라이언트 중 3Mb 웹 페이지의 평균 로드 시간은 5초였습니다. 너무 느립니다.

페이지 로드 시간에 대해 많은 사람들이 사용하고 있는 표준은 Geoff Kenyon이 웹 사이트 속도를 웹의 나머지 부분과 비교한 연구에서 나온 것입니다.

• 사이트가 5초 안에 로드되면 웹의 약 25%보다 빠릅니다.
• 사이트가 2.9초 안에 로드된다면 웹의 약 50%보다 빠릅니다.
• 사이트가 1.7초 안에 로드되면 웹의 약 75%보다 빠릅니다.
• 사이트가 0.8초 안에 로드된다면 웹의 약 94%보다 빠릅니다.

그렇다면 귀하의 웹 사이트가 어떻게 쌓이는지 어떻게 알 수 있습니까?

페이지 속도와 점수를 결정하는 방법

웹사이트가 위에서 논의한 현재 사용자 기대치에 어떻게 부합하는지 측정하는 방법은 다음과 같습니다.

1. 웹사이트의 Google 웹로그 분석 사이트 속도 보고서를 살펴보세요. 이를 통해 다양한 기간 동안 사이트의 성능과 각 페이지의 로드 속도에 대한 아이디어를 얻을 수 있습니다.
2. Google의 PageSpeed ​​Insights 도구에 사이트의 URL을 입력합니다. 이렇게 하면 모바일 장치 및 데스크톱에서 웹 사이트의 속도 성능에 대한 성적표가 제공됩니다. 보고서에는 사이트 속도를 개선하기 위해 취할 수 있는 몇 가지 권장 조치가 함께 제공됩니다.
3. Pingdom의 웹사이트 속도 테스트를 확인하여 Pingdom에서 테스트한 웹사이트의 평균보다 더 빠른 속도, 순위 및 백분율을 알아보세요.
4. GTMetrix는 사이트의 속도 최적화 상태에 대한 포괄적인 정보를 제공합니다.

참고: Pingdom과 Gtmetrix에서 다른 속도 타이밍을 볼 때 당황하지 마십시오. Pingdom은 로드 시간(웹사이트의 첫 번째 결과를 표시하는 데 걸리는 시간 - Google이 계산하는 시간이며 사용자도 계산해야 함)을 표시하고 GTmetrix는 전체 로드 시간(전체 페이지를 표시하는 데 걸리는 시간)을 표시합니다. 실행 중인 기능). 이해를 돕기 위해 두 도구 모두에서 폭포수 속도를 확인하는 것이 좋습니다.

사이트 속도 감사(아래에서 자세히 설명)의 일환으로 이러한 도구를 사용하여 최적화 진행 상황을 추적합니다.

관련 읽기: WordPress 모바일 사이트 속도를 높이는 방법

페이지 속도가 중요한 이유는 무엇입니까?

사용자 기대치(2초)와 평균 웹사이트 로드 시간(5초) 사이의 격차를 해소하는 것이 페이지 속도 최적화의 목표이자 나중에 설명할 전략입니다. 그러나 정확히 페이지 속도가 중요한 이유는 무엇입니까? 서로 연결된 3가지 주요 이유가 있습니다.

1. 속도가 UX를 죽인다

사용자 경험은 아마도 웹 사이트 속도에 관심을 가져야 하는 가장 중요한 이유일 것이므로 여기에서 시작하겠습니다.

사람들은 더 이상 느린 로딩 웹사이트에 대한 인내심이 없습니다. 처음에는 인터넷에 연결하는 것만으로도 더 이상 존재하지 않는 관용이 필요했습니다.

이 달콤한 소리를 기억할 만큼 나이가 드셨나요?

오늘날 사람들은 지속적으로 온라인 상태이며 페이지를 표시하는 데 최대 3초가 주어지며 그렇지 않으면 사라집니다. 3초를 초과하면 사용자 경험이 좋지 않으며 앞으로 기준이 더 높아질 것입니다.

기업가이자 블로거인 Fred Wilson은 "성공적인 웹 앱의 10가지 황금 원칙"에 대한 강연에서 다음과 같이 언급합니다.

“속도가 가장 중요한 특징입니다. 애플리케이션이 느리면 사람들이 사용하지 않습니다. 고급 사용자보다 주류 사용자에게서 더 많이 볼 수 있습니다. 파워 유저는 때때로 매우 빠른 웹 앱을 구축하는 문제에 대해 약간의 동정심을 가지고 있고 아마도 기꺼이 함께 살 것이라고 생각하지만 아내와 아이들을 볼 때 그들이 나의 주류 관점입니다. 세계. 무언가가 느리면 그냥 사라진 것입니다.”

이에 대해 생각하는 가장 쉬운 방법은 웹사이트를 탐색하는 방법과 대부분의 사이트에 대한 귀하의 기대치입니다. 당신은 거기 앉아서 느린 로드 시간을 용납합니까? 로드하는 데 시간이 오래 걸리는 웹사이트에 대한 인상은 어떻습니까?

관련 읽기: 소기업 웹사이트를 만들기 위한 멍청한 놈 친화적인 10단계 가이드

2. 속도가 SEO를 죽인다

사용자 경험은 실제로 사이트 속도가 SEO에 미치는 영향의 원동력입니다.

Yoast의 Edwin Toonen은 다음과 같이 설명합니다.

“Google의 최신 연구에 따르면 페이지 로드 시간이 1초에서 3초로 변경되면 이탈 가능성이 32% 증가합니다. 1~5초는 기회를 90%로 증가시키고 사이트를 로드하는 데 최대 10초가 걸리면 바운스 가능성이 123%로 증가합니다. 믿어지지가 않는다. 검색 엔진의 경우 더 나은 결과와 성능은 고객을 만족시키는 건전한 사이트의 표시이므로 더 높은 순위로 보상을 받아야 합니다.”

구글은 느린 웹사이트가 순위 강등을 받을지 여부를 공식적으로 밝히는 데 더디었지만, 그런 날이 오고 있는 것 같습니다. 귀하의 웹사이트와 귀하가 관리하는 웹사이트가 준비되었는지 확인해야 합니다.

3. 스피드 킬 전환

귀하의 사이트 속도가 전환에 미치는 영향은 귀하의 관심을 끌만한 것입니다. 각 단계가 영원히 걸리는 경우 깔때기를 통해 사람들을 어떻게 움직일 수 있습니까? 귀하의 슈퍼 팬은 그렇게 할 것이지만 구매자가 후회하는 경향이 있는 새롭고 주저하는 사람들은 이탈할 것입니다.

예를 들어, SOASTA는 최근 상당한 양(450만 세션)의 모바일 트래픽을 즐기는 선도적인 온라인 소매업체인 mPulse 고객 중 한 명을 대상으로 연구를 수행했습니다.

주요 결과는 다음과 같습니다.

1. 전환 측면에서 성능 스위트 스팟은 2.4초였습니다.
2. 단 1초 더 빠른 페이지는 전환율이 27% 증가했습니다.
3. 4.2초에 평균 전환율이 1% 아래로 떨어졌습니다.
4. 6초가 되면 모바일 전환율이 정체되기 시작합니다.

이미지 출처: SOASTA

그 의미는 매우 분명합니다. 느린 페이지 로드 시간은 전환율을 떨어뜨립니다. 따라서 Sherlock과 같은 연역적 추론은 사이트 속도를 높이는 데 초점을 맞추면 전환율이 높아진다는 것을 나타냅니다!

우리가 그렇게 할 수 있는지 봅시다.

웹사이트 로드 속도를 높이는 방법은 무엇입니까? 8 전술

사이트 속도를 높이는 것이 반드시 간단하지는 않습니다. 작고 가벼운 사이트가 있는 경우 이 목록에 있는 몇 가지 전술을 시도하면 됩니다.

그러나 코드와 콘텐츠가 많은 크고 오래된 사이트는 약간의 지속성과 다음 목록에 있는 여러 전술의 구현이 필요할 수 있습니다.

시작할 위치는 다음과 같습니다.

1. 브라우저 캐싱 활용:

사이트를 방문할 때 브라우저는 로드 시간을 단축하기 위해 종종 사이트의 페이지를 캐시합니다.

브라우저 캐싱은 사용자가 웹 페이지를 방문할 때 로컬 컴퓨터에 웹 페이지 리소스 파일을 저장하므로 브라우저 캐싱을 활용하는 것은 리소스를 처리하는 방법을 브라우저에 지시할 때입니다.

서버의 응답에 캐싱 헤더가 포함되어 있지 않거나 리소스가 짧은 시간 동안만 캐시되도록 지정된 경우 속도가 느려질 수 있습니다.

캐싱을 활용하면 반복 방문자를 위해 페이지를 훨씬 빠르게 로드할 수 있으며 동일한 리소스를 공유하는 다른 페이지도 마찬가지입니다.

참고: SEO 콘텐츠 전략가인 Maddy Osman은 “W3 Total Cache 는 여기에 적합하지만 특정 호스트(예: GoDaddy)에서는 금지됩니다. 웹 사이트를 손상시키지 않도록 구성하려면 전문가의 손이 필요합니다.”

방법은 다음과 같습니다.

2. 이미지 최적화:

이미지가 더 빨리 로드되면 사이트가 더 빨리 로드됩니다. Google은 “...이미지는 종종 페이지에서 다운로드된 바이트의 대부분을 차지합니다. 결과적으로 이미지를 최적화하면 종종 가장 큰 바이트 절감 및 성능 향상을 얻을 수 있습니다.”

즉, 페이지의 이미지를 최적화하여 시각적 품질에 큰 영향을 주지 않으면서 파일 크기를 줄일 수 있을 때 몇 가지 큰 개선을 얻을 수 있습니다.

방법은 다음과 같습니다.

3. HTML, CSS 및 JavaScript 축소:

축소는 코드 실행에 필요하지 않은 불필요한 문자를 제거합니다.

제거할 수 있는 중복 데이터 소스에는 코드 주석 및 서식 지정, 사용하지 않는 코드 제거, 더 짧은 변수 및 함수 이름 사용 등이 포함됩니다.

방법은 다음과 같습니다.

4. gzip 압축을 활성화합니다.

Gzip 압축은 누군가 웹사이트를 방문할 때 서버에서 전송되는 파일의 크기를 대폭 줄입니다. 이렇게 하면 작업 속도가 상당히 빨라집니다.

지티메트릭스에 따르면,

“gzip이 웹 환경에서 잘 작동하는 이유는 CSS 파일과 HTML 파일이 반복되는 텍스트를 많이 사용하고 공백이 많기 때문입니다. gzip은 일반 문자열을 압축하기 때문에 페이지와 스타일 시트의 크기를 최대 70%까지 줄일 수 있습니다!”

방법은 다음과 같습니다.

5. 서버 응답 시간 단축:

서버 응답 시간은 웹 서버가 브라우저의 요청에 응답하는 데 걸리는 시간입니다. 서버 응답 시간이 느리면 페이지가 속도에 얼마나 최적화되어 있든 상관없이 페이지가 느리게 표시되기 때문에 이것은 해결해야 할 핵심 문제입니다.

Google은 서버 응답 시간을 200ms 미만으로 줄여야 한다고 말합니다. 어떻게 하면 이런 일이 일어날까요?

방법은 다음과 같습니다.

6. 방문 페이지 리디렉션을 피하십시오.

주어진 URL에서 최종 랜딩 페이지로 리디렉션이 두 번 이상 있을 때 사이트 속도가 정말 느려질 수 있습니다. 이것은 처리하는 데 시간이 걸리는 리디렉션 루프를 시작합니다.

속도를 늦출 수 있는 리디렉션의 몇 가지 예는 다음과 같습니다.

example.com → m.example.com/home - 모바일 사용자에 대한 다중 왕복 페널티.
example.com → www.example.com → m.example.com - 모바일 환경이 매우 느립니다.

방법은 다음과 같습니다.

7. 눈에 보이는 콘텐츠의 우선 순위 지정:

이것은 페이지의 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하기 위해 추가 네트워크 왕복이 필요할 때 Google의 PageSpeed ​​도구에서 받게 되는 정확한 메시지입니다.

페이지를 방문할 때 데스크톱이나 장치에 표시되는 이 "접지 않은 부분" 콘텐츠입니다. 따라서 눈에 보이는 콘텐츠의 우선순위를 정하는 것은 페이지의 필수 요소가 사용자에게 먼저(그리고 빠르게) 로드되고 소셜 공유 플러그인, 분석 자바스크립트 등과 같은 보조 페이지 요소를 연기하도록 우선순위를 지정하는 것이 좋습니다.

방법은 다음과 같습니다.

8. 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 JavaScript 및 CSS를 제거합니다.

JavaScript 및 CSS 리소스는 완전히 로드될 때까지 페이지가 표시되지 않는 경우가 많습니다. 스크롤 없이 볼 수 있는 콘텐츠의 조기 표시가 꽤 기괴하게 보일 수 있기 때문에 이것은 종종 좋은 생각입니다.

그러나 이것은 사이트 속도에 대해 Google에서 받게 되는 일반적인 메시지이며 이를 해결하면 실제로 페이지 속도를 몇 단계 높일 수 있습니다.

방법은 다음과 같습니다.

참고: 이것은 대부분의 사람들에게 가장 어려운 문제입니다. 그냥 하는 워드프레스 플러그인이 있지만 로드할 때마다 사이트를 프랑켄슈타인처럼 보이게 만들 수 있습니다.

사례 연구: Vendasta의 블로그 속도 향상

그래서 저는 Vendasta가 모바일 속도의 경우 44/100(업데이트: 3개월 후 77/100이 되었습니다!) 및 데스크톱 속도의 경우 60/100인 경우에도 사이트 속도에 대해 이 게시물을 작성하고 있습니다.

저를 믿으세요. 여기에서 거리 신용에 대한 질문이 있을 수 있다는 것을 알고 있습니다. 그러나 우리의 이야기에는 Google의 통찰력 도구가 알려주는 것보다 더 많은 것이 있습니다.

Vendasta에서 우리는 사이트 속도에 많은 노력을 기울였지만 여전히 우리가 원하는 위치에 있지 않은 것이 분명합니다. 우리는 실제로 많은 개선을 했지만 많은 콘텐츠가 포함된 대규모 사이트가 있으므로 아직 모바일과 데스크톱 모두에 대해 80/100이라는 목표에 도달하지 못했습니다.

그러나 사이트 속도 문제로 어려움을 겪고 있는 것은 우리만이 아닙니다! 많은 유명 웹사이트가 우리와 같은 문제를 공유하고 있습니다. 실제로 HubSpot도 Google의 PageSpeed ​​Insights 도구에 따르면 사이트 성능을 개선하기 위해 노력하고 있습니다.

이것은 HubSpot의 "총성" 콜아웃이 아닙니다(존중!). 사이트 속도를 개선하는 것은 전문가에게도 어려운 일이 될 수 있으며 우리 모두가 차세대 인터넷 사용자의 요구를 충족합니다. 도구를 통해 즐겨찾는 사이트를 실행하면 무슨 뜻인지 알 수 있습니다!

위에서 언급했듯이 속도를 높이기 위해 우리가 수행하는 모든 개선 사항은 기하급수적인 결과를 가져올 수 있습니다.

Vendasta 마케팅 기술자 Adam Bissonnette는 다음과 같이 말합니다.

"저희에게 가장 큰 변화는 서버 쪽이었습니다. 우리는 AppEngine에서 WordPress 웹사이트를 실행하는 독특한 위치에 있으며(아무도 이렇게 하지 않음) AppEngine Standard에서 베타 버전인 AppEngine Flex로 전환하면서 성능이 크게 향상되었습니다. 우리는 또한 변경 사항을 변경했습니다. 5에서 7까지의 php 버전도 많은 도움이 되었습니다. php를 업데이트하면 특정 플러그인이 더 이상 작동하지 않는 일련의 문제가 발생했고 한두 달 동안 그 결과를 처리해야 했지만 기능 손실보다 속도가 더 중요했습니다. ."

여기서 얻을 수 있는 것은 특정 상황에 가장 적합한 솔루션을 찾는 것이 중요하다는 것입니다. 여기에서 언급하지 않은 사이트의 바늘을 움직이는 전술을 찾을 수 있습니다!

2016년 5월 사이트 속도 향상 노력을 시작한 후 블로그의 성장을 살펴보십시오.

이러한 개선 사항은 뒤따르는 모든 Vendasta 콘텐츠 이니셔티브의 발판을 마련했습니다. 그 이후로 우리는 깊이 있는 양질의 콘텐츠를 대량으로 제작하는 데 집중했습니다. 일치하는 사이트 속도 개선 없이는 분석 스크린샷에 표시되는 트래픽 급증을 볼 가능성이 낮습니다.

성능은 사이트 속도를 계속 최적화하고 사용자 경험을 개선할 때에만 향상될 것입니다!

핵심 요약: 웹 사이트에서 성장을 경험하기 위해 100/100점을 받을 필요는 없습니다.

40/100인 경우 시간이 허락하는 한 몇 가지 개선을 하고 60/100을 위해 촬영하십시오. 즉시 100/100 촬영에 지치지 마세요!

사례 연구: iHeartRaves

iHeartRaves는 개인의 창의성을 고취하고 자기 표현력을 강화하는 것을 사명으로 하는 축제 패션 분야의 세계적 리더입니다. 두 개의 다른 자매 브랜드를 합친 Shopify 매장은 연간 2천만 달러의 수익을 올리고 있으며 4년 연속 Inc. 5000에 포함되었습니다.

전자 상거래 사이트인 iHeartRaves는 웹 사이트 속도와 성능 저하로 인한 금전적 파급 효과를 잘 알고 있습니다.

iHeartRaves의 디지털 마케팅 전략가인 Brandon Chopp은 다음과 같이 말했습니다.

“전자상거래 브랜드로서 우리는 사이트 속도가 엄청나다는 것을 깨달았습니다! 전환에 대해 생각할 때 클릭 유도 문안을 통해 사용자가 무언가를 클릭하게 만드는 가장 좋은 방법에 대해 생각하고 있습니다. 문제의 진실은 더 빠른 웹사이트가 항상 승리한다는 것입니다. 사이트가 빠를수록 사용자가 전환할 가능성이 높아집니다.”

Brandon은 비즈니스가 수익 성장 목표를 달성할 수 있도록 사이트 속도를 개선해야 한다는 것을 알고 있었습니다. 그는 다음 전술을 사용하여 iHeartRaves의 속도 향상 문제를 해결했습니다.

1. 이미지 최적화: 모바일 사이트가 빠르게 로드되도록 하기 위해 Crush.pics라는 Shopify 앱을 사용합니다. 이렇게 하면 모든 이미지가 이미지 품질을 유지하면서 사이트 속도에 맞게 최적화됩니다.
2. 코드 축소: 우리는 또한 호출되는 스크립트의 총 수를 줄이면서 모든 액체 코드와 스크립트 로드 순서의 우선 순위를 최소화하는 조치를 취했습니다.
3. 온페이지 자산 정리: 일부 페이지에서 불필요한 자산을 제거하고 다른 페이지의 이미지 자산을 줄이는 것은 사이트 로드 시간도 줄이는 데 도움이 되었습니다. 우리는 전자 상거래 사이트이기 때문에 속도와 콘텐츠 간의 균형을 맞추려고 노력합니다. 고객에게 훌륭한 사용자 경험을 유지하면서 이미지 품질이 표준에 맞는지 확인하는 것이 매우 중요합니다.

이러한 업데이트를 통해 페이지 로드 속도와 이탈률 결과가 크게 개선되었습니다. . "원래 40.34%였는데 지금은 34%로 떨어졌습니다."

이러한 개선 사항은 iHeartRaves의 실질적인 재무 결과로도 이어졌습니다. “대부분 사이트 속도 감소 덕분에 전환율이 해마다 증가했기 때문에 빠른 모바일 사이트를 보유함으로써 Google에서 이점을 얻었습니다. 고객의 사용자 경험을 최우선으로 함으로써 우리는 고객을 유지하고 더 쉬운 쇼핑 경험을 제공할 수 있었습니다.”

핵심 요약: 속도와 사용자 경험은 밀접한 관련이 있다는 점을 기억하는 것이 중요합니다.

이 두 가지를 결합하면 모든 것을 지배하는 하나의 지표인 전환을 개선할 수 있습니다!

사례 연구: Jubaer의 6초 및 40점 향상

Vendasta의 자체 SEO 전문가인 Jubaer Prodhan은 자신의 사이트에 대해 Google의 Pagespeed Insight 도구를 따랐고 몇 가지 좋은 결과를 얻은 사례를 공유했습니다.

Jubaer는 "제 경우에는 로드 시간이 8초 이상이고 GPI(Google PageSpeed ​​Insight) 점수가 43인 WordPress 웹사이트가 있습니다. 사이트 속도를 개선하기 위해 다음과 같은 작업을 수행했습니다."라고 Jubaer는 말합니다.

1. 이미지 최적화: 올바르게 수행하면 페이지 크기와 속도를 크게 줄일 수 있습니다. 제 경우에는 페이지 크기가 3MB에서 1.6MB로 줄었습니다. 사용된 플러그인: ShortPixel Image Optimizer(이 도구를 사용하여 이미지를 최적화할 수도 있음)
2. 코드 최소화: 종종 우리는 다양한 필요에 따라 여러 워드프레스 플러그인을 사용합니다. 그들 대부분이 귀하의 사이트에 추가 CSS/HTML/Javascript를 추가한다는 사실을 깨닫지 못하는 것입니다. 로딩 시간과 브라우저 요청이 증가합니다. 축소(여분의 줄과 코드 제거)는 이에 대한 쉬운 해결책입니다. 사용 플러그인: 자동 최적화
3. 브라우저 캐시: 브라우저 캐시 사용은 대부분의 주요 도구에서 권장됩니다. 또한 대역폭, 재방문자 로드 시간 및 기타 많은 유용한 사항을 줄입니다. 사용한 플러그인: WP Fastest Cache

Jubaer의 사이트는 이제 1.9초 안에 로드되고 GPI 점수는 83입니다! 이는 8초와 43의 GPI 점수에서 상당히 개선된 것입니다.

주요 내용: 소규모 웹사이트에서는 몇 가지 주요 변경 사항만으로 속도가 눈에 띄게 향상되는 것을 확인할 수 있습니다.

Jubaer의 목록을 통해 작업을 시작하여 다음 전술로 진행하기 전에 어떤 결과를 얻을 수 있는지 확인하십시오.

관련 자료: 7가지 WordPress SEO 플러그인: 새로운 로컬 스택

사례 연구: 한 회사가 Google의 PageSpeed ​​도구에서 100/100을 달성한 방법

100/100을 얻는 것은 귀하의 사이트가 가능한 한 속도에 최적화되어 있다는 표시입니다. 이것이 궁극적인 목표이며 제가 이야기를 나눈 한 회사는 목표 달성에 도움이 되는 몇 가지 내부 전술을 설명했습니다.

Bret Bonnet, 일리노이주 시카고에 위치한 4천만 달러 규모의 프로모션 제품 유통업체인 Quality Logo Products의 공동 소유주/설립자. 설명,

“페이지 속도는 우리 조직의 주요 관심사입니다. 아주 미미하지만 여전히 순위 신호입니다. 연구에 따르면 페이지 속도는 전환 성능에 큰 영향을 미칠 수 있습니다. 웹사이트의 로드 시간을 개선하는 가장 효과적인 방법은 자산 로드 작업을 통해 CSS/JS를 로드하기 전에 "접이식" 콘텐츠를 완전히 표시할 수 있도록 하는 것입니다. "Above the fold" 콘텐츠 로드를 최적화하지 않으면 전체 Google Page Speed ​​Insights 점수에서 10점이 감점될 수 있습니다."

[clickToTweet tweet="스크롤 없이 볼 수 있는 콘텐츠의 로드를 최적화하지 않으면 전체 Google #PageSpeed ​​Insights 점수에서 10점이 감점될 수 있습니다." quote="스크롤 없이 볼 수 있는 콘텐츠의 로드를 최적화하지 않으면 전체 Google #PageSpeed ​​Insights 점수에서 10점이 감점될 수 있습니다."]

이 10점 감점은 Google이 스크롤 없이 볼 수 있는 콘텐츠를 최적화하는 것이 얼마나 중요하다고 생각하는지 보여줍니다. 놀랍고 역설적인 것은 Bret가 다음에 설명하는 것입니다.

“자산 관리 외에도 소스 코드에 Google AdWords 또는 Google Analytics와 같은 일반적인 추적 코드를 포함하는 웹사이트에서는 만점을 얻을 수 없습니다. 이러한 JS 파일은 Google에서 직접 제공되며(어떤 이유로든 Google은 자체 품질 가이드라인을 따르지 않음) 압축되지 않은 상태로 브라우저로 전송됩니다. 다시 말하지만 귀하가 통제할 수 없는 이 좋지 않은 최적화는 전적으로 Google 측의 책임이며 최대 5포인트의 비용이 들 수 있습니다."

Quality Logo Products는 다음 전략을 사용하여 속도를 높이고 100/100을 달성할 수 있었습니다.

“이를 극복하기 위해 우리는 Google이 크롤링하는 IP와 이러한 도구의 소스 IP를 기록하고 서버가 의도적으로 추적 코드가 설치되지 않은 상태에서 우리 페이지의 Google 버전을 제공하도록 했습니다. 좀 이상하지만 Google은 Google Page Speed ​​Insight 점수를 손상시키고 있습니다. 따라서 이를 극복하기 위해 의도적으로 최적화되지 않은 자체 코드를 Google에 제공하지 않아 평균적으로 페이지 속도 점수가 5점 향상되었습니다."

핵심 테이크아웃: 100/100 점수를 얻을 수 있습니다!

Google 자체 제품이 그 정도로 속도를 늦추는 것은 당혹스럽지만 이 사례 연구의 해결 방법이 도움이 될 것입니다.

감사 및 사이트 속도 최적화를 수행하는 방법

1. 차트 결과에 대한 기준선 확보

감사 및 최적화 프로세스의 첫 번째 단계는 사이트가 현재 몇 가지 메트릭을 나타내는 기준을 확인하는 것입니다.

시작점을 기록하면 최적화 노력의 성공 여부를 더 잘 추적할 수 있습니다. 어떤 식으로든 속도를 위해 웹사이트를 최적화할 때마다 동일한 메트릭에 대한 진행 상황을 기록해야 합니다.

추적해야 할 몇 가지 사항은 다음과 같습니다.

1. 사이트 로드 시간: 메뉴 → 동작 → 사이트 속도 → 개요(및 개별 페이지를 보려면 페이지 시간)로 이동하여 Google 분석 보고서로 이동합니다. 평균 사이트 페이지 로드 시간과 추적하려는 주요 페이지를 기록합니다. 위에서 언급한 Pingdom 및 GTMetrix 도구를 사용할 수도 있습니다.
2. 웹사이트의 Google PageSpeed ​​점수: 여기를 클릭하고 웹사이트 URL을 입력하고 모바일 및 데스크톱 점수를 확인하세요. 이것들을 기록하십시오.
3. 이탈률: 이탈률이 개선되는지 확인하세요. 이는 한 페이지만 본 후 사이트를 떠나는 사람이 줄었다는 것을 나타냅니다. 동작 → 개요와 같은 여러 위치에서 이를 볼 수 있습니다.
4. 전환율: 개선 후 방문자의 전환율이 더 높아졌습니까? 이것은 추적하는 것이 중요합니다! 전환 → 목표 → 개요로 이동하여 현재 전환율을 보고 기록합니다.

진행 상황을 스프레드시트에 기록하고 각 업데이트에 대한 주석을 만들어 Google Analytics의 웹사이트 변경 사항을 기록하십시오.

2. 8단계 작업

감사를 시작하기에 가장 좋은 곳은 Google의 PageSpeed ​​Insights 도구가 제공하는 제안입니다. 아직 100/100이 아닌 경우 시작 위치에 대한 Google의 몇 가지 도움말이 표시됩니다.

우리가 강조한 사이트 속도를 개선하기 위한 8단계를 통해 작업하는 데는 제가 언급한 것처럼 약간의 시간과 끈기가 필요합니다.

Yoast의 SEO 전문가인 Meike Hendriks는 다음과 같이 말합니다.

"웹사이트 속도를 높이는 것이 어려울 필요는 없습니다. 많은 웹사이트에는 쉽게 최적화할 수 있는 이미지가 너무 큽니다. 게다가 전 세계에서 방문자가 방문하는 웹사이트는 반드시 CDN을 사용하여 이미지가 다음과 같이 제공되도록 해야 합니다. .htaccess 파일에 몇 줄의 코드를 추가하면 웹 사이트 속도를 쉽게 높일 수 있습니다. 예를 들어 방문자 컴퓨터에 훨씬 빠르게 로드할 수 있는 작은 파일에 대해 브라우저 캐싱 및 gzip 압축을 활성화할 수 있습니다."

현실적인 목표와 기대치를 설정해야 합니다. Vendasta 및 Hubspot과 같이 (굉장한!) 콘텐츠가 많은 대규모 다면적 사이트가 있는 경우 몇 페이지로 작고 민첩한 사이트의 동일한 목표를 달성하는 데 더 많은 시간이 걸립니다.

3. 필요할 때 도움 요청

이봐, 우리는 모두 개발자와 디자이너가 아니야. DIY 개발 노력으로 인해 사이트가 손상되거나 치료 세션이 시작되면 전문가의 도움을 받을 수 있습니다.

우리 모두는 기술 마법사를 알고 부러워합니다. 그들이 당신을 위해 이것을 하게 하십시오!

Digitimatic의 Pius Boachie는 풀 스택 개발자가 사이트 속도 문제를 해결하는 데 핵심이라고 말했습니다.

"Google 페이지 속도 통계 도구를 능가하는 경우 개발자는 코드를 깔끔하게 유지하고 스크롤 없이 볼 수 있는 부분에 콘텐츠를 우선시하여 어려운 작업을 수행합니다. 경험을 통해 고객을 위해 디자인할 때 속도를 고려하여 디자인하므로 Duda와 같은 웹사이트 빌더를 선택합니다. (빠른 제품) 또는 CMS를 기반으로 구축하거나(비싸다), 숙련된 풀스택 개발자와 함께 좋은 CDN 및 호스팅(매우 중요)에 투자하십시오."

이미 기본 지표를 설정했으므로 앞으로 진행 상황과 성공을 쉽게 추적할 수 있습니다. 클라이언트를 위해 여러 사이트에서 작업하는 경우 성공을 복제하고 작동하지 않는 모든 것을 중단할 수 있기를 원할 것입니다.

추천 자료: 개발자가 필요하지 않음: 화이트 라벨 웹사이트 빌더가 필요한 이유

4. 앞으로의 사이트 속도에 전념하십시오.

이미지 최적화, 코드 축소 및 브라우저 캐싱과 같은 간단한 결과를 제거하고 멋진 결과를 바로 볼 수 있습니다. 그러나 목표를 달성하기 위해서는 제가 강조한 8가지 전술을 조금씩 깎아내리기 위해 더 지속적인 노력이 필요할 수 있습니다.

한번에 다 하려고 하지 마세요! 번 아웃을 피하려면 노력의 결과를 모니터링하면서 조금씩 깎을 계획을 세우십시오.

사이트 속도를 활용하여 판매를 늘리는 방법은 다음과 같습니다.

마지막 생각들

실제 사이트 속도 개선을 얻는 것은 블로그 게시물에 나타나는 것보다 항상 더 지저분합니다. 그 과정에서 몇 가지 문제에 직면하게 되지만 장기적으로 사용자 경험, SEO 및 전환을 개선할 것이기 때문에 결과에 집중하십시오.

그것이 가장 중요한 것입니다. 온라인 브라우징의 빠른 미래를 준비합니다.

도움이 필요하면 기술자 친구에게 전화를 걸거나 어떻게 도울 수 있는지 알려주세요!

공유할 경험이나 조언이 있으면 이 게시물의 댓글 섹션에도 자유롭게 차임하십시오...