일전에 이 글에서 렌더링 차단 리소스를 제거하는 방법을 알아본 적이 있습니다.
그 때 언급했던 방법이 바로 [**크리티컬 CSS**]인데, 당시에 설명이 부족했던 것 같아 자세히 써보려고 합니다.
참고로 테스트 블로그에서 이 기법의 적용 전/후의 페이지 분석을 해보면 이렇습니다.
<사용전>
<사용후>
생각보다 점수 상승폭이 커서 놀랐는데, 구글이 제공하는 페이지 분석기가 미국 서버에서 측정하는 특성상 편차가 좀 있어서 이런 결과가 나온 것 같습니다.
실제로는 이것만큼 드라마틱한 개선이 되진 않습니다.[각주*원인은 모르겠지만 Larget Contentful Paint가 유독 제 블로그에선 유동적으로 나오는데, 사용 전이 최악의 경우/사용 후가 운이 좋은 경우인 것을 감안해야 합니다.*]
크리티컬 CSS란?
[기본* Critical: 대단히 중요한 -출처:네이버 영어사전*]
사용자가 웹페이지에 접속했을 때 로딩 속도가 빠르다고 느끼게 하려면 중요한 코드와 중요하지 않은 코드를 분리해야 합니다.
이 때 중요한 코드는 사용자가 처음 접속했을 때 볼 수 있는 곳을 구성하는 코드입니다.
제 블로그로 예를 들자면, 제가 파랗게 표시한 부분의 코드만 불러오면 될 뿐 나머지 밑에 있는 부분은 나중에 로딩해도 상관 없습니다.
즉, 제가 파랗게 표시한 부분을 구성하는 CSS가 크리티컬 CSS입니다.
저 화면 밑에 있는 부분들은 중요하지 않은 Non-Critical CSS고요.
결과적으로 꼭 필요한 부분만 불러내기 때문에 초기 로딩속도가 향상되는 효과가 있습니다.
직관적으로 이해하려면 구글 페이지 스피드에서 분석한 제 블로그 접속화면으로 설명드리겠습니다.
위의 경우가 크리티컬 CSS를 적용한 것이고, 아래가 적용하지 않은 평상시의 모습입니다.
분명히 똑같은 페이지인데, 크리티컬 CSS를 적용하니 로딩이 더 빨리 시작되었습니다.
크리티컬 CSS 적용법 - 추출하기
제가 이전 글에서 CSS 적용법의 순서를 적은 적이 있습니다.
- 중요한 CSS와 중요하지 않은 CSS를 구분한다.
- 중요한 CSS는 HEAD에 inline으로 작성한다.
- 중요하지 않은 CSS는 비동기적으로 로딩한다
이 때 의문이 드실 겁니다. '어떻게 중요한 것과 중요하지 않은 코드를 분리할까?'
예전에는 일일히 개발자 툴을 열어서 뭐가 중요한 코드인지 직접 눈으로 확인했다고 합니다. 당연히 복잡하고, 시간이 오래 걸리고, 짜증스러운 일입니다.
하지만 친절한 개발자들이 도구를 개발해냈습니다.
여기를 눌러서 Generator 페이지에 들어가주세요.
그렇게하면 위의 사진과 같은 페이지가 나올 겁니다.
여기에 1번에 크리티컬 CSS를 추출할 페이지 주소를 적고, 2번에 본인의 CSS를 적어주신 후, 제가 빨갛게 표시한 3번의 버튼을 누르면 CRITICAL PATH CSS 글씨 아래에 결과물이 나옵니다.
[팁*작업하시기 전에 원본 CSS는 꼭 보관해주세요. 따로 메모장에라도 저장해두셔야 합니다.*]
예. 이게 바로 크리티컬 CSS입니다.
초보자도 따라할 수 있는 매우 간단한 작업입니다.
중요한 CSS와 중요하지 않은 CSS 분리하기
이제 크리티컬 CSS를 얻었으니 분리할 차례입니다.
원래 가지고 있던 CSS 원본 파일과 크리티컬 CSS를 비교해서 다른 부분을 걸러내면 됩니다.
물론 눈으로 직접 보면서 이 작업을 하면 머리에 쥐가 나고 말 겁니다. 이것 역시 온라인 무료 도구를 이용하면 됩니다.
여기를 누르셔서 들어가시면 텍스트를 입력하는 두 곳이 있을 겁니다.
한 곳엔 원본 CSS를, 나머지엔 아까 추출했던 크리티컬 CSS를 넣어준 후 파란색 [**COMPARE**] 버튼을 눌러주면 끝입니다.
그렇게하면 뭔가 텍스트끼리 복잡하게 줄이 쳐져 있을 겁니다.
저 불그스름한 진한 색깔이 중복되는 부분입니다.
이제 저 불그스름한 부분을 제거하면 되는데, 방법은 간단합니다.
오른쪽 상단에 제가 빨갛게 표시해둔 톱니바퀴 모양을 누르면 설정창이 나옵니다.
거기서 [**identical**]이 체크되어있을텐데 제외하시고, [**SAVE**]를 눌러주세요.
그러면 중복되는 부분이 모두 제거 됩니다.
그렇다면 원본 CSS를 입력했던 쪽을 봐주세요.
원래 CSS - 겹치는 부분 = 그게 바로 NON-CIRITICAL CSS입니다.
이제 아까 추출했던 크리티컬 CSS와 중요하지 않은 CSS로 분리가 완료 되었습니다.
남은건 최종단계입니다.
최종 마크업하기
CSS를 분리해냈다면 이제 적용하기만 하면 됩니다.
HTML의 HEAD 부분에서 CSS를 인라인 처리 하면 됩니다.
코드로 나타내면 이렇습니다.
<head>
<style> 크리티컬 css를 넣어주기 </style>
</head>
HEAD사이에 <style>태그를 쓴 후 그 안에 추출했던 크리티컬 CSS를 붙여넣기 하면 되죠.
그리고 나머지 - 중요하지 않은 Noncritical css를 비동기적으로 로드할 차례입니다.
이건 처리해줄 라이브러리도 있는 모양이지만 개인적으로는 간단하게 처리할 수 있는 코드를 추천합니다.
원리는 간단합니다.
CSS를 파일의 media가 print라면, 다운로드 받을 때 렌더링을 차단하지 않습니다.
그래서 처음엔 media를 print로 해준 후, 모두 다운받으면(onload이벤트) media를 all로 바꿔 CSS를 적용하는 겁니다.
코드로 나타내면 이렇습니다.
NON-CRITICAL CSS를 저장한 후 그 파일을 아래와 같이 불러오는 겁니다.
<head>
<style>크리티컬css</style>
</head>
<body>
코드들
<link rel="stylesheet" href="css파일경로" media="print" onload="this.media='all'; this.onload=null;">
</body>
간단하고 이해가 쉽고, 직관적인 코드입니다.
참고로 티스토리의 경우 css 파일의 경로가 ./style.css입니다.
부작용과 주의사항
장점만 있을 듯한 방법이지만 부작용도 있습니다.
유지보수 문제
한 번 코드를 수정할 때 마다 위에서 했던 행동을 반복해야 합니다.
매우 번거롭고 귀찮습니다. 그래서 본인이 모든 것을 완성했다고 확신했을 때 쓰시는 게 좋고, 원본 파일은 수정을 위해서 꼭 따로 보관을 하셔야 합니다.
여담이지만 제가 글을 쓰는 시점에서 이 블로그엔 아직 이 기법을 적용하지 않았습니다.
아직 미완성된 블로그이고 손볼 곳이 남아있기 때문입니다.
화면 깨짐 문제
제가 위에 언급한 사이트에서 제공하는 추출도구가 100% 완벽한 것은 아닙니다. 왜냐하면 같은 블로그/홈페이지라도 페이지마다 생김세가 다를 수가 있기 때문입니다.
생김세가 다른 페이지라면 당연히 크리티컬 css의 형태가 달라지는 것도 당연합니다.
그렇기 때문에 최대한 넓은 폭으로 크리티컬 css를 선정해야 합니다.
이 부분은 최대한 여러페이지에서 추출해보며 선정하는 수밖에 없습니다.
http/2 기반에선 안티패턴
마샬님께서 알려주신 부분입니다.
HTTP/2 기반의 웹페이지에선 안티패턴이어서 적용할 필요가 없다고 하네요.
마치면서
귀찮긴 해도 페이지 속도를 끌어올리는 데엔 탁월한 성능이 있는 최적화 방법입니다.
실제 테스트 블로그에서 적용했을 때, 렌더링 차단 리소스가 초록불이 들어오며 구글의 검사를 통과한걸 보니 구미가 당깁니다.
만약 블로그 스킨을 다듬는 작업을 완료하면 저도 서둘러 적용해야겠습니다.
이 글은 어떠세요?
'그외 > 유용한 정보' 카테고리의 다른 글
| 웹폰트를 경량화 후 로딩속도를 최적화해서 적용하는 방법 (2) | 2020.10.12 |
|---|---|
| 파일이름 일괄변경 프로그램 다크네이머(DarkNamer) 사용법 리뷰 (2) | 2020.10.11 |
| PageSpeed Insights의 렌더링 차단 리소스를 제거해보자. (15) | 2020.10.02 |
| 무료 게임을 뿌리는 에픽게임즈에 가입하는 방법 (0) | 2020.09.28 |
| 폴리필 (polyfill) 사용법 알아보기. feat IE11 (6) | 2020.09.26 |
