신규 웹사이트 소유자를 위한 웹 성능

게시 됨: 2020-10-23

오늘날 사이트 방문자는 웹사이트가 로드될 때까지 오래 기다리지 않습니다. 연구에 따르면 웹사이트 속도는 고객 만족도와 판매 전환에 큰 차이를 만들 수 있습니다. 실제로 소비자의 47%는 2초 이내에 로드되는 웹사이트를 선호합니다.

웹사이트 성능이란 무엇입니까?

웹 페이지가 브라우저에 다운로드되거나 표시되는 속도입니다. 요컨대, 웹사이트는 가능한 한 빨리 로드되어야 합니다. 페이지를 로드하는 데 3초 이상 걸리는 경우 사이트 방문자의 53%가 떠나므로 이상적인 로드 시간은 1-2초입니다.

사이트 성능의 중요성

빠른 사이트 속도는 더 나은 사용자 경험을 제공합니다. 결국 느린 웹사이트는 낮은 전환수와 높은 이탈률로 이어집니다. 새로운 웹사이트 소유자를 위해 웹 성능을 최적화하는 것은 매우 중요합니다. 기본적으로 사람들은 웹사이트가 로드될 때까지 기다릴 인내심이 없기 때문에 느린 사이트를 포기할 것입니다.

방문자를 구매자로 전환하려는 소기업 소유자에게는 속도가 훨씬 더 중요합니다. 사용자가 복잡한 깔때기를 통해 탐색해야 하는 경우 사용자에게 더 친숙하고 더 빠른 웹사이트를 선택합니다. PageSpeed ​​Insights와 같이 웹사이트 속도를 추적하는 데 도움이 되는 많은 웹사이트가 있습니다.

웹 성능

(이미지 제공: 구글)

1. 소셜 미디어에서 사이트 속도의 중요성

사이트 속도는 Facebook 및 Pinterest와 같은 소셜 미디어 사이트에서 매우 중요합니다. Facebook은 사용자 경험을 우선시하기 위해 2017년 8월 알고리즘 변경에 투자했습니다.

광고는 Facebook에서 중요하기 때문에 새로운 알고리즘은 증가하는 고객 기반의 요구 사항을 충족하는 것을 목표로 했습니다. 알고리즘은 속도와 사용자 경험을 향상시켰을 뿐만 아니라 Facebook에서도 수익 증가를 보고했습니다.

2. 사이트 속도가 전환에 미치는 영향

사이트 속도는 사용자 경험과 전환에 큰 영향을 미칩니다. 속도는 SEO에 영향을 미치며 이것이 사람들이 느린 웹사이트에서 이탈하는 이유입니다. 이탈은 사용자가 사이트의 다음 페이지로 이동하지 않는 경우를 나타냅니다. 로딩이 느린 사이트는 이탈률이 높습니다. 이러한 비율은 Google의 순위에 영향을 미치므로 속도가 우선되어야 합니다. Google Analytics에는 이탈률을 추적하는 방법이 있으므로 필요한 경우 수정할 수 있습니다.

웹 성능

(이미지 제공: OptinMonster)

웹 성능 측정 방법

사이트 속도는 전환과 관련하여 중요한 역할을 합니다. 일반적으로 사람들이 느린 로드 시간으로 인해 웹사이트에서 이탈하는 경우 전환되지 않습니다. 사람들이 필요로 하는 정보를 얻을 수 있는 페이지가 마음을 바꿀 시간을 더 주어서는 안 됩니다.

탐색하기 쉬운 사이트는 방문자가 귀하의 제품을 구매하기로 결정하면 올바른 전환 경로를 제공합니다. 웹 성능을 결정하는 메트릭이 너무 많기 때문에 사용자와 관련된 메트릭을 선택해야 합니다. 대부분의 웹사이트의 핵심 성과 지표는 다음과 같습니다.

1. 페이지 로드

페이지 로드는 웹사이트 페이지가 화면에 나타나는 데 걸리는 시간을 나타냅니다. 최상의 결과를 얻으려면 모든 웹사이트 페이지를 로드하는 데 최대 2초가 소요되는지 확인하십시오. 가능하면 밀리초 단위로 로드하십시오.

페이지 로드가 이 임계값을 초과하면 사이트 성능 최적화 기술을 구현해야 합니다. 따라서 웹사이트의 가장 중요한 측면(예: 연락처)의 우선 순위를 지정하고 보조 요소(예: 광고)의 로드를 지연하는 것이 좋습니다.

