WordPress에서 렌더링 차단 리소스를 제거하는 방법 [Plugins or Manually]
오늘날의 치열한 디지털 환경에서 웹사이트 속도는 온라인 사업의 성공에 결정적인 영향을 미칩니다. Google과 같은 주요 검색 엔진은 쾌적한 사용자 경험의 중요성을 인지하고 있으며, 빠르게 로딩되는 웹사이트를 우선적으로 고려합니다.
연구 결과에 따르면, 페이지 로딩 속도가 개선되면 사용자 참여도와 전환율이 높아지는 것으로 나타났습니다. 실제로 페이지 로딩 시간이 1초만 지연되어도 고객 전환율이 7% 감소할 수 있습니다. 이러한 점을 고려할 때 웹사이트 소유자는 웹사이트 성능에 집중해야 합니다.
Google은 웹사이트 성능을 중요한 요소로 간주하며, 검색 결과 순위를 결정할 때 이를 반영합니다. 따라서 로딩 속도가 빠른 웹사이트는 검색 결과에서 더 높은 순위를 차지할 가능성이 높아져 더 많은 방문자를 유치하고 궁극적으로 더 많은 수익을 창출할 수 있습니다. 하지만 Google의 요구 사항을 충족하고 웹사이트 로딩 속도를 향상시키려면 어떻게 해야 할까요?
웹사이트 로딩 시간을 지연시키는 요인 중 하나는 CSS 및 JavaScript 파일과 같은 리소스입니다. 이러한 리소스를 최적화하는 것이 중요합니다.
하지만 이러한 리소스를 직접 제거하는 것은 특히 기술적인 지식이 부족한 사용자에게는 어렵고 시간이 많이 소요될 수 있습니다.
본 기사에서는 렌더링 차단 리소스가 무엇인지, 웹사이트 성능에 미치는 영향은 무엇인지 살펴보고, WordPress 사이트에서 이러한 리소스를 제거하기 위한 단계별 지침을 제공합니다. 이제 웹사이트 최적화를 시작하여 속도와 성공을 모두 잡아봅시다!
렌더링 차단 리소스란 무엇인가?
웹 페이지를 표시하기 전에 반드시 로드해야 하는 모든 리소스는 렌더링 차단 리소스로 간주됩니다. 이러한 리소스는 웹사이트의 성능과 효율성에 영향을 주어 페이지 로딩 시간을 늘립니다.
CSS 또는 JavaScript 파일이 웹 페이지 렌더링을 지연시키는 경우, 해당 파일은 렌더링 차단 리소스로 간주됩니다. 하지만 페이지 로드 시 중요도는 즉각적인 필요성에 따라 달라질 수 있습니다.
사용자가 웹 페이지에 접속하면 브라우저는 먼저 HTML 코드를 처리하여 페이지 상단 부분의 콘텐츠를 표시합니다. 이때 브라우저가 CSS 및 JavaScript 파일을 발견하면 해당 파일들을 다운로드하여 처리합니다. 만약 리소스 파일에 불필요한 코드나 사용하지 않는 부분이 있다면, 웹 페이지 로딩에 더 많은 시간이 소요됩니다.
렌더링 차단 리소스의 종류
일반적으로 CSS 및 JavaScript와 같은 리소스 파일은 WordPress에서 렌더링 차단 리소스로 간주됩니다. 브라우저는 이러한 리소스를 중요하게 여기고 페이지를 표시하기 전에 로드해야 한다고 판단합니다. 하지만 이것이 전부는 아닙니다. 웹 페이지 렌더링을 차단하는 다른 유형의 리소스 파일도 존재합니다.
다음은 렌더링 차단 리소스의 목록입니다.
CSS 스타일시트
웹 페이지의 디자인과 외관은 CSS 스타일시트에 의해 결정됩니다. CSS 파일이 HTML 페이지의 `
`` 섹션의 JavaScript 파일
JavaScript는 웹 페이지에 동적인 동작과 상호작용 기능을 추가하는 데 사용되는 스크립트 언어입니다. JavaScript 파일이 HTML 페이지의 `
` 섹션에 위치하면 렌더링 차단 리소스로 간주됩니다.글꼴
웹 페이지의 텍스트는 다양한 글꼴을 사용하여 표시됩니다. 글꼴 또한 HTML 페이지의 `
` 섹션에 포함되어 있거나 로컬 서버 또는 CDN에서 로드되는 경우 렌더링 차단 리소스로 간주됩니다.HTML 가져오기
이는 웹 페이지가 다른 HTML 문서의 요소를 포함할 수 있도록 하는 이전 HTML 기능입니다. HTML 가져오기는 현재 자주 사용되지는 않지만 일부 오래된 사이트에서 여전히 발견될 수 있습니다. HTML 가져오기도 렌더링 차단 리소스로 분류됩니다.
렌더링 차단 리소스가 웹 페이지에 미치는 악영향
WordPress 웹사이트에 렌더링 차단 리소스가 많이 포함되어 있으면 검색 결과에서 경쟁에 뒤쳐질 수 있습니다. 현재 검색 결과에서 상위권을 차지하고 있더라도 성능이 더 뛰어난 사이트에 밀려날 수 있습니다.
렌더링 차단 리소스가 있는 웹사이트는 사이트를 렌더링하는 동안 추가 파일을 로드합니다. 사용자는 웹사이트를 보기 전에 파일이 처리될 때까지 기다려야 합니다. 이러한 리소스는 웹사이트의 다음과 같은 성능 지표에 영향을 미칩니다.
- 최대 콘텐츠 페인트(LCP): 페이지의 주요 콘텐츠를 로드하는 데 걸리는 시간을 측정합니다.
- 첫 콘텐츠 페인트(FCP): 브라우저가 웹사이트에서 첫 번째 DOM(문서 객체 모델) 콘텐츠를 렌더링하는 데 걸리는 시간입니다.
- 총 차단 시간(TBT): FCP에서 페이지가 완전히 상호작용 가능해질 때까지 걸리는 시간을 평가합니다.
렌더링 차단 리소스는 페이지 로딩에 필수적이지 않지만 웹사이트 또는 웹 페이지 렌더링을 방해할 수 있습니다. 따라서 사용자가 웹사이트를 원활하게 탐색할 수 있도록 이러한 리소스를 제거하는 것이 중요합니다.
이제 렌더링 차단이 웹 페이지에서 왜 심각한 문제인지 자세히 살펴보겠습니다.
느린 페이지 로딩 시간
렌더링 차단 리소스의 주요 단점 중 하나는 웹사이트 로딩 속도가 느려진다는 것입니다. 불필요한 요소가 포함된 리소스 파일을 가진 웹 페이지는 로딩 속도가 느립니다. 이는 검색 결과 순위에 영향을 미치고 사용자 참여도를 낮추며 이탈률을 높입니다.
차단된 렌더링
브라우저는 렌더링 차단 리소스를 찾아서 처리하려고 하므로, 이러한 리소스를 발견하면 웹 페이지 렌더링을 중단합니다.
결과적으로 사용자는 페이지가 응답하지 않거나 느린 렌더링 속도 때문에 불만을 느끼고 웹사이트를 떠날 수 있습니다.
또한 리소스 로딩 속도가 느리면 브라우저가 로딩 시도를 중단할 수도 있습니다. 이는 페이지가 손상되거나 정보가 누락되는 결과를 초래할 수 있습니다.
사용자 참여 감소
렌더링 지연은 사용자 경험 저하로 이어집니다. 사용자는 빠른 로딩 속도를 기대하며, 일반적으로 로딩 속도가 느린 웹사이트는 바로 종료합니다. 이들은 더 빠르게 로딩되는 사이트를 찾아 떠날 것입니다.
로딩 속도가 느린 웹사이트는 고객 만족도와 브랜드 평판에 부정적인 영향을 미칩니다. 이는 웹사이트 트래픽과 전환율을 크게 감소시킵니다.
WordPress에서 렌더링 차단 리소스를 제거하는 방법은 여러 가지가 있습니다. 이 문서에서는 렌더링 차단 리소스를 수동으로 제거하는 방법과 함께, 인기 있는 WordPress 플러그인을 사용하여 제거하는 방법도 살펴보겠습니다.
렌더링 차단 리소스 수동으로 제거
수동으로 처리하는 과정이 다소 복잡하게 느껴질 수 있지만, 실망하지 마십시오. 이 섹션을 통해 WordPress 성능 최적화에 대한 더 깊은 지식을 얻을 수 있을 것입니다. 먼저 아래 비디오를 시청하여 논의될 용어들을 익히는 것이 좋습니다.
#1. 렌더링 차단 리소스 식별
웹사이트에서 렌더링 차단 리소스를 제거하기 전에 먼저 어떤 리소스가 해당되는지 찾아야 합니다. WordPress 웹사이트에서 렌더링 차단 리소스를 찾는 방법은 다음과 같습니다.
- Google PageSpeed Insights 웹사이트로 이동합니다.
- 검색창에 웹사이트 URL을 입력합니다.
- "분석" 버튼을 클릭하여 웹사이트에 대한 정보를 얻습니다.
- 페이지 아래로 스크롤하여 "기회" 섹션을 확인합니다.
- 웹사이트에 렌더링 차단 리소스가 있다면 해당 리소스가 목록에 표시됩니다.
#2. JavaScript 파일에 "defer" 및 "async" 속성 사용
렌더링 차단 리소스를 식별한 후에는 웹사이트 성능을 향상시키기 위해 제거해야 합니다. JavaScript 파일에 "defer" 또는 "async" 속성을 추가하는 것은 효과적인 방법 중 하나입니다.
"defer" 속성을 사용하면 브라우저가 JavaScript 파일을 다운로드한 후 페이지 로딩이 완료되고 콘텐츠가 표시될 준비가 되었을 때 실행합니다.
따라서 페이지의 다른 요소는 JavaScript 파일과 동시에 로드할 수 있습니다. 이는 페이지 로딩 시간을 단축하는 효과를 가져옵니다.
"async" 속성을 사용하면 브라우저가 JavaScript 파일을 사용 가능할 때마다 다운로드할 수 있습니다. 이는 페이지의 다른 요소를 차단하지 않고 동시에 수행됩니다. 결과적으로 JavaScript 파일이 다른 요소와 병렬로 로드되어 로딩 프로세스를 가속화할 수 있습니다.
"defer" 또는 "async" 속성을 적절히 활용하면 렌더링 차단 리소스를 제거하고 웹사이트 속도를 높일 수 있습니다.
#3. 조건부 CSS에 "media" 속성 사용
조건부 CSS에 "media" 속성을 활용하는 것은 렌더링 차단 리소스를 제거하는 또 다른 방법입니다. 이 속성을 사용하면 데스크톱 및 모바일 브라우저용으로 서로 다른 CSS 파일을 정의할 수 있습니다.
예를 들어 데스크톱 장치 전용 CSS 파일과 모바일 장치에 최적화된 별도의 CSS 파일을 포함할 수 있습니다. 데스크톱 장치에서 접속할 때 브라우저가 데스크톱 CSS 파일만 로드하도록 설정할 수 있습니다.
마찬가지로 모바일 CSS는 모바일 장치에서 접속할 때만 로드되도록 해야 합니다. 특정 장치에 맞는 CSS만 로드하면 렌더링 차단 리소스를 줄이고 사이트 로딩 속도를 높일 수 있습니다.
#4. 중요하지 않은 CSS 지연 로딩
조건부 CSS에 "media" 속성을 사용하는 것 외에도 중요하지 않은 CSS를 지연 로딩하는 것을 고려해볼 수 있습니다. 이 방법을 사용하면 우선 필수적인 CSS를 로드하고, 페이지 로딩 후 나머지 CSS를 로드합니다.
예를 들어 웹사이트의 모든 스타일을 포함하는 큰 CSS 파일이 있다고 가정해봅시다. 그러나 페이지의 스크롤 없이 보이는 부분에 콘텐츠를 표시하는 데는 CSS 파일의 일부분만 필요합니다. 중요하지 않은 CSS를 지연 로딩하여 스크롤 없이 보이는 콘텐츠를 빠르게 표시하고, 나머지 CSS는 페이지 로딩 후 로드할 수 있습니다.
#5. 사용하지 않는 CSS 및 JavaScript 제거
불필요한 CSS 및 JavaScript 파일을 제거하는 것은 렌더링 차단 리소스를 제거하는 또 다른 효과적인 방법입니다. 이러한 파일은 페이지를 무겁게 만들고 로딩 시간을 늘릴 수 있습니다.
사용하지 않는 CSS 및 JavaScript 파일을 제거하면 렌더링 차단 리소스 수를 줄일 수 있습니다. PurifyCSS 또는 UnusedCSS와 같은 도구를 사용하여 웹사이트에서 사용하지 않는 CSS 파일을 쉽게 제거할 수 있습니다.
#6. 사용자 정의 글꼴 로컬로 로드
사용자 정의 글꼴도 렌더링을 방해하는 리소스가 될 수 있습니다. Google Fonts와 같은 외부 소스에 의존하는 대신 자체 사용자 정의 글꼴을 로컬로 로드하면 이러한 문제를 해결할 수 있습니다.
사용자 정의 글꼴을 로컬로 로드하면 웹사이트 성능을 저해하지 않고도 빠르고 효율적으로 글꼴을 로드할 수 있습니다. 이는 웹사이트를 더 빠르고 반응성 있게 만들어 사용자 경험을 향상시킵니다.
#7. JavaScript 및 CSS 축소
마지막으로 CSS 및 JavaScript 파일을 축소하면 웹사이트의 성능을 향상시키는 데 도움이 됩니다. 축소는 공백 및 주석과 같은 불필요한 문자를 코드에서 제거하여 파일 크기를 줄여 로딩 속도를 높이는 방법입니다.
파일을 축소하려면 MinifyJS 또는 CSSNano와 같은 도구를 사용할 수 있습니다. 혹시 코드를 수정해야 할 경우를 대비하여 원본 파일의 사본을 보관하는 것이 좋습니다.
플러그인을 사용하여 렌더링 차단 리소스 제거
이 섹션에서는 WordPress 플러그인을 사용하여 렌더링 차단 리소스를 제거하는 방법을 살펴보겠습니다. 이 플러그인들은 WordPress에서 널리 사용되며 렌더링 차단 리소스를 빠르게 제거할 수 있도록 도와줍니다. 가장 큰 장점은 전문적인 지식이 없더라도 웹사이트 성능을 향상시킬 수 있다는 점입니다.
#1. W3 Total Cache
W3 Total Cache(W3TC)는 WordPress 웹사이트의 전반적인 사용자 경험을 향상시키는 데 도움을 주는 강력한 플러그인입니다. 렌더링 차단 리소스를 제거하는 것 외에도 SEO, 핵심 웹 바이탈 등을 개선하는 데 기여합니다. 플러그인은 콘텐츠 전송 네트워크 통합과 같은 고급 기능을 제공하여 모범 사례를 구현합니다.
렌더링 차단 리소스를 제거하려면 W3 Total Cache 플러그인을 설치 및 활성화한 다음 아래 단계를 따르십시오.
- WordPress 대시보드의 "성능" 섹션에서 "일반 설정"을 클릭합니다.
- "축소" 제목 아래에서 축소를 활성화하고 축소 모드를 "수동"으로 선택합니다.
- "모든 설정 저장"을 클릭합니다.
- Google PageSpeed Insights를 사용하여 모든 렌더링 차단 JavaScript 및 CSS 파일을 수집합니다.
- "성능" > "축소"로 이동합니다.
- "JavaScript" 섹션에서 먼저 "JS 축소 설정"을 활성화합니다. 그런 다음 "영역 작업" 섹션에서 "Before 태그"에 대해 "defer" 유형을 사용하여 "Non-blocking"을 선택합니다.
- "JS 파일 관리"로 이동하여 활성화된 테마를 선택하고 "스크립트 추가" 버튼을 클릭합니다. Google PageSpeed Insights에서 스캔한 문제가 있는 JavaScript URL을 수집하여 해당 필드에 붙여넣습니다.
- 이제 "CSS" 섹션까지 아래로 스크롤합니다. "CSS 파일 관리" 섹션의 드롭다운 메뉴에서 테마를 선택하고 "스타일시트 추가"를 클릭합니다. 이전 단계와 마찬가지로 PageSpeed Insights에서 수집한 문제가 있는 URL을 복사하여 붙여넣습니다.
- 모든 설정이 완료되면 "Save Settings & Purge" 버튼을 클릭하여 실행합니다.
#2. JCH Optimize
JCH Optimize는 Google PageSpeed Insights에서 측정한 WordPress 웹사이트 성능을 향상시키는 데 특화된 플러그인입니다. FCP(First Contentful Paint), LCP(Largest Contentful Paint), SI(Speed Index), CLS(Cumulative Layout Shift), TTI(Time to Interactive)와 같은 지표들을 개선합니다.
이를 통해 전반적인 사용자 경험과 웹사이트 성능을 크게 향상시킬 수 있습니다.
JCH Optimize를 설치 및 활성화한 후 다음 단계를 따라 렌더링 차단 리소스를 제거하십시오.
- "설정" > "JCH Optimize"로 이동하고 아래로 스크롤하여 "기본 기능 설정" 섹션으로 이동합니다.
- CSS 렌더링 차단을 제거하려면 "CSS 제공 최적화"를 활성화합니다. 이 기능은 각 웹 페이지에서 스크롤 없이 보이는 부분의 콘텐츠를 표시하는 데 필요한 필수 CSS를 자동으로 결정합니다. 또한 이 CSS 코드를 각 페이지의 HTML 콘텐츠의 `` 섹션에 직접 삽입합니다.
- "Preload Links" 기능은 연결된 CSS 파일을 비동기적으로 로드하는 데 사용됩니다.
- JavaScript 렌더링 차단 리소스를 제거하려면 `