웹 사이트 속도를 높이는 15 가지 방법

웹 사이트에서 발생할 수있는 최악의 상황 중 하나는 완전히 예방할 수있는 문제로 인해 고객을 잃는 것입니다. 2017 Google 페이지로드 시간 연구 통계에 따르면 1 초는 트래픽 수와 고객 만족도에 큰 차이를 만들 수 있습니다.


단 1 초만에 :

  • 페이지 조회수가 11 % 감소 할 수 있습니다. ��
  • 고객 만족도 16 % 감소
  • 전환율이 7 % 감소 할 수 있습니다. ��

1 년 동안 1 초의 지연으로 인해 평균 일일 매출이 $ 100,000 인 기업의 매출이 250 만 달러 감소 할 수 있습니다..

한마디로, 지연 시간 웹 사이트 성능과 사용자 만족도의 적입니다. 소비자의 53 %가로드하는 데 3 초 이상 걸리는 웹 사이트를 떠날 것이라고 응답했습니다..

대기 시간이란 무엇이며 왜 중요한가?

데이터 전송 속도에 기여하는 구성 요소는 대역폭, 대기 시간 및 처리량의 세 가지입니다. 최적화 된 컨텐츠 및 코딩과 함께 이러한 요소는 함께 사용됩니다. 하나의 문제는 다른 문제에 영향을 미칩니다.

네트워크 대기 시간 및 속도를 보여주는 이미지대역폭 데이터가 이동하는 파이프 라인입니다. 좁은 대역폭은 주어진 시간에 해당 파이프 라인을 통해 이동하는 정보의 양을 줄입니다. 이로 인해 대기 시간 문제가 발생하고 처리량에 영향을 미칩니다.

웹 사이트 지연 시간 브라우저에서 서버로 왕복 여행을하고 사용자에게 다시 정보를 보내는 데 걸리는 시간으로 정의됩니다.. 처리량 설정된 기간 동안 서버를 통해 이동하는 데이터의 양입니다..

효율적인 전송과 더 나은 처리량으로 이어지는 최적의 대기 시간 (낮음)과 대역폭 (높음)의 균형입니다. 해당 잔액이 좋지 않으면 웹 사이트 페이지 로딩 시간이 느려지고 데이터 전송이 지연됩니다.

높은 대기 시간 속도에 기여하는 요소?

  • 번식. 이것은 데이터 패킷이 한 소스에서 다른 소스로 이동하는 데 필요한 시간입니다..
  • 전송 매체. 전화 접속 이후 많은 시간이 걸렸지 만 전송 매체는 여전히 대기 시간에 영향을 미칩니다. 광섬유 및 WAN과 같은 기술 발전에도 컨텐츠 전송 속도에 영향을 미치는 물리적 한계가 있습니다..
  • 라우터. 마우스 클릭이나 URL을 입력하여 할 수있는 일은 인터넷에 액세스 할 수있는 일련의 이벤트를 발생시킵니다. 일반 사용자의 눈에는 빛의 속도로 요청하고 존중합니다. 그러나 라우터가 패킷 헤더 및 기타 정보를 올바르게 분석하는 능력에 달려 있습니다..

네트워크가 분산 될수록 패킷이 라우터에서 라우터로 더 많이 홉핑해야합니다. 이것은 높은 대기 시간에 기여.

  • 저장. 데이터 패킷이 성공하거나 저장 될 때마다 지연이 발생합니다. 초기 브라우저 요청과 전달 사이에 발생한 스위치 및 브리지의 수로 인해 더 복잡한 프로세스입니다. 관련 참조 – 최고의 클라우드 스토리지
  • 서식 파일을 구성하고 WordPress 데이터베이스를 관리하는 방법은 지침 및 코드를 읽고 처리하는 방법에 영향을줍니다. 깨끗하고 간결하며 우아한 코드로 효율성과 속도 향상.
  • 파일 유형 및 크기. 더 작은 파일과 더 간단한 형식은 네트워크를 통해보다 빠르고 효율적으로 통과 할 수 있습니다. 그래픽 및 기타 리치 미디어가 많은 웹 사이트는 내용이 더 복잡 해져서 페이지를 완전히로드하는 속도에 영향을줍니다. 이것이 웹 사이트 파일을 압축하는 것이 중요한 이유입니다.