2. 렌더링 시간

렌더링 시간은 HTML 문서를 로드하는 데 걸리는 시간입니다. 방문자가 빈 브라우저 페이지에 무언가가 나타날 때까지 기다려야 하는 시간을 결정합니다.

당신은 관심이있을 것입니다

웹사이트 UI/UX

비즈니스를 성공적으로 확장하는 방법

웹사이트 UI/UX

웹사이트 로드 속도: 최적화 도구

웹사이트 UI/UX

웹사이트 상태 확인: 도구 및 팁

웹사이트 UI/UX

UX는 무엇을 의미합니까?

느린 렌더링 시간은 CSS 또는 JavaScript 파일에 문제가 있음을 나타냅니다. 이러한 메트릭에서 병목 현상을 제거하면 속도와 사용자 경험을 크게 향상시킬 수 있습니다.

3. 첫 번째 의미 있는 페인트(FMP)

부분적으로 로드된 웹 사이트를 첫 번째 페인트라고 합니다. 매우 제한된 정보를 포함하므로 의미 있는 정보를 표시하는 데 걸리는 시간을 결정하는 것이 중요합니다. 웹 사이트에서 의미 있는 이미지를 빠르게 표시할 수 있도록 미리 로드하는 것은 로딩 시간을 개선하는 데 중요합니다. 다음은 FMP의 예입니다.

웹 성능

(이미지 제공: 검색 엔진 랜드)

4. 서버 시간

서버 시간은 서버가 초기 요청에 응답하는 정도를 나타냅니다. 방문자가 첫 번째 데이터 조각을 수신하기 전에 경과하는 시간인 TTFB(time-to-first-byte)와 유사합니다.

데이터베이스에 의존하는 웹 페이지는 높은 서버 시간을 가지며 적절하게 구성되거나 최적화되어야 합니다. WordPress 사용자는 Cache Enabler와 같은 캐싱 플러그인을 사용하여 TTFB를 쉽게 줄일 수 있습니다.

60초 안에 사이트의 SEO와 성능을 테스트하십시오!

훌륭한 웹사이트 디자인은 방문자 참여 및 전환에 매우 중요하지만 느린 웹사이트 또는 성능 오류로 인해 가장 잘 설계된 웹사이트라도 성능이 저하될 수 있습니다. Diib는 세계 최고의 웹사이트 성능 및 SEO 모니터링 도구 중 하나입니다. Diib은 빅 데이터의 힘을 사용하여 빠르고 쉽게 트래픽과 순위를 높일 수 있도록 도와줍니다. Entrepreneur에서 본 것처럼!

  • 사용하기 쉬운 자동 SEO 도구
  • 키워드 및 백링크 모니터링 + 아이디어
  • 속도, 보안, + Core Vitals 추적 보장
  • SEO 개선을 ​​위한 아이디어를 지능적으로 제안
  • 250,000k 이상의 글로벌 회원
  • 내장된 벤치마킹 및 경쟁사 분석

예: “www.diib.com”

250,000개 이상의 회사 및 조직에서 사용:

  • 심벌 마크
  • 심벌 마크
  • 심벌 마크
  • 심벌 마크

다음과 동기화 구글 애널리틱스

링크 빌딩

5. 속도 지수

Google 속도 지수는 웹 성능을 측정하기 위한 중요한 표준입니다. Google에 따르면 속도 지수는 브라우저의 모든 요소가 표시되는 데 걸리는 총 시간입니다.

속도 지수는 로드될 때 웹 페이지의 비디오를 캡처하는 WebPageTest에 의해 밀리초 단위로 계산됩니다. 이 속도 지수는 방문자가 실제로 콘텐츠를 보는 속도를 나타내므로 사용자 경험을 결정하는 데 유용합니다. 예를 들어:

웹 성능

(이미지 제공: Web.dev)

6. 바이트 입력

바이트 입력은 페이지 크기의 동의어입니다. 대형 웹 페이지에는 페이지의 콘텐츠를 완전히 다운로드하는 데 필요한 수백만 킬로바이트가 있습니다. 페이지 크기는 시간이 지남에 따라 증가하는 경향이 있으므로 사람들이 서버를 업그레이드합니다.

7. 거래 완료 시간

