angular 이미지 로딩 속도 개선

Angular에서 이미지 로딩 속도를 개선하기 위한 방법

 

일반적으로 사용되는 몇 가지 방법입니다.

1. Lazy Loading
Lazy Loading은 필요한 컴포넌트만 로딩하여, 초기 로딩 속도를 개선하는 방법입니다. 이미지도 마찬가지로 필요할 때 로딩하여, 초기 로딩 속도를 개선할 수 있습니다.
예를 들어 Angular에서 이미지를 Lazy Loading으로 처리하려면, img 태그를 사용하는 대신 아래와 같이 ng-template과 ng-container 디렉티브를 사용하여 이미지를 렌더링 할수 있습니다.

1) ng-template 디렉티브를 사용하여 이미지 템플릿을 생성

<ng-template #myImg>
  <img [src]="imageUrl">
</ng-template>

2) ng-container 디렉티브를 사용하여 이미지를 렌더링합니다.

<ng-container *ngIf="isVisible;then myImg"></ng-container>

위  코드에서 isVisible 변수 값이 true일 때, ng-container 안에 있는 ng-template이 렌더링됩니다. 이때, 이미지가 Lazy Loading되며, 사용자가 스크롤을 내려야 이미지가 로드됩니다.

이 방법을 사용하면, 사용자가 스크롤을 내리기 전까지 이미지를 로딩하지 않기 때문에 이미지의 초기 로딩 속도를 개선할 수 있습니다.

2. 이미지 크기 조정
이미지 크기를 조정하여 로딩 속도를 개선할 수 있습니다. 불필요하게 큰 이미지를 사용하면 로딩 속도가 느려질 뿐만 아니라, 사용자 경험도 나빠질 수 있습니다.

따라서, 이미지를 최적화하여 필요한 크기만 사용하도록 해야 합니다. 예를 들어, 이미지 리사이징을 통해 크기를 줄이거나, 이미지를 트리밍하여 필요한 부분만 사용하는 등의 방법이 있습니다.

3. 이미지 캐싱
브라우저는 이미지와 같은 정적 리소스를 캐시에 저장하여, 이후에 같은 리소스를 요청할 때 더 빠르게 불러올 수 있습니다. 따라서, 이미지를 캐시에 저장하여 로딩 속도를 개선할 수 있습니다.

이 방법을 사용하기 위해서는, 이미지 URL에 캐시 헤더를 추가하면 됩니다. Angular에서는 HttpClient를 사용하여 캐시 헤더를 설정할 수 있습니다.

4. 이미지 프리로딩
이미지 프리로딩은, 실제 사용되기 전에 이미지를 미리 로딩하여 로딩 속도를 개선하는 방법입니다. 이 방법을 사용하면, 사용자가 이미지를 요청하기 전에 이미지를 로딩하여 사용자 경험을 개선할 수 있습니다.

Angular에서는 PreloadAllModules와 loadChildren를 사용하여 이미지 프리로딩을 구현할 수 있습니다.

5.CDN 사용
CDN(Content Delivery Network)은 전세계에 분산된 서버를 통해 이미지를 제공하여 로딩 속도를 개선하는 방법입니다. CDN을 사용하면, 이미지를 요청하는 사용자와 가장 가까운 서버에서 이미지를 제공하기 때문에 로딩 속도가 빨라집니다.이 방법을 사용하기 위해서는, CDN 서비스를 사용하거나 직접 CDN 서버를 구축해야 합니다.