로딩 시간 개선
Intro
클라우드플레어에서 Git Push 를 통해 새로운 버전이 빌드되면 첫 번째 페이지 로딩 시간이 느릴 수 있습니다. 클라우드플레어는 콘텐츠 배달 네트워크(CDN)로, 처음에는 데이터를 원본 서버에서 가져와야 하지만 이후에는 캐시된 콘텐츠를 제공하여 로딩 시간을 단축합니다. 다음과 같은 방법으로 첫 번째 로딩 시간을 단축할 수 있습니다.
첫 번째 로딩 시간을 단축하는 방법
클라우드플레어 캐싱 설정 최적화
- 캐싱 수준 조정: 클라우드플레어의 캐싱 수준을 조정하여 HTML 페이지를 캐싱할 수 있습니다. 클라우드플레어 대시보드에서
Caching > Caching Level을 “Standard"에서 “Ignore Query String"으로 설정하여 페이지가 더 잘 캐싱되도록 합니다. - Page Rules 사용: 특정 페이지에 대해 강력한 캐싱 규칙을 설정할 수 있습니다.
Page Rules를 사용하여/경로의 캐싱을 강화하면 첫 번째 로딩 시간을 줄일 수 있습니다.
미리 렌더링(pre-rendering)
- 미리 렌더링을 사용하여 서버 측에서 HTML을 생성하고 클라우드플레어에서 이를 캐싱할 수 있도록 합니다. 이를 통해 초기 로딩 속도가 빨라집니다. Next.js 같은 프레임워크는 정적 사이트 생성(SSG) 기능을 지원합니다.
서비스 워커(Service Worker) 사용
- 서비스 워커를 사용하여 브라우저가 페이지 로드를 요청하기 전에 캐시된 버전을 제공할 수 있도록 합니다. 이를 통해 사용자 경험을 개선할 수 있습니다.
서버 응답 시간 최적화
- 원본 서버의 응답 시간을 줄이면 클라우드플레어가 콘텐츠를 더 빨리 가져올 수 있습니다. 서버의 성능을 최적화하고, 압축(예: gzip)을 사용하여 전송하는 데이터의 크기를 줄입니다.
압축 및 최적화
- 이미지 최적화: 클라우드플레어의 Polish 기능을 사용하여 이미지 크기를 줄이거나 웹사이트에 이미지 최적화 툴(예:
image-webpack-loader)을 사용하여 압축된 이미지를 제공합니다. - JavaScript/CSS 최적화: Minify 기능을 활성화하여 JavaScript, CSS, HTML을 축소하여 데이터 전송량을 줄입니다.
클라우드플레어 기능 활용
- Argo: 클라우드플레어 Argo는 네트워크 트래픽을 최적화하여 더 빠른 경로로 데이터를 전송합니다. Argo를 사용하여 성능을 향상시킬 수 있습니다.
- Rocket Loader: JavaScript를 비동기로 로드하여 페이지 로딩 속도를 향상시킵니다.
추가적인 고려사항
Lazy Loading
- 이미지나 비디오 등 페이지 로딩 시점에 꼭 필요하지 않은 콘텐츠를 lazy loading으로 설정하여 처음 로딩 시점의 자원 사용을 줄입니다.
CDN 활용
- 클라우드플레어 외에도 다른 CDN을 활용하여 사용자와 가까운 위치에서 콘텐츠를 제공할 수 있습니다.
Buy me a coffee