프로세스는 일반적으로 여러 페이지에 걸쳐 여러 단계를 포함하기 때문에 사용자가 특정 트랜잭션을 완료하는 데 걸리는 시간을 계산하기 어렵습니다. 웹사이트 모니터링 서비스는 개발자가 이러한 목적을 위해 일련의 모형을 수행할 수 있도록 하므로 편리합니다.

8. 상호작용하는 데 걸리는 시간

사용자는 일반적으로 웹 페이지가 로드를 완료하기 전에 스크롤하고 클릭하기 시작합니다. 방문자가 애플리케이션에 참여하기 시작하는 시점까지 범위를 좁혀 사용자 경험(UX)을 결정할 수 있습니다. JavaScript 이벤트 및 핸들러의 도움으로 웹페이지의 사각지대를 찾아내고 사용자의 관심을 가장 적게 받는 항목을 제거하는 것을 고려할 수 있습니다.

웹사이트 속도를 높이는 방법

새로운 웹사이트 소유자의 웹 성능과 관련하여 사이트의 각 페이지를 로드하는 데 걸리는 시간에 영향을 미치는 수많은 요소가 있습니다. 운 좋게도 속도를 높이고 사용자 경험을 개선할 수 있는 다양한 단계가 있습니다. 다음 모범 사례를 활용하여 로드 시간을 줄이고 사이트 성능을 향상시키십시오.

  1. 압축 활성화
  2. CSS, JavaScript 및 HTML 축소
  3. 리디렉션 줄이기
  4. 렌더링 차단 JavaScript 제거
  5. JavaScript 및 CSS 파일에 비동기 로드 사용
  6. 브라우저 캐싱 활용
  7. 서버 응답 시간 개선
  8. 자바스크립트 로딩 연기

1. 압축 활성화

여러 페이지 최적화 기술이 있지만 가장 필수적인 요소는 파일 크기입니다. 웹사이트가 아무리 좋아도 파일이 크고 크면 로드 시간이 답답할 것입니다.

기본적으로 이 Google 사이트 성능 기술은 이미지, 문서 및 오디오 파일과 같은 파일을 압축된 상태로 축소합니다. 압축을 사용하면 웹 페이지를 표시하기 위해 완료해야 하는 작업의 수가 줄어들기 때문에 웹 사이트에서 모든 파일에 빠르게 액세스하고 로드할 수 있습니다. Photoshop 또는 Canva와 같은 앱이나 웹사이트를 사용하는 경우 파일을 가장 작은 크기로 축소해야 합니다. 예를 들면 다음과 같습니다.

웹 성능

트릭은 로드 시간을 방해하는 불필요한 요소를 제거하는 것입니다. 압축은 또한 렌더링 시간을 줄이는 데 도움이 됩니다.

화려하고 화려한 JPEG 이미지는 상당히 크며 제대로 압축되지 않으면 웹사이트 속도가 느려집니다. 70kb로 압축하면 이 재앙을 막을 수 있습니다.

품질을 희생하지 않고 크기를 줄이는 온라인 이미지 압축기가 많이 있습니다. 다음과 같은 방법으로 파일을 압축할 수도 있습니다.

  • CSS 파일 및 선택기 그룹화
  • html 코드 공백 제거
  • 웹사이트 파일 압축

2. CSS, JavaScript 및 HTML 축소

축소는 모든 스크립트 파일과 웹 페이지에서 코드와 마크업을 줄이는 프로세스입니다. 이 Google 사이트 성능 방법은 웹사이트의 로드 시간과 대역폭 사용량을 줄이는 데 도움이 됩니다.

축소는 사이트 속도를 자동으로 개선하고 접근성을 향상시켜 직접적인 사용자 경험을 제공합니다. 다음과 같은 방법으로 CSS 및 JavaScript를 축소할 수 있습니다.

  • 축소할 코드를 결정하고 가독성 향상 이외의 다른 용도로 사용되지 않는 문자는 삭제합니다.
  • WordPress를 사용하는 경우 편집기 섹션에서 모든 코드를 통합합니다.
  • CSS 축소자에 압축 코드를 게시하고 "축소"를 클릭합니다.
  • PageSpeed ​​Insights에서 실행하여 축소를 테스트합니다.
  • 작업에 대한 백업을 만듭니다.

3. 리디렉션 줄이기

리디렉션은 방문자를 웹사이트의 올바른 페이지로 연결하는 채널입니다. 그러나 적절한 Google 페이지 최적화 전략이 없으면 프로세스로 인해 페이지가 예상보다 느리게 로드됩니다. 웹사이트의 트래픽을 개선하려는 소기업 소유자는 리디렉션에 의존하지만 이를 낮추는 것을 기억해야 합니다.

