UI 라이브러리를 사용하든 스타일을 수작업으로 제작하든 브라우저에서 페이지를 표시하기 전에 CSS 파일을 다운로드하고 파싱해야 하므로 CSS를 제공하면 렌더링이 지연됩니다.
이 반응형 아이스크림 갤러리는 부트스트랩으로 제작되었습니다. Bootstrap과 같은 UI 라이브러리를 사용하면 개발 속도가 빨라지지만 CSS가 지나치게 커지고 이로 인해 로드 시간이 느려질 수 있습니다. 부트스트랩 4는 187KB이지만 또 다른 UI 라이브러리인 시맨틱 UI는 무압축 730KB입니다. 최소화되고 gzip으로 압축되더라도 부트스트랩의 무게는 여전히 약 20KB에 달하며 이는 첫 번째 왕복의 14KB 임계값보다 훨씬 큽니다.
중요는 스크롤 없이 볼 수 있는 부분 CSS를 추출, 축소, 인라인으로 처리하는 도구입니다. 이렇게 하면 페이지의 다른 부분에 대한 CSS가 아직 로드되지 않은 경우에도 스크롤 없이 볼 수 있는 콘텐츠를 최대한 빨리 렌더링할 수 있습니다. 이 Codelab에서는 중요의 npm 모듈을 사용하는 방법을 알아봅니다.
측정
- 사이트를 미리 보려면 View App을 누른 다음 Fullscreen
을 누릅니다.
이 사이트에서 Lighthouse 감사를 실행하려면 다음 안내를 따르세요.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 모바일을 클릭합니다.
- 실적 체크박스를 선택합니다.
- 감사 섹션에서 나머지 체크박스를 선택 해제합니다.
- 시뮬레이션된 빠른 3G, 4배 CPU 속도 저하를 클릭합니다.
- 저장용량 비우기 체크박스를 선택합니다. 이 옵션을 선택하면 Lighthouse가 캐시에서 리소스를 로드하지 않으며, 이는 신규 방문자가 페이지를 경험하는 방식을 시뮬레이션합니다.
- 감사 실행을 클릭합니다.
시스템에서 감사를 실행할 때 정확한 결과는 다를 수 있지만 슬라이드 뷰에서 최종 콘텐츠를 렌더링하기 전에 앱에 꽤 오랫동안 빈 화면이 표시된 것을 확인할 수 있습니다. 콘텐츠가 포함된 첫 페인트 (FCP)가 높고 전반적인 성능 점수가 좋지 않은 이유가 바로 이것입니다.
Lighthouse는 성능 문제를 해결하는 데 도움을 줍니다. 추천 섹션에서 솔루션을 찾아보세요. 렌더링을 차단하는 리소스 제거는 추천으로 나열되어 있으며, 바로 이 부분에서 '중요'가 빛을 발합니다.
최적화
- 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
속도를 높이기 위해 '중요'가 이미 설치되어 있으며 이 Codelab에는 빈 구성 파일이 포함되어 있습니다.
구성 파일 critical.js에서 심각에 대한 참조를 추가한 다음 critical.generate() 함수를 호출합니다. 이 함수는 구성이 포함된 객체를 허용합니다.
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
오류 처리는 필수는 아니지만 콘솔에서 작업 성공 여부를 쉽게 측정할 수 있는 방법입니다.
중요 구성
아래 표에는 몇 가지 유용한 중요 옵션이 포함되어 있습니다. GitHub에서 사용 가능한 모든 옵션을 확인해 보세요.
| 옵션 | 유형 | 설명 |
|---|---|---|
base |
string | 파일의 기본 디렉터리입니다. |
src |
string | HTML 소스 파일입니다. |
dest |
string | 출력 파일의 대상입니다. CSS가 인라인된 경우 출력 파일은 HTML입니다. 그렇지 않은 경우 CSS 파일이 출력됩니다. |
width, height |
숫자 | 표시 영역 너비 및 높이(픽셀)입니다. |
dimensions |
배열 | 너비 및 높이 속성이 있는 개체를 포함합니다. 이러한 객체는 스크롤 없이 볼 수 있는 부분의 CSS로 타겟팅하려는 표시 영역을 나타냅니다. CSS에 미디어 쿼리가 있는 경우 여러 표시 영역 크기를 지원하는 중요한 CSS를 생성할 수 있습니다. |
inline |
boolean | true로 설정하면 생성된 주요 CSS가 HTML 소스 파일에서 인라인 처리됩니다. |
minify |
boolean | true로 설정하면 '중요'에서 생성된 중요한 CSS가 축소됩니다. '중요'는 중복 규칙 포함을 방지하기 위해 자동으로 축소되므로 여러 해상도에서 중요한 CSS를 추출할 때 생략할 수 있습니다. |
다음은 여러 해상도에서 중요한 CSS를 추출하는 구성 예입니다. critical.js에 추가하거나 옵션을 조정하고 변경하세요.
critical.generate({
base: 'public/',
src: './index.html',
dest: './index.html',
inline: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 720,
width: 1280,
},
]
}, (err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
이 예에서 index.html는 소스 파일과 대상 파일 둘 다입니다. inline 옵션이 true로 설정되어 있기 때문입니다. 중요: 먼저 HTML 소스 파일을 읽고 중요한 CSS를 추출한 다음 <head>에 인라인된 중요한 CSS로 index.html를 덮어씁니다.
dimensions 배열에는 두 가지 표시 영역 크기가 지정되어 있습니다. 아주 작은 화면의 경우 300x500, 표준 노트북 화면의 경우 1280x720입니다.
여러 표시 영역 크기가 지정된 경우 '중요'로 추출된 CSS가 자동으로 축소되므로 minify 옵션이 생략됩니다.
심각 실행
package.json의 스크립트에 '중요'를 추가합니다.
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- 터미널을 클릭합니다 (참고: 터미널 버튼이 표시되지 않으면 전체 화면 옵션을 사용해야 할 수 있음).
중요한 CSS를 생성하려면 콘솔에서 다음을 실행합니다.
npm run critical
refresh
이제 index.html의 <head> 태그에서 생성된 중요한 CSS가 <style> 태그 사이에 인라인되고 나머지 CSS를 비동기식으로 로드하는 스크립트가 이어집니다.
다시 측정
Lighthouse 성능 감사를 다시 실행하려면 Codelab 시작 부분의 단계를 따르세요. 다음과 비슷한 결과가 표시됩니다.
