[온라인 쇼핑몰 속도 최적화] 중요한 요청을 연결하지 마십시오

 

목차

 

💡 중요한 요청 연결 최적화는 페이지 성능에 어떤 영향을 줍니까?

💡  중요한 요청 연결을 최적화하는 방법은 무엇입니까?

 

---

 

 

웹 페이지가 로드될 때, 브라우저는 이미지, 스타일 시트, 자바스크립트 파일 등 여러 가지 자원을 다운로드해야 합니다. 이러한 자원들이 많아질수록 웹 페이지의 로딩 속도는 더디게 됩니다. 그러므로 "중요한 요청을 연결하지 마십시오"의 조언처럼 이러한 자원들을 하나의 큰 파일로 합치는 것이 좋습니다. 
이렇게 하면 웹 페이지의 로딩 속도가 빨라지므로 사용자 경험이 개선됩니다. 또한, 이 방법은 브라우저의 요청 수를 줄이기 때문에 서버의 부하를 줄일 수 있습니다. 따라서, 이를 통해 웹 페이지의 성능을 최적화하고 사용자가 더 빠르고 원활한 경험을 할 수 있도록 도와줍니다.
웹 페이지에서 중요한 요청 연결을 형성하는 예시로는 폰트 파일이나 스타일시트 파일, 이미지 파일이 있습니다. 폰트 파일은 다른 리소스에 의존하여 로드되기 때문에 중요한 요청 연결을 형성할 수 있습니다. 
이 경우, 폰트 파일이 로드되기 전에 의존하는 리소스가 모두 로드되어야 하므로 로드 시간이 길어질 수 있습니다. 따라서 이러한 중요한 요청 연결을 최소화하기 위해 폰트 파일과 의존하는 리소스를 함께 로드하거나, 폰트 파일을 최적화하여 로드 시간을 줄일 수 있습니다.

 

---

 

💡 중요한 요청 연결 최적화는 페이지 성능에 어떤 영향을 줍니까?

 

브라우저는 페이지 로드 프로세스가 시작될 때 HTML을 구문 분석하여 할당된 우선 순위에 따라 중요한 요청을 처리합니다.
만약 지정하지 않으면, HTML은 일반적으로 가장 높은 우선 순위를 가지며, CSS, 이미지 및 JavaScript가 그 뒤를 이어서 처리됩니다. 이러한 중요한 요청이 긴 체인을 형성하게 되면, 지연 시간이 늘어나고 페이지 로드 시간이 증가합니다.
최대 중요 경로 대기 시간은 가장 긴 중요 요청 체인의 모든 리소스를 다운로드하는 데 소요된 총 시간입니다.

 

 

따라서
다운로드를 연기하거나 완전히 제거하거나 중요 경로 길이를 줄여서 중요한 리소스의 수를 최소화하면
웹사이트 성능이 향상되고 방문자의 사용자 경험이 향상될 수 있습니다.

1. 요청 수 감소
중요한 요청 체인을 최적화하면 웹 페이지가 서버에 보내는 요청 수를 줄일 수 있습니다. 이로 인해 웹 페이지가  빨리 로딩되며, 사용자는 페이지를 더 빨리 볼 수 있습니다.
2. 로딩 시간 단축
중요한 요청 체인을 최적화하면 웹 페이지의 로딩 속도를 향상시킵니다. 여러 요청을 하나로 합치면, 브라우저가 자원을 병렬로 다운로드할 수 있으므로 페이지가 빠르게 나타납니다.
3. 빈번한 서버 접속 감소
중요한 요청 체인 최적화를 통해 브라우저가 서버에 더 적은 횟수로 접속하게 됩니다. 이로써 서버에 대한 부하가 감소하고, 웹 페이지가 안정적으로 로딩됩니다.
4. 사용자 경험 향상
웹 페이지가 빨리 로드되면 사용자 경험이 향상됩니다. 사용자는 빠르게 내용을 볼 수 있으며, 페이지가 반응적으로 동작하는 것을 느낄 수 있습니다.
5. SEO 개선
페이지 로딩 속도는 검색 엔진 최적화 (SEO)에도 영향을 미칩니다. 빠른 로딩 페이지는 검색 엔진에서 더 높은 순위에 올라갈 가능성이 높습니다.

 

 

