“로딩 시간이 1초만 느려져도 전환율이 7% 감소”
아마존의 연구에 따르면, 페이지 로딩 시간이 1초만 느려져도 전환율이 7% 감소한다고 합니다.
즉 100명의 고객이 웹 사이트를 방문을 한다고 가정했을 때 이 때 로딩 속도가 1초만 늦어지더라도 7명의 고객이 구매를 하지 않는다는 뜻이 되는 겁니다.
이번 글에선 웹 사이트 속도 측정부터, 개선할 수 있는 방법까지 초보자도 매우 쉽게 따라할 수 있게 설명 드리겠습니다. 구글 seo 의 기본은 웹페이지의 로드 시간 을 개선하는 것에서 시작한다고 할 수 있습니다.
웹 사이트 속도 측정이 중요한 이유
웹사이트 속도 는 사용자 경험에 큰 영향을 미칩니다. 속도가 빠른 웹 사이트는 사용자들에게 신뢰를 줍니다. 반대로 로딩 시간이 오래 걸리는 웹 사이트는 막대한 이탈을 만드는 원인 중 하나입니다.
주기적으로 웹 사이트의 로딩 속도를 측정하고, 결과를 통해 사용자 경험을 개선할 수 있는 방법을 찾아야 합니다.
위의 영상에서도 구글 검색 관리자들은 속도 측정을 하는데에 어느정도 기준점이 있냐는 질문에 대한 답변을 아래와 같이 합니다.
MARTIN SPLITT : 따라서 실제로 임계값을 제시할 수는 없지만 기본적으로 사용자를 위해 사이트를 빠르게 만들라는 것이 권장 사항입니다. 그게 핵심입니다.(번역)
사이트 속도 측정 방법
위의 내용에선 사이트 속도 온라인 비지니스를 하는 입장에선 매우 중요하다는 것을 깨달으셨을 겁니다. 그러면 속도를 개선 할 때 내 웹 사이트 로딩 속도를 확인을 해야 합니다. 여러가지 로딩 속도를 측정하는 방법이 있지만, 그 중 3개의 측정 사이트 통해서 소개해드리겠습니다.
1. 코어 웹 바이탈
코어 웹 바이탈(Core web vitals)는 구글의 웹 사이트 성능을 측정 하는 도구로, 구글 검색 등록이 완료 된 상태에서 사용 할 수 있습니다. 서치 콘솔에 있는 문제점은 즉각적으로 문제를 파악할 수 있습니다.
검색 순위에서 누락이 되지 않게 하기 위하여, 서치콘솔 모바일 사용 편의성을 우선적으로 체크해줍니다.
1. 구글 서치콘솔 왼쪽의 바에 ‘모바일 사용 편의성’ 에 가셔서 ‘사용 불가’ 로 돼있는 문제를 체크 해줍니다.
2. 서치콘솔의 코어 웹 바이탈을 체크합니다.
여기서 문제점을 감지를 하면, 개발자 등에 연락을 취해서 도움을 받아보시길 바랍니다.
2. 구글 Page Speed Insight
구글 Page Speed Insight는 웹 사이트의 성능을 측정하고, 성능 개선을 할 수 있는 항목을 볼 수 있는 툴입니다. 주로 성능 부분에서 점수가 낮은 웹 사이트들을 자주 확인할 수 있습니다. 이럴 땐, 테마를 바꿔보든가 등의 작업을 고려 할 수 있습니다.
점수는 높을수록 좋으며 통상적으로 성능 부분은 60점을 밑돌면 검색 엔진 최적화에서 안좋은 영향을 끼친다고 합니다.
3. Webpage Test
Webpage Test는 웹 사이트의 성능을 저해하는 부분이 있으면 구체적인 이유를 찾을 수 있는 도구 입니다.사용 방법에 대해서 설명 드리겠습니다.
1. 아래의 홈페이지에 URL을 입력 후 Advanced Configuration 에서 Seoul, Korea – EC2 및 Browser 에서 기종을 선택하여 테스트를 합니다.
2. 후에 분석중인 것을 알 수 있습니다. 평균 5분 이내로 소요가 됩니다.
3. Waterfall View 를 선택하여 CSS 와 JS 에서 지연 되는 항목을 확인할 수 있습니다. 이 순서에서 느리게 로딩되는 코드를 찾아 개선을 하면 됩니다. 보통 크몽과 같은 플랫폼을 통해 개발자와 상의하시면 됩니다.
사이트 속도 개선 방법
아래에는 웹 사이트의 속도를 측정후 개선할 수 있는 방법입니다. 여러 케이스가 많지만 여러 웹사이트에서 공통적으로 수행할 수 있는 방법과 워드프레스 CMS를 사용하시는 분들은 아래의 작업을 통해 사이트 속도 개선을 할 수 있습니다.
1. 이미지 용량 최소화
이미지는 웹사이트를 구성하는 큰 역할을 합니다. 이런 이미지를 최적화 하게 되면 사이트의 속도가 대폭 개선 될 수 있습니다. 기존 이미지 파일을 압축하여 사용할 수 있습니다.
tinypng에 가셔서 이미지 등록 후, 이미지 파일을 압축 할 수 있습니다. 또한 WebP로 변환하여 사용하면 이미지 최적화에 도움을 줄 수 있습니다. AnyWebP 에서도 손쉽게 png/jpg 형식의 파일을 WebP 형식으로 변환할 수 있습니다.
2. 호스팅 지역 변경
웹 호스팅의 위치 또한 웹 사이트의 속도에 영향을 줍니다. 웹 사이트가 한국을 타겟으로 하였지만, 미국에 서버가 존재하는 경우 사용자들이 웹사이트를 여는데 시간이 걸릴 수 있습니다.
이럴 때 웹 호스팅의 위치를 변경을 하는 것이 도움이 될 수 있습니다. Vulture, Lionde 등을 사용하면 한국의 서울 서버에 있는 호스팅을 선택할 수 있습니다.
3. 폰트
웹 폰트 또한 웹사이트의 로딩 속도에 영향을 줍니다. 여러개의 폰트로 되어 있는 경우 로딩이 길어질 수 있습니다. 필요한 폰트만 사용해야 하며, 구글 폰트는 속도를 저해하므로 제일 좋은 방법은 테마의 기본 폰트를 사용하는 것이 좋습니다.
4. CSS, JS 인라인
CSS와 JS 파일이 로딩 시간을 늦추는 주된 원인인 경우도 많습니다. 이를 해결하기 위해 CSS 및 JS 를 HTML 문서에 직업 넣어 사용하는 인라인 방식을 사용할 수 있습니다. 이는 위의 결과를 바탕으로 개발자와 상의하여 진행하는 것이 좋습니다.
5. Http/2 사용
호스팅 사에 연락을 하여, http/1.1을 http/2로 업그레이드를 사용하는 것입니다. http/1.1 과 http/2의 속도는 차이가 많이 나고 많은 호스팅사는 http/2를 지원하니 체크 해보시길 바랍니다.
위의 Webpage Test 에서 결과를 클릭하게 되면, Protocol 부분에서 확인할 수 있습니다.
6. 워드프레스 플러그인
워드프레스를 사용하는 경우, 캐싱 플러그인을 활용하여, 웹 사이트의 속도를 개선할 수 있습니다. 여러 캐싱 플러그인이 있지만 ‘LiteSpeed cache’ 플러그인을 통한 셋팅값을 알려드리겠습니다.
캐싱 플러그인은 여러개를 같이 사용할 경우 문제가 생길 수 있으므로 한개만 사용하시는 것을 추천 드립니다. 또한 사용하지 않는 플러그인을 제거하여 주면 속도 향상에 도움이 됩니다.
1. 워드프레스 관리자 페이지에서 플러그인의 ‘LiteSpeed Cache’ 플러그인을 다운받습니다.
2. General 창에서 아래와 같은 상태로 변경합니다.
- Automatically Upgrade ‘ON’
- Guest Mode ‘ON’
- Guest Optimization ‘ON’
- Server IP 비움(공란)
- Notifications ‘ON’
3. 설치한 플러그인에서 ‘setting’을 찾아 들어갑니다.
4. ‘Cache’의 항목들을 아래와 같이 변경 해줍니다.
5. ‘TTL’ 항목들을 아래와 같이 변경 해줍니다.
6. ‘Purge’를 찾아서 아래와 같이 변경합니다.
7. ‘Excludes’ 와 ‘ESI’ 를 변경하지 않고 ‘Object’를 아래와 같이 변경합니다.
8. ‘Browser’ 부분으로 가서 아래와 같이 변경합니다.
9. ‘Advanced’ 항목으로 가서 아래와 같이 변경합니다.
10. ‘Page Optimization’ 으로 이동하여 ‘CSS Settings’ 로 이동하여 아래와 같이 변경합니다.
11. ‘JS Settings’로 이동하여 아래와 같이 변경합니다.
12. ‘Media Settings’로 이동하여 아래와 같이 변경합니다.
13. ‘VPI’ ‘Media Excludes’ 부분을 스킵하고 ‘Localization’ 항목으로 이동하여 아래와 같이 변경합니다.
‘Localization Files’ 항목에 아래와 같은 크롤 봇을 추가합니다.
- Popular scripts
- https://ajax.cloudflare.com/
- https://platform.twitter.com/widgets.js
- https://maps.googleapis.com/maps/api/js
- https://cdnjs.cloudflare.com/
- https://pagead2.googlesyndication.com/pagead/js
- https://www.google.com/recaptcha/api.js
- https://ajax.googleapis.com/ajax/
- https://netdna.bootstrapcdn.com/
- https://www.googletagmanager.com/gtm.js
- https://connect.facebook.net/en_US/fbevents.js
- https://www.googletagservices.com/tag/js/gpt.js
- https://platform.twitter.com/widgets.js
- https://stackpath.bootstrapcdn.com/
- https://code.jquery.com/
- https://www.googletagmanager.com/gtag/js
- https://www.googleoptimize.com/optimize.js
- https://maps.google.com/maps/api/js
14. ‘Page Optimization’ 에서 ‘Toolbox’의 ‘Heartbeat’로 이동 하여 아래와 같이 셋팅해줍니다.
이렇게 셋팅을 해주고, 문제가 생길 경우 캐싱 플러그인을 삭제하거나 개발자와 연락을 취하셔야 합니다. 이후 속도 측정을 하게 되면 확연하게 차이가 날 것입니다.
이렇게 웹 사이트 속도 측정에서 개선하는 방법까지 다뤄보았습니다. 여러 가지의 케이스가 있지만, 공통적으로 개선 할 수 있는 방법을 적용 후 결과를 보시길 바랍니다. 속도가 최적화 되어 있을 것입니다.
긴 글 읽어주셔서 감사합니다.
관련글 : 구글 상위노출 10가지 방법, 1페이지에 랭크 되고 싶은 분만 보세요