로딩 성능 최적화

로딩 성능 최적화 - 텍스트 압축, 불필요한 CSS 제거

텍스트 압축 개요 서버에서 보내는 리소스들(CSS, JS, HTML)의 텍스트를 압축해서 보내고 받고 압축을 해제한다. 크기가 작기 때문에 더 빨리 다운로드할 수 있다. -> 로딩 속도를 개선할 수 있다. lighthouse의 opportunities에서 확인할 수 있다. 종류 텍스트 압축에는 크게 2가지가 있다. GZIP Deflate GZIP이 Defalte보다 더 좋은 압축율을 제공한다. 적용 번들은 기본적으로 압축이 안된 상태로 전달이 된다. 이를 compression-webpack-plugin을 활용해 빌드 시 압축하거나, 서버 코드에서 텍스트 압축을 적용한 후 전달하도록 하면 된다. 압축 시 모든 파일을 압축하는 것이 아닌 크기가 특정 크기 이상(ex: 10KB)인 파일들만 압축을 해서 전달한..

로딩 성능 최적화 - 캐시

캐시 최적화 캐시 활용 위해서 Cache-Control 설정 필요 -> 빌드된 파일을 서비스하는 서버에서 설정 no-cache: 캐시를 사용하기 전에 서버에 검사 후, 사용 결정 no-store: 캐시 사용 안 함 public: 모든 환경에서 캐시 사용 가능 private: 브라우저 환경에서만 캐시 사용, 외부 캐시 서버에서는 사용 불가 max-age: 캐시의 유효시간 , max-age = 0 해도 캐시 된 리소스를 버리지 않고 가지고 있는다. 추후 요청시 수정 여부 확인 후 활용 사용 예시 cache-control: private, max-age=60 Express를 활용한 간단한 구현 예시 1) 캐시를 전혀 사용하지 않을 때 no-store만 주지 않은 이유는 브라우저 중 no-store으로만 캐시 ..

로딩 성능 최적화 - 폰트

폰트 최적화 초기 페이지 로딩 시 폰트 다운로드 하는 시간 때문에 폰트가 깜빡이는 현상이 나타난다. (폰트 다운로드 후 폰트가 글자에 입혀짐) 웹 폰트의 문제점 FOUT(Flash of Unstyled Text) - 폰트 다운로드 전 기본 폰트로 텍스트가 보여짐, 다운로드 후 폰트 적용된 텍스트 보여줌 / IE, Edge FOIT(Flash of Invisible Text) - 폰트 다운로드 전 텍스트 노출하지 않음, 다운로드 후 폰트 적용된 텍스트 보여줌 / Chrome, Safari 웹 폰트의 최적화 방법 1) 폰트 적용 시점 컨트롤 - FOUT or FOIT or 혼합, 새 방식 등 css의 속성 font-display 사용 auto - 브라우저 기본 동작 block - FOIT(timeout = ..

로딩 성능 최적화 - 이미지, 동영상

이미지 사이즈 최적화 이미지 크기 확인하기 이미지 크기를 적절하게 줄여서 로딩 성능을 향상시킨다. Lighthouse의 Opportunity의 Properly size images 항목을 보면 적절하지 않은 크기의 이미지들의 목록을 볼 수 있다. 이미지 요소의 src 링크에 커서를 올려보면 rendered size: 화면에 그려진 이미지의 크기와 Intrinsic size: 불러온 이미지의 크기를 확인할 수 있다. 예시를 보면 화면에 그려지는 이미지의 크기에 비해 불러오는 이미지의 크기가 너무 크다. 적절한 크기는 화면에 그려지는 이미지의 너비,높이 기준으로 2배정도 되는 크기이다. 이미지 크기를 줄여서 로딩 시간을 줄일 수 있다. 이미지 크기 줄이기 그렇다면 이미지는 어떻게 줄일까? image proc..