페이지 로드 시간에 영향을 미치는 5가지 일반적인 실수

사용자가 웹사이트를 방문할 때 웹사이트를 로드하는 데 오랜 시간이 걸린다면 이 기사가 최적화 작업에 영감을 줄 수 있습니다. 그러나 문제 해결에 도움이 되지 않더라도 웹 사이트 로딩 시간에 영향을 미치는 몇 가지 일반적인 오류가 무엇인지 알아볼 수 있습니다.

페이지 로드 시간이 왜 중요한가요?

페이지 로딩 시간은 웹사이트 성능에 대한 사용자의 직관적인 경험에 직접적인 영향을 미칩니다. 연구 데이터에 따르면

페이지 로딩 시간이 3초를 초과하면 방문하는 사용자의 절반이 기다리는 동안 길을 잃게 됩니다.

• 검색 엔진 순위 — 페이지 로드 시간은 검색 엔진이 검색 결과에서 웹사이트 순위를 매기는 중요한 방법 중 하나입니다. 따라서 웹페이지의 로드 시간은 사용자가 웹에서 해당 페이지를 찾는 것이 얼마나 쉬운지에 영향을 미칩니다.
• 전환율 — 페이지 로드 속도가 빠를수록 사용자의 참여도가 높아집니다. 느린 웹사이트는 분명히 전환율을 낮출 것입니다. 웹페이지를 로드하는 데 시간이 너무 오래 걸리면 CTA(Call-To-Action)를 실행하는 데 많은 시간이 소요되며, 이 기간 동안 사용자의 인내심과 열정이 지쳐 결국 사용자는 구매하지 않고 웹사이트를 닫게 됩니다. 귀하의 제품 또는 귀하가 제공하는 서비스를 사용하십시오.
• 사용자 경험 — 웹사이트를 로드하는 데 시간이 오래 걸릴수록 사용자 만족도는 높아집니다. 결과적으로 고객 유지율과 재방문율이 높아질 것입니다.

HubSpot의 연구를 바탕으로 한 몇 가지 예를 살펴보겠습니다.

• Yahoo가 페이지 로드 시간을 0.4초 줄이면 트래픽이 9% 증가할 수 있습니다.
• 1초 느린 페이지로 인해 Amazon에서는 연간 16억 달러의 매출 손실을 입을 수 있습니다.
• Bing 검색이 2초 지연되면 방문자당 수익 손실이 4.3%, 클릭수가 3.75% 감소하고, 쿼리량이 1.8% 감소합니다.

위의 데이터를 바탕으로 웹사이트에서 페이지 로드 시간이 얼마나 중요한지 알 수 있습니다.

페이지 로딩 시간에 영향을 미치는 요소와 최적화 기술

페이지 로딩 시간에 영향을 미치는 요소는 많습니다. 그 중 제가 웹사이트를 구축할 때 겪게 되는 가장 대표적인 실수 5가지를 나열해봤습니다.

1. 다수의 HTTP 요청

브라우저가 웹 서버에서 파일, 페이지 또는 이미지를 가져와야 할 때마다 HTTP 요청을 한 후 Chrome에서 "네트워크" 옵션을 전달할 수 있습니다. 응용 프로그램이 어떤 네트워크 요청을 하는지, 어떤 요청이 더 많은 시간이 소요되는지 및 기타 정보를 모니터링하는 "개발자 도구" 카드입니다.

일반 브라우저는 일반적으로 동시 HTTP 요청 수를 4~8개로 제한합니다. 따라서 동시 요청 수가 많으면 대기 시간이 길어집니다. Yahoo에서 수행한 조사에 따르면 애플리케이션 로드 시간의 80%가 HTTP 요청에 의존하며 총 HTTP 요청 수를 줄이는 것이 페이지 로드 시간을 단축하는 데 도움이 되는 것으로 나타났습니다.

다음과 같은 방법으로 웹 애플리케이션에 대한 총 HTTP 요청 수를 줄일 수 있습니다.

