WordPress에서 HTTP 요청을 줄이는 방법(11가지 팁)

웹사이트를 표시하기 위해 사용자의 브라우저는 서버에 HTTP 요청을 보냅니다. 그러나 최적화되지 않은 파일이 여러 개 있는 경우 서버에서 많은 요청을 처리해야 합니다. 이렇게 하면 페이지 로딩 시간이 크게 늘어날 수 있으므로 웹사이트에서 HTTP 요청을 더 적게 만들기를 원할 것입니다.

다행스럽게도 이를 줄이는 것이 가능하며, 이것이 이 게시물의 전부입니다.

HTTP 요청 소개

사용자가 웹사이트를 방문할 때마다 브라우저는 서버에서 리소스를 다운로드해야 합니다. 그것과 통신하기 위해 브라우저는 HTTP(Hypertext Transfer Protocol)로 요청을 보냅니다.

웹 사이트는 다양한 형식의 데이터로 구성되며 HTML, CSS, 이미지 및 비디오 파일은 모두 서버에 저장됩니다. 브라우저에서 이 콘텐츠를 렌더링하려면 HTTP 요청이 필요합니다.

누군가가 인터넷을 탐색할 때 관련된 단계는 다음과 같습니다.

웹 사이트를 렌더링하는 데 단 하나의 HTTP 요청만 필요한 것은 아니라는 점에 유의해야 합니다. 각각의 개별 이미지 파일, 플러그인 스타일시트, JavaScript 스크립트, 웹 글꼴 등은 일반적으로 고유합니다. 따라서 사이트가 최적화되지 않은 경우 로딩 시간에 부정적인 영향을 미칠 수 있습니다.

WordPress 사이트에서 더 적은 HTTP 요청을 만들기를 원하는 이유

웹사이트를 구축할 때 불필요한 파일을 최소화하는 것이 중요합니다. 그러면 방문자의 브라우저가 서버에서 많은 리소스를 요청할 필요가 없습니다. 귀하의 사이트는 더 적은 HTTP 요청을 생성하므로 훨씬 빠르게 로드됩니다.

일반적으로 HTTP 요청 수가 많을수록 페이지 속도가 느려집니다. 페이지를 렌더링하기 전에 다운로드할 리소스가 더 있는 경우 사용자는 콘텐츠를 보기 위해 오랜 시간을 기다려야 합니다.

예를 들어 요청이 50개뿐인 웹사이트는 일반적으로 요청이 70개인 웹사이트보다 빠르게 로드됩니다. 처리하고 다운로드할 리소스가 적기 때문입니다.

실제 이야기는 약간 더 복잡합니다. 모든 HTTP 요청이 동일하게 생성되는 것은 아니기 때문입니다. 하나의 크고 느리게 로드되는 HTTP 요청은 5개의 빠르게 로드되는 작은 HTTP 요청보다 더 큰 영향을 미칠 수 있습니다. 그러나 대략적인 규칙으로 – 더 적은 HTTP 요청 = 더 빠른 로딩 웹사이트 .

웹 사이트에서 HTTP 요청을 줄이면 핵심 성능 보고서, 특히 LCP(Largest Content Paint) 점수가 향상됩니다. 결과적으로 방문자는 콘텐츠를 더 빨리 볼 수 있으므로 사용자 경험(UX)을 개선할 수 있습니다.

웹사이트의 HTTP 요청을 테스트하는 방법

앞에서 언급했듯이 HTTP 요청은 렌더링의 일부입니다. 그러나 모든 HTTP 요청이 동일한 것은 아닙니다. 귀하의 웹사이트에서 그것들을 줄이기 시작하기 전에, 어떤 것을 목표로 삼을지 정확히 알아야 합니다.

이를 위해 GTmetrix와 같은 성능 분석 도구를 사용할 수 있습니다. 웹사이트의 URL을 입력하고 사이트 테스트를 누르십시오.

페이지 크기 및 총 요청 수에 대한 정보가 포함된 성능 보고서를 받게 됩니다. 이 데이터를 보려면 페이지 세부 정보 까지 아래로 스크롤하십시오.

폭포 탭을 클릭하여 개별 요청을 볼 수도 있습니다. 각 파일을 다운로드하는 데 걸린 시간이 표시됩니다.