방문자를 여러 페이지로 안내하는 대신 비즈니스 소유자는 방문자에게 웹사이트로 직접 연결되는 경로를 제공하는 것을 목표로 해야 합니다. 다음과 같은 경우 리디렉션을 줄일 수 있습니다.

  • 리디렉션이 있는 페이지로의 링크를 피하면 방문자가 여러 번 리디렉션될 수 있기 때문입니다.
  • 불필요한 리디렉션이 발생할 수 있으므로 필요하지 않은 플러그인을 지우십시오.
  • 더 이상 필요하지 않은 페이지로 연결되는 이전 리디렉션이 있는지 웹사이트를 검색합니다.

4. 렌더링 차단 JavaScript 제거

웹 사이트가 로드를 시작할 때마다 대기열의 다양한 스크립트에 대한 호출을 보냅니다. 대기열의 스크립트 수(렌더링 차단 JavaScript 및 CSS 파일)는 웹사이트가 응답하는 데 걸리는 시간을 결정합니다.

대부분의 경우 이러한 스크립트 중 일부는 웹 사이트가 최적의 성능을 발휘하는 데 필요하지 않습니다. 트릭은 중복 파일을 제거할 수 있도록 기본 파일을 식별하는 것입니다. Google 페이지 최적화 기술의 도움으로 URL을 입력하기만 하면 페이지 속도를 늦추는 스크립트를 식별할 수 있습니다.

다음을 통해 렌더링 차단 JavaScript를 제거할 수 있습니다.

  • CSS 및 JavaScript를 최소화하고 코드에서 모든 공백 및 중복 주석을 제거합니다.
  • JavaScript와 CSS 결합

웹 성능

(이미지 크레디트: HubSpot 블로그)

5. JavaScript 및 CSS 파일에 대한 비동기 로드에 의존

성능 사이트 최적화에 어려움을 겪고 있다면 가장 중요합니다. 브라우저는 스크립트를 만날 때마다 해당 페이지가 완전히 로드될 때까지 다른 요소의 로드를 중지합니다.

비동기식 로딩은 수많은 파일을 동시에 로딩할 수 있게 하여 웹사이트 성능을 가속화합니다. 파일을 비동기식으로 로드하면 웹사이트 속도를 크게 높이는 데 도움이 됩니다. 따라서 느린 스크립트를 로드하는 경우에도 웹 페이지는 기다릴 필요 없이 렌더링할 수 있습니다.

그러나 초기 페이지를 동기적으로 로드해야 합니다. 여러 스크립트를 한 번에 로드할 수 있도록 고정된 페이지의 차단을 해제하여 비동기 스크립트를 도입합니다.

비동기 파일을 사용하여 다음을 로드할 수 있습니다.

  • JavaScript 및 CSS와 같은 무거운 파일
  • Google 애드센스 및 Google 웹로그 분석과 같은 대규모 고객 기반 웹사이트
  • Pinterest, Facebook 및 Twitter와 같은 소셜 미디어 플랫폼

이 기사가 유용했기를 바랍니다.

사이트 상태에 대해 더 자세히 알고 싶거나 개인 권장 사항 및 알림을 받고 싶다면 Diib으로 웹 사이트를 스캔하십시오. 60초밖에 걸리지 않습니다.

웹사이트 입력

예: “www.diib.com”

저는 수년간 Diib 분석을 사용해 왔습니다. 그들의 대시보드는 중독성이 있습니다! 응답 엔진은 내가 가장 좋아하는 기능입니다. 내 사이트를 지속적으로 개선하는 데 귀중한 리소스입니다. 프리미엄 버전으로 업그레이드하는 것은 내 비즈니스를 위해 내릴 수 있는 최선의 결정이었습니다.
사용후기
톰 리넨
CEO FuzeCommerce

6. 브라우저 캐싱 활용

사이트 개발의 성능을 향상시키려는 비즈니스 소유자는 업계의 최신 혁신을 활용해야 합니다. 브라우저 캐시는 사용자가 웹사이트를 보는 데 필요한 정보(데이터, 이미지, HTML)를 저장합니다. 캐시가 이 정보를 저장하면 웹사이트가 지연 없이 자동으로 로드되도록 도와줍니다. 플러그인 또는 htaccess로 브라우저 캐싱을 활용하는 방법을 배우면 웹사이트 성능을 향상시킬 수 있습니다. 여기에는 웹호스트의 파일 관리자로 이동하는 작업이 포함됩니다.

