게시일: 2018년 8월 17일
이 가이드에서는 중요한 렌더링 경로를 최적화할 때 유의해야 할 사항과 그 이유를 맥락에 따라 PageSpeed Insights 규칙을 검토합니다.
렌더링 차단 JavaScript 및 CSS 삭제
가장 빠른 최초 렌더링 시간을 제공하려면 페이지의 중요한 리소스 수를 최소화하고 (가능한 경우) 제거하고, 다운로드된 중요한 바이트 수를 최소화하며, 핵심 경로 길이를 최적화합니다.
JavaScript 사용 최적화
JavaScript 리소스는 async로 표시되거나 특수 JavaScript 스니펫을 사용하여 추가되지 않는 한 기본적으로 파서 차단입니다. 파서가 JavaScript를 차단하면 브라우저가 CSSOM을 기다리게 되고 DOM 생성이 일시중지되어 첫 렌더링 시간이 크게 지연될 수 있습니다.
비동기 JavaScript 리소스 선호
비동기 리소스는 문서 파서를 차단 해제하고 브라우저가 스크립트를 실행하기 전에 CSSOM에서 차단을 방지할 수 있도록 합니다. 스크립트에서 async 속성을 사용할 수 있으면 첫 번째 렌더링에 필수적이지 않다는 의미이기도 합니다. 초기 렌더링 후 스크립트를 비동기식으로 로드해 보세요.
동기 서버 호출 피하기
navigator.sendBeacon() 메서드를 사용하여 unload 핸들러에서 XMLHttpRequest가 전송하는 데이터를 제한합니다. 많은 브라우저에서는 이러한 요청이 동기식이어야 하므로 페이지 전환 속도가 느려질 수 있으며, 경우에 따라 눈에 띄게 느려질 수 있습니다. 다음 코드는 navigator.sendBeacon()를 사용하여 unload 핸들러 대신 pagehide 핸들러에서 서버로 데이터를 전송하는 방법을 보여줍니다.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
fetch() 메서드는 데이터를 비동기식으로 요청하는 더 나은 방법을 제공합니다. fetch()는 여러 이벤트 핸들러 대신 Promise를 사용하여 응답을 처리합니다. XMLHttpRequest에 대한 응답과 달리 fetch() 응답은 스트림 객체입니다. 즉, json() 호출도 Promise를 반환합니다.
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
fetch() 메서드는 POST 요청도 처리할 수 있습니다.
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
JavaScript 파싱 지연
브라우저가 페이지를 렌더링하기 위해 실행해야 하는 작업량을 최소화하려면 초기 렌더링을 위해 표시되는 콘텐츠를 구성하는 데 중요하지 않은 비필수 스크립트를 지연합니다.
장기 실행 JavaScript 피하기
장기 실행 JavaScript는 브라우저가 DOM, CSSOM을 구성하고 페이지를 렌더링하는 것을 차단하므로 첫 번째 렌더링에 필수적이지 않은 초기화 로직은 나중에까지 연기합니다. 긴 초기화 시퀀스를 실행해야 하는 경우 브라우저가 그 사이의 다른 이벤트를 처리할 수 있도록 여러 단계로 분할하는 것이 좋습니다.
CSS 사용 최적화
렌더링 트리를 구성하려면 CSS가 필요하며 JavaScript는 페이지의 초기 구성 중에 CSS에서 종종 차단됩니다. 필수가 아닌 CSS (예: 인쇄 및 기타 미디어 쿼리)는 중요하지 않음으로 표시하고 중요한 CSS의 양과 전송 시간은 최대한 적어야 합니다.
문서 헤드에 CSS 삽입
브라우저가 <link> 태그를 검색하고 CSS 요청을 최대한 빨리 전달할 수 있도록 HTML 문서 내에서 모든 CSS 리소스를 최대한 빨리 지정합니다.
CSS 가져오기 피하기
CSS 가져오기 (@import) 디렉티브를 사용하면 한 스타일 시트에서 다른 스타일 시트 파일의 규칙을 가져올 수 있습니다. 그러나 이러한 디렉티브는 중요한 경로에 추가 왕복을 도입하므로 피해야 합니다. 가져온 CSS 리소스는 @import 규칙이 포함된 CSS 스타일 시트 자체가 수신되고 파싱된 후에만 검색됩니다.
본문에 렌더링 차단 CSS 삽입
최상의 성능을 위해 중요한 CSS를 HTML 문서에 직접 인라인 처리하는 것이 좋습니다. 이렇게 하면 중요한 경로에서 추가 왕복이 제거되며 올바르게 수행하면 HTML만 차단 리소스인 '왕복 하나'의 중요한 경로 길이를 제공할 수 있습니다.