몽땅뚝딱 개발자

◽ Lighthouse Lighthouse 탭에서 이렇게 확인할 수 있다. ◽ 커버리지탭 각 파일을 더블클릭하면 사용하는 것, 사용하지 않는 css를 볼 수 있다. 따라서 사용하지 않는 css를 제외한다면 용량을 줄일 수 있다. ◽ purgecss 사용하여 사용하지않는 css 제거하기 npm i purgecss sass랑 같이 사용할 수 있는지? https://purgecss.com/css_modules.html CSS modules | PurgeCSS How to use with CSS modules PurgeCSS works by comparing the selectors in your content files with the ones on your CSS files. When using CSS ..

◽ 캐시 설정하기 ◽ 캐시의 종류 1. 메모리 캐시 메모리상에(RAM) 저장 2. 디스크 캐시 디스크에 file로 저장 ◽ Cache-Control Http Header에 들어가는 값으로 서버에서 설정해야 한다. - 요청: 나 어떤 이미지가 필요해 - 서버: 니가 이미지가 필요하구나? 가져가 ◽ Cache-Control의 5가지 속성 1. no-cache 캐시를 사용하기 전에 서버에 검사 후 사용을 결정한다. 요청한 이미지가 다르면 캐시된 이미지를 사용하지않고 다시 보내준다. max-age=0과 같다. 캐시 시간이 만료되더라도 브라우저는 리소스를 갖고있다. 새로 다시 리소스를 요청할 때 만료된 데이터에 대해 다시 사용해도되는지 검사한다. 2. no-store 캐시를 사용하지 않음 3. public 모든 ..

◽ FOUT vs FOIT FOUT(flash of unstyled text) 기본폰트 => 다운로드 된 시점에서 폰트를 적용하는 것 IE, Edge에서 사용 FOIT(flash of invisible text) 다운로드 전에는 해당 폰트가 적용된 텍스트를 보여주지 않음 Chrome, Safari에서 사용 => 우리는 폰트 최적화를 통해 이 두 현상을 해결 ◽ 폰트 최적화 방법 2가지 1. 폰트 적용 시점 컨트롤 하기: FOUT, FOIT 2. 폰트 사이즈 줄이기 ◽ 폰트 시점 컨트롤 속성 font-display 속성을 사용한다. - auto: 브라우저에서 설정한 기본 동작 - block: FOIT (timeout = 3s) - swap: FOUT - fallback: FOIT (timeout = 0.1..