• CSS/JS 파일 병합 — CSS 파일과 JS 파일을 동일한 파일로 병합하여 요청을 줄일 수 있습니다. . 또한 서버에서 여러 파일을 검색할 필요도 없습니다. 모든 CSS 파일은 덩어리로 렌더링되므로 CSS 파일을 줄이면 페이지 로드 시간이 크게 향상됩니다.
• 주문형 콘텐츠 로딩 — 모든 앱 이미지를 한 번에 로드하는 대신 필요할 때만 로드하세요. 이 접근 방식을 지연 로딩 또는 주문형 로딩이라고 합니다. 사용자가 사이트에 도착하면 클릭 시 이미지를 모두 로드하는 대신 사용자가 특정 위치로 스크롤할 때만 이미지를 로드할 수 있습니다.
• 브라우저 캐시 활성화 — 자주 변경되지 않는 정적 이미지나 웹 사이트 콘텐츠를 캐싱할 수 있습니다. 사용자가 웹사이트를 두 번째로 방문하면 캐시는 서버에 새로운 HTTP 요청을 보내지 않고도 이 콘텐츠를 로드할 수 있습니다. 이렇게 하면 콘텐츠 로드 속도가 빨라집니다.
• 서버는 HTTP/2를 지원합니다 — HTTP/2를 사용하면 웹 사이트를 로드하기 위해 브라우저에서 서버로 단 하나의 연결만 설정하면 되며 동시에 여러 요청이 허용됩니다. 이는 각 리소스에 대해 새 연결을 만드는 것보다 훨씬 더 효율적입니다.

2. CDN을 사용하지 않음

웹 사이트에 CDN이 활성화되어 있지 않으면 사용자의 물리적 위치가 서버에서 멀리 떨어져 있으면 로딩 시간이 늘어납니다. 이러한 지연은 거리에 따라 더욱 눈에 띄게 되며 서버에 대한 모든 HTTP 요청에 영향을 미칩니다. CDN을 사용하면 페이지 로드 시간이 향상될 수 있습니다.

CDN무엇인가요?

CDN의 정식 명칭은 Content Delivery Network, 즉 콘텐츠 유통 네트워크입니다. CDN은 인터넷을 기반으로 구축된 콘텐츠 배포 네트워크로, 다양한 위치에 배치된 엣지 서버를 기반으로 하며 중앙 플랫폼의 로드 밸런싱, 콘텐츠 배포, 스케줄링 및 기타 기능 모듈을 사용하여 사용자가 근처에서 필요한 콘텐츠를 얻을 수 있도록 합니다.

CDN을 사용하면 사용자는 자신의 위치에 가장 가까운 서버에서 웹 페이지에 필요한 리소스를 얻을 수 있습니다. CDN의 서버는 다양한 지리적 위치에 분산되어 있습니다. 따라서 이러한 종류의 CDN을 사용하는 것은 애플리케이션 로딩 시간을 향상시키는 효과적인 방법 중 하나입니다.

예를 들어 웹 서버가 캘리포니아에 있는 경우 CDN을 배포하면 게스트 액세스 네트워크 토폴로지 다이어그램이 아래와 같을 수 있습니다.

대부분의 CDN 서비스에는 자체 네트워크 백본이 있어 인터넷에 비해 높은 서비스 품질, 낮은 패킷 속도, 빠른 로딩 속도 등을 제공할 수 있습니다. 단점은 가격이 비싸다는 것입니다.

3. 파일 크기 및 페이지 크기

웹 서버에서 대용량 파일을 로드하거나 페이지 크기를 로드하는 경우 시간이 많이 걸리므로 이러한 대용량 파일을 여러 개 가져오면 페이지 로딩 시간이 늘어날 수 있습니다.

압축을 활성화하는 것은 HTTP 요청의 파일 크기를 줄이고 페이지 로드 시간을 향상시키는 일반적인 방법입니다.

두 가지 일반적인 압축 방법이 있습니다.

첫 번째 방법은 Gzip입니다. Gzip은 파일에서 유사한 코드를 찾아 일시적으로 대체하여 파일을 더 작게 만들 수 있습니다. 현재 대부분의 웹 서버는 Gzip 압축을 지원합니다. HTML 또는 CSS 파일에 압축을 활성화하면 일반적으로 파일 크기가 약 50% 또는 70% 절약되므로 페이지 로드 시간과 사용되는 대역폭이 줄어듭니다. 애플리케이션에 사용되는 이미지의 크기를 줄이면 페이지 로드 시간을 더욱 줄일 수 있습니다.

또 다른 압축 솔루션은 Brotli라고 합니다. 공식 소개에 따르면 압축률은 gzip보다 20%~30% 더 높으며, 실행 효율성도 더 효율적입니다. 구체적으로 테스트해 본 적이 없어 증명할 수 없습니다. .실제 상황을 토대로 고려할 수 있습니다.

4. 모든 리소스를 동시에 로드

모든 HTML, CSS 및 JS 파일을 동시에 로드하면 이러한 리소스가 모두 로드될 때까지 페이지 렌더링 프로세스가 차단되므로 페이지 로드 시간이 늘어납니다.

지연된 JavaScript 로딩은 다른 요소가 로드된 후 대용량 JS 파일을 로드하는 메커니즘입니다. 이 방법을 사용하면 대용량 JS 파일 로드로 인해 페이지 콘텐츠 로드가 영향을 받지 않습니다.

HTML 사이트가 있는 경우 36cc49f0c466276486e50c850b7e4956 태그 앞에 외부 JS 파일(defer.js)을 호출해야 합니다.

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else <br>    window.onload = downloadJSAtOnload;
</script>

위 코드는 "외부 defer.js 파일을 로드하기 전에 전체 문서가 로드될 때까지 기다리십시오."를 의미합니다.

5 많은 리디렉션

일반적으로 페이지 이동 또는 삭제를 처리하기 위해 리디렉션을 사용합니다. 사용자가 액세스할 때 오류를 방지하기 위해. 그러나 리디렉션이 많을수록 HTTP 요청이 많아집니다. 이로 인해 페이지 로드 시간이 크게 늘어날 수 있습니다. Google에서는 특히 모바일 중심 사이트에서 로드 시간을 개선하기 위해 웹사이트 소유자가 리디렉션을 제거할 것을 권장합니다.

유사한 웹사이트 스크래핑 도구를 사용하여 웹사이트의 모든 리디렉션 요청을 얻을 수 있습니다. 이를 분석하면 불필요한 리디렉션을 파악하고 제거할 수 있습니다.

일반적으로 리디렉션은 두 가지 유형으로 나뉩니다.

• 서버 측 리디렉션 — 빠르고 캐시 가능합니다.
• 클라이언트 측 리디렉션 — 느리고 캐시할 수 없습니다.

서버 측 리디렉션을 최소한으로 유지하면서 페이지에 대한 클라이언트 측 리디렉션 사용을 방지하여 웹 페이지 로드 시간을 최적화하세요.

결론

빠르게 실행되고 로드되는 사이트는 웹마스터와 사용자 모두에게 유익하다고 생각됩니다. 이 기사를 통해 페이지 로드 시간의 중요성에 대한 충분한 확신을 얻었기를 바랍니다.

웹사이트 성능을 향상시키려는 경우 Google Pagespeed Insights, Pingdom, YSlow 등과 같은 몇 가지 도구를 공유해 드리겠습니다. 이러한 도구는 웹사이트의 단점에 대한 통찰력을 제공하는 완전한 보고서를 제공할 수 있습니다. 귀하의 웹사이트가 더 나은 사용자 경험을 제공할 수 있기를 바랍니다.

원본 출처: https://blog.bitsrc.io/5-common-mistakes-developers-do-that-affect-page-load-time-5a49b0e46f6b

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 프로그래밍 입문! !

위 내용은 페이지 로드 시간에 영향을 미치는 5가지 일반적인 실수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!