웹 사이트 최적화의 이점

고품질 웹 사이트 빌더를 사용하든, 웹 디자이너를 고용 하든지, 웹 페이지를 직접 구성하든, 보안 및 디자인 속도를 고려하면 컨텐츠의 모양과 전달이 향상됩니다. 이것은 도움이됩니다 SEO 최적화 더 나은 제공 사용자 경험 (UX).

연구에 따르면 모바일 웹 사이트에서 평균 방문 페이지를 완전히로드하는 데 최대 22 초가 소요될 수 있습니다. 로드 시간을 7 초 이하로 줄일 수 있다면 경쟁에서 우위를 점한다고 상상해보십시오..

오늘날 웹 속도를 높일 수있는 15 가지 방법

오늘날의 서버는 몇 초가 아닌 밀리 초 단위로로드 시간을 전달할 수 있습니다. 웹 컨텐츠를 방문자에게 제공하는 기술을 제어하는 ​​것 외에도 일관되고 빠른 페이지로드와보다 만족스러운 전체 UX를 보장하기 위해 많은 변경 및 조정을 구현할 수 있습니다..

웹 사이트 속도를 높일 수있는 15 가지 방법은 다음과 같으며 콘텐츠 품질이나 사이트 미학을 전혀 훼손하지 않습니다..

1. 파일 압축 활성화

파일 압축은 새로운 것이 아닙니다. 압축 된 후 액세스 할 수없는 다운로드 파일이 너무 큽니다. 동일한 아이디어가 Gzip 압축을 사용하여 웹 사이트를 더 빠르게로드하는 데 도움이 될 수 있습니다.

컨텐츠 관리 시스템 용 압축 플러그인을 설치하거나 .htaccess 파일을 통해 수동으로이를 수행하십시오. 다음 코드를 추가하여 CSS, JS, XML 및 HTML에서 작동합니다.

AddOutputFilterByType DEFLATE 텍스트 / 일반
AddOutputFilterByType DEFLATE 텍스트 / html
AddOutputFilterByType DEFLATE text / xml
AddOutputFilterByType DEFLATE text / css
AddOutputFilterByType DEFLATE 응용 프로그램 / xml
AddOutputFilterByType DEFLATE application / xhtml + xml
AddOutputFilterByType DEFLATE 응용 프로그램 / rss + xml
AddOutputFilterByType DEFLATE 애플리케이션 / 자바 스크립트
AddOutputFilterByType DEFLATE application / x-javascript

2. 불필요한 플러그인 및 확장 프로그램 제거

웹 사이트를 처음 구축 할 때 많은 플러그인을 설치하고 시도하고 싶은 유혹이 있습니다. 그 중 일부는 훌륭하지만 디렉토리에 먼지가 쌓이는 경우가 더 많습니다. 오래되거나 불필요하거나 지원되지 않는 플러그인과 애드온 또는 확장 프로그램을 즉시 제거하는 규칙을 만드십시오. 이를 비활성화하면 더 쉬운 옵션처럼 보일 수 있지만 보안 문제가 발생하여 보안 침해 및 악용으로 인한 위험에 처할 수 있습니다.

불필요한 플러그인을 제거하면서 최고의 WordPress 플러그인 만 설치하는 데 중점을 둔 웹 사이트 보안과 관련하여 매우 중요합니다..

3. HTTP 최적화

