| 1. 클라우드플레어 작동원리 |
| 2. 클라우드플레어 사이트 최적화 - 캐싱 |
| 3. 클라우드플레어 사이트 최적화 - 스피드 |
클라우드플레어 스피드 메뉴에서는 사이트의 속도를 분석해주면서 다양한 최적화 서비스를 제공한다.
Speed 개요 탭에서는 속도 분석 결과를 제공하는데 자세히 보면 기준이 South Carolina, USA다.
즉, 미국 기준으로 1.1초 후에 페이지 로딩이 시작된다는 뜻으로 우리나라의 기준과 다소 맞지 않다.
이 부분은 그냥 패스하면 된다.
(구글 개발자도구로도 충분히 분석이 가능하니..)
최적화 탭을 보면 속도 개선을 위한 다양한 옵션이 있다.
이미지 크기 조정, Polish, 자동최소화, Brotli, URL 프리패치, 로켓 로더 등 엄청 많지만,
대부분이 유료이고 무료로 쓸 만한 것들로는 자동최소화와 로켓로더가 있다.
그러나 이 두개만 적용해도 충분히 속도가 향상된다.
1. 자동최소화(Auto Minify)
Minify를 하면 모든 주석과 공백이 제거되고 코드가 한 줄로 줄어들어 용량을 최소화 할 수 있다.
각 언어마다 미니파이 모듈도 있고 VSC 익스텐션도 있어서 직접 해줄 수도 있지만
클라우드플레어를 사용한다면 Auto Minify 설정으로 한번에 가능하다.
사진처럼 체크 해준 뒤 캐시 Purge(삭제)를 하면 바로 적용된다.
*** 응답 헤더의 cf-bgj: minify 설정은 클플을 통한 Auto minify가 되어있다는 뜻이다.
minify가 적용된 파일은 Response 탭을 통해 확인할 수 있는데 띄어쓰기, 줄바꿈 없이 코드가 깔끔하게 한줄로 바뀌어있다.
2. 로켓 로더(Rocket Loader) 켜기
페이지 로딩 시간을 지연시키는 요소 중 하나가 브라우저의 렌더링 차단이다.
일반적으로 브라우저는 html을 읽고 해석하여(이하 "파싱") 화면을 만드는데
중간에 css나 js를 만나면 파싱을 중단하고 css, js를 먼저 읽는다.
즉, 중간중간에 css나 js가 많이 끼어있을 수록 페이지 전체를 읽는 시간이 지연된다는 뜻이다.
그래서 보통은 css은 <head>영역에 넣고 js는 </body>태그 바로 직전에 넣을 것이다.
하지만 다른 이유로 중간에 js를 끼워넣는 경우도 있는데
이 때 js를 읽기 위해 html 파싱을 잠시 멈추는 것을 렌더링 차단이라고 한다.
이것을 방지하기 위해 클라우드플레어에서 로켓로더라는 서비스를 제공한다.
Speed>최적화 탭에서 확인할 수 있다.
로켓 로더가 하는 일은 이 렌더링 차단을 막는 일로
자바스크립트 로드를 지연시켜 페이지의 모든 컨텐츠(텍스트, 이미지, 글꼴 등)가 로드된 이후 자바스크립트를 읽도록 한다.
js에 defer속성과 비슷하다고 보면 된다.
(https://blog.asamaru.net/2017/05/04/script-async-defer/ 참고)
특정 파일 로켓 로더 제외하려면?
로켓로더를 섣불리 켰다가 문제가 발생할 수 있다.
**스크립트가 실행되어야만 렌더링할 수 있는 페이지의 경우(무조건 js를 먼저 읽어야 하는 경우)는 로켓로더 설정을 꺼줘야 한다.
이럴 때 제외할 스크립트 태그에 "data-cfasync=false" 속성을 추가한다.
// 클라우드플레어 로켓로더 설정 제외할 스크립트
<script data-cfasync = "false" src = "/ javascript.js"> </ script>
로켓로더를 키고 개발자도구 Lighthouse로 사이트 성능을 측정해보면
Eliminate render-blocking resources 시간이 확연히 줄어든 것을 볼 수 있다.
3. 정리하면서..
웹사이트의 성능은 매우매우 중요하다. 정신없이 개발하다보면 꼭 성능 이슈가 발생하는데, 사이트 성능은 SEO와도 직결되어 사이트 유입에 막대한 영향을 끼치므로 시간을 내서 투자해야 한다.
요즘엔 브라우저 성능이 워낙 좋아져서 거기서 거기라고 생각할 수 있지만, 메모리누수, 불필요한 로직이 쌓이고 쌓이다보면 웹을 점점 느리게 만든다. 그런 면에서 클플은 개발자가 일일이 설정해줘야 할 작업을 알아서 해주기 때문에 매우 편하고 강력한 서비스라고 할 수 있다. (물론 그 전에 코드로 할 수 있는 최적화 작업은 모두 해놓는 것이 기본)
"클라우드플레어가 좋대"라는 말만 듣고 단순히 등록만 해놓는 것 보다, 네트워크 구조와 클라우드플레어의 작동원리를 알고 자기 사이트에 맞게 설정한다면 클플을 120% 활용할 수 있다.
클플은 세계 1위 CDN 기업인 만큼 이 시리즈에서 설명한 것 보다 훨씬 많은 기능들(API제공, 보안설정 등)이 있으니, 여유될 때 한번씩 써볼 것을 추천한다.
'클라우드플레어' 카테고리의 다른 글
| [Cloudflare 시리즈2] 클라우드플레어 사이트최적화 - 캐싱 (0) | 2022.04.10 |
|---|---|
| [Cloudflare 시리즈1] 클라우드플레어 작동원리 (0) | 2022.04.10 |