이 폭포 차트를 사용하면 사이트에서 불필요한 HTTP 요청을 유발하는 요소를 식별할 수 있습니다. 문제를 찾으면 올바른 솔루션을 구현하고 웹 사이트 속도를 높일 수 있습니다.

위의 차트에서 볼 수 있듯이 각 HTTP 요청은 크기가 다르고 로드하는 데 걸리는 시간이 다릅니다.

노력에 대한 최대의 수익을 얻으려면 가장 크고 가장 느린 HTTP 요청을 제거하는 데 집중하십시오.

또한 제3자 HTTP 요청( Google Analytics 스크립트와 같이 사이트가 다른 사람의 서버에서 로드하는 리소스 )을 제거하는 데 중점을 두어야 합니다. 이러한 타사 요청에는 추가 DNS 조회가 필요하며 다른 성능 단점이 있습니다.

WordPress에서 HTTP 요청을 줄이고 사이트 속도를 높이는 방법(11가지 팁)

웹사이트를 테스트했으면 이제 HTTP 요청을 줄여야 합니다.

아래에서 HTTP 요청을 줄이고 남은 HTTP 요청을 최적화 하는 11가지 방법을 살펴보겠습니다. 이러한 팁 중 일부는 HTTP 요청을 반드시 제거하지는 않지만 요청을 최적화하여 로드 속도를 높여 사이트 속도를 높이는 데 여전히 중요합니다.

1. 불필요한 플러그인 삭제
2. 렌더링 차단 자바스크립트 지연 및/또는 자바스크립트 실행 지연
3. 조건부로 스크립트 로드
4. 타사 요청 최소화
5. 이미지 최적화
6. 지연 로딩 구현
7. 시스템 글꼴 스택 사용
8. CSS와 자바스크립트 결합
9. CSS 스프라이트를 사용하여 이미지 결합
10. 사이트 코드 축소
11. 이모티콘 비활성화

1. 불필요한 플러그인 삭제

웹 사이트에 여러 플러그인이 설치되어 있을 수 있습니다. 적극적으로 사용하지 않는 경우에도 불필요한 플러그인은 HTTP 요청을 증가시키고 웹 페이지 속도를 저하시킬 수 있습니다.

플러그인 요청을 분석하려면 GTmetrix Waterfall 보고서에서 "플러그인"을 검색하십시오. 이렇게 하면 wp-content/plugins 폴더에서 발생한 HTTP 요청만 표시됩니다.

결과 위로 마우스를 가져가면 어떤 플러그인이 요청을 생성했는지 확인할 수 있습니다. 사이트를 최적화하려면 목록을 살펴보고 불필요한 플러그인을 찾으십시오. 특정 도구가 웹 사이트에 적극적으로 기여하지 않는 경우 삭제하는 것이 좋습니다.

2. 렌더링 차단 JavaScript 지연 및/또는 JavaScript 실행 지연

HTTP 요청을 줄이고 HTTP 요청을 최적화하려면 JavaScript에 집중하는 것도 좋은 방법입니다.

사이트의 JavaScript 로드 방식을 최적화하는 두 가지 주요 방법이 있습니다.

1. 렌더링 차단 JavaScript 연기
2. JavaScript 실행 지연

렌더링 차단 JavaScript 연기

지연 렌더링 차단 JavaScript는 HTTP 요청 자체를 제거하지 않지만 사이트의 JavaScript 로드가 더 중요한 HTTP 요청을 차단하지 않도록 합니다.

로드 프로세스 중에 브라우저가 렌더링 차단 리소스를 실행할 수 있습니다. 이러한 CSS 또는 JavaScript 파일은 리소스가 처리될 때까지 렌더링을 일시 중지합니다. 이러한 불필요한 파일이 있는 경우 콘텐츠를 표시하는 시간이 길어질 수 있습니다.

defer 또는 async 속성을 이러한 파일에 추가하면 나중에 실행하도록 브라우저에 알립니다. defer 속성을 사용하면 HTML 구문 분석 중에 스크립트가 다운로드된 다음 실행됩니다. 비동기 속성은 사용 가능한 즉시 스크립트를 실행합니다.

이를 구현하려면 무료 Async JavaScript 플러그인과 같은 기능별 플러그인을 사용할 수 있습니다.

