Frontend - 웹 사이트 성능 최적화 방법

사이트 속도를 높이는 방법을 알아보자

목차

1. CDN 사용하기
2. 더 좋은 호스팅 서비스를 찾자
3. 웹 사이트 이미지 크기 최적화
4. 플러그인 숫자 줄이기
5. JavaScript, CSS 파일 최소화
6. 웹 사이트 캐시 사용
7. Gzip 압축 사용
8. CMS의 데이터베이스 최적화
9. 웹 폰트 (Web Font) 사용 줄이기
10. 404 에러 찾기
11. Prefetching technique(미리 불러오기) 사용하기

---

1. CDN 사용하기

 

CDN은 Content Delivery Network의 약자로 다양한 지리적 위치에 분산된 웹 서버들의 집합입니다.

 

서버를 한 개만 구축한다면 해당 서버에 부하가 심해질 것이고 먼 거리에서 오는 요청을 처리하는 시간이 늦어지므로 CDN을 통해 사용자의 요청을 가장 근처의 서버로 리다이렉팅 할 수 있습니다.

 

가격이 부담되지만 로딩 시간을 줄이기에 효과적인 방법입니다.

 

 

2. 더 좋은 호스팅 서비스를 찾자

 

호스팅 서비스에는 세 가지 종류가 있습니다.

 

1. Shared Hosting ( 공유 호스팅 )

 

2. Virtual Private Servers (VPS) hosting ( 가상 서버 호스팅 )

 

3. Dedicated server ( 전용 호스팅 서비스 )

 

더 빠른 웹 서비스를 위해서는 좋은 호스팅 서버가 필수적입니다.

 

가장 저렴한 호스팅 서비스는 공유 호스팅이지만 서버의 자원을 공유하기 때문에 VPS나 전용 호스팅 서비스보다 느립니다.

 

VPS, 전용 서버는 공유 호스팅보다 더 빠르므로 만약 웹 사이트가 평균적인 트래픽을 가지고 있다면 VPS, 재정적 여유가 있다면 전용 서버를 개설하는 방식을 선택할 수 있습니다.

 

 

3. 웹 사이트 이미지 크기 최적화

 

웹 사이트 이미지는 파일의 크기가 커 속도를 저하시키는 주범입니다.

 

그러므로 이미지 압축 툴로 크기를 줄이거나 이미지의 크기를 줄여 최적화를 할 수 있습니다.

 

 

4. 플러그인 숫자 줄이기

 

플러그가 많은 웹 사이트는 자원을 더 많이 소모하므로 가능한 플러그인을 사용하지 말고 더 이상 사용하지 않는 플러그는 정리하는것이 좋습니다.

 

 

5. JavaScript, CSS 파일 최소화

 

웹 사이트에 많은 JS, CSS 파일이 포함되어 있다면 사용자의 요청도 그만큼 늘어날 확률이 높습니다.

 

JS, CSS 파일의 숫자를 줄여 웹 사이트의 속도를 개선시킬 수 있습니다.

 

 

6. 웹 사이트 캐시 사용

 

웹 사이트 캐시를 사용하면 렌더링된 웹 페이지를 캐시에 저장해 두고 요청이 들어오면 렌더링 해둔 페이지를 전송하는 방법을 사용하여 사용자로부터 HTTP 요청이 들어올 때마다 새로운 웹 페이지를 렌더링 하는 일을 피할 수 있습니다.

 

 

7. Gzip 압축 사용

 

Gzip 압축은 파일 크기를 줄이는 효과적인 방법입니다.

 

Gzip은 HTTP 요청을 줄이고 서버 응답시간을 빠르게 합니다.

 

Gzip은 브라우저에 파일을 보내기 전 파일들을 압축시키는 일을 합니다.

 

사용자 측에서는 압축되어 보내진 파일들을 압축 풀기하여 콘텐츠를 출력합니다.

 

이 방법은 웹 사이트에 포함된 모든 파일에 적용할 수 있습니다.

 

 

8. CMS의 데이터베이스 최적화

 

CMS는 Content management system의 약자로 콘텐츠 관리 시스템을 말합니다.

 

만약 복잡한 플러그인들이 가득찬 CMS를 사용 중이면 데이터베이스의 크기는 커지고 웹 사이트 속도는 느려집니다.

 

그러므로 CMS의 최적화 플러그인을 이용해 최적화 작업을 해주는 것도 좋은 방법입니다.

 

 

9. 웹 폰트(Web font) 사용 줄이기

 

웹 폰트는 페이지 렌더링을 느리게하고 외부 리소스에 HTTP 요청을 증가시킵니다.

 

그러므로 웹 폰트 트래픽을 줄이기 위해서는

 

• WOFF2 포맷 사용
• 사이트에서 사용하는 character set만 include
• 필요한 스타일만 선택

 

10. 리다이렉션 줄이기

 

웹 사이트의 리다이렉션은 추가적인 HTTP 요청을 생성하여 성능 저하를 유발합니다.

 

그러므로 최적화를 위해 리다이렉션 횟수를 최소화해야합니다.

 

사이트 스캔을 통해 웹 페이지의 리다이렉션을 파악하고 필수적인 리다이렉션만 유지합니다.

 

 

11. Prefetching techinque(미리 불러오기) 사용하기

 

현대적인(modern) 브라우저들은 디폴트로 prefetching(프리페칭)을 허용합니다. 

 

프리 페칭에는 대표적으로 세 가지 종류가 있습니다.

 

1. DNS-prefetching : IP 주소에 미리 도메인 이름을 추가

2. Link-prefetching : 사용자가 특정 링크를 클릭할 것이 확실할 경우 사용

3. Prerendering : 미리 웹 페이지 전체를 렌더링하거나 일부를 미리 렌더링

 

프리 페칭의 효과는 좋지만 정확한 예측을 위해 깊은 사용자 행동 분석이 필요

---

요약

 

요즘 일반적인 사용자는 웹 페이지가 3초 이내로 로딩될 것을 기대합니다.

만약 3초 이내로 웹 페이지를 로드하지 못하면 웹 사이트 트래픽을 잃을 것이고(= 사이트 방문자들을 잃을 것이고) 결과적으로 수익도 줄어들 것입니다.

 

 

출처

http://www.manual.oneware.co.kr/official.php/home/info/1973

https://www.altexsoft.com/blog/engineering/12-techniques-of-website-speed-optimization-performance-testing -and-improvement-practices/