[미라클 TIL ?일차]

TIL 24. 01. 30

반응형 작업

버튼위치를 옮겨야 한다. 어떻게? 1번 useMediaQuery 사용.. 근데 server component로 만들어져 있다. 그렇다면 컴포넌트로 분리해서 할까? ㄴㄴ css로 처리하면 될듯.

        <Link href="/used-goods/create" className={styles.createLink}>
          등록하기
        </Link>

LightHouse 열 때 shift + ctrl + l

chrome extension 영향을 받지 않고 성능 체크를 하기 위해 시크릿 모드를 사용. 데스크탑과 모바일 디바이스를 나누어서 성능 체크를 해야한다. 새로고침을 실행하면서 분석을 수행한다.

Metrics = Web Vital => 웹 사이트에 대한 Vital 척도를 나타낸다.

Largest Contentful Paint(LCP) 가장 많이 언급이 되는 요소. 최적화할 때. 현재 화면을 띄웠을 때 가장 용량이 큰 리소스를 다운받아서 화면에 렌더링까지 걸린 시간. LCP를 줄일수록 사용자가 화면을 보는 속도가 빠르다. 이미지 크기를 줄이거나, 폰트 크기 등을 줄이는 작업이 필요하다. 용량 자체를 줄이는 (로딩 최적화). 다우놀드 파일의 크기를 줄이는 작업. 그런데 최적화라는 것은 필요한만큼만 하는 것, 무조건 줄이는 것이 좋은 것은 아니다.

Layout Shift (CLS) - Nextjs 는 프리렌더링하기 때문에 이미 만들어져있다. 만약 다른 요소는 화면에서 렌더링한다면?? 혹은 이미지를 넣을 때 이미지 크기가 고정이 되어 있지 않다면 레이아웃이 밀린다. 가장 쉽게 잡는 방법은 태그에 크기를 정해주는 것. 화면에 뜨기 전에 자리를 차지하고 있기 때문에 화면이 흔들리지 않을 것. 스켈레톤 UI도 고려.

First Miningful Paint 의미 있는 데이터를 처음 화면에 보여주는 것. FNT 정성적인 기준은 아니다. LightHouse 정량적으로 성능 측정을 하기 위해

파란불 들어오면 굳이 최적화할 필요는 없다. 노란불 들어오면 개선의 여지가 필요. 빨간불은 최적화해야한다.

이미지 element

resize 최적화. 원본 사이즈가 실제 크기, 너비가 과하다..? 렌더 사이즈의 2배이면 충분하다. 원본 사이즈가 렌더 사이즈의 2배 정도이면 괜찮다. 1배이면 안되냐? 모니터 하드웨어 발전해서 레티나 display.. 화질이 좋다 -> 픽셀단위. 그래서, 렌더 사이즈의 2배 정도 픽셀이 필요하다 . Nextjs에서 resize 최적화는 width와 height를 기준으로 사용한다. 렌더 사이즈의 2배 정도로 조정을 해야 한다. width height를 조절해야 하는 이유.

클라우디너리는 한 달에 25,000건 까지 무료. 나중에 사이드 프로젝트로 상업 활동을 생각한다면? 클라우드너리. 수익이 나면 클라우드플레어.

assets 폴더에 폰트 담아 놓고

Local Font는 인터넷과 상관없이 하드웨어 설치되어 있는 폰트가 로컬 폰트다. Nextjs에서 말하는 next/font/local 은 Next Font에서 프리셋으로 가지고 있는 폰트 외의 외부 폰트.

웹폰트를 말하는 것과 같다. 브라우저가 다운로드를 해야하는 것은 똑같으나 내장되어있는 폰트 사용이 아닌 폰트를 사용하려면 next/font/local을 사용할 수 있다.

subset 설정이 되어있는 게 좋다. 가능하면 cdn보다 다운로드한 후에 subset 처리를 하는 것을 권장한다. 용량을 줄이기 위해.

font subset 라이브러리 중에 유명한 게 있따. https://transfonter.org/

squoosh 구글이 개발한 이미지 최적화 사이트. nextjs가 아니었다면 얘로 이미지 최적화를 했었어야 함.

font preload - 폰트가 다운로드 되는 우선순위가 늦다. 폰트를 미리 다운받아서 적용하고 싶다. Nextjs가 해준다. prelaod performance 탭 열어서 확인할 수 있다.

페이지 단위의 코드 스플리팅은 지원해준다. 확인해봐야 할 것은 …….. 화면에 보이는 페이지만 먼저 다운, 당장 사용하지 않는

Nextjs Dynamic 코드 스플리팅, 페이지 단위는 코드 스플리팅을 지원하고

이미지, 폰트, 코드 스플리팅을 해야 개선가능.