HTML 최적화를 통해 페이지로드 시간을 향상시킬 수있는 두 가지 방법이 있습니다. 첫 번째는 HTTP 요청을 최소화하는 것입니다. 여러 가지 방법으로이 작업을 수행 할 수 있습니다.

  • 가능하면 이미지 대신 CSS를 사용하십시오.
  • 부풀림과 중복을 피하기 위해 CSS, JS 및 HTML 파일을 결합
  • 요소가 적은 깨끗하고 간단한 페이지 디자인
  • 캐싱 사용
  • 오래된 페이지와 끊어진 링크를 제거하여 리디렉션 수를 줄입니다.

HTML을 최적화 할 수있는 두 번째 방법은 Keep-Alive를 활성화하는 것입니다. 일반적으로 각 파일 요청은 별도의 작업을 시작합니다. HTML Keep-Alive를 사용하면 모든 브라우저 요청이 수락 될 때까지 그대로 유지되는 하나의 열린 연결을 만듭니다. 적절한 여는 태그와 닫는 태그로 둘러싸인이 코드를 .htaccess 파일에 간단히 복사하십시오.

IfModule mod_headers.c
헤더 세트 연결 유지
IfModule

4. CDN (Content Delivery Network) 설치

CDN (콘텐츠 전송 네트워크) 서버와 거의 같은 방식으로 페이지로드 시간을 줄입니다. 이 네트워크는 전 세계의 다른 지점으로 확산되어 해당 위치의 누군가가 집에 더 가까운 웹 사이트에 액세스 할 수 있습니다.

많은 호스팅 서비스에는 서비스의 일부로 CDN이 포함되므로 다른 사람과 사인 온하기 전에 가용성을 확인하십시오.. 관련 참조 – 최고의 캐나다 CDN

5. 캐싱 사용

캐싱은 페이지가 새로 고쳐지고 컨텐츠가 업데이트 될 때까지 사용자 브라우저에 웹 페이지 사본을 남깁니다. 즉,로드 할 HTTP 요청 및 페이지 수가 줄어 듭니다. 캐싱을 사용하면 페이지로드 시간을 1.5 초 줄일 수 있습니다. 1 초마다 중요한 시대에는 큰 차이가 있습니다.

WP의 캐싱은 Rocket 플러그인 또는 WP3 Total Cache 또는 Super Cache와 같은 무료 플러그인 중 하나를 통해 활성화 할 수 있습니다. HTML을 사용하는 사용자는 Etags, Expire 또는 기타 방법을 통해 캐싱을 활성화 할 수 있습니다. Drupal 사용자는 다음 지침에 따라 캐시 활성화를 수행 할 수 있습니다.

6. JS 및 CSS 코드 축소

작업 수행에 필요한 코딩 양을 줄여 페이지로드 시간을 향상시킬 수 있습니다. JS와 CSS에 대해 별도의 파일을 만든 다음 공백을 줄이고 불필요한 주석을 삭제하고 가능한 경우 파일이나 명령 줄을 결합하십시오. 다른 문제를 일으키지 않고 코드를 최소화하는 방법을 잘 모를 경우 부풀어 오른 코딩을 식별하고 수정할 수있는 축소 도구가 있습니다.

7. 비동기 JS 및 CSS 파일 로딩

코드가 간결하고 효율적이면 비동기 로딩을 통해 파일이 페이지에로드되는 방식을 조정할 수 있습니다. 이렇게하면보다 효율적으로 페이지에 콘텐츠를로드하는 방식이 변경됩니다..

대부분의 브라우저는 한 번에 하나씩 페이지를로드하여 요청을 처리합니다. 이것은 동기 페이지 로딩. 브라우저가 동기화 된 페이지를 발견 할 때마다 현재 페이지가 완전히로드 될 때까지 다른 모든 활동을 중지합니다. 비동기식 로딩을 사용하면 브라우저가 일부 요청을 동시에 처리 할 수있어 웹 사이트 로딩 시간이 짧아집니다..