브라우저 캐싱을 사용하면 고객이 사이트를 쉽게 이동할 수 있으며 사람들이 쉽게 클릭할 수 있으므로 웹사이트에 계속 머물 수 있습니다. 다음과 같은 경우 브라우저 캐치를 활용할 수 있습니다.

  • 파일 관리자를 열고 public_html 디렉토리에 액세스합니다.
  • htaccess 파일을 더블 클릭하고 코드(웹 개발자가 설계)를 삽입합니다.
  • 변경 사항 저장(새 코드는 1년 후에 만료됨)

7. 서버 응답 시간 개선

최적의 성능을 제공하는 사이트를 찾고 있다면 웹 개발자는 로딩 시간을 줄이는 올바른 방법을 찾아야 합니다. 서버가 클라이언트의 요청에 응답하는 데 걸리는 시간인 서버 응답 시간은 TTFB로 측정됩니다. TTFB는 첫 번째 바이트까지의 시간을 나타냅니다. 서버 응답 시간을 줄이는 것은 모든 웹사이트 소유자와 SEO 전문가의 주요 목표여야 합니다. 높은 TTFB의 결과는 느린 웹 사이트입니다. Google은 서버 응답 시간을 줄이기 위해 PageSpeed ​​Insights 도구를 개발했습니다. 다음을 통해 서버 응답 시간을 개선할 수 있습니다.

  • 고객의 요구를 충족하고 무료 웹 호스팅 서비스를 피하는 빠른 서버에 투자하여 안정적이고 빠른 웹 호스팅 서비스를 사용합니다.
  • CDN(Content Delivery Network)을 사용하여 모든 사용자에게 데이터를 빠르게 배포합니다. 빠른 배포를 위해 전 세계 서버에 투자한 서비스 제공업체가 필요합니다.
  • 웹사이트가 신속하게 응답할 수 있도록 데이터베이스 최적화 웹 개발자는 지연 데이터베이스를 식별하고 그에 따라 최적화할 수 있습니다.

8. 자바스크립트 로딩 연기

성능과 관련하여 웹 개발자는 많은 것을 고려합니다.

JavaScript는 HTML과 함께 사용되는 스크립팅 언어입니다. JavaScript는 웹 페이지에서 동적 콘텐츠를 실행할 수 있도록 하는 기능에 매우 중요합니다. JavaScript는 상당히 무겁기 때문에 독립 실행형 도구로 설계되었습니다.

JavaScript 파일을 연기하면 기본 HTML 파일이 로드될 때까지 해당 파일이 로드되지 않습니다. JavaScript와 같은 대용량 파일을 연기하는 경우 나머지 콘텐츠를 지연 없이 로드할 수 있습니다.

다음과 같은 방법으로 JavaScript 로드를 연기할 수 있습니다.

  • 웹 개발자에게 전체 문서가 로드되도록 하는 코드를 생성하도록 요청(defer.js)
  • 코드를 복사하여 HTML 파일에 붙여넣기
  • 지연된 JS 파일 로드 옆에 있는 상자를 선택합니다.
  • 페이지의 다른 모든 항목이 준비될 때까지 대용량 파일을 강제로 렌더링 지연

Diib: 향상된 웹 성능 Fast!

빠른 웹사이트가 높은 고객 만족도와 높은 판매 전환율을 촉진한다는 것은 의심의 여지가 없습니다. 솔직히 말하면 사이트 방문자를 빠른 속도로 구매자로 전환하지 않는다면 여전히 평균 이하의 버킷리스트에 갇혀 있습니다. Diib Digital과 함께라면 원하는 개선 사항과 전환을 쉽게 확인할 수 있습니다. 다음은 귀하가 좋아할 사용자 대시보드의 일부 기능입니다.

  • 웹사이트 성능 향상을 위해 설계된 맞춤형 목표
  • 도메인 기관의 기타 기술적 SEO 문제에 대해 알려주는 알림
  • 백링크가 있는 깨진 페이지(404 검사기)
  • 키워드, 백링크 및 인덱싱 모니터링 및 추적 도구
  • 사용자 경험 및 모바일 속도 최적화
  • 이탈률 모니터링
  • 포스트 퍼포먼스

무료 스캔을 받으려면 여기를 클릭하거나 800-303-3510으로 전화하여 성장 전문가에게 문의하십시오.