빠른 렌더링 웹 사이트를위한 렌더링 차단 CSS 태클

CSS로드 전략을 최적화하고 웹 렌더링 속도를 향상시킵니다 이 기사는 브라우저가 CSS 파일을로드하는 방식과 웹 렌더링 속도에 미치는 영향에 대해 설명하고 사용자 경험을 향상시키는 데 도움이되는 몇 가지 최적화 전략을 도입합니다.

문제 : CSS 차단 렌더링

Google Page Speed ​​Insights를 사용한 경우 다음과 같은 팁을 보았을 수 있습니다. 브라우저는 DOM 및 CSSOM을 사용하여 웹 페이지를 렌더링합니다. CSS는 중요한 렌더링 경로에 위치하고 있습니다. 즉, 브라우저는 렌더링을 시작하기 위해 모든 HTML 및 CSS 정보를 다운로드하여 처리해야합니다. 이는 지연과 사용자 경험에 영향을 줄 수 있습니다. 특히 외부 스타일 시트는 브라우저와 서버간에 여러 라운드 트립을 유발하여 HTML 다운로드 완료와 페이지 렌더링 사이에 시차가 발생합니다.

키 CSS의 개념

HTML은 페이지 렌더링에 중요하지만 모든 CSS가 중요하지는 않습니다. 사용자가 가장 염려하는 것은 페이지의 가시 영역 (뷰포트)의 내용입니다. 따라서 일반적인 최적화 전략은 차단 리소스의 비동기 적재 또는 HTML 로의 주요 부품을 지연 시키거나 비동기 로딩하고 있습니다. 최적화 전략

다음은 개발자에게 일반적으로 사용되는 최적화 방법입니다.

미디어 유형 및 미디어 쿼리로 렌더 차단을 최소화하고 다른 파일로 외부 CSS를 분할하고 적절한 미디어 유형과 미디어 쿼리를 사용하십시오. 그들을. 예를 들면 :

브라우저는 모든 스타일 시트를 다운로드하지만 비 블로킹 스타일 시트를 선호합니다.

명령을 사용하여 명령을 사용하여 브라우저에 사전에 특정 리소스를 얻도록 브라우저에 알리십시오. JavaScript 이벤트와 결합하여 비동기로드 스타일 시트를 구현할 수 있습니다.

현재

의 브라우저 지원은 제한되어 있으며 Filament Group이 제공 한 폴리 필을 사용할 수 있습니다.

필라멘트 그룹의 솔루션 : 필라멘트 그룹의 정책에는 다음이 포함됩니다. html 로의 인라인 중요한 CSS 및 HTTP/2 서버 푸시를 사용하여 비 임계 CSS를 비동기로로드합니다. 그들은

브라우저를 지원하지 않는 폴리 필이 포함 된 loadcss 라이브러리를 사용합니다.

문서 본문에 스타일 시트 링크를 넣으십시오.
1. 이 메소드는 "위의 뷰포트"의 개념에 의존하지 않고 해당 HTML 컨텐츠 앞에 페이지 렌더링을 구현하기 전에 스타일 링크를 배치합니다. 순서대로 내용. 예를 들면 : style.css print.css 결론 other.css

브라우저가 스타일 시트를 다운로드하는 방식은 페이지 렌더링을 차단하고 사용자 경험에 영향을 줄 수 있습니다. 이 기사에 도입 된 몇 가지 최적화 방법은이 문제를 해결하고 웹 페이지의 로딩 속도를 향상시키는 데 도움이 될 수 있습니다. 선택할 방법은 웹 사이트의 크기와 복잡성에 따라 다릅니다.

faqs (faqs)

중요한 렌더링 경로 (CRP)는 무엇입니까? 빠르게로드하는 웹 사이트에 중요한 이유는 무엇입니까? CRP는 브라우저가 HTML, CSS 및 JavaScript를 화면 픽셀로 변환하는 일련의 단계입니다. CRP 최적화는 웹 페이지로드 속도를 높이고 사용자 경험을 향상시킬 수 있습니다.

• 키 렌더링 경로를 최적화하는 방법은 무엇입니까? CRP는 파일 크기를 줄이고 중요한 리소스 수를 최소화하고 임계 경로 길이를 단축시켜 최적화 할 수 있습니다. 예를 들어 : 압축 파일, 인라인 임계 CSS, 비정규 CSS 및 JavaScript가 지연되고 비동기 로딩을 사용합니다.

• 렌더 차단 자원이란 무엇입니까? 웹 사이트로드 속도에 어떤 영향을 미칩니 까? 렌더링 차단 자원은 파일 (일반적으로 CSS 및 JavaScript 파일)입니다. 웹 페이지가 완전히 다운로드 및 처리 될 때까지 웹 페이지가 표시되는 것을 차단하는 것입니다. 그들은 웹 렌더링을 지연시키고로드 속도를 늦 춥니 다.
  렌더 차단 자원을 제거하는 방법은 무엇입니까? 는 비정규 CSS 및 JavaScript, 인라인 중요한 CSS 및 비동기식 파일로드를 지연시켜 렌더 차단 자원을 제거 할 수 있습니다.

• 동기 로딩과 비동기 로딩의 차이점은 무엇입니까? 동기로드 블록 웹 페이지 파일이 완전히 다운로드되고 처리 될 때까지 렌더링하면 웹 페이지가 파일을 다운로드하는 동안 렌더링을 계속할 수 있습니다.

• 중요한 CSS를 인화하는 방법은 무엇입니까? 이것이 왜 유익한가요? 인라인 키 CSS는 외부 파일이 아닌 HTML 문서에 CSS를 직접 배치하는 것입니다. 이렇게하면 별도의 네트워크 요청이 필요하지 않아 웹 페이지를 렌더링하는 데 필요한 시간이 줄어 듭니다.
  중요한 렌더링 경로에서 JavaScript의 역할은 무엇입니까? javaScript는 DOM 및 CSSOM을 작동 할 수 있지만 제대로 처리되지 않으면 렌더링 프로세스도 차단됩니다.

• 압축 파일로 웹 사이트로드 속도를 높이는 방법은 무엇입니까? 압축 파일은 코드에서 불필요한 문자 (예 : 공백 및 주석)를 삭제하여 파일 크기를 줄이고 다운로드 속도를 높입니다.

• 중요한 렌더링 경로를 분석하고 최적화하는 데 어떤 도구를 사용할 수 있습니까? Google Pagespeed Insights, Lighthouse 및 WebPagetest와 같은 도구는 중요한 렌더링 경로를 분석하고 최적화하는 데 도움이 될 수 있습니다.
  사용자 경험을 향상시키기 위해 주요 렌더링 경로를 최적화하는 방법은 무엇입니까? 중요한 렌더링 경로를 최적화하면 웹 페이지로드 시간을 줄이고 사용자 경험을 향상시킬 수 있습니다. 더 빠른 로딩 속도는 사용자 만족도를 향상시키고 검색 엔진 순위를 향상시킬 수 있습니다.

• (이 기사의 일부 내용은 Siteground에서 제공합니다)

위 내용은 빠른 렌더링 웹 사이트를위한 렌더링 차단 CSS 태클의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!