요약하면,중요한 요청 체인을 최적화하면
웹 페이지의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.
이는 더 빠른 페이지 로딩, 더 적은 서버 부하, 빈번한 서버 접속 최소화 등을 통해 이루어집니다.

 

 

---

 

💡  중요한 요청 연결을 최적화하는 방법은 무엇입니까?

 

1. 키 요청 미리 로드
중요한 요청 (예: 스크립트, 웹 글꼴, 스타일시트 등)을 미리 로드하여 중요한 리소스 실행 속도를 높이고 페이지 로드 프로세스 동안 귀중한 시간을 절약합니다.
예를 들어, 모든 CSS 스타일을 하나의 파일로 합치고, 모든 JavaScript 코드를 하나의 파일로 합치는 방법입니다.

2. 자원 병합 (Resource Concatenation)
여러 개의 CSS 파일 또는 JavaScript 파일이 있다면, 이를 하나로 합치세요. 이렇게 하면 브라우저가 자원을 한 번에 받을 수 있어 로딩 시간이 단축됩니다.
예를 들어, 모든 CSS 스타일을 하나의 파일로 합치고, 모든 JavaScript 코드를 하나의 파일로 합치는 방법입니다.

3. 이미지 최적화 (Image Optimization)
이미지는 웹 페이지에서 중요한 자원 중 하나입니다. 이미지를 최적화하여 파일 크기를 줄이고 품질을 유지하세요.
이미지 포맷을 올바르게 선택하고, 필요하지 않은 이미지를 삭제하거나 대체하세요.

4. 레이지 로딩 (Lazy Loading)
이미지, 비디오 및 기타 미디어 요소를 페이지 로딩 중에 모두 불러오지 말고, 사용자가 스크롤할 때 필요한 시점에 불러오도록 레이지 로딩을 구현하세요.
이렇게 하면 초기 페이지 로딩이 빨라지며, 사용자 경험을 향상시킵니다.

5. 브라우저 캐싱 활용 (Browser Caching)
자주 변경되지 않는 자원(예 로고, 스타일 시트, 스크립트)은 브라우저 캐싱을 활용하여 더 빠르게 불러올 수 있도록 설정하세요.
이렇게 하면 사용자가 다시 방문할 때 자원을 다시 다운로드할 필요가 없어집니다.

6. CDN 사용 (Content Delivery Network)
CDN을 활용하여 웹 페이지 자원을 전 세계에 분산된 서버에서 제공하면 로딩 속도가 향상됩니다.
CDN은 사용자와 물리적으로 가까운 서버에서 자원을 제공하므로 더 빠르게 로드됩니다.

7. 필요하지 않은 요청 제거 (Remove Unnecessary Requests)
페이지에서 사용하지 않는 자원을 제거하세요. 필요없는 스크립트, 스타일, 이미지 등은 제거하여 페이지의 요청 수를 최소화하세요.

8. 페이지 압축 (Compression)
웹 서버에서 페이지 및 자원을 GZIP 또는 Brotli와 같은 압축 형식으로 제공하여 파일 크기를 줄이세요.

9. CMS 사용자의 경우(WordPress 및 기타 CMS)
WordPress(및 기타 CMS) 사용자는 WP Rocket과 같은 캐싱 플러그인을 사용하여 위에 나열된 일부 최적화(예: 요청 사전 로드, 스크립트 지연, 스크롤 없이 볼 수 있는 이미지 지연 로드 등)를 수행할 수 있습니다. WP Rocket을 사용하여 자세한 WordPress 최적화 가이드를 읽어보세요.