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 성능 감사를 다시 실행합니다. 다음과 비슷한 결과가 표시됩니다.
