렌더링 차단 리소스란 무엇이며 렌더링 차단 문제를 해결하는 방법

게시 됨: 2018-02-28

렌더링 차단 리소스는 웹사이트 로딩 속도가 느린 가장 일반적인 이유 중 하나입니다. 웹사이트가 충분히 빠르지 않으면 방문자의 사용자 경험뿐만 아니라 검색 엔진 순위도 손상됩니다. 나쁜 소식은 웹사이트가 느리면 고객과 수익을 잃게 된다는 것입니다.

그러나 좋은 소식도 있습니다. 렌더링 차단 리소스를 제거하여 웹사이트 속도를 향상시킬 수 있습니다. 이 기사에서는 렌더링 차단 리소스가 로딩 시간에 어떤 영향을 미치는지 설명하고 이를 수정하는 방법을 보여줍니다.

렌더링 차단 리소스란 무엇입니까?

가장 일반적인 렌더링 차단 리소스는 웹 페이지 헤드에 있는 JavaScript 및 CSS 파일입니다. 접힌 부분(또는 나머지 콘텐츠를 보기 위해 아래로 스크롤하기 전에 웹사이트에서 일반적으로 보는 영역) 위에 로드되며 웹 브라우저에서 사용하는 중요한 렌더링 경로의 일부입니다.

일반 용어로 말하자면 브라우저가 웹 페이지의 초기 보기를 적절하게 표시(렌더링)하려면 특정 이벤트가 발생해야 함을 의미합니다. 다음은 기본 렌더링 경로가 작동하는 방식의 예입니다.

  • 브라우저는 웹 페이지의 구조를 담고 있는 HTML 파일로 구성된 웹 페이지를 다운로드합니다.
  • 그런 다음 브라우저는 HTML을 읽고 CSS 파일, 자바스크립트 파일 및 이미지의 3가지 추가 파일을 확인합니다.
  • 브라우저는 먼저 이미지를 다운로드합니다
  • 그런 다음 브라우저는 CSS와 JavaScript를 사용하지 않고는 페이지를 계속 표시할 수 없다는 것을 깨닫습니다.
  • 브라우저는 CSS 파일을 다운로드하고 읽어서 다른 것이 호출되고 있지 않은지 확인합니다.
  • 브라우저는 JavaScript 파일을 다운로드하고 읽어서 다른 것이 호출되고 있지 않은지 확인합니다.
  • 브라우저는 마침내 웹 페이지를 표시할 수 있습니다

브라우저가 각 CSS 및 JavaScript 파일을 로드하고 읽는 동안 방문자는 빈 화면을 바라보며 사이트가 로드되기를 기다리고 있습니다. WordPress와 같은 CMS를 사용하는 경우 브라우저는 테마의 스타일 및 스크립트 파일뿐만 아니라 WordPress 자체와 함께 제공되는 스크립트 및 스타일 파일도 로드해야 하기 때문에 꽤 오랫동안 바쁠 수 있습니다. 사용 중인 모든 플러그인 및 위젯과 함께 제공됩니다.

웹사이트 속도 최적화와 관련하여 목록의 첫 번째 작업은 사용자가 콘텐츠를 보고 상호작용하는 데 걸리는 시간을 줄이는 것입니다. 가장 쉬운 방법은 중요한 렌더링 경로를 최적화하는 것입니다.

렌더링 차단 문제를 해결하는 방법

렌더링 차단 문제의 원인과 사이트 속도에 미치는 영향을 알았으므로 이제 이러한 문제를 해결하는 방법에 대해 이야기해 보겠습니다.

렌더링 차단 CSS

렌더링 차단 CSS 문제를 해결하는 세 가지 방법이 있습니다.

  • CSS 파일을 적절하게 호출하십시오 - CSS 파일은 @import 메소드를 사용하는 대신 <link rel="style.css" href=“style.css"> 와 같이 HTML 파일에 연결되어야 합니다. @import 메소드 일반적으로 일반 스타일시트의 상단 부근에 있으며 브라우저가 돌아가서 가져온 파일을 찾아 나머지 CSS 파일을 읽기 전에 웹 페이지를 렌더링할 때 더 큰 지연이 발생합니다.
  • 중요 경로에 있는 CSS 파일의 수를 줄입니다. 가능하면 모든 다른 CSS 파일을 하나로 결합하고 HTML에서 해당 파일에 대한 호출을 제거합니다.

