[Github Page] 가장 유명한 이미지 CDN: jsdelivr 사용 방법과 CDN 개념 설명

SEO 테스트 결과

캡쳐해 놓았던 게 이것 밖에 없다….

대략 말로 설명해보자면 이미지 로딩 시간이 3초 남짓하게 나왔습니다. 사용자가 웹 서핑을 할 때, 로딩 시간이 3초보다 길어지면 웹페이지를 떠날 가능성이 확 높아진다고 합니다. 이번 포스팅에서는 어떻게 이런 문제를 해결할 수 있는 지에 대해 다루어 보겠습니다.

CDN을 적용하지 않는다면 github 레포에 저장되어 있는 이미지를 방문자가 받아오게 되는데요, 문제는 이 서버가 한 곳에 있다는 겁니다.

예를 들어 서버는 미국에 있는데, 접속자는 한국에 있다면 딜레이가 생길 수 밖에 없는 것이죠.

CDN은 어떤 파일을 전 세계 곳곳에 있는 서버에 복사하여 저장해두는 기술입니다. 한국에서 접속이 이루어지면 한국에서 가장 가까운 서버에서 파일을 보내주는 방식이죠.

CDN은 여러 업체에서 지원하고 있습니다. google drive부터 onedrive 등 저명한 클라우드 업체에서도 보통 CDN을 지원합니다. 각 업체 별로 장단점이 있으나, 보통 github page에서는 jsdelivr을 사용합니다.

github public repository를 만들고 이미지를 push 해둔다면 바로 사용 가능합니다. 심지어 회원가입 및 로그인도 필요 없습니다.

이미지를 업로드할 github repository 만들기
이미지 push하기
아래 양식으로 이미지 링크를 사용하기 https://cdn.jsdelivr.net/gh/{깃헙 유저명}/{레포 이름}/{이미지 파일 경로}`