깃허브 블로그 이미지 로딩 속도 개선하기 [ GitHub As a CDN ]

문제: GitHub Blog의 느린 이미지 로딩

깃허브 블로그(GitHub Pages)에 이미지를 올리면 로딩이 답답할 정도로 느립니다. 특히 여러 장의 이미지가 포함된 포스트는 스크롤할 때마다 로딩 대기 시간이 길어 사용자 경험을 해칩니다.

원인은 GitHub의 기본 이미지 서빙이 CDN 최적화가 되어 있지 않기 때문입니다. GitHub은 코드 호스팅이 주 목적이라, 이미지를 대량으로 빠르게 서빙하는 구조가 아닙니다. 전세계 사용자가 접속하면 GitHub 서버(미국)에서 매번 원본을 가져와야 해서 느린 것입니다.

해결책: CDN 캐싱

이 문제는 CDN(Content Delivery Network)이라는 캐싱 기술로 해결할 수 있습니다. CDN은 전세계 여러 엣지 서버에 콘텐츠를 복제해두고, 사용자와 가장 가까운 서버에서 응답을 받게 해 속도를 크게 개선합니다.

jsDelivr를 활용한 GitHub CDN

jsDelivr는 오픈소스 프로젝트를 위한 무료 CDN 서비스로, GitHub 저장소의 파일을 그대로 CDN으로 서빙해줍니다. URL만 살짝 바꾸면 즉시 CDN 효과를 얻을 수 있습니다.

원본: https://raw.githubusercontent.com/user/repo/branch/image.png
CDN:  https://cdn.jsdelivr.net/gh/user/repo@branch/image.png

이 방법의 장점:

• 무료: 상업적 사용 가능
• 빠름: 전세계 엣지 서버 네트워크
• 간단: URL만 바꾸면 끝
• 자동 갱신: GitHub push 시 자동 동기화 (버전 지정 가능)

GitHub As a CDN: 업로드까지 자동화

매번 GitHub에 수동으로 파일을 올리고 URL을 조합하는 것도 번거롭습니다. 이 과정을 편하게 자동화해주는 사이트가 있어 소개합니다.

아래 사이트로 접속해 줍니다.

GitHub As a CDN

Connect 버튼을 눌러서 깃허브 리포지토리와 연결을 진행해 줍니다.

• 연결 페이지에서 Only select repositories를 선택하고 이미지가 업로드되길 원하는 repository를 선택해줍니다.
• Install을 눌러 설치해줍니다. (GitHub에 외장 플러그인을 설치하는 개념입니다.)

아래와 같이 닉네임과 repository가 보이면 연동이 완료된 것입니다!

개발자님 감사합니다 :)

이미지 업로드 방법 및 사용법

아래와 같은 부분을 클릭하면 이미지를 업로드 할 수 있는 창이 뜹니다.

이미지를 업로드하면 자동으로 이미지의 주소가 복사되어 갔다가 붙여넣기 하시면 됩니다.

상단의 Search Uploads를 누르면 그 동안 업로드한 이미지를 확인할 수 있습니다.

성능 차이 비교

같은 이미지를 세 가지 방식으로 서빙해 테스트해봤습니다:

jsDelivr만 써도 로딩 속도가 10배 이상 개선됩니다. 블로그 규모라면 유료 CDN을 쓸 필요 없이 jsDelivr로 충분합니다.

주의사항

• 파일 크기 제한: GitHub 저장소의 파일 크기 제한(100MB)과 저장소 크기 제한(1GB 권장) 내에서 사용
• 업데이트 반영: jsDelivr는 기본적으로 7일간 캐시. 즉시 갱신이 필요하면 버전/커밋 해시를 URL에 포함
• 저작권: 공개 저장소는 누구나 접근 가능. 민감한 이미지는 사설 저장소 + 유료 CDN 사용 권장
• 이미지 최적화는 별도: CDN은 전송 속도만 개선할 뿐, 원본 파일 크기를 줄이진 않음. 사전에 WebP 변환이나 압축 필수

정적 블로그의 이미지 관리 팁

• 이미지 크기: 블로그 게시용이라면 가로 1200px 이하로 리사이즈
• WebP 전환: PNG/JPG 대비 20~50% 용량 절감
• Lazy Loading: loading="lazy" 속성으로 스크롤 시점에 로드
• 파비콘 CDN: 파비콘도 CDN 배포로 초기 로딩 속도 개선

이 세팅만 해두면 GitHub Blog의 이미지 로딩 스트레스에서 해방됩니다. 간단한 변경만으로 UX가 크게 개선되니 꼭 적용해보시길 추천합니다.