또는 WP Rocket 및 FlyingPress를 비롯한 많은 일반 성능/캐싱 플러그인도 이 기능을 제공합니다.

편하다면 사이트 코드에서 수동으로 설정할 수도 있습니다.

defer 속성을 구현하려면 functions.php 파일을 열고 리소스에 대한 <script> 태그를 찾기만 하면 됩니다. 여기에 defer 속성을 삽입합니다.

 <script src="resource.js" defer></script>

비동기 속성은 다음과 같습니다.

 <script src="resource.js" async></script>

일반적으로 비동기 속성을 사용하는 것이 가장 좋습니다. 그러나 스크립트가 다른 스크립트에 의존하는 경우 defer 속성을 사용해야 합니다.

JavaScript 실행 지연

초기 페이지 로드에 대한 HTTP 요청을 줄이려는 경우 널리 사용되는 또 다른 전술은 사용자 상호 작용이 발생할 때까지 사이트의 JavaScript 실행 일부/전체를 지연시키는 것입니다.

이를 설정하면 사이트는 사용자가 클릭, 스크롤 등과 같은 일부 상호 작용을 수행할 때까지 파일을 로드하기 위해 대기합니다.

이러한 HTTP 요청을 방문 후반으로 이동하면 초기 로드에 대한 HTTP 요청을 줄이고 Largest Contentful Paint와 같은 사용자 경험 중심 지표의 속도를 크게 높일 수 있습니다.

이를 설정하려면 다음 성능 플러그인 중 하나를 사용할 수 있습니다.

• WP 로켓
• 플라잉프레스
• 성과

FlyingPress에서는 다음과 같이 표시됩니다. 선택한 스크립트를 제외한 모든 스크립트를 지연시키거나 선택한 스크립트 만 지연시킬 수 있습니다.

3. 조건부로 스크립트 로드

일부 플러그인은 사이트 전체에 불필요하게 스크립트를 로드합니다. 예를 들어 플러그인은 연락처 페이지의 양식만 처리하고 다른 영역에 스크립트를 추가할 수 있습니다. 이 경우 플러그인의 스크립트를 조건부로 로드하는 것이 좋습니다.

플러그인을 조건부로 로드하려면 Perfmatters와 같은 도구를 설치하는 것이 좋습니다. 특정 페이지 또는 게시물에서 플러그인 또는 개별 스크립트를 비활성화하기 위한 내장 스크립트 관리자가 함께 제공됩니다.

무료 옵션의 경우 Asset CleanUp 플러그인을 고려할 수도 있습니다.

플러그인을 조건부로 로드한 다음 GTmetrix를 통해 웹 사이트를 다시 실행하십시오. 여전히 과도한 HTTP 요청이 있는 경우 다음 방법으로 계속 진행해야 합니다.

4. 타사 요청 최소화

웹사이트가 로드될 때 방문자의 브라우저는 추가 HTTP 요청이 필요한 타사 플랫폼에서 데이터를 가져와야 할 수 있습니다. 또한 타사 서버에 의존하고 있기 때문에 이러한 요청으로 인해 웹 사이트 속도가 크게 느려질 수 있습니다.

다음은 타사 스크립트의 몇 가지 예입니다.

• 삽입된 YouTube 동영상
• 구글 애널리틱스 추적 스크립트
• 구글 글꼴
• 타사 광고

렌더링 차단 리소스와 마찬가지로 비동기 또는 연기 특성을 타사 스크립트에 적용할 수 있습니다.

Google Analytics 및 Google Fonts와 같은 서비스의 경우 다음과 같은 플러그인을 사용하여 로컬에서 호스팅하는 것도 고려할 수 있습니다.

• OMGF – Google Fonts를 로컬에서 호스팅합니다.
• CAOS – Google 애널리틱스를 로컬에서 호스팅합니다.

5. 이미지 최적화

플러그인과 마찬가지로 웹사이트에서 불필요한 이미지를 제거하는 것이 중요합니다. 모든 이미지에는 고유한 HTTP 요청이 필요하므로 사이트의 사진 수를 최소화하는 것이 좋습니다.

