css 최적화를 통한 브라우저 속도 향상 시키기

핵심

사용하지 않는 css를 제거하고 css가 렌더링을 차단하지 않게 설정한다

사용하지 않는 css 제거하는 방법

구글 light house 활용하기

문제
Remove unused css 이슈 발생

해결방법

1. vertical dots에서 coverage tab을통해 unused css를 찾을 수 있다.
2. purgecss를 통해 빌드 시 사용하지 않는 클래스들을 삭제한다.
   추후에 자세한 사용방법에 대해 알아봐야겠다

렌더 블록킹 리소스 제거

https://www.google.com/search?q=script+defer+async&rlz=1C1SQJL_koKR911KR911&sxsrf=AJOqlzXBWVWNaZLUU7N6OIPqsDz3BE-Akw:1678288680804&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiWgZnF0Mz9AhVQMXAKHYmqBooQ_AUoAXoECAEQAw&biw=1536&bih=746&dpr=1.25#imgrc=4jxu5yH1hMIo7M

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 정찬명