Post

홈페이지 속도 개선 방법

Posted
Preview Image
By HwangInJi 8 min read

홈페이지 속도의 중요성

▶ 홈페이지 속도는 사용자 경험과 검색 엔진 최적화(SEO) 모두에 중요한 요소입니다.
속도가 느려지면 페이지 로딩 시간이 길어지고 그렇게 되면 사용자는 이탈하게 되는데 그로 인해 검색 엔진 랭킹도 낮아질 수 있습니다.
이 때, 홈페이지 속도를 개선하는 방법은 여러 가지가 있는데 프론트엔드와 백엔드 최적화, 서버 설정 등 다양한 측면을 포함합니다.
아래에서 홈페이지 속도를 개선하기 위한 주요 방법들을 자세히 설명해보도록 하겠습니다.

1. 이미지 최적화

▶ 이미지는 웹페이지 로딩 속도에 큰 영향을 주는데, 고해상도의 이미지는 파일 크기가 크기 때문에 로딩 시간이 길어질 수 있어 이를 개선하기 위해 다음과 같은 방법을 사용합니다.

  1. 이미지 압축
    이미지를 압축하여 파일 크기를 줄인다.
    이는 JPEG, PNG, GIF와 같은 포맷에 적용할 수 있으며, TinyPNG, JPEGoptim과 같은 도구를 사용할 수 있습니다.
  2. 적절한 포맷 사용
    웹페이지에 맞는 이미지 포맷을 선택한다.
    예를 들어, 사진에는 JPEG를, 투명한 이미지는 PNG를 사용하고, 새로운 포맷인 WebP는 더 작은 파일 크기를 제공해주면 됩니다.
  3. 이미지 크기 조정
    웹페이지에 필요한 크기로 이미지를 조정한다.
    고해상도의 이미지를 작은 크기로 보여줄 때도 원본 파일을 사용하면 불필요한 로딩 시간이 발생할 수 있습니다.
  4. 지연 로딩(Lazy Loading)
    사용자가 스크롤할 때 이미지를 로드하여 초기 페이지 로딩 속도를 개선합니다.

2. 브라우저 캐싱

▶ 브라우저 캐싱을 설정하면 사용자의 브라우저가 자주 사용되는 리소스를 캐시에 저장하여 재방문 시 로딩 속도를 크게 개선할 수 있습니다. 이를 위해 보통 HTTP 헤더를 설정하여 캐시 만료 시간을 지정하는데 예시로 한번 살펴볼겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/javascript "access 1 month"
    ExpiresByType application/javascript "access 1 month"
    ExpiresByType application/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

3. 콘텐츠 전송 네트워크(CDN) 사용

▶ CDN은 전 세계 여러 서버에 웹사이트의 정적 자산(이미지, CSS, JavaScript 등)을 저장하여 사용자에게 가장 가까운 서버에서 리소스를 제공함으로써 로딩 속도를 개선하며, Cloudflare, Akamai, Amazon CloudFront와 같은 CDN 서비스를 활용할 수 있습니다.

4. 미니파이(Minify) CSS, JavaScript, HTML

▶ 불필요한 공백, 주석, 줄바꿈 등을 제거하여 파일 크기를 줄이는 작업을 미니파이라고 하는데, 이를 활용하면 전송되는 데이터의 양을 줄여 로딩 시간을 단축할 수 있습니다.

  • 자동 미니파이를 위한 도구
    1. CSS: CSSNano, csso
    2. JavaScript: UglifyJS, Terser
    3. HTML: HTMLMinifier

5. 비동기 로딩 및 병렬화

▶ JavaScript 파일을 비동기로 로딩하여 페이지 로딩이 차단되지 않도록 헐 땨 ‘script’ 태그에 async 또는 defer 속성을 추가하여 비동기 로딩을 구현할 수 있습니다.

1

<script src="script.js" async></script>

6. 서버 응답 시간 단축

▶ 서버 응답 시간을 줄이기 위해선 다음과 같은 방법을 사용할 수 있습니다.

  1. 효율적인 데이터베이스 쿼리
    불필요한 데이터베이스 쿼리를 줄이고, 인덱스를 사용하여 쿼리 성능을 향상시킵니다.
  2. 서버 성능 최적화
    서버의 하드웨어 성능을 향상시키거나, 필요한 경우 더 성능 좋은 서버로 업그레이드합니다.
  3. 캐싱 활용
    서버 사이드 캐싱(예: Redis, Memcached)을 사용하여 데이터베이스 쿼리를 최소화하고, 자주 요청되는 데이터를 캐시에 저장합니다.

7. 불필요한 플러그인 제거

▶ 웹사이트에 설치된 플러그인이 많을수록 로딩 시간이 길어질 수 있는데 특히, 중복되거나 필요하지 않은 플러그인은 성능 저하를 유발할 수 있습니다. 때문에 정기적으로 플러그인을 점검하고 불필요한 플러그인을 제거하는 과정이 필요합니다.

8. HTTP/2 및 GZIP 압축 사용

▶ HTTP/2는 웹페이지 로딩 속도를 향상시키기 위해 여러 파일을 병렬로 전송할 수 있는 프로토콜로 대부분의 현대 웹 서버는 HTTP/2를 지원하므로 이를 활성화합니다.
또한, GZIP 압축을 사용하여 전송되는 파일 크기를 줄일 수 있어 웹 서버 설정에서 쉽게 활성화할 수 있습니다.

9. 중요한 콘텐츠 우선 로딩

▶ 사용자가 페이지를 로드할 때 초기 화면에 필요한 중요한 콘텐츠를 먼저 로딩하여 첫 번째 의미 있는 페인트(FMP, First Meaningful Paint) 시간을 줄이게 되면 사용자에게 페이지가 빠르게 로딩되고 있다는 인상을 줄 수 있습니다.


이렇게 오늘은 홈페이지 속도의 중요성에 대해 알아봤는데요,
면접에서도 충분히 나올 수 있는 질문이기 때문에 미리 공부해두면 좋을 것 같네요!
그렇다면 저는 다음에 또다른 면접에 대비한 내용을 들고오도록 하겠습니다 😁!

ETC
Homepage
This post is licensed under CC BY 4.0 by the author.