그런 다음 모든 이미지를 최적화해야 합니다. 이렇게 해도 HTTP 요청 수가 줄어들지는 않지만 크기는 줄어듭니다. 이렇게 하면 페이지 로딩 시간을 효과적으로 개선할 수 있습니다.

최고의 이미지 최적화 프로그램 중 하나는 Optimole입니다. 이 부분 유료화 플러그인은 다음과 같은 올인원 이미지 최적화 기능을 제공합니다.

• 각 사용자의 장치에 최적화된 적응형 이미지를 제공합니다.
• 이미지 압축.
• 이미지 크기 조정.
• 이미지를 최적의 형식으로 변환합니다.
• 내장 콘텐츠 전송 네트워크(CDN)를 통해 이미지를 제공합니다.

새 이미지를 업로드하면 Optimole이 이미지를 압축하고 크기를 조정합니다. 따라서 과도한 리소스가 필요한 대용량 이미지 파일에 대해 걱정할 필요가 없습니다.

6. 지연 로딩 구현

게으른 로딩을 구현하는 것도 좋은 생각입니다. 이렇게 하면 방문자가 페이지를 아래로 스크롤할 때까지 스크롤 없이 볼 수 있는 이미지와 동영상이 로드되지 않습니다.

이렇게 하면 해당 HTTP 요청이 사용자 방문의 후반부로 이동하여 초기 로드에 대한 HTTP 요청을 줄이고 가장 큰 콘텐츠가 포함된 페인트 시간을 단축할 수 있습니다.

WordPress 5.5는 기본 브라우저 지연 로딩을 사용하여 이미지에 대한 내장 지연 로딩을 추가했습니다.

그러나 아직 모든 브라우저가 기본 지연 로딩을 지원하는 것은 아닙니다. 또한 전용 지연 로딩 플러그인을 사용하면 사이트의 지연 로딩 기능을 더 잘 제어할 수 있습니다.

예를 들어, Largest Contentful Paint 시간에 부정적인 영향을 미치지 않도록 지연 로드에서 처음 몇 개의 이미지를 제외할 수 있습니다.

이전 섹션의 Optimole 플러그인을 사용하는 경우 사이트 이미지를 최적으로 지연 로드하는 내장 기능도 포함되어 있습니다.

플러그인 설정에서 지연 로딩 동작을 추가로 조정할 수도 있습니다.

7. 시스템 글꼴 스택 사용

다양한 사용자 지정 글꼴을 사용하여 웹 사이트를 고유하게 만들 수 있습니다. 그러나 각각의 새 글꼴은 사이트가 로드될 때 다른 HTTP 요청을 추가합니다.

이러한 이유로 사용 중인 사용자 지정 글꼴의 수를 제한하는 것이 가장 좋습니다.

또는 방문자 운영 체제의 기본 글꼴을 사용하는 시스템 글꼴 스택을 사용할 수 있습니다.

Neve, GeneratePress 또는 Astra와 같은 특정 테마를 사용하면 시스템 글꼴로 되돌릴 수 있습니다. 그러나 CSS를 사용하여 글꼴 스택을 변경할 수도 있습니다.

8. CSS와 JavaScript 결합

CSS 및 JavaScript 파일에 대한 HTTP 요청을 줄이는 또 다른 방법은 별도의 CSS 및 JavaScript 파일을 단일 스타일시트 또는 파일로 결합하는 것입니다.

자동 최적화 플러그인을 사용하면 몇 단계만으로 사이트 파일을 쉽게 집계할 수 있습니다.

설정 > 자동 최적화 에서 플러그인을 활성화하여 JavaScript 및 CSS 코드를 최적화합니다. 그런 다음 Aggregate JS-files 및 Aggregate CSS-files 옆의 확인란을 선택합니다.

이것은 CSS를 하나의 파일로 컴파일하고 JavaScript를 다른 파일로 컴파일합니다. 여러 파일에 대해 많은 요청을 보내는 대신 자동 최적화를 사용하면 사이트에서 더 적은 수의 HTTP 요청을 할 수 있습니다.

참고 – CSS와 JavaScript를 결합하는 것이 HTTP 요청을 줄이는 확실한 방법이지만 웹 호스트에 따라 실제 성능에 영향을 미치지 않을 수 있습니다.

