프론트엔드 최적화

Frontend 최적화

프론트엔드 성능의 목표는 사용자가 웹사이트나 애플리케이션에서 원하는 것을 매우 제한된 시간에 얻을 수 있도록 하고 상호 작용하는 동안 원활한 경험을 보장하는 것이다.

1. 파일 압축

모든 웹사이트는 HTML, JS 및 CSS 코드 파일로 구성된다. 페이지가 복잡할수록 로딩 시간이 길어진다. 사이트 응답성을 향상시키려면 이러한 큰 코드 파일을 원래 크기로 압축해야 한다.

2. 반응형 이미지와 WebP 사용

이미지는 평균 웹 페이지 크기의 약 51%를 차지하므로 웹 사이트가 무겁고 느려질 수 있다. 스케일링 화면에서 이미지 전달 시간을 줄이고 웹사이트의 성능을 높이려면 반응형 이미지를 사용하는 것이 좋다.

WebP 형식의 이미지는 JPEG보다 최대 30%, PNG 형식의 이미지보다 최대 25% 더 작다. 이미지를 WebP 형식으로 변환하는 것만으로도 웹 페이지의 크기를 크게 줄일 수 있지만 Safari에서는 지원하지 않는다.

3. CDN 선택

특정 웹 페이지와 사용자와 웹 사이트의 호스팅 서버 사이의 물리적 거리 때문에 지연이 발생한다. 이 거리를 줄이기 위해 CDN은 다양한 지리적 위치에 콘텐츠 버전을 저장한다. 사용자의 요청은 CDN을 통해 가장 가까운 서버로 전송된다.

4. Prefetching 활성화

prefetching은 리소스의 시간 지연을 줄이기 위해 자료를 업로드한다. 사용자가 브라우저의 캐시에 저장된 일부 링크를 클릭하면 필요한 정보가 즉시 화면에 나타난다. 프리페칭에는 세 가지 주요 유형이 있다.

• Link prefetching: 브라우저는 사용자가 가까운 장래에 요청할 가능성이 있는 리소스를 수집할 수 있다. 그림 및 JavaScript와 같은 캐시 가능한 요소로 제한된다.
• DNS prefetching: 사용자가 특정 페이지를 탐색하는 동안 IP 주소를 읽을 수 있는 웹사이트 URL로 변환한다. 사용자가 DNS 프리페치 세트가 있는 링크를 클릭하면 대기 시간이 크게 줄어든다.
• Prerendering은 Prerendering이 전체 페이지를 렌더링하고 페이지의 변화가 생기는 즉시 현재 탭이 숨겨진 사전 렌더링 페이지로 대체된다.

5. 사용하지 않는 CSS 및 JS 제거

CSS, HTML 및 JavaScript에서 불필요한 중복 데이터를 제거하는 과정을 resource minification라고 한다. 필요한 코드만 전송하면 페이지 크기를 줄일 수 있다.

6. 캐싱으로 속도 향상

캐싱은 사용자가 요청한 자산의 복사본을 저장하고 나중에 원본 복사본 대신 저장된 복사본에 액세스한다.

• Browser cache: 파일은 브라우저 로컬 캐시에 저장되므로 액세스하려는 경우 서버에서 파일을 다운로드할 필요가 없다.
• Cache server: 사용자의 요청이 멀리 이동할 필요가 없도록 다른 물리적 위치에 존재한다.
• Memory cache: 데이터의 특정 부분을 SRAM에 저장하여 애플리케이션 내에서 데이터 전달 프로세스의 속도를 높이는 데 도움이 된다.
• Disc cache: 메모리 캐시와 마찬가지로 기존 RAM을 사용하지만 응용 프로그램 내에서 더 빠르게 액세스할 수 있도록 데이터를 저장한다.

7. 이미지 최적화

JPEG 파일에는 위치, 날짜, 노출 및 셔터 속도와 같은 설정에 대한 추가 정보가 많이 포함되어 있다. 고해상도 이미지는 빠른 페이지 로딩을 저하시키고 렌더링 프로세스를 느리게 만든다. 

• Optimus: JPEG 이미지의 약간 손실 압축과 PNG 이미지의 무손실 압축을 목표로 한다. 화질은 변하지 않지만 이미지에서 추가 데이터를 제거하여 파일 크기를 줄인다.
• MozJPEG: Mozilla JPEG 인코더 프로젝트를 적용하여 파일 크기 제한 없이 JPEG 및 PNG 이미지의 크기를 조정하고 압축할 수 있다.
• Guetzli: 단색이나 모서리와 같은 JPEG 형식의 단점을 처리하는 데 특히 유용하다.

적절한 형식과 크기를 선택하는 것 외에도 다양한 방법으로 이미지를 최적화하여 프론트엔드 페이지 로드 시간을 최소화할 수 있다.

1. HTTP/1.1 대신 HTTP/2 사용하기
2. 이미지를 압축하기
3. 이미지 세트를 사용하기
4. 축소된 사진 전송하기
5. 동적 JPEG 사용하기

8. 동영상 최적화

이미지와 마찬가지로 동영상도 웹에 최적화되어야 한다. 웹 사이트 성능에 부정적인 영향을 미치는 애니메이션 GIF와 비디오를 사용하는 대신 애니메이션 WebP를 선택하거나 HTML5 비디오 태그로 교체하는 것을 고려할 수 있다. 브라우저는 이미지처럼 비디오를 미리 로드할 수 없지만 HTML5 형식은 더 가볍고 웹사이트의 비디오 플레이어를 더 잘 제어할 수 있다. 이 형식을 사용하면 원본 형식으로 비디오를 업로드할 수 있다. HTML5 비디오 태그는 MP4, OGG 및 WebM에서만 작동한다.

 

출처: https://medium.com/@inverita/frontend-optimization-8-tips-to-improve-web-performance-29af4b00efe7