이전 게시물에서 폴백으로 네이티브 지연로드를 구현하여 개인 웹 사이트의 Lighthouse 점수를 높이는 방법에 대해 이야기했습니다.
내 성능과 Lighthouse 점수를 향상 시킨 또 다른 중요한 개선 사항은 렌더링 차단 리소스를 제거하는 것입니다.
중요 및 중요하지 않은 리소스
일반적으로 프로젝트를 빌드 할 때 모든 스타일, JavaScript 플러그인, JavaScript 코드, 글꼴, 이미지 등 필요한 모든 것을 즉시 포함하고 싶습니다. 일반적으로 이 작업을 수행하는 동안 비동기 로딩 오류가 발생하지 않도록 합니다. 프로젝트를 개발하십시오.
현실은 브라우저가 웹 사이트가 로드 될 때 포함 된 모든 것을 로드, 구문 분석 및 실행해야 하기 때문에 캐시 된 리소스가 없는 첫 번째 페인트가 불필요하게 느려질 수 있습니다. 브라우저가 초기 페이지 로드에 불필요한 코드를 구문 분석하고 페이지 콘텐츠를 표시하지 않고 시간과 리소스를 낭비하고 있기 때문에 이를 렌더링 차단이라고 합니다.
리소스 (CSS, JavaScript, 글꼴 등)를 살펴보면 두 가지 범주로 분류 할 수 있습니다.
따라서 중요하고 중요하지 않은 CSS 및 JavaScript 리소스를 처리하는 방법을 살펴 보겠습니다.
중요한 CSS 처리
Critical CSS는 스크롤 없이 볼 수 있는 콘텐츠 위에 스타일을 지정하는 데 필요한 스타일을 나타냅니다. 사용자가 페이지를 처음 로드 할 때 볼 수 있는 스크롤 없이 볼 수 있는 콘텐츠 위 (페이지 상단 섹션)
페이지에 중요한 CSS를 추가하려면 CSS 스타일 시트에서 해당 스타일을 제거하고 <head> 요소 내부의 <style> 태그에서 HTML에 직접 추가해야 합니다.
<head>
<!-- ... -->
<style>
/* Add critical styles here */
</style>
<!-- ... -->
</head>
이 접근 방식은 HTML 문서 크기를 약간 증가 시킬 수 있지만 HTML 전달을 위해 GZIP 또는 Brotli와 같은 압축 알고리즘을 사용하는 경우 이러한 변경 사항은 중요하지 않습니다.
중요한 CSS를 HTML 문서에 직접 추가하면 해당 스타일이 파싱되고 첫 번째 페인트 (초기로드)에 적용됩니다.
중요하지 않은 CSS 처리
중요한 CSS를 효과적으로 만들려면 브라우저에 중요하지 않은 CSS를 처리하고 페이지를 표시하는 방법을 알려야 합니다. 또한 추가로 중요하지 않은 CSS가 로드 되는 동안 웹 사이트를 사용할 수 있습니다. 인터넷 연결 속도에 따라 로드 되는 추가 스타일을 눈치 채지 못할 수도 있습니다.
중요하지 않은 CSS를 처리하려면 해당 스타일이 포함 된 CSS 파일이 로드 되는 방식을 변경해야 합니다.
<head>
<!-- ... -->
<link crossorigin rel="preload" href="/path/to/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/path/to/styles.css"></noscript>
<!-- ... -->
</head>이것은 처음에는 해킹처럼 보일 수 있지만 적절한 폴백을 사용하여 효율적인 방식으로 CSS를 로드 하는 정말 똑똑하고 효율적인 방법입니다.
스크롤 없이 볼 수 있는 콘텐츠에 중요하지 않은 스타일이 로드됩니다. 나머지가 로드 되기 전에 (중요하지 않은) 일부 (중요한) 스타일이 이미 적용된 (회색 배경) 확인
Google Fonts 스타일 시트를 동일한 방식으로 효율적으로 로드 할 수 있다는 점도 중요합니다!
<link crossorigin rel="preload" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap"></noscript>Firefox 문제 및 IE 처리
이 기사를 쓰는 시점에서 Firefox에는 CSS 사전 로드와 관련된 버그가 있습니다. 중요하지 않은 CSS를 로드 하는 이 효율적인 방법은 현재 Firefox에서 작동하지 않지만 곧 수정 될 것입니다.
미리 로드를 지원하지 않거나 문제가 있는 브라우저 (예 : Firefox)에 대한 대체를 제공 할 수 있습니다. 운 좋게도 인라인 자바 스크립트를 사용하면 정말 쉽습니다.
<script>
var isIE = !!window.MSInputMethodContext && !!document.documentMode;
var isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
if (isIE || isFirefox) {
var pageStylesheet = document.createElement("link");
pageStylesheet.rel = "stylesheet";
pageStylesheet.type = "text/css";
pageStylesheet.href = "/path/to/styles.css";
document.head.appendChild(pageStylesheet);
}
</script>미리 로드를 지원하지 않는 Firefox 및 IE 브라우저의 경우 헤드 요소에 일반 링크 요소를 삽입하려면 본문 닫기 태그 앞에 이 코드를 추가하기 만하면 됩니다.
중요한 JavaScript 처리
중요한 CSS를 HTML 코드 내에 인라인 하여 처리하는 것과 유사한 방식으로 중요한 JavaScript를 처리합니다. 본문 닫기 태그 앞에 스크립트 태그를 사용하여 중요한 자바 스크립트 코드를 삽입해야 한다는 점에 유의해야 합니다. 이렇게 하면 JavaScript가 콘텐츠 렌더링을 차단하지 않고 사용 가능한 모든 DOM 노드가 생성되어 JavaScript 코드에서 사용할 수 있는지 확인합니다.
<body>
<!-- ... -->
<script>
/* Inlined JavaScript code */
</script>
</body>중요하지 않은 JavaScript 처리
스크립트 태그 (src에서 로드 된 인라인 JavaScript 또는 JavaScript)에 지연 또는 비동기 태그를 추가하기 만하면 중요하지 않은 JavaScript를 처리 할 수 있습니다.
<script defer src="/path/to/script.js"></script>
<script async src="/path/to/script.js"></script>향상된 성능 및 Lighthouse 점수
내 개인 웹 사이트에서 기사에서 설명한 대로 중요하고 중요하지 않은 CSS 및 JavaScript를 처리했습니다. 이 현대적인 접근 방식을 구현 한 후 렌더링 차단, 중요하지 않은 CSS 및 JavaScript를 제거하여 Lighthouse 점수와 전반적인 성능을 향상 시켰습니다!
등록된 댓글이 없습니다.
