penthouse
2.3.3
중요 경로 CSS 생성기
Penthouse는 웹 사이트의 페이지 렌더링 속도를 높이는 데 도움이 되는 독창적인 중요 경로 CSS 생성기입니다. 사이트의 전체 CSS와 중요한 CSS를 생성하려는 페이지를 제공하면 Penthouse는 페이지의 접힌 부분 콘텐츠를 완벽하게 렌더링하는 데 필요한 중요한 CSS를 반환합니다. 여기에서 주요 경로 CSS에 대해 자세히 알아보세요.
프로세스는 자동으로 이루어지며 생성된 CSS는 그대로 제작 준비가 되어 있습니다. 뒤에서 Penthouse는 puppeteer를 사용하여 chromium:headless를 통해 중요한 CSS를 생성하고 있습니다.
(코드 작성을 원하지 않는 경우 온라인 호스팅 버전을 사용할 수 있습니다.)
yarn add --dev penthouse
(또는 Yarn을 사용하지 않는 경우 npm install )
penthouse ( {
url : 'http://google.com' ,
cssString : 'body { color: red }'
} )
. then ( criticalCss => {
// use the critical css
fs . writeFileSync ( 'outfile.css' , criticalCss ) ;
} )https://github.com/pocketjoso/penthouse/tree/master/examples
펜트하우스는 많은 작업을 병렬로 실행하는 데 최적화되어 있습니다. 하나의 공유 브라우저 인스턴스가 재사용되고 각 작업은 자체 브라우저 탭에서 실행됩니다. 컴퓨터의 리소스가 부족해지기 전에 병렬로 실행할 수 있는 작업은 너무 많습니다. 많은 작업을 효과적으로 실행하려면 많은 URL 예제를 참조하세요.
url 및 cssString 만 필수이며 다른 모든 옵션은 선택 사항입니다. url 통해 찾은 html 파일에는 스타일이 지정되어 있어야 합니다. penthouse 어떤 스타일도 주입하지 않고 cssString (또는 css )을 사용하여 중요한 CSS를 정리합니다.
| 이름 | 유형 | 기본 | 설명 |
|---|---|---|---|
| URL | string | 접근 가능한 URL. 로컬 HTML 파일에는 file:/// 프로토콜을 사용하세요. | |
| CSS문자열 | string | 중요한 CSS를 추출하는 원본 CSS | |
| CSS | string | 디스크에 있는 원본 CSS 파일의 경로( cssString 대신 사용하는 경우) | |
| 너비 | integer | 1300 | 중요한 뷰포트의 너비 |
| 키 | integer | 900 | 중요한 뷰포트의 높이 |
| 스크린샷 | object | 스크린샷 구성(기본적으로 사용되지 않음) 스크린샷 예시 보기 | |
| keepLargerMediaQueries | boolean | false | 중요한 뷰포트보다 큰 너비/높이 값에 대해서도 미디어 쿼리를 유지합니다. |
| 강제포함 | array | [] | 중요한 뷰포트에 표시되지 않더라도 중요한 CSS를 유지하는 CSS 선택기 배열입니다. 문자열 또는 정규식(fe ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| 강제제외 | array | [] | 중요한 뷰포트에 나타나더라도 중요한 CSS에서 제거할 CSS 선택기 배열입니다. 문자열 또는 정규식(fe ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| 제거할 속성 | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | 중요한 CSS에서 필터링할 CSS 속성 |
| 시간 초과 | integer | 30000 | 양; 이 시간 이후에는 중요한 CSS 생성을 중단합니다. |
| 인형극 | object | 인형극에 대한 설정입니다. 사용자 정의 인형극 브라우저 예를 참조하세요. | |
| pageLoadSkip시간 초과 | integer | 0 | 양; 이 시간 이후에는 페이지 로드 대기를 중지합니다(페이지 로드 이벤트를 신뢰할 수 없는 사이트의 경우). |
| 렌더링 대기 시간 | integer | 100 | ms; 중요한 CSS 추출이 시작되기 전 페이지 로드 후 대기 시간(사용되는 경우 "전" 스크린샷이 찍히기 전이기도 함) |
| blockJS요청 | boolean | true | JS를 로드하려면 false로 설정하세요(권장하지 않음) |
| maxEmbeddedBase64길이 | integer | 1000 | 문자; 이보다 큰 인라인 Base64 인코딩 리소스를 제거합니다. |
| maxElementsToCheckPerSelector | integer | undefined | CSS 선택기당 검사할 요소 수를 제한하여 실행 시간을 줄이도록 지정할 수 있습니다. |
| 사용자 에이전트 | string | 'Penthouse Critical Path CSS Generator' | 페이지를 로드할 때 어떤 사용자 에이전트 문자열을 지정합니다. |
| 맞춤 페이지 헤더 | object | URL 요청과 함께 전송될 추가 http 헤더를 설정합니다. | |
| 쿠키 | array | [] | 각 쿠키의 형식은 Puppeteer setCookie 문서를 참조하세요. |
| 엄격한 | boolean | false | Penthouse가 원본 CSS를 구문 분석하는 동안 오류가 발생하도록 만듭니다. 레거시 옵션은 권장되지 않습니다. |
| 허용된응답코드 | number|regex|function | 서버 응답 코드가 이 값과 일치하지 않으면 Penthouse를 중지하세요. number 및 regex 유형은 response.status()에 대해 테스트됩니다. function 도 허용되며 응답을 인수로 가져옵니다. 함수는 boolean 반환해야 합니다. |
로깅은 penthouse 네임스페이스 아래 debug 모듈을 통해 수행됩니다. 해당 설명서에서 로깅에 대한 자세한 내용을 볼 수 있습니다.
# Basic verbose logging for all components
env DEBUG= " penthouse,penthouse:* " node script.js헤드리스 Chrome을 실행하려면 누락된 종속 항목을 설치하세요.
sudo apt-get install libnss3
dist에 따라 더 긴 dep 목록이 필요할 수도 있습니다. 이 답변을 참조하세요.
좋은 첫 번째 단계는 호스팅된 주요 경로 CSS 생성기에서 URL + CSS를 테스트하여 문제가 전달된 입력(css + url)에 있는지 또는 로컬 설정에 있는지 확인하는 것입니다: https://jonassebastianohlsson.com /핵심경로css생성기
중요한 CSS를 적용한 후 스타일이 지정되지 않은 콘텐츠가 깜박이는 것을 본다면 뭔가 잘못된 것입니다. 다음은 가장 일반적인 원인과 몇 가지 일반적인 관련 조언입니다.
일반적으로 중요한 CSS에서 스타일을 지정하려는 모든 요소가 페이지의 HTML(Javascript가 비활성화된 상태)에 표시되는지 확인해야 합니다. 훨씬 더 빠른 속도를 만드는 데 도움이 되는 중요한 CSS 중 하나인 페이지의 첫 번째 렌더링은 JS가 로드되기 전에 발생합니다. 이것이 바로 Penthouse가 JavaScript가 비활성화된 상태로 실행되는 이유입니다. 따라서 HTML이 본질적으로 비어 있거나 실제 콘텐츠가 로딩 스피너 또는 유사한 항목 앞에 숨겨져 있는 경우 중요한 CSS를 사용하여 성능 이점을 얻으려면 먼저 이 문제를 해결해야 합니다.
HTML은 괜찮지만 로그인한 사용자, 제3자 광고 등에 따라 달라지는 경우 forceInclude 매개변수를 사용하여 Penthouse에서 볼 수 없더라도 특정 추가 스타일을 중요한 CSS에 유지하도록 할 수 있습니다. 중요한 CSS 생성 중 페이지에.
이 문제는 요소가 DOM 초기에 나타나지만 스타일이 적용되어 주요 뷰포트 외부로 이동하는 경우(절대 위치 또는 변환 사용) 발생할 수 있습니다. Penthouse는 절대 위치 및 변환 값을 확인하지 않고 해당 요소를 중요한 뷰포트의 일부가 아닌 것으로 간주하므로 Penthouse는 해당 요소의 스타일이 중요한 것으로 간주하지 않습니다(따라서 중요한 CSS가 사용될 때 스타일이 지정되지 않은 요소가 표시됩니다). 해결 방법: 실제로 DOM 초기에 나타나야 하는지 고려하거나 forceInclude 속성을 사용하여 "숨기기"/이동 스타일이 중요한 CSS에 남아 있는지 확인하세요.
변환 후 →와 같은 특수 문자에 문제가 있습니까? CSS에서 올바른 16진수 형식을 사용하는지 확인하세요. '→' .charCodeAt(0).toString(16) 입력하여 브라우저 콘솔에서 언제든지 이 형식을 얻을 수 있습니다(이 화살표 문자에 대한 대답은 2192 입니다). CSS에서 16진수 형식을 사용하는 경우 다음과 같이 백슬래시를 앞에 추가해야 합니다: 2192 (fe content: '2192'; )
