차단 CSS 리소스

Question

나는 .... 나중에 3 시간 CSS ... 그리고 내가 침대에 갈거야 큰 두통을로드

구글 페이지 속도를 지연 또는 비동기하기 자습서의 톤과 "수정"을 읽고 테스트 : 페이지에 3 개의 CSS 리소스가 차단되었습니다. 이로 인해 페이지 렌더링이 지연됩니다.

필자는 ... 사람이 도대체 인라인 CSS를 사용하지 않고 이러한 부하를 만드는 방법을 lamens에 설명 해주십시오 수 ABIT 바보 같은 느낌 자바 스크립트 방법, JQuery와 방법 및 모든 그물 주위에 답변의 톤을 읽을

<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/custom.min.css" rel="stylesheet" type="text/css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

Answer 1

렌더링 차단 파일에 대한 경험이 있습니다. 그래서 나는 그것을 돕기를 희망하며 나누지 만,이 문제를 해결하는 것이 조금 까다 롭고 곧바로 당신이 바라는 것이 아니라는 것을 알아야합니다. 다음 세 가지 질문을 먼저 물어보십시오.

첫 번째 질문 : 귀하의 콘텐츠에 우선 순위가 매겨 졌습니까?
두 번째 : WordPress를 사용합니까?

3 세 : 간섭 플러그 인을 설치하지 않았습니까?

우선 : 콘텐츠 우선 순위 지정을위한 HTML5 의미는 필수적이지만 잘못 사용했을 가능성이 있습니다. 예를 들어 사이드 바와 같은 요소 하나가 스크롤없이 볼 수 있지만 스크롤없이 볼 수는 없습니다. 렌더링 차단이란 렌더링 페이지가 적시에 존재하지 않는 것을 필요로하므로 기다려야한다는 것을 의미합니다. 원치 않는 요소로 인해이 상황이 발생할 수 있습니다.

두 번째 : WordPress를 사용하고 테마를 구입 한 경우 테마가 표준이 아닐 수도 있습니다. 문제는 해결할 수는 있지만 가치가없는 것은 시간이 걸리고 다음 테마 업데이트에 대해 생각해야합니다. 테마를 변경하는 것이 가장 쉽지만 생각할 수는 있습니다. 그러나 정적 페이지를 사용하는 경우 최대한 빨리 CSS 파일을 호출하십시오.

3 : 최근에 나는 모든 CSS 및 JavaScript 파일에 대해 이와 같은 문제가있었습니다. 이미지를 게으른로드하는 데 플러그인을 사용해야했기 때문입니다. 그것은 모든 것을 망쳐 놓았고, 나는 그것을 비활성화하고 문제를 해결했습니다. 이미지로드를 지연시키고 몇 가지 이점을 얻지 만 모든 파일을 다운로드하기 위해 총 페이지로드를 연기합니다. 플러그인을 통해 영향을 미칠 수있는 무언가를 찾으십시오.


아직 블로킹 CSS를 렌더링하고 있지만 아직 해결 중입니다. CSS 파일을 병합하기위한 플러그인을 사용하고 렌더링 차단이 그 원인으로 발생합니다. 내가 할 수있는만큼 플러그인을 제거하고, CSS 파일 요청을 줄이기 위해 자식 테마에 자신의 능력을 키운 다음이 병합 플러그인을 비활성화 할 수 있습니다.