게시 됨 업데이트 됨blog6분안에 읽기 (약 826 단어)

깃허브 블로그 느린 웹 해결하기

  • 2020.01.04 처음 느린 웹 보고서를 확인하고 그냥 방치 했는데…
  • 나날이 늘어가는 느린 URL들…

  • jsdelivr 적용 후, 지금까지!

상황

  • 구글 서치 콘솔에서 블로그에 대한 보고서를 보는데, 느린 웹 문제가 있었다
  • 어떻게 블로그를 빠르게 할 수 있는지 고민해보았다

내 환경

  • hexo 프레임워크로 블로그를 운영하고 있다
  • 블로그 글이 점점 많아지고, 글에 많은 이미지를 포함하는 글도 있다

해결 : jsdelivr 적용

  • jsdelivr는 npm과 github에서 사용할 수 있는 무료 CDN이다
  • 오픈소스 프로젝트를 위한 CDN이라고 한다
  • jsdelivr는 아무런 설정 없이 누구나(npm, github 사용자) 사용할 수 있는 게 장점이다

jsdelivr 사용법

https://chinsun9.github.io/images/web-dark-theme20210531/preview.png (원본)
https://cdn.jsdelivr.net/gh/chinsun9/chinsun9.github.io@master/images/web-dark-theme20210531/preview.png (CDN 적용)

hexo에서 적용

  • 포스트를 작성할 때 cdn을 적용한 url을 적어줘도 상관은 없지만,
  • 이미 작성된 글들에 대해 수행해야 하는 불편함이 있다
  • hexo 모듈을 살펴보니 node_modules/hexo/lib/plugins/filter/after_post_render/index.js에서 추가적인 작업을 해줄 수 있다는 것을 알게 되었다
hexo/lib/plugins/filter/after_post_render/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
'use strict';

module.exports = (ctx) => {
  const { filter } = ctx.extend;

  function lazyProcess(htmlContent) {
    let rootUrl =
      'https://cdn.jsdelivr.net/gh/chinsun9/chinsun9.github.io@master';
    return htmlContent.replace(
      /<img(.*?)src="(.*?)"(.*?)>/gi,
      function (str, p1, p2) {
        if (/src="data:image(.*?)/gi.test(str)) {
          return str;
        }
        if (p2.indexOf('http') === 0) {
          return str;
        }
        return str.replace(p2, rootUrl + p2);
      }
    );
  }

  filter.register('after_post_render', require('./external_link'));
  filter.register('after_post_render', require('./excerpt'));
  filter.register('after_post_render', function (data) {
    data.content = lazyProcess.call(this, data.content);
    return data;
  });
};
  • node_modules 아래에 있는 파일을 수정한 것이라, 좋은 접근은 아닌 것 같다
  • 이런 경우에 어떻게 노드 모듈 외부에서 함수를 오버라이딩할 수 있는지…
  • 일단 나는 이렇게 해서 사용하고 있다

경과

  • 2021-03-12 이미지에 cdn 적용했다

  • 10일 후에 점점 느린 URL이 없어지고 있는 것을 확인할 수 있다

  • 지금은 느린 웹이 없다!

주의사항

  • 이미지를 수정해도 즉시 반영되지 않는다
  • 즉시 반영을 원한다면 이름을 바꿔주자

참고

 게시 됨 업데이트 됨web3분안에 읽기 (약 506 단어)

CDN

  • 속도!
  • 웹프로그래밍 시간에서 bootstrap, jquery, fontawesome 등 외부라이브러리를 CDN을 통해 사용해았다
  • 데이터통신, 네트워크 관련 수업에서 CDN이 뭔지 배웠었다

CDN

  • 콘텐츠 전송 네트워크, Content Delivery Network
  • 나와 물리적으로 가까운 캐시 서버로부터 리소스를 가져온다
  • 원래대로라면 원본 리소스를 가지고 있는 서버로부터 제공받는다
  • 근데 원본 서버가 물리적으로 거리가 멀면 가져오는데 시간이 오래 걸린다
  • 원본 서버의 부하도 줄여주고 속도도 빨라지도 좋다
  • 보통 정적인 파일들(이미지, js, css)등을 CDN을 사용하여 배포한다
  • A, B가 같은 동네에 살고 있다
  • A가 asdf라는 파일을 다운로드하는데, 가장 가까운 캐시 서버에 asdf파일이 있는지 확인한다
  • 없으면 하나 위로 가서 확인하고, 반복하다가 없으면 원본 서버까지 가서 받아온다
  • 최초에 시간이 오래 걸렸지만, 이후 A가 asdf파일을 재요청했을 때 엄청 빨라졌음을 느꼈다
  • B도 asdf파일을 엄청 빨리 다운로드할 수 있었다

CDN 사용예

  • jquery, font awesome 등 라이브러리들을 보면 CDN 형태로 제공을 하고 있어서
  • head에 한 줄 넣기만 하면 해당 라이브러리의 기능을 쉽게 사용할 수 있다
  • CDN 말고 직접 배포 파일(dist, build)을 받아서 사용할 수 있지만,
  • 실제 서비스를 할 때, 내 서버에서 해당 리소스를 제공해야 하므로 서버에 부하를 줄 수 있고, 느리다
  • 라이브러리를 가져올 때, CDN을 사용했다면 이런 걱정을 할 필요가 없다

참고

카테고리

아카이브

광고

×