웹 성능에 있어 중요한 요소 중 하나는 렌더링을 방해하는 리소스를 제거하는 것입니다. 렌더링을 방해하는 리소스는 페이지 렌더링을 지연시키며, 자바스크립트 및 CSS 파일 등이 여기에 해당합니다. 이러한 리소스는 브라우저가 페이지 렌더링을 시작하기 전에 로드되어야 합니다. 여기에는 외부 CSS 및 자바스크립트 파일뿐만 아니라 브라우저가 페이지를 표시하는 데 초기 지연을 유발할 수 있는 모든 요소가 포함됩니다.
페이지가 올바르게 표시되도록 하는 CSS 파일과 같이 렌더링을 차단하는 필수 리소스도 있지만, 최적화하거나 제거할 수 있는 리소스도 있습니다. 웹사이트 로딩 속도를 최대화하려면 렌더링을 차단하는 리소스를 식별하고 가능한 한 최소화하거나 제거하는 것이 중요합니다. PageSpeed 도구 .
렌더링을 차단하는 리소스를 어떻게 식별할 수 있습니까?
웹사이트 성능을 개선하려고 할 때 "렌더링 차단 리소스"라는 용어를 접할 수 있습니다. 이는 브라우저가 페이지 렌더링을 시작하기 전에 로드되어야 하는 모든 리소스를 의미합니다. 일반적으로 외부 CSS 및 JavaScript 파일이 여기에 포함됩니다.
Google Chrome 개발자 도구를 사용하여 렌더링을 차단하는 리소스를 확인할 수 있습니다 . Chrome에서 웹사이트를 로드한 다음 개발자 도구를 엽니다. '적용 범위' 탭을 클릭하고 '캐시 사용 안 함' 옵션이 선택되어 있는지 확인합니다. 이렇게 하면 웹사이트의 최신 버전을 볼 수 있습니다.
이제 웹사이트를 새로고침하세요. 개발자 도구에서 페이지 렌더링 시 로드되는 모든 리소스 목록을 확인할 수 있습니다. 빨간색 밑줄이 . 이러한 리소스가 렌더링을 차단하는 리소스입니다.
워드프레스에서 렌더링을 차단하는 리소스를 제거하는 3가지 방법은 무엇일까요?
워드프레스에서 이 작업을 수행하는 방법은 몇 가지가 있습니다.
방법 1:
중요한 CSS를 인라인하는 것 입니다 . 즉, 외부 스타일시트를 호출하는 대신 CSS 코드를 HTML 파일에 직접 삽입하는 것입니다. 이 방법은 페이지 수가 적은 소규모 웹사이트에는 효과적일 수 있지만, 규모가 큰 웹사이트에는 실용적이지 않습니다. 렌더링을 차단하는 리소스를 파악했다면, 해당 리소스를 제거하거나 인라인해야 합니다. 인라인이란 리소스를 코드에 직접 삽입하여 별도로 로드할 필요가 없도록 하는 것입니다. 이는 JavaScript 및 CSS 파일에 적용할 수 있습니다. Flyingpress, WP Rocket, Swift Performance 또는 LiteSpeed Cache 하면 이 과정을 자동화할 수 있습니다.
방법 2:
또 다른 방법은 초기 페이지 로드 후 중요하지 않은 리소스를 로드하는 것입니다. 이는 문서 파싱 후 JavaScript 파일을 로드하거나 `defer` 속성을 사용하는 등의 비동기 로딩 기법을
방법 3:
마지막으로, 각 페이지에 필요한 리소스 수를 줄이는 방법도 있습니다. 여러 개의 CSS 또는 JavaScript 파일을 하나의 파일로 통합하거나, 로딩 속도가 빠른 작은 이미지를 사용하는 것이 그 예입니다. 렌더링을 방해하는 리소스 수를 줄이면 웹사이트 로딩 속도를 크게 향상시키고 방문자에게 더 나은 사용자 경험을 제공할 수 있습니다. 코딩 작업에 익숙해지기까지 시간이 더 필요하다면, Autoptimize, WPRocket 등
경우에 따라 웹사이트가 정상적으로 작동하려면 렌더링을 차단하는 리소스가 필요할 수 있습니다. 이러한 경우에는 해당 리소스의 로딩 속도를 최적화하는 방법을 찾아야 합니다.
마무리
위의 조언을 따르셨다면 이제 웹사이트에서 렌더링을 차단하는 리소스를 대부분, 또는 전부 제거하셨을 것입니다. 그래도 도움이 필요하시면 저희 전문 WordPress 속도 최적화 서비스를 . 저희는 고품질의 사용자 친화적인 웹사이트를 구축하는 데 필수적인 웹사이트 성능과 속도를 향상시켜 드립니다.
서버 응답 시간, 파일 크기, 코드 품질 등 다른 요소들도 웹사이트 성능에 영향을 미칠 수 있다는 점을 기억하세요. 하지만 렌더링을 차단하는 리소스를 제거하는 것은 웹사이트 속도와 성능, 그리고 Core Web Vitals 점수를 향상시키는 데 매우 효과적인 방법입니다.