대부분의 컨텐츠 관리 시스템에는 비동기 CSS 및 JS 파일로드를 가능하게하는 메커니즘이 있습니다. 예를 들어, WordPress의 로켓 플러그인에는 “렌더 차단 CSS / JS”섹션에서 해당 상자를 선택하여이 기능을 활성화 할 수있는 “정적 파일”탭이 있습니다. 비 WP 사용자는 async 또는 defer 속성을 사용하여 JS에서이를 활성화 할 수 있습니다. CSS의 경우 첫 번째 페이지를 비동기식으로로드 할 수 있도록 html 헤드의 첫 번째 화면에 스타일을 작성하십시오..

지연된 JavaScript로드는 동일한 결과를 생성 할 수 있으며로드 환경 설정과 같은 WP 로켓 패널의 동일한 섹션에서 활성화 될 수 있습니다. HTML에서 사이트를 실행하는 경우 다음과 같이 코드에서 body 태그 바로 앞에 외부 파일을 호출하여 JS로드를 연기 할 수 있습니다.

8. 이미지 파일 최적화

가장 큰 리소스 및 데이터베이스 호그 중 하나는 이미지입니다. 물론, 사진이 컨텐츠에 추가되지만 너무 많은 것이 속도에 영향을 미치고 트래픽을 몰아냅니다. 웹 사이트에 이미지를 포함해야하는 경우 하나 나 둘을 선택하거나 파일 크기와 형식을 .jpeg와 같은보다 효율적인 형식으로 줄이거 나 별도의 이미지 갤러리가 아닌 콜라주로 만드십시오. InstaGram과 같은 이미지 용 플랫폼으로 이동하거나 웹 사이트에서 해당 플랫폼에 대한 간단한 링크로 이동할 수도 있습니다..

YouTube 채널에서 제거 할 수있는 비디오 콘텐츠에도 동일하게 적용됩니다. 이미지와 비디오 컨텐츠를 인덱싱하기위한 alt 태그와 전체 페이지 최적화를위한 온 페이지 SEO를 사용하여 개별적으로 최적화 할 수 있으므로 이러한 솔루션 모두 SEO에 도움이됩니다. 우리가 가장 좋아하는 것 중 하나는 Optimizilla입니다.

9. 핫 링크 비활성화 및 소셜 미디어 공유 제한

소셜 미디어와 이미지에 대해 말하면 웹 페이지에서 핫 링크를 비활성화하고 소셜 미디어 공유를 제한하는 것이 좋습니다. 두 번째 제안은 소셜 증명, 봉사 활동 및 참여에 대해 알고있는 모든 것에 반하는 것으로 보이지만 성능에 영향을 미치지 않으면 서 소셜 미디어의 존재를 지원할 수있는 균형을 찾을 수 있습니다..

이것은 우리의 문제로 이어집니다 핫 링크. 핫 링크는 다른 사람들이 귀하의 콘텐츠를 자신의 웹 사이트 나 소셜 미디어 플랫폼에서 사용할 수 있도록하는 약간의 기술입니다. 또한 실수로 리소스 사용량을 증가시킵니다.

다른 웹 사이트의 이미지 나 콘텐츠에 연결하거나 도난당하는 대신 이미지를 다운로드하여 서버에 저장하십시오. 직관적이지 않은 것처럼 보일 수 있지만 다른 웹 사이트 콘텐츠에 연결하면 잠재적으로 다른 사람의 표준 이하 사이트 실적이 자신의 사이트에 영향을 미치도록 의도하지 않은 결과를 초래할 수 있습니다.

10. 외부 스크립트 축소

JS 코드에 외부 스크립트 추가 HTTP 요청 수가 증가하여 웹 사이트 속도가 저하됩니다. 일부 외부 스크립트가 필요하므로 완전히 제거하지 않아도됩니다. Pingdom을 사용하면 문제의 원인을 파악하기 위해 각 외부 링크를 테스트 할 수 있습니다.

웹 컨텐츠에 외부 링크를 추가하기 전에 소스 웹 사이트가 신뢰할 수 있는지 또는 문제점을 플랫폼으로 가져올 수 있는지 확인하십시오.

11. 끊어진 링크 찾기 및 수정

