본문 바로가기

Web Study124

웹 최적화 기법 - 코드 분할 (Splitting) 리액트의 SPA의 특성 상 모든 리액트 코드가 하나의 자바스크립트 파일로 번들링 되어 로드되므로 첫 페이지 진입 시 사용하지 않는 코드가 다소 포함되어 있다. 코드를 분할하고 → 하나의 번들 파일을 → 여러 개의 파일로 쪼개기 분할된 코드는 사용자가 서비스를 이용하는 도중 해당 코드가 필요할 때 로드되어 실행되게끔 지연로딩 처리 해준다. 코드 분할 후 컴포넌트 지연 로딩 동적 import 사용하기 import { add } from './math'; //X import('add').then((module) => { const { add } = module; //O }); 동적 import 의 경우에는 Promise 형태로 모듈을 반환하므로 사용이 용이하지 않는데, 리액트에선 해당 기능을 lazy와 Sus.. 2023. 7. 31.
웹 최적화 기법 - 이미지 사이즈 최적화 Properly size images 보통 이미지를 가공하지 않으면 지정된 크기 그대로 로딩된다. 그러므로 이미지 크기를 적당히 줄여줄 필요가 있는데, 보통 반응형을 고려하여 보여지는 이미지의 실제 크기에 2배 정도로 설정해준다. 이미지의 포맷 벡터 이미지 - SVG 비트맵 이미지 PNG 무손실 압축 방식, 원본을 훼손 없이 압축하며 알파 채널을 지원하는 이미지 포맷 png는 알파 채널을 지원하므로 배경 색을 투명하게 할 수 있음 JPG. JPEG 정보 손실이 발생하나 이미지를 좀더 작은 사이즈로 줄일 수 있음 투명도 정보가 필요하지 않거나 고화질이 아니어도 될 때 사용 WebP 무손실 압축과 손실 압축 둘다 제공하는 최신 이미지 포맷 브라우저 호환성 때문에 PNG, JPG 보다 나은 효율을 가지고 있더.. 2023. 7. 30.
웹 페이지 최적화 기법 - 폰트 최적화 폰트 최적화 커스텀 폰트를 사용하고자 한다면 성능 문제를 야기할 수 있다. 폰트의 변화로 인해 폰트 밀림, 깜박임 등이 발생하는데, FOUT (Flash Of Unstyled Text) 엣지 브라우저에서 폰트를 로드하는 방식 폰트의 다운로드 여부와 무관하게 먼저 텍스트를 보여준 다음 커스텀 폰트를 적용 FOIT (Flash Of Invisible Text) 크롬, 사파리, 파이어폭스 등에서 폰트를 로드하는 방식 폰트가 완전히 다운로드 되기 전까지 텍스트를 보여주지 않고 폰트 다운로드가 끝나면 커스텀 폰트를 보여준다. 단 크롬의 경우 FOIT 의 지속시간이 3초이며, 이후엔 FOUT 방식이 된다. 폰트 사용 시점 제어 서비스 및 컨텐츠의 특성에 따라 적절한 방식을 적용하며, font-style 속성을 사용.. 2023. 7. 27.
웹 페이지 최적화의 종류 최적화의 종류 로딩 성능 서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드할 때 성능 다운로드해야 하는 리소스 수를 줄이거나 크기를 줄이는 것에 중점, 코드를 분할하여 차등을 두어 다운로드하는 방법 등을 사용 렌더링 성능 리소스를 가지고 화면을 그릴 때의 성능 자바스크립트 코드에 크게 영향이 있고 코드를 얼마나 효율적으로 작성했느냐에 따라 화면이 그려지는 속도와 사용자 인터렉션의 자연스러움이 달라진다. 브라우저의 기본 동작 원리나 사용하는 프레임워크 라이프사이클 등의 이해가 필요 최적화 툴 Squoosh 웹에서 서비스 되는 이미지 압축 도구 간편하게 이미지 포맷이나 사이즈를 변경 가능 (Resize, Compress) compress의 압축 포맷과 Quality 를 70~80 정도로 변.. 2023. 7. 25.

티스토리툴바