블로거 - 사진 로딩 속도 향상 / Blogger - Speed up photo loading

블로거 사진 로딩 속도 향상

2021년 8월 초 부터 Blogger에 사진을 업로드하는 경우, 서버의 URL이 변경되었고 파일명도 암호화 되었습니다.

사용자들은 보안상의 이유로 변경되었을 것이라 추측하고 있습니다.

이로인해 글 작성시 사용자가 사진 파일명을 구분하지 못하게 되었고, 블로그의 로딩속도가 현저하게 떨어졌습니다.

저도 구글측에서 문제를 해결해 주기를 기다리고 있었으나, 속도 문제를 해결할 수 있게 되어 그 내용을 공유합니다.

변경된 사항

1. URL 변경 (신규 업로드시)
 - 1.bp.blogspot.com ▷ blogger.googleusercontent.com
2. 파일명 암호화 (신규 업로드시, 기존 URL에는 파일명 표시)
 - 글 작성시 사진 구분 불가능
3. 로딩 속도 저하
 - 200ms~400ms ▷ 600ms~1,500ms over
 - 시간대/서버 부하에 따라 다름, 평균적으로 이전 URL보다 3배 이상 느려짐

작업 순서

1. [블로거] 새 글 쓰기
2. [블로거] 이미지 삽입 > 컴퓨터에서 업로드 > 사진 업로드
3. [앨범 보관함] Google 앨범 보관함으로 이동
4. [앨범 보관함] 앨범 선택 > 이미지 선택 > 이미지 뷰어에서 마우스 팝업메뉴 호출 > 검사 클릭 > DevTools 창 현재 라인에서 바로 밑에있는 img태그 선택 > 팝업메뉴에서 Copy Link Address 클릭 또는 아래 "이미지 파일명 확인" 스크립트를 실행
 - blogger.googleusercontent.com ▷ lh3.googleusercontent.com
5. [블로거] 삽입된 이미지의 src를 클립보드에 복사된 URL로 변경

결과

 - 약 1.5초 이상 걸리던 것을 약 300ms~700ms까지 향상시킬 수 있었음
 - WEBP포맷을 업로드해도 JEPG포맷으로 응답했는데, URL 수정 후 WEBP포맷으로 응답하여 파일크기는 줄어들고 속도는 향상됨
 ※ 구글 포토, 구글 드라이브 등을 이용하는 방법을 테스트 하였으나, 구글 앨범 보관함을 사용하는 것이 가장 빠름
블로거 사진 로딩 속도 향상
 ※ 캡쳐된 3개 파일은 모두 같은 사진(WEBP)이고, 1번과 2번은 업로드 시점이 달라서 서버주소가 다르고 3번은 2번의 수정된 링크 주소입니다. 1번과 2번의 파일크기가 다른것은 서버의 변환 라이브러리 차이로 예상됩니다.

이미지 파일명 확인

 - Google 앨범 보관함 열기 > 앨범 선택 > 이미지 선택 > 이미지 뷰어에서 개발자 도구 열기(단축키 F12) > Console탭 으로 이동 > 아래 스크립트를 붙여넣고 실행(Enter) > 콘솔 로그를 복사하여 엑셀 문서에 붙여넣기
 ※ Google에서 Album 관련 Javascript가 업데이트될 때, 코드를 난독화하기 때문에 속성명이 변경되어 아래 스크립트가 정상동작하지 않으니, 객체 구조만 파악하여 직접 수정 후 사용(속성명의 길이는 변화 없고, 주로 첫 문자만 변경됨)
var FFN_DATA = [];
function fnGetTBaFileName(al) {
  if ((al.value != null) && (al.value.ub != null) && (al.value.ub.Ek != null) && (al.value.ub.Ek == "tXNTZb") && (al.value.value != null) &&
      (al.value.value.Ui != null) && (al.value.value.Ui.length == 5) && (al.value.value.Ui[4].length == 2) && (al.value.value.Ui[4][1].length > 0)) {
    for (var i = 0; i < al.value.value.Ui[4][1].length; i++) {
      var ael = al.value.value.Ui[4][1][i];
      if (ael.length == 20) FFN_DATA.push({url: ael[0][1]+"=s0-rw-no", name: ael[11]});
    }
  }
}
function fnGetTopTBa(al) {
  if ((al.Md != null) && (al.Md.key != null) && (al.Md.key != "")) {
    return fnGetTopTBa(al.Md);
  } else return al
}
if ((default_AlbumArchiveUi != null) &&
    (default_AlbumArchiveUi.ja != null) &&
    (default_AlbumArchiveUi.ja.na != null) &&
    (default_AlbumArchiveUi.ja.na.Ao != null) &&
    (default_AlbumArchiveUi.ja.na.Ao.gychg != null) &&
    (default_AlbumArchiveUi.ja.na.Ao.gychg.length > 0) &&
    (default_AlbumArchiveUi.ja.na.Ao.gychg[0].Jb != null) &&
    (default_AlbumArchiveUi.ja.na.Ao.gychg[0].Jb.Jb != null) &&
    (default_AlbumArchiveUi.ja.na.Ao.gychg[0].Jb.Jb.H != null)) {
  FFN_DATA = [];
  var alTop = fnGetTopTBa(default_AlbumArchiveUi.ja.na.Ao.gychg[0].Jb.Jb.H);
  fnGetTBaFileName(alTop);
  var sTmp = "";
  for (var i = 0; i < FFN_DATA.length; i++) {
    sTmp = sTmp + FFN_DATA[i].url + "\t" + FFN_DATA[i].name + "\r\n";
  }
  console.log(sTmp);
};



Creative Commons Licenses
이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.

댓글

댓글 쓰기