검색 엔진 최적화 방법

웹 사이트 속도 측정 부터 개선까지, 초보자도 쉽게 따라하는 공략집

“로딩 시간이 1초만 느려져도 전환율이 7% 감소”

아마존의 연구에 따르면, 페이지 로딩 시간이 1초만 느려져도 전환율이 7% 감소한다고 합니다.

즉 100명의 고객이 웹 사이트를 방문을 한다고 가정했을 때 이 때 로딩 속도가 1초만 늦어지더라도 7명의 고객이 구매를 하지 않는다는 뜻이 되는 겁니다.

이번 글에선 웹 사이트 속도 측정부터, 개선할 수 있는 방법까지 초보자도 매우 쉽게 따라할 수 있게 설명 드리겠습니다. 구글 seo 의 기본은 웹페이지의 로드 시간 을 개선하는 것에서 시작한다고 할 수 있습니다.

웹 사이트 속도 측정이 중요한 이유

웹사이트 속도 는 사용자 경험에 큰 영향을 미칩니다. 속도가 빠른 웹 사이트는 사용자들에게 신뢰를 줍니다. 반대로 로딩 시간이 오래 걸리는 웹 사이트는 막대한 이탈을 만드는 원인 중 하나입니다.

주기적으로 웹 사이트의 로딩 속도를 측정하고, 결과를 통해 사용자 경험을 개선할 수 있는 방법을 찾아야 합니다.

출처 : Google Search Central

위의 영상에서도 구글 검색 관리자들은 속도 측정을 하는데에 어느정도 기준점이 있냐는 질문에 대한 답변을 아래와 같이 합니다.

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페이지에 랭크 되고 싶은 분만 보세요

온리백링크 이팀장

온리백링크 이팀장입니다

Recent Posts

홈페이지 상위노출 A to Z

SEO 최적화: 홈페이지 상위 노출의 중요성과 방법 SEO 최적화란 무엇인가? SEO(Search Engine Optimization)는 검색 엔진…

3개월 ago

백링크 작업, 이것만 알아도 실패하지 않습니다 (2023 최신판)

백링크 작업은 검색 엔진 최적화에서 빠지지 않는 단어입니다.이 포스팅을 보시는분들은 백링크에 대해 들어는 봤지만 어렴풋이…

3개월 ago

백링크 업체에 통수 맞아보신 대표님들은 꼭 읽어보세요.

SEO 최적화: 백링크 업체에 대한 이해와 활용 방법 백링크 업체란 무엇인가? 백링크 업체는 웹사이트의 외부…

3개월 ago

SEO광고를 알고 계신다면 절반은 성공했습니다.

SEO 광고란 무엇인가? SEO(검색 엔진 최적화) 광고는 웹사이트를 구글과 같은 검색 엔진의 검색 결과 상위에…

3개월 ago

구글상위노출은 선택이 아닌 필수입니다.

구글 상위노출: 온라인 비즈니스의 필수 전략 구글 상위노출은 온라인 비즈니스의 성공을 위해 필수적인 요소입니다. 구글은…

3개월 ago

검색최적화? 고객님의 홈페이지는 검색최적화가 되어있나요?

검색최적화: 온라인 비즈니스 성공의 핵심 검색최적화(SEO)는 온라인 비즈니스의 성공을 위해 반드시 필요합니다. SEO는 검색 엔진…

3개월 ago