렌더링 차단 JavaScript

렌더링 차단 JavaScript를 제거하려면 로드된 JavaScript 파일의 수와 HTML에서 해당 파일이 호출되는 위치를 알아야 합니다. 이를 찾는 좋은 방법은 Google PageSpeed ​​Insights 도구를 사용하는 것입니다. 오스트레일리아에 기반을 둔 청소 회사인 This Is Neat Cleaning은 웹사이트를 구축할 때 Google의 PageSpeed ​​Insights를 벤치마크로 사용하여 다양한 시나리오를 테스트하여 모바일과 데스크톱 모두에 필요한 것이 무엇인지 정확히 알아냈습니다.

HTML 파일의 맨 아래에 대부분의 스크립트를 삽입하는 것이 최상의 결과를 생성한다는 것은 테스트에서 분명했습니다. 주된 이유는 스크립트를 페이지 맨 아래로 이동하면 렌더링 차단 자바스크립트가 사용자 경험을 지연시키는 것을 제거했기 때문입니다. 중요한 CSS가 여전히 스크롤 없이 볼 수 있는 부분에 로드된 상태에서 사용자는 여전히 기본적으로 사이트를 사용할 수 있으며 상호 작용 및 기능은 여전히 ​​백그라운드에서 로드됩니다.

플러그인 사용

물론 WordPress와 관련된 모든 것과 마찬가지로 플러그인을 사용하여 렌더링 차단 문제를 해결할 수 있습니다. 총 백만 개 이상의 활성 설치가 있는 This is Neat Cleaning이 캐싱, 축소 및 성능 최적화를 위해 W3 Total Cache를 사용한다는 것은 당연합니다.

다음은 W3 ​​Total Cache를 사용하여 렌더링 차단 문제를 해결하는 방법입니다.

WordPress 대시보드에서 성능 > 설정 으로 이동하고 축소 섹션까지 아래로 스크롤합니다. 활성화 라고 표시된 상자를 선택한 다음 축소 모드 옆에 있는 드롭다운 메뉴에서 수동 을 선택합니다. 설정 저장 . 그런 다음 축소하려는 모든 스크립트와 스타일을 추가해야 합니다.

렌더링을 차단하는 스크립트 및 스타일시트가 있는 위치를 찾으려면 Google Page Speed ​​Insights 도구로 이동하여 웹사이트를 분석하세요. 그런 다음 제안 탭을 보고 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 JavaScript 및 CSS 제거 라는 섹션을 찾습니다. 수정 방법 표시를 클릭하고 파일의 URL을 선택하고 복사합니다.

WordPress 대시보드로 돌아가서 W3 Total Cache > Performance > Minify 로 이동합니다. JavaScript 섹션까지 아래로 스크롤하고 영역의 작업에서 포함 유형이 <head> 섹션에 대해 지연을 사용하여 비차단 으로 설정되어 있는지 확인합니다. 그런 다음 스크립트 추가 버튼을 클릭하고 Google PageSpeed ​​도구에서 복사한 URL을 붙여넣습니다.

모든 스크립트 파일을 추가했으면 CSS 섹션까지 아래로 스크롤 하고 스타일시트 추가 를 클릭하고 Google PageSpeed ​​Insights에서 복사한 스타일시트 파일의 URL을 추가합니다.

완료되면 설정 저장 및 캐시 제거 버튼을 클릭합니다.

마지막 생각들

렌더링 차단 리소스는 웹 사이트 속도와 관련하여 혼란을 일으킬 수 있습니다. 운 좋게도 이러한 문제를 해결할 수 있는 몇 가지 방법이 있으므로 여기에 제공된 팁을 사용하여 웹사이트의 속도를 개선하고 방문자에게 최상의 사용자 경험을 제공하세요.