프론트엔드
css 최적화를 통한 브라우저 속도 향상 시키기
jfmam
2023. 3. 9. 00:26
핵심
사용하지 않는 css를 제거하고 css가 렌더링을 차단하지 않게 설정한다
사용하지 않는 css 제거하는 방법
구글 light house 활용하기
문제
Remove unused css 이슈 발생
해결방법
- vertical dots에서 coverage tab을통해 unused css를 찾을 수 있다.
- purgecss를 통해 빌드 시 사용하지 않는 클래스들을 삭제한다.
추후에 자세한 사용방법에 대해 알아봐야겠다
렌더 블록킹 리소스 제거
defer
- html parsing 중단없이 빠르게 진행하며 script 다운로드를 동시에 실행한다
- HTML parsing이 중단없이 진행되기 때문에 화면에 나타나는 것이 빠르다
- script 실행은 parsing이 끝난 후에 실행된다.
async
- 다운로드가 끝나면 스크립트를 실행하며 html parsing은 끝난다.
- html parsing이 모두 끝난 뒤에 실행해도 괜찮은 경우 async를 사용할 수 있다.
link 태그 최적화하기
css 로딩 속도를 올리면 FCP를 향상 시킬 수 있다.
- 디바이스에 따라 필요한것만 로딩할 수 있게 해주면 좋다.
- desktop
- mobile
<link role="stylesheet" media="(max-width: 1024px)" /> <link role="stylesheet" media="(max-width: 768px)" />
FCP: first contentful paint 첫번째 내용물이 그려지는 시점, 내용물이 그려지는 시점이 느려지면 사용자입장에서는 브라우저가 느리다고 인식한다.
태블릿과 모바일, 데스크톱을 나누어서 필요한것만 받을 수 있게 하였다.
<link rel="preload" onload="this.onload=null;this.rel='styleshhet'" />
- preload를 사용하면 css를 지연시킬 수 있다.
- 모달, 팝업
- 스크롤 밑에 있는 컴포넌트의 경우
- 다운로드만 진행하고 실행은 하지 않는다.
- 해당 css가 필요할 때 실행
출처
The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명