UI 라이브러리를 사용하거나 스타일을 수작업으로 만들든, 상당한 양의 CSS를 제공하면 렌더링이 지연됩니다. 브라우저가 페이지를 표시하기 전에 CSS 파일을 다운로드하고 파싱해야 하기 때문입니다.
이 반응형 아이스크림 갤러리는 부트스트랩으로 빌드되었습니다. 부트스트랩과 같은 UI 라이브러리를 사용하면 개발 속도가 빨라지지만 CSS가 너무 많아지고 불필요한 CSS가 발생하여 로드 시간이 느려질 수 있습니다. 부트스트랩 4는 187KB인 반면, 또 다른 UI 라이브러리인 시맨틱 UI는 압축되지 않은 무려 730KB입니다. 축소되고 gzip으로 압축되었는데도 부트스트랩의 무게는 여전히 약 20KB로 첫 번째 왕복 기준인 14KB를 훨씬 상회합니다.
중요는 스크롤 없이 볼 수 있는 부분의 CSS를 추출, 축소, 인라인하는 도구입니다. 이렇게 하면 페이지의 다른 부분에 대한 CSS가 아직 로드되지 않은 경우에도 스크롤 없이 볼 수 있는 부분의 콘텐츠를 최대한 빨리 렌더링할 수 있습니다. 이 Codelab에서는 Critical의 npm 모듈을 사용하는 방법을 알아봅니다.
측정
- 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.
이 사이트에서 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 |
문자열 | 파일의 기본 디렉터리. |
src |
문자열 | HTML 소스 파일 |
dest |
문자열 | 출력 파일의 타겟입니다. CSS가 인라인되면 출력 파일은 HTML입니다. 그렇지 않은 경우 CSS 파일이 출력됩니다. |
width , height |
숫자 | 표시 영역 너비 및 높이(픽셀) |
dimensions |
배열 | 너비 및 높이 속성이 있는 객체를 포함합니다. 이러한 객체는 스크롤 없이 볼 수 있는 부분 CSS로 타겟팅하려는 표시 영역을 나타냅니다. CSS에 미디어 쿼리가 있는 경우 이를 통해 여러 표시 영역 크기를 포괄하는 중요한 CSS를 생성할 수 있습니다. |
inline |
부울 | true로 설정하면 생성된 중요한 CSS가 HTML 소스 파일의 인라인됩니다. |
minify |
부울 | 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를 비동기식으로 로드하는 스크립트가 있습니다.
다시 측정
Codelab 시작 부분에 나온 단계에 따라 Lighthouse 성능 감사를 다시 실행합니다. 다음과 비슷한 결과가 표시됩니다.