리디렉션 또는 오류 메시지로 끝나는 끊어진 링크는 UX에 영향을 줄 수 있습니다. 그러나이 팁은 이미지, JS 또는 CSS 파일에 포함 된 링크를 나타냅니다. CSS 파일 제목과 JavaScript 소스 URL에서 링크를 찾아 테스트하십시오. 서버 로그를 검사하거나 링크 확인 도구를 사용하여 수동으로 찾을 수 있습니다..

12. 데이터베이스 최적화

대용량 파일 스토리지는 성능 저하에 확실히 기여합니다. 보안 목적으로 모든 조치에 대한 완전한 레코드를 원하지만 플러그인 또는 기타 기능이 데이터를 저장할 때마다 데이터베이스에 빌드됩니다. 이러한 모든 핑백, 스팸 또는 불필요한 의견, 수정본 게시 후를 상상해보십시오..

데이터베이스 최적화

이 문제를 피하려면 의도하지 않은 결과를 초래하지 않으면 서 과도한 데이터를 제거하기 위해 정기적 인 백업을 수행 한 후 제거를 수행하십시오..

13. 가벼운 테마 사용

코드가 복잡하고 가벼운 프레임 워크로 테마를 변경하는 것의 차이점에 놀랄 것입니다. 웹 사이트가 느리게 보이고 다른 모든 요소가 괜찮다면 더 새롭고 가벼운 테마를 사용해보십시오. 이것은 예쁘게 보이는 것보다는 테마의 공연 역사에 대해 더 깊이 들어가는 것을 의미합니다..

플러그인과 마찬가지로 이전 테마를 비활성화하지 말고 제거하십시오..

14. 좋은 콘텐츠 관리 시스템을 선택하십시오

콘텐츠 관리 시스템 (CMS) 안정적인 속도와 성능을 유지하는 데 중요합니다. 지금까지 가장 인기있는 것은 WordPress이지만 Joomla, Drupal 등도 있습니다. 컨텐츠 최적화의 장점과 성능 향상 플러그인 또는 기능의 가용성을 제공합니다..

15. 성능에 주목하여 호스팅 서비스 선택

싸구려 호스팅 서비스를 찾는 것이 어려울 수도 있습니다. 결국 빵과 버터가 당신의 플랫폼에 있습니다. 그러나 호스팅 플랫폼이 표준 이하인지 여부에 관계없이 효율적인 성능에 기여하는 다른 모든 구성 요소를 최적화하는 것은 중요하지 않습니다..

이는 트래픽 급증 및 성장을 처리 할 수있는 계획을 선택할뿐만 아니라 성능을 지원할 기술을 갖춘 공급자를 찾는 것을 의미합니다. 방금 시작한 정적 콘텐츠를 더 많이 사용하는 경우 공유 호스팅 계획은 괜찮습니다. 그러나 속도와 리소스 가용성은 때때로 좋은 이웃을 갖는 데 달려 있습니다.

가능하면 양질의 가상 사설망을 선택하십시오 (VPN) 또는 전용 서버. 다운 타임 및 대기 시간을 줄이는 데 필요한 리소스, 스토리지 및 가용성을 제공합니다..

테스트 및 지속적인 평가를 잊지 마십시오

조정할 사항과시기를 아는 것은 페이지로드 시간 및 전체 컨텐츠 전달 속도에 영향을 미치는 문제를 아는 것에 달려 있습니다. 일부 호스팅 서비스에는 웹 사이트 성능을 측정하는 데 사용할 수있는 도구가 내장되어 있습니다. 대기 시간 및 페이지로드 시간을 측정하는 데 사용할 수있는 여러 가지 방법과 도구도 있습니다.

어떤 방법이나 도구를 사용하든 다양한 위치에서 테스트해야합니다. 소스에서 멀리 떨어진 서버가 컨텐츠를 제공하는 데 시간이 더 걸리는 이유가 있습니다. 여러 위치에서 지역 테스트를 수행하면 대기 시간 비율을 측정하는 데 도움이됩니다. 속도 테스트를 수행 할 때는 CDN을 활성화 및 비활성화하여 수행하십시오. CDN 및 기타 기술의 효과를 평가하는 데 도움이됩니다..

