[WP] 워드프레스 렌더링 차단 리소스 제거 방법 2가지

워드프레스를 이용하다 보면 ‘렌더링 차단 리소스 제거‘ 설정이란 내용을 플러그인 사용 중 본 경우가 있을 수 있습니다. 워드프레스 렌더링이란 무엇이며, ‘렌더링‘과 ‘렌더링 차단 리소스 제거‘는 무엇을 뜻 하는지 풀어 보도록 하겠습니다.

먼저 렌더링은 HTML, CSS, 자바스크립트 등 웹 사이트의 문서가 웹 브라우저에서 출력 되는 과정입니다. 웹 페이지에 접속 했을 때 브라우저에 표시되는 것이 렌더링입니다.

렌더링 차단 리소스 제거 포인트

브라우저는 CSS, 자바스크립트에 대한 참조를 발견할 때마다 중지하고 파일을 요청합니다. 이후 서버에서 다운로드 할 때까지 기다린 다음 렌더링이 실행됩니다. 이와 같이 렌더링이 차단된 리소스가 생기게 됩니다.

결국 웹 페이지에 접속한 방문자에게는 일정 시간 동안 페이지가 비어 있는 것처럼 불안정하게 표시될 수 있습니다.

렌더링이 차단된 리소스 제거가 필요한 시점입니다.

1. 렌더링 차단 CSS 설정

렌더링을 차단하는 CSS는 사용하지 않는 CSS 제거와 비동기식으로 CSS 로드를 통해 설정해 주면 됩니다.

2. 지연된 자바스크립트 로드(Load JavaScript deferred)

웹 페이지를 불러올 때, 자바스크립트 파일이 로딩되지 않아 렌더링(화면 출력)이 차단되는 상황이 발생할 수 있습니다. 이런 경우, 웹 페이지가 느리게 불러와지는 것처럼 느껴지거나 사용자가 웹 페이지를 이용하는 데 불편함을 느낄 수 있습니다.

하지만 자바스크립트를 로딩하는 방법 중에는 “defer^(지연)“라는 태그를 사용하여 자바스크립트 파일을 로딩할 수 있습니다. 이렇게 하면 웹 페이지를 불러오는 동안 자바스크립트 파일이 차단되는 것을 방지할 수 있습니다. 이러한 방식으로 자바스크립트 파일을 로딩하면 렌더링이 차단된 리소스를 제거할 수 있으며, 웹 페이지를 빠르고 효율적으로 로딩할 수 있습니다.

결론은 웹 페이지의 렌더링 속도를 높이기 위해, 렌더링 차단 리소스를 최소화해야 합니다. 이를 위해서는 CSS 파일과 자바스크립트 파일을 로딩할 때, 렌더링이 차단되는 문제를 해결해야 합니다.

이를 위해서는 CSS 파일을 CSS 제거와 비동기^(async) 식으로 CSS 로드를 이용하여 로딩하거나, 자바스크립트 파일을 로딩할 때 로딩 지연 기능을 이용하여 로딩 순서를 조정할 수 있습니다. 이렇게 하면 렌더링 차단을 최소화할 수 있으며, 웹 페이지의 로딩 속도를 빠르게 할 수 있습니다.

대부분의 워드프레스 캐시 플러그인이나 최적화 플러그인에서는 이러한 기능들을 쉽게 설정할 수 있습니다. 이를 이용하여 웹 페이지의 성능을 향상 시킬 수 있습니다.

워드프레스 렌더링 최적화 재 정리

리소스 제거를 통한 워드프레스 렌더링 최적화 방법에 대해 알아 봤습니다. 좀 더 깊게 알아 보겠습니다. 앞서 언급한 차단 리소스 제거에 대한 포인트 부분을 포함한 내용을 정리하자면 다음과 같습니다.

※렌더링 차단 리소스 제거 정리> HTML, CSS 및 JavaScript 리소스를 축소, 압축 및 캐시
- CSS 파일 최소화
· link태그에 미디어 쿼리 사용 CSS 로드
· CSS 파일 결합
· 인라인 크리티컬 CSS를 적용
· CSS 파일의 로딩 순서를 최적화
- 자바스크립트 파일 최소화
· defer 스크립트 태그 사용해서 지연시키기
· async 스크립트 태그 사용 자바스크립트 비동기
· 인라인 자바스크립트 및 스크립트 태그 문서 하단 이동