워드프레스 사이트에서 HTTP 요청을 줄이는 방법
마지막 업데이트 2023년 9월 4일 월요일
속도는 검색 엔진에서 사이트의 순위를 결정하는 중요한 요소입니다. 검색 엔진과 사용자 모두 빠르게 로드되는 웹사이트를 선호하며, 빠른 웹사이트는 뛰어난 사 용자 경험을 제공하기 때문입니다. 따라서 이는 중요한 순위 요소입니다. 사이트의 로딩 속도가 상대적으로 느리고 사이트가 예상대로 작동하지 않는다면 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는 웹사이트에 사용할 때 스크롤 위로 표시되는 부분에 대한 콘텐츠를 표시하는 지연 로드 기능을 제공합니다.
그 외에도 여러 다른 플러그인이 워드프레스 웹사이트에 지연 로딩 기능을 제공합니다. 따라서 어떤 것이 가장 적합한지 온라인에서 확인할 수 있습니다.