호스트가 HTTP/2 이상(요즘 대부분의 호스트에서 사용)을 사용하는 경우 HTTP/2가 멀티플렉싱을 지원하기 때문에 실제로 파일을 결합 하지 않는 것이 더 나을 수 있습니다(즉, 여러 서버 요청 없이 서버에서 여러 파일을 다운로드할 수 있음).

호스트가 HTTP/2를 사용하는지 확실하지 않은 경우 지원을 요청할 수 있습니다.

9. CSS 스프라이트를 사용하여 이미지 결합

일반적인 WordPress 사이트에서 모든 이미지는 개별 파일입니다. 페이지에 여러 사진이 있는 경우 브라우저는 여러 HTTP 요청을 보냅니다. 그러나 CSS 스프라이트는 이러한 이미지를 하나의 파일로 결합합니다.

CSS 스프라이트 도구는 CSS 스프라이트를 만들고 사용자 정의하기 위한 무료 소프트웨어입니다. 시작하려면 이미지를 업로드 상자에 넣습니다.

CSS 스프라이트를 생성했으면 WordPress 미디어 라이브러리에 추가합니다. 그런 다음 생성된 HTML 및 CSS 코드를 사용하여 각 이미지를 웹 사이트에 배치할 수 있습니다.

10. 사이트 코드 축소

사이트 파일을 축소해도 HTTP 요청을 줄이는 데 도움이 되지는 않지만 사이트의 HTML, CSS 및 JavaScript 코드에 대한 피할 수 없는 HTTP 요청을 최적화하는 데 도움이 됩니다.

코드를 작성할 때 가독성을 향상시키는 문자와 공백을 포함할 수 있습니다. 요청을 처리하는 데 필요하지 않으므로 제거할 수 있습니다.

WordPress 사이트의 코드를 축소하는 가장 쉬운 방법은 앞서 언급한 Autooptimize 플러그인과 같은 플러그인을 사용하는 것입니다.

대부분의 WordPress 캐싱 플러그인에는 WP Rocket, FlyingPress, WP Fastest Cache 등을 포함한 코드 축소 기능도 포함되어 있습니다.

또는 Cloudflare의 CDN을 사용하는 경우 Cloudflare가 코드를 축소하도록 할 수도 있습니다.

사이트 파일을 축소하면 HTTP 요청의 실행 시간이 빨라집니다. 더 가벼운 코드를 사용하면 웹 사이트 속도를 높이고 대량 요청을 최소화할 수 있습니다.

11. 이모티콘 비활성화

기본적으로 WordPress 이모티콘은 사이트에 추가 HTTP 요청을 추가합니다. 하나 이상의 HTTP 요청을 제거하려면 WordPress 이모티콘을 비활성화할 수 있습니다.

가장 간단한 옵션은 가벼운 Disable Emojis 플러그인을 설치하는 것입니다.

또는 이 코드를 하위 테마의 functions.php 파일이나 Code Snippets와 같은 코드 관리자 플러그인에 추가할 수 있습니다.

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

이러한 팁을 모두 구현한 후에는 HTTP 요청이 적은 사이트를 갖게 됩니다!

웹사이트에서 HTTP 요청 줄이기 🎯

일반적으로 웹사이트에 HTTP 요청이 많을수록 로드 속도가 느려집니다. 이는 사이트의 사용자 경험(UX)에 부정적인 영향을 미쳐 방문자가 콘텐츠를 읽거나 제품을 구매하지 않고 사이트를 떠날 수 있습니다.

웹 사이트 속도를 높이려면 가능한 한 많은 HTTP 요청을 제거 하고 남아 있는 HTTP 요청을 최적화하여 최대한 빠르게 로드해야 합니다.

이 게시물의 팁을 사용하면 두 가지 작업을 모두 수행하고 방문자를 위한 빠른 로딩 사이트를 만들 수 있습니다.

👉 그러나 사이트의 HTTP 요청을 최적화하는 것은 성능 퍼즐의 한 부분일 뿐임을 기억하십시오. 사이트를 빠르게 로드하려면 양질의 WordPress 호스팅도 필요합니다. 최고의 WordPress 호스팅 요약을 확인하여 최고의 옵션을 확인하세요.

WordPress에서 HTTP 요청 수를 줄이는 것에 대해 질문이 있습니까? 아래 의견 섹션에서 문의하십시오!