워드프레스 사이트에서 HTTP 요청을 줄이는 방법

속도는 검색 엔진에서 사이트의 순위를 결정하는 중요한 요소입니다. 검색 엔진과 사용자 모두 빠르게 로드되는 웹사이트를 선호하며, 빠른 웹사이트는 뛰어난 사용자 경험을 제공하기 때문입니다. 따라서 이는 중요한 순위 요소입니다. 사이트의 로딩 속도가 상대적으로 느리고 사이트가 예상대로 작동하지 않는다면 HTTP 요청이 많기 때문일 수 있습니다.

웹사이트를 처음 사용하거나 웹사이트의 핵심적인 부분에 대해 자세히 알아볼 필요가 있다면 HTTP 요청이 많을수록 웹사이트 속도가 느려진다는 사실을 알고 있어야 합니다. HTTP 요청 수를 줄이면 웹사이트의 로딩 시간을 개선할 수 있습니다. 어떻게 해야 할지 고민 중이신가요? 저희가 도와드리겠습니다.

HTTP 요청을 줄이고 웹사이트의 성능과 속도를 높이는 데 도움이 되는 몇 가지 확실한 방법을 알려드리겠습니다.

HTTP 요청이란 무엇인가요?

HTTP는 사용자가 온라인에서 정보를 요청할 때 따르는 통신 프로토콜입니다. 서버는 인터넷을 통해 CSS, HTML 파일, 이미지, 동영상 등의 데이터와 콘텐츠를 사용자에게 전달합니다.

웹은 서버에서 호스팅되는 많은 콘텐츠나 정보가 있는 방대한 공간입니다. 사용자가 인터넷에서 사용 가능한 정보에 액세스하려고 하면 브라우저에서 요청을 전송하고 응답을 받습니다.

요청이 없으면 사용자와 서버 간에 효과적인 통신이 이루어질 수 없습니다. 따라서 HTTP 요청은 서버와 사용자 사이의 통신 계층입니다. 클라이언트 서버는 HTTP(하이퍼텍스트 전송 프로토콜)라는 메시지를 전송하며, 요청 메시지는 헤더, 요청 줄, 본문 등 세 가지 부분으로 구성됩니다.

HTTP 요청을 기준으로 워드프레스 사이트의 속도와 성능에 관해서는 다음 수치를 알아야 합니다.

• 웹사이트는 모든 페이지에 대해 HTTP 요청이 50개 미만으로 유지될 때 정상이며 적절한 성능을 발휘합니다.

• 페이지당 요청 수가 25개 미만이면 웹사이트는 뛰어난 성능을 제공합니다.

• 수락된 HTTP 요청의 평균 수는 70개이며 웹사이트의 성능은 양호한 수준입니다.

HTTP 요청이 너무 많으면 속도가 느려지므로 웹사이트를 건강하게 유지하는 것이 좋습니다. 웹사이트의 성능을 정상적으로 유지해야 하는 이유를 살펴보겠습니다.

HTTP 요청을 줄여야 하는 이유는 무엇인가요?

웹사이트의 HTTP 요청을 줄여야 하는 가장 큰 이유 중 하나는 성능과 속도를 유지하기 위해서입니다. 그러나 세부 사항을 자세히 살펴보면 웹사이트 응답 시간의 80%가 일반적으로 프런트엔드 자체에서 소비된다는 것을 알 수 있습니다. 하지만 웹사이트의 로딩 시간에 영향을 미치는 중요한 요소로는 스타일시트, 스크립트, 이미지 등이 있습니다.

이러한 구성 요소는 콘텐츠를 표시하는 데 필수적이며, 사용자와 서버 간의 통신을 설정하는 데 시간이 걸립니다. 따라서 HTTP 요청 횟수를 줄여야 하는 또 다른 주된 이유는 웹사이트의 핵심 웹 바이탈을 건강하게 유지하기 위해서입니다.

HTTP 요청을 줄여야 하는 중요한 이유를 요약하면 다음과 같습니다.

• 워드프레스 사이트에 파일이 많으면 HTTP 요청이 많이 발생합니다.

• HTTP 요청이 길어지면 웹사이트의 실제 로드 시간이 길어집니다.

• 웹사이트의 파일이 크고 무거울수록 HTTP 요청이 길어집니다.

• HTTP 요청을 줄이면 LCP에 긍정적인 영향을 미칩니다.

이제 HTTP 요청 횟수를 줄이기 위한 필수 사항에 대해 알아봤으니 브라우저를 통해 웹사이트에서 정보를 가져올 수 있다는 점도 이해해야 합니다.

이를 줄일 수 있는 몇 가지 방법을 살펴보겠습니다.

웹사이트에 대한 HTTP 요청을 줄이는 방법

HTTP 요청이 적다는 것은 다운로드할 바이트가 적다는 것을 의미합니다. 그러나 이 작업은 생각보다 어렵습니다. 대신 최적화가 어렵습니다.

저희는 서버가 수행해야 하는 HTTP 요청을 줄이기 위한 몇 가지 최선의 방법을 연구했습니다. 이 목록에는 플러그인 및 수동 접근 방식을 통해 HTTP 요청을 줄이는 완벽한 방법이 포함되어 있습니다.

더 이상 고민하지 말고 시작해 보겠습니다.

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

CSS 스프라이트를 사용하는 것은 이미지 리소스에 대한 HTTP 요청을 줄이는 가장 좋은 방법 중 하나입니다. 안타깝게도 웹사이트에 사용되는 모든 CSS 파일은 렌더링 차단 기능이 있으므로 CSS 파일을 더 많이 추가할수록 무거워지고 웹사이트 속도가 느려집니다.

이 문제를 방지하려면 웹사이트의 모든 이미지를 하나의 파일에 결합하고 필요한 경우 최적화하세요. 이렇게 하면 필요한 곳에 이미지의 일부만 표시하기 위해 CSS를 사용하는 CSS 스프라이트 트릭을 활용할 수 있습니다. 인터넷에서 몇 가지 웹 기반 도구를 사용할 수 있습니다. 이러한 강력한 도구의 도움으로 이미지를 최적화할 수 있습니다.

널리 사용되는 도구의 몇 가지 좋은 예로는 CSS 스프라이트 도구, CSS 스프라이트 편집기 등이 있습니다.

이미지에 지연 로딩 활성화하기

지연 로딩은 브라우저의 뷰포트 외부에서 이미지 로딩을 연기하는 기능입니다. 하지만 사용자가 사이트를 방문하고 맨 아래까지 스크롤하지 않으면 거기에 배치된 이미지가 로드되지 않습니다. 지연 로딩 스크립트를 사용하면 이 문제를 해결할 수 있습니다. 웹사이트의 경우 접힌 부분 위에 배치된 이미지가 로드되므로 HTTP 요청 횟수가 줄어듭니다.

개발자에게 웹사이트에 지연 로딩 스크립트를 포함하도록 요청하거나 플러그인을 사용할 수 있습니다. 예를 들어 WP Rockets는 웹사이트에 사용할 때 스크롤 위로 표시되는 부분에 대한 콘텐츠를 표시하는 지연 로드 기능을 제공합니다.

그 외에도 여러 다른 플러그인이 워드프레스 웹사이트에 지연 로딩 기능을 제공합니다. 따라서 어떤 것이 가장 적합한지 온라인에서 확인할 수 있습니다. 느린 웹사이트 속도를 높이는 방법을 알아보려면 이 글을 확인하세요.

무거운 플러그인을 가벼운 플러그인으로 교체하기

HTTP 요청 수를 줄이는 가장 확실한 방법 중 하나는 웹사이트에 설치된 플러그인의 크기를 확인하는 것입니다. 웹사이트 속도가 느려지는 이유 중 하나는 하나 이상의 플러그인이 웹사이트에 더 많은 작업을 수행하고 더 많은 HTTP 요청을 생성하기 때문일 수 있습니다.

플러그인을 경량 또는 중량으로 식별하려면 전문성과 코드 품질, 코드 실행의 효율성, 기능 및 파일 크기 등 몇 가지 사항을 확인해야 합니다.

웹사이트 속도를 저하시키는 플러그인을 표시하는 몇 가지 다른 방법도 있습니다. 이러한 플러그인을 식별한 후 플래그를 지정할 수 있습니다. 아래 언급된 5단계 진단에 따라 더 나은 결정을 내리세요;

1. Pingdom이라는 도구를 사용하여 웹사이트의 성능 테스트를 실행하여 웹사이트가 수행해야 하는 HTTP 요청 수를 확인합니다. 또한 점수를 기록하세요.

2. 하나의 플러그인 A를 활성화하고 테스트를 다시 실행합니다. 그런 다음 점수를 적을 수 있습니다.

3. 첫 번째 플러그인을 비활성화한 다음 다른 플러그인 B를 설치하고 동일한 감사를 다시 실행합니다.

4. 각 플러그인의 HTTP 요청을 비교한 다음 어떤 플러그인이 더 많은 요청을 하는지 확인합니다.

5. 한 플러그인이 다른 플러그인보다 요청 횟수가 적으면 무거운 플러그인을 삭제하고 가벼운 플러그인을 유지하세요. 동일한 작업을 수행하지만 더 가벼운 대체 옵션이 많이 있습니다.

웹사이트에서 외부 스크립트 줄이기

웹사이트에 타사 스크립트가 로드될 때마다 HTTP 요청이 이루어져야 합니다. 즉, 타사 스크립트의 수를 줄이면 요청도 함께 줄어듭니다.

반면에 HTTP 요청이 많아지면 웹사이트 속도가 느려져 성능에 영향을 미칩니다. 따라서 웹사이트와 써드파티의 모든 통합을 추적하여 웹사이트 속도를 저하시키는 자산을 파악해야 합니다.

여러 HTTP 요청으로 인해 네트워크에서 리소스를 강제로 가져와야 하므로 웹사이트의 성능을 유지해야 합니다. 워드프레스에서 서버 응답 시간을 줄이는 방법을 알아보려면 이 글을 확인하세요.

여기서 말하는 외부 스크립트는 일반적으로 Facebook 픽셀, 애널리틱스 태그, 소셜 공유 버튼, 유튜브 동영상, A/B 테스트 태그 및 기타 소스에서 가져온 것입니다. 웹사이트의 성능을 개선하려면 요청 수를 늘리는 파일을 식별하는 것이 중요합니다. 타사 요청을 수동으로 최적화하거나 플러그인을 사용하여 최적화할 수 있습니다.

HTML, CSS 및 JavaScript 축소

HTML, CSS, 자바스크립트 코드를 줄이면 불필요한 공백, 주석, 원치 않는 문자를 제거하는 데 도움이 됩니다. 또한 파일 크기를 줄여 더 가볍게 만드는 데 도움이 됩니다.

이 기술은 HTML, CSS, 자바스크립트의 세 가지 파일 모두에 적용할 수 있습니다. 백엔드에서 코드를 정리하는 것이므로 최종 사용자에게 전달되는 데는 영향을 미치지 않습니다.

수동으로, 온라인으로, 또는 도구나 플러그인을 사용하여 파일을 축소할 수 있습니다.

• HTML 파일을 최소화하려면 코드 시트를 열고 주석, 줄 바꿈 등과 같은 불필요한 요소를 모두 제거하면 파일이 더 가벼워집니다.

• CSS 파일을 최소화하려면 여분의 공백과 주석을 모두 제거하세요. 또한 클래스를 제거하고 ID를 줄이며 가능한 한 변수 이름을 제거해야 합니다.

• JS 파일을 최소화하려면 소스 코드에서 여분의 공백과 JS 주석을 제거해야 합니다. 또한 모든 배열을 객체로 바꾸고, 기본 상수 표현식에 대한 답을 찾고, 조건문을 최적화하여 최상의 결과를 얻으세요.

또는 플러그인을 사용하여 파일을 축소할 때는 축소하려는 파일의 확인란을 선택하면 작업이 자동으로 수행됩니다. 이 과정에서 WP Rocket을 사용하는 경우 파일 최적화를 위한 별도의 섹션이 있습니다.

CSS와 자바스크립트 결합

의심할 여지 없이 사이트에서 생성되는 HTTP 요청을 줄이는 가장 쉬운 방법 중 하나는 CSS와 자바스크립트 파일을 결합하는 것입니다. 안타깝게도 워드프레스 플러그인과 테마는 수많은 JS와 CSS 스타일시트를 로드해야 합니다. 이를 위해 브라우저는 웹 페이지를 렌더링하기 위한 모든 리소스를 로드해야 합니다. 이는 결국 HTTP 요청의 수를 증가시키는 결과를 초래합니다.

CSS와 자바스크립트 파일을 편리하게 결합할 수 있는 여러 온라인 도구가 있습니다. 스마트옵티마이저, CSS 크러시, JSCompress.com 등이 최고의 옵션 중 일부입니다. 이러한 웹사이트에 워드프레스 사이트의 결합된 파일을 업로드하면 사이트 속도가 빨라지는 것을 경험할 수 있습니다. 또한 HTTP 요청을 줄여 웹사이트를 최적화하는 데 도움이 됩니다.

이미지 최적화 및 중요하지 않은 이미지 모두 삭제하기

이미지를 CSS 스프라이트와 결합하는 데 도움이 되는 플러그인은 아직 없지만 웹사이트의 이미지를 최적화하는 데 도움이 되는 몇 가지 놀라운 플러그인이 있습니다. 물론 이미지는 탁월한 사용자 경험을 위해 매우 중요하지만 이미지를 추가할 때마다 추가 HTTP 요청이 발생한다는 사실을 알아야 합니다. 따라서 모든 이미지를 현명하게 선택하고 콘텐츠에 가치를 더하는 이미지만 포함하세요.

또는 웹사이트에 이미지를 추가하기 전에 모든 이미지를 최적화하세요. 이미지를 최적화한다는 것은 이미지의 품질을 손상시키지 않도록 이미지의 크기를 줄여야 한다는 뜻입니다.

웹사이트에 흐릿한 이미지가 있는 경우에도 마찬가지입니다. 이미지의 품질은 높지만 무겁지 않아야 하며, 콘텐츠와 문맥이 잘 보이도록 해야 합니다.

워드프레스에서 이미지를 최적화하는 방법은 다음과 같습니다.

최상의 결과를 위해 사용할 수 있는 몇 가지 훌륭한 크기 조정 도구가 있습니다. 포토샵, Mac용 미리보기, 김프 등이 그 중 일부입니다. 하지만 이미지의 파일 크기를 줄이면 HTTP 요청 횟수에는 영향을 미치지 않지만 웹사이트가 가벼워져 로드 시간이 줄어든다는 점에 유의하세요.

필요한 경우에만 스크립트 로드

이는 웹사이트가 수행해야 하는 HTTP 요청 횟수를 최소화하기 위해 취할 수 있는 또 다른 완전 방지 단계입니다. 물론 스크립트는 필요할 때만 로드하고 스크립트가 필요하지 않은 페이지에서는 스크립트를 제거해야 합니다. 즉, 감사를 수행하여 로드할 필요가 없는 페이지에서 스크립트와 플러그인을 제거하세요.

특정 페이지나 글에서 스크립트 로드를 비활성화하는 데 사용할 수 있는 몇 가지 놀라운 플러그인이 있습니다. 또한 이러한 플러그인을 사용하면 필요할 때만 스크립트가 로드되도록 할 수 있습니다.

예를 들어 Perfmatters라는 플러그인을 사용하면 필요할 때만 페이지 또는 글에 스크립트가 로드되도록 할 수 있습니다. 또 다른 훌륭한 플러그인은 사용자 친화적이지 않지만 훌륭한 기능을 수행하는 Asset Cleanup Pro입니다.

자주 묻는 질문

다음은 자주 묻는 몇 가지 질문입니다.

Q. 워드프레스 웹사이트 속도를 늦추는 가장 큰 요인은 무엇인가요?

여러 가지 요인으로 인해 워드프레스 웹사이트 속도가 느려집니다.

최적화되지 않은 이미지 표시/추가, 백그라운드에서 실행되는 수많은 스크립트, 느린 워드프레스 테마 또는 이전 버전의 PHP 사용 등 몇 가지 주요 요인이 있습니다.

따라서 웹사이트의 속도가 동등한 수준인지 확인하기 위해 다양한 요소를 점검하세요.

Q. 플러그인을 사용하는 것 외에 HTTP 요청을 줄일 수 있는 방법이 있나요?

예, 웹사이트의 백엔드에서 작업하는 개발자 팀이 있다면 웹사이트의 HTTP 요청을 줄이기 위해 필요한 단계를 수행하도록 쉽게 요청할 수 있습니다.

그러나 플러그인 사용을 선호하지 않는 경우 HTTP 요청을 증가시키는 모든 측면을 신속하게 수정할 수 있는 몇 가지 훌륭한 수동 방법이 있습니다.

Q. 서버가 너무 많은 요청을 받으면 어떻게 되나요?

브라우저가 서버로 보내는 요청이 너무 많으면 웹사이트의 성능에 영향을 미칩니다. 예를 들어, 여러 요청은 무차별 대입 또는 DDoS(분산 서비스 거부) 공격을 나타냅니다.

또한 HTTP는 사이트를 멀웨어 활동으로부터 보호하기 위해 사용자의 IP 주소를 차단합니다. 결과적으로 사용자는 웹사이트에 액세스할 수 없습니다.

Q. HTTP 요청을 줄이는 이유는 무엇인가요?

HTTP 요청을 줄이는 중요한 이유 중 하나는 웹사이트의 적절한 성능을 보장하기 위해서입니다.

웹사이트의 HTTP 요청이 많을수록 사용자의 웹사이트 로딩 속도가 느려집니다. 하지만 HTTP 요청을 처리하고 요청 부하를 최적화하면 웹사이트의 성능이 크게 향상됩니다.

마무리하기

웹사이트의 우수한 성능과 빠른 로딩을 유지하려면 HTTP 요청 수를 줄여야 합니다. 50개 이내로 유지하는 것이 웹사이트가 예상대로 작동하는 데 도움이 됩니다. 위에서 설명한 플러그인의 도움으로 HTTP 요청을 줄이고 요청이 그 수를 초과하지 않도록 할 수 있습니다.

플러그인은 불필요한 요청을 줄이는 데 도움이 되며, 가장 좋은 점은 기술적인 지식이 필요하지 않다는 것입니다. 플러그인을 사용하면 더 많은 작업을 하지 않아도 최상의 성능 결과를 얻을 수 있습니다. HTTP 요청이 줄어들면 검색 엔진 순위에서 사이트의 순위를 빠르게 높일 수 있습니다.