CDN은 어떻게 작동합니까

가장 일반적이고 효과적인 속도 테스트 도구 중 하나는 Pingdom입니다. 이 무료 온라인 도구는 웹 사이트 성능 및 속도와 관련된 다양한 문제를 쉽게 확인할 수있는 방법입니다. 검색 창에 URL과 서버 위치를 입력하고 “테스트 시작”을 누르십시오. 70 개가 넘는 서버 위치에서 가동 시간 및 컨텐츠 유형에 대한 심층 테스트를 위해 프리미엄 구독을 구입할 수도 있습니다..

다음은 Google의 공개 DNS를 사용한 핑 테스트의 예입니다.

핑 $ 8.8.8.8
PING 8.8.8.8 (8.8.8.8) : 56 데이터 바이트
8.8.8.8에서 64 바이트 : icmp_seq = 0 ttl = 56 시간 = 54.524ms
8.8.8.8에서 64 바이트 : icmp_seq = 1 ttl = 56 time = 43.423ms
8.8.8.8에서 64 바이트 : icmp_seq = 2 ttl = 56 time = 50.773 ms

traceroute 도구는 서버에서 서버로의 패킷 이동을 추적하여 브라우저에서 호스트까지의 경로를 측정하고 병목 현상 또는 기타 문제를 식별합니다..

다음은 동일한 Google DNS를 사용하는 traceroute 명령 보고서의 예입니다.

$ traceroute 8.8.8.8
8.8.8.8 (8.8.8.8)까지의 추적 경로, 최대 64 홉, 52 바이트 패킷
1192.168.0.1 (192.168.0.1) 6.632ms 9.659ms 10.089ms
2 10.89.0.1 (10.89.0.1) 29.867ms 14.293ms 30.259ms
3 blk-212-126-117.eastlink.ca (173.212.126.117) 20.677ms 19.575ms 20.155ms
4ns-hlfx-dr002.ns.eastlink.ca (24.215.102.161) 30.093ms 29.371ms 30.796ms
5ns-hlfx-br002.ns.eastlink.ca (24.215.102.221) 29.540ms 29.516ms 29.989ms
6ns-hlfx-br001.ns.eastlink.ca (24.215.102.9) 26.678ms 29.203ms 30.787ms
7 google.eastlink.ca (24.215.101.10) 49.027ms 49.196ms 90.601ms
8209.85.241.127 (209.85.241.127) 49.999ms
72.14.239.75 (72.14.239.75) 48.939ms
72.14.235.169 (72.14.235.169) 46.823ms
9 google-public-dns-a.google.com (8.8.8.8) 49.465ms 45.436ms 43.772ms

구글에 관해서는 속도와 성능 문제에 대해 웹 사이트를 테스트 할 수있는 무료 도구도 있습니다. 여기에서 PageSpeed ​​Insights에 액세스 할 수 있습니다..

테스트는 일회성 작업이 아닙니다. 자동화 및 성능 및 속도 테스트를 위해 사용 가능한 일부 도구를 사용하여 웹 사이트를 24 시간 내내 모니터링해야합니다. 결과가 의미를 갖기 위해. 비용이 많이 드는 문제가되기 전에 문제를 식별하는 데 도움이됩니다..

마지막 생각들

네트워크가 붐비고 분산됨에 따라 지연 시간이 더 길어집니다. 우리의 목표는 웹 사이트 성능과 속도를 향상시키는 데 필요한 정보를 제공하는 것입니다. 귀하의 요구와 예산에 가장 적합한 웹 호스팅 서비스를 선택하는 것 외에도, 컨텐츠를 최적화하고 제공하는 방법은 다운 타임의 원인을 없애고 성능을 저하시키는 데 큰 도움이됩니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector