사용자가 웹사이트를 방문할 때 웹사이트를 로드하는 데 오랜 시간이 걸린다면 이 기사가 최적화 작업에 영감을 줄 수 있습니다. 그러나 문제 해결에 도움이 되지 않더라도 웹 사이트 로딩 시간에 영향을 미치는 몇 가지 일반적인 오류가 무엇인지 알아볼 수 있습니다.
페이지 로딩 시간은 웹사이트 성능에 대한 사용자의 직관적인 경험에 직접적인 영향을 미칩니다. 연구 데이터에 따르면
페이지 로딩 시간이 3초를 초과하면 방문하는 사용자의 절반이 기다리는 동안 길을 잃게 됩니다.
HubSpot의 연구를 바탕으로 한 몇 가지 예를 살펴보겠습니다.
위의 데이터를 바탕으로 웹사이트에서 페이지 로드 시간이 얼마나 중요한지 알 수 있습니다.
페이지 로딩 시간에 영향을 미치는 요소는 많습니다. 그 중 제가 웹사이트를 구축할 때 겪게 되는 가장 대표적인 실수 5가지를 나열해봤습니다.
브라우저가 웹 서버에서 파일, 페이지 또는 이미지를 가져와야 할 때마다 HTTP 요청을 한 후 Chrome에서 "네트워크" 옵션을 전달할 수 있습니다. 응용 프로그램이 어떤 네트워크 요청을 하는지, 어떤 요청이 더 많은 시간이 소요되는지 및 기타 정보를 모니터링하는 "개발자 도구" 카드입니다.
일반 브라우저는 일반적으로 동시 HTTP 요청 수를 4~8개로 제한합니다. 따라서 동시 요청 수가 많으면 대기 시간이 길어집니다. Yahoo에서 수행한 조사에 따르면 애플리케이션 로드 시간의 80%가 HTTP 요청에 의존하며 총 HTTP 요청 수를 줄이는 것이 페이지 로드 시간을 단축하는 데 도움이 되는 것으로 나타났습니다.
다음과 같은 방법으로 웹 애플리케이션에 대한 총 HTTP 요청 수를 줄일 수 있습니다.
웹 사이트에 CDN이 활성화되어 있지 않으면 사용자의 물리적 위치가 서버에서 멀리 떨어져 있으면 로딩 시간이 늘어납니다. 이러한 지연은 거리에 따라 더욱 눈에 띄게 되며 서버에 대한 모든 HTTP 요청에 영향을 미칩니다. CDN을 사용하면 페이지 로드 시간이 향상될 수 있습니다.
CDN무엇인가요?
CDN의 정식 명칭은 Content Delivery Network, 즉 콘텐츠 유통 네트워크입니다. CDN은 인터넷을 기반으로 구축된 콘텐츠 배포 네트워크로, 다양한 위치에 배치된 엣지 서버를 기반으로 하며 중앙 플랫폼의 로드 밸런싱, 콘텐츠 배포, 스케줄링 및 기타 기능 모듈을 사용하여 사용자가 근처에서 필요한 콘텐츠를 얻을 수 있도록 합니다.
CDN을 사용하면 사용자는 자신의 위치에 가장 가까운 서버에서 웹 페이지에 필요한 리소스를 얻을 수 있습니다. CDN의 서버는 다양한 지리적 위치에 분산되어 있습니다. 따라서 이러한 종류의 CDN을 사용하는 것은 애플리케이션 로딩 시간을 향상시키는 효과적인 방법 중 하나입니다.
예를 들어 웹 서버가 캘리포니아에 있는 경우 CDN을 배포하면 게스트 액세스 네트워크 토폴로지 다이어그램이 아래와 같을 수 있습니다.
대부분의 CDN 서비스에는 자체 네트워크 백본이 있어 인터넷에 비해 높은 서비스 품질, 낮은 패킷 속도, 빠른 로딩 속도 등을 제공할 수 있습니다. 단점은 가격이 비싸다는 것입니다.
웹 서버에서 대용량 파일을 로드하거나 페이지 크기를 로드하는 경우 시간이 많이 걸리므로 이러한 대용량 파일을 여러 개 가져오면 페이지 로딩 시간이 늘어날 수 있습니다.
압축을 활성화하는 것은 HTTP 요청의 파일 크기를 줄이고 페이지 로드 시간을 향상시키는 일반적인 방법입니다.
두 가지 일반적인 압축 방법이 있습니다.
첫 번째 방법은 Gzip입니다. Gzip은 파일에서 유사한 코드를 찾아 일시적으로 대체하여 파일을 더 작게 만들 수 있습니다. 현재 대부분의 웹 서버는 Gzip 압축을 지원합니다. HTML 또는 CSS 파일에 압축을 활성화하면 일반적으로 파일 크기가 약 50% 또는 70% 절약되므로 페이지 로드 시간과 사용되는 대역폭이 줄어듭니다. 애플리케이션에 사용되는 이미지의 크기를 줄이면 페이지 로드 시간을 더욱 줄일 수 있습니다.
또 다른 압축 솔루션은 Brotli라고 합니다. 공식 소개에 따르면 압축률은 gzip보다 20%~30% 더 높으며, 실행 효율성도 더 효율적입니다. 구체적으로 테스트해 본 적이 없어 증명할 수 없습니다. .실제 상황을 토대로 고려할 수 있습니다.
모든 HTML, CSS 및 JS 파일을 동시에 로드하면 이러한 리소스가 모두 로드될 때까지 페이지 렌더링 프로세스가 차단되므로 페이지 로드 시간이 늘어납니다.
지연된 JavaScript 로딩은 다른 요소가 로드된 후 대용량 JS 파일을 로드하는 메커니즘입니다. 이 방법을 사용하면 대용량 JS 파일 로드로 인해 페이지 콘텐츠 로드가 영향을 받지 않습니다.
HTML 사이트가 있는 경우 태그 앞에 외부 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 파일을 로드하기 전에 전체 문서가 로드될 때까지 기다리십시오."를 의미합니다.
일반적으로 페이지 이동 또는 삭제를 처리하기 위해 리디렉션을 사용합니다. 사용자가 액세스할 때 오류를 방지하기 위해. 그러나 리디렉션이 많을수록 HTTP 요청이 많아집니다. 이로 인해 페이지 로드 시간이 크게 늘어날 수 있습니다. Google에서는 특히 모바일 중심 사이트에서 로드 시간을 개선하기 위해 웹사이트 소유자가 리디렉션을 제거할 것을 권장합니다.
유사한 웹사이트 스크래핑 도구를 사용하여 웹사이트의 모든 리디렉션 요청을 얻을 수 있습니다. 이를 분석하면 불필요한 리디렉션을 파악하고 제거할 수 있습니다.
일반적으로 리디렉션은 두 가지 유형으로 나뉩니다.
서버 측 리디렉션을 최소한으로 유지하면서 페이지에 대한 클라이언트 측 리디렉션 사용을 방지하여 웹 페이지 로드 시간을 최적화하세요.
빠르게 실행되고 로드되는 사이트는 웹마스터와 사용자 모두에게 유익하다고 생각됩니다. 이 기사를 통해 페이지 로드 시간의 중요성에 대한 충분한 확신을 얻었기를 바랍니다.
웹사이트 성능을 향상시키려는 경우 Google Pagespeed Insights, Pingdom, YSlow 등과 같은 몇 가지 도구를 공유해 드리겠습니다. 이러한 도구는 웹사이트의 단점에 대한 통찰력을 제공하는 완전한 보고서를 제공할 수 있습니다. 귀하의 웹사이트가 더 나은 사용자 경험을 제공할 수 있기를 바랍니다.
원본 출처: https://blog.bitsrc.io/5-common-mistakes-developers-do-that-affect-page-load-time-5a49b0e46f6b
더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 프로그래밍 입문! !
위 내용은 페이지 로드 시간에 영향을 미치는 5